/* Konex Studio · CSS do sistema
 *
 * As duas primeiras partes são CÓPIA do design system aprovado pelo Luciano em 04/11/2026
 * (docs/design-system/tokens.css e componentes.css), só com os caminhos trocados para o wwwroot.
 * Mudou a cor, a fonte ou o componente? Mude primeiro lá, com a linha do protótipo, e copie para cá.
 * A terceira parte ("Studio") é o que o sistema precisa a mais, sempre sobre os tokens.
 */

/* ======================================================================= tokens.css */
/* Konex Studio · tokens do design system
 *
 * EXTRAÍDO de docs/prototipo/navegavel/estilo.css. Cada valor diz a linha de onde veio
 * ("estilo.css:11"). O que o protótipo não tem está marcado "NÃO EXISTE NO PROTÓTIPO" e foi
 * levado ao Luciano (docs/design-system/DESIGN.md, seção "Não existe no protótipo").
 *
 * Tema: data-tema="sistema|claro|escuro" (ADR-0016 do vps_sso). O servidor pinta o atributo no
 * <html>; "sistema" segue o aparelho. Os seletores não exigem :root, então uma caixa com
 * data-tema também troca de tema (a página do design system usa isso para mostrar os dois lado a lado).
 *
 * ☠️ Cores: só as da marca (âmbar #FFBB10, azul Konex #0C181F, #8993A4, #F0F0F0) e as derivadas
 *    que o protótipo já usa. Sem grade, sem quadriculado, sem cor inventada.
 */

/* ---------- fontes (estilo.css:4-5) ---------- */
/* Os arquivos são os do protótipo. Caminho relativo a docs/design-system/. */
@font-face { font-family: 'Hanken Grotesk'; font-weight: 100 900; font-display: swap; src: url(../fonts/hanken-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-display: swap; src: url(../fonts/plus-jakarta-latin.woff2) format('woff2'); }
/* A fonte da marca (marca/LEIA-ME.md, p. 29), SÓ no logo: decisão do Luciano na Q65, "por ora".
   NÃO EXISTE NO PROTÓTIPO. No disco só há o peso 600 (OFL). */
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 600; font-display: swap; src: url(../fonts/SchibstedGrotesk-600.ttf) format('truetype'); }

/* O ângulo que gira as bordas cônicas (estilo.css:7). */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* =====================================================================
 * TEMA ESCURO: é o protótipo, valor por valor. Vale também sem data-tema.
 * ===================================================================== */
:root, [data-tema="escuro"] {
  color-scheme: dark;                                   /* estilo.css:10 */

  /* --- cores da marca --- */
  --ambar: #FFBB10;                                     /* estilo.css:12 --y   · marca Cor 01 */
  --navy: #0C181F;                                      /* estilo.css:11       · marca Cor 02 */
  --cinza: #8993A4;                                     /* estilo.css:13       · marca Cor 03 */
  --claro: #F0F0F0;                                     /* estilo.css:13       · marca Cor 03 (sic) */

  /* --- derivadas que o protótipo já usa --- */
  --navy-2: #12222B;                                    /* estilo.css:11 */
  --ambar-claro: #FFE7A6;                               /* estilo.css:12 --y2 */
  --ambar-medio: #FFD45C;                               /* estilo.css:12 --y3 (a linha que varre) */
  --ambar-escuro: #D18C00;                              /* estilo.css:12 --y-esc (fundo do orbe) */
  --ambar-luz: #FFF0C2;                                 /* estilo.css:108 (reflexo do orbe) */
  --ambar-luz-2: #FFF3CC;                               /* estilo.css:102 (pico da borda que gira) */
  --ambar-luz-3: #FFF6D8;                               /* estilo.css:87 (pico do brilho do título) */
  --ok: #4ED9A4;                                        /* estilo.css:13 (chip "achado", "conferido") */
  --rec: #FF7D5C;                                       /* estilo.css:97 (só o ponto "gravando" do Reel) */

  /* --- papéis --- */
  --fundo: #07090B;                                     /* estilo.css:11 --bg */
  --fundo-2: #040608;                                   /* estilo.css:11 --bg2 */
  --texto: #F0F0F0;                                     /* estilo.css:24 (color: var(--claro)) */
  --texto-2: #A9B1BE;                                   /* estilo.css:13 --t2 (subtítulos) */
  --texto-3: #C9CED6;                                   /* estilo.css:13 --t3 (frase da entrada) */
  /* DESVIO MEDIDO: o protótipo usa #8993A4 nos rótulos (estilo.css:123, 257, 426, 483, 489). Sobre o
     vidro e a foto ele mediu 3,2 a 4,4:1 (capturas/telas, contraste.json). Passa a ser o #A9B1BE,
     que já é do protótipo (--t2, estilo.css:13). O #8993A4 fica para o que não é texto. */
  --rotulo: #A9B1BE;
  --previa-leg: #A9B1BE;                                /* a legenda "prévia ao vivo" (estilo.css:254, --t2) */
  --sombra-previa: 0 20px 40px rgba(0,0,0,.6);          /* estilo.css:232 */
  --destaque: #FFBB10;                                  /* estilo.css:77, 73 (olho, "Studio") — âmbar como TEXTO */
  --sobre-ambar: #0C181F;                               /* estilo.css:108, 185 (navy por cima do âmbar) */
  --ok-texto: #4ED9A4;                                  /* estilo.css:90 */
  --foco: #FFBB10;                                      /* estilo.css:31 */
  --brilho-a: #FFBB10;                                  /* estilo.css:87 (palavra em destaque do título) */
  --brilho-b: #FFF6D8;                                  /* estilo.css:87 (o reflexo que passa) */
  --sublinhado: transparent;                            /* no escuro não há marca-texto */

  /* --- superfícies --- */
  --vidro: rgba(18,34,43,.55);                          /* estilo.css:65 */
  --vidro-borda: linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 50%, rgba(255,187,16,.3)); /* estilo.css:65 */
  --vidro-forte: rgba(12,24,31,.82);                    /* estilo.css:423 (painel que abre por cima) */
  --vidro-selo: rgba(18,34,43,.6);                      /* estilo.css:92 */
  --pilula-fundo: rgba(12,24,31,.9);                    /* estilo.css:103 */
  --op-fundo: radial-gradient(120% 90% at 100% 0%, rgba(255,187,16,.18), transparent 60%), linear-gradient(160deg, rgba(25,46,57,.75), rgba(12,24,31,.8)); /* estilo.css:163 */
  --botao-fundo: rgba(255,255,255,.05);                 /* estilo.css:491 */
  --botao-fundo-hover: rgba(255,187,16,.1);             /* estilo.css:493 */
  --linha: rgba(255,255,255,.12);                       /* estilo.css:491 */
  --linha-fraca: rgba(255,255,255,.06);                 /* estilo.css:557 */
  --caixa-fraca: rgba(255,255,255,.02);                 /* estilo.css:557 */
  --trilho: rgba(137,147,164,.25);                      /* estilo.css:124 (passo apagado) */
  --tint-ambar: rgba(255,187,16,.1);                    /* estilo.css:167 */
  --borda-ambar: rgba(255,187,16,.35);                  /* estilo.css:167 */
  --tint-ok: rgba(78,217,164,.1);                       /* estilo.css:90 */
  --borda-ok: rgba(78,217,164,.3);                      /* estilo.css:90 */

  /* --- ambiente: foto desfocada + véu + luz amarela (estilo.css:47-53). SEM GRADE. --- */
  --amb-filtro: blur(54px) saturate(1.3) brightness(.5); /* estilo.css:48 */
  --amb-opacidade: .9;                                  /* estilo.css:49 */
  --amb-veu: linear-gradient(180deg, rgba(7,9,11,.35) 0%, rgba(7,9,11,.55) 38%, rgba(7,13,18,.9) 66%, #07090B 100%); /* estilo.css:50 */
  --amb-luz: radial-gradient(circle, rgba(255,187,16,.16), transparent 65%); /* estilo.css:53 */
  /* Por cima do véu do protótipo, só no topo: os passos ficam sobre a foto e a luz amarela (UX/UI, rodada 2). */
  --amb-veu-topo: linear-gradient(180deg, rgba(7,9,11,.6) 0, rgba(7,9,11,.6) 130px, rgba(7,9,11,0) 230px);
  --palco: radial-gradient(1200px 700px at 50% 30%, #0C181F 0%, #040608 70%); /* estilo.css:35 */
  --rodape-veu: linear-gradient(180deg, rgba(7,9,11,0), rgba(7,9,11,.92) 45%, #07090B); /* estilo.css:117 */

  /* --- sombras e brilhos --- */
  --sombra: 0 16px 40px rgba(0,0,0,.5);                 /* estilo.css:103 */
  --sombra-painel: 0 24px 60px rgba(0,0,0,.55);         /* estilo.css:423 */
  --sombra-peca: 0 30px 50px rgba(0,0,0,.65);           /* estilo.css:138 */
  --sombra-miniatura: 0 10px 22px rgba(0,0,0,.55);      /* estilo.css:477 */
  --brilho-ambar: 0 0 22px rgba(255,187,16,.75);        /* estilo.css:108 (orbe) */
  --brilho-pilula: 0 0 44px rgba(255,187,16,.22);       /* estilo.css:103 */
  --brilho-ponto: 0 0 12px #FFBB10;                     /* estilo.css:78 */
  --brilho-texto: 0 0 22px rgba(255,187,16,.45);        /* estilo.css:195 */
  --reflexo: inset 0 1px 0 rgba(255,255,255,.1);        /* estilo.css:103 */

  /* --- tipografia (estilo.css:14-15) --- */
  --fd: 'Plus Jakarta Sans', 'Hanken Grotesk', system-ui, sans-serif; /* títulos */
  --fb: 'Hanken Grotesk', system-ui, sans-serif;        /* texto */
  --fm: 'Schibsted Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; /* só o logo (Q65) */

  /* --- movimento (estilo.css:16-18) --- */
  --mola: cubic-bezier(.34, 1.45, .5, 1);
  --mola2: cubic-bezier(.34, 1.62, .5, 1);
  --suave: cubic-bezier(.2, .8, .2, 1);

  /* --- raios --- */
  --r-chip: 5px;                                        /* estilo.css:90, 487 */
  --r-selo: 7px;                                        /* estilo.css:92 */
  --r-miniatura: 8px;                                   /* estilo.css:204 */
  --r-botao: 9px;                                       /* estilo.css:491 */
  --r-campo: 12px;                                      /* estilo.css:66, 255 (btn-ic, campo) */
  --r-busca: 14px;                                      /* estilo.css:182, 551 */
  --r-cartao: 16px;                                     /* estilo.css:161, 472 */
  --r-folha: 26px;                                      /* estilo.css:514 */
  --r-pilula: 31px;                                     /* estilo.css:101 */

  /* --- espaço --- */
  --gut: 18px;                                          /* estilo.css:20 (celular) */
  --largura: 1240px;                                    /* estilo.css:573 (notebook) */

  /* --- toque --- */
  /* NÃO EXISTE NO PROTÓTIPO: o .btn-ic tem 40 px (estilo.css:66). A régua do projeto pede 52 px.
     Proposta: o desenho continua com 40 px e a ÁREA de toque cresce para 52 px (DESIGN.md). */
  --alvo: 52px;
}

/* =====================================================================
 * TEMA CLARO — NÃO EXISTE NO PROTÓTIPO. Proposta F0-10, derivada do escuro.
 * Regra da derivação: troca-se o fundo pela Cor 03 da marca (#F0F0F0) e o texto pelo azul
 * Konex (#0C181F) em opacidades. O âmbar e o verde viram PREENCHIMENTO com navy por cima e
 * nunca são texto: #FFBB10 sobre claro dá 1,6:1 (marca/LEIA-ME.md). A ação principal continua
 * a cápsula navy do escuro. Substitui o claro do Dev (#F4F2ED e #8A5A00), que saía da marca.
 * ===================================================================== */
[data-tema="claro"] {
  color-scheme: light;
  --fundo: #F0F0F0;                                     /* marca Cor 03 · estilo.css:13 --claro */
  --fundo-2: #FFFFFF;                                   /* branco do protótipo: estilo.css:221, 663 */
  --texto: #0C181F;                                     /* marca Cor 02 · estilo.css:11 */
  --texto-2: rgba(12,24,31,.74);                        /* navy a 74% */
  --texto-3: rgba(12,24,31,.84);                        /* navy a 84% */
  --rotulo: rgba(12,24,31,.66);                         /* navy a 66% (o #8993A4 dá 2,6:1 no claro) */
  --previa-leg: #0C181F;                                /* contraste cheio: a 74% sobre o ambiente dava 3,1 (UX/UI, B2 da faixa 1) */
  --sombra-previa: 0 14px 28px rgba(12,24,31,.22);      /* a preta do escuro escurecia o fundo da legenda logo abaixo: navy cheio dava 4,3 */
  --destaque: #0C181F;                                  /* âmbar não é texto no claro: vira navy */
  --sobre-ambar: #0C181F;
  --ok-texto: #0C181F;                                  /* o verde vira preenchimento, o texto é navy */
  --foco: #0C181F;                                      /* contorno âmbar no claro dá 1,6:1 */
  --brilho-a: #0C181F;                                  /* a palavra em destaque fica navy... */
  --brilho-b: #0C181F;
  --sublinhado: #FFBB10;                                /* ...sobre uma faixa âmbar (marca-texto) */

  --vidro: rgba(255,255,255,.62);
  --vidro-borda: linear-gradient(140deg, rgba(255,255,255,.95), rgba(12,24,31,.1) 50%, rgba(255,187,16,.6));
  --vidro-forte: rgba(255,255,255,.9);
  --vidro-selo: rgba(255,255,255,.7);
  --pilula-fundo: rgba(12,24,31,.92);                   /* a cápsula fica navy nos dois temas */
  --op-fundo: radial-gradient(120% 90% at 100% 0%, rgba(255,187,16,.26), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  --botao-fundo: rgba(12,24,31,.04);
  --botao-fundo-hover: rgba(255,187,16,.16);
  --linha: rgba(12,24,31,.16);
  --linha-fraca: rgba(12,24,31,.08);
  --caixa-fraca: rgba(255,255,255,.4);
  --trilho: rgba(12,24,31,.14);
  --tint-ambar: rgba(255,187,16,.2);
  --borda-ambar: rgba(209,140,0,.55);
  --tint-ok: rgba(78,217,164,.24);
  --borda-ok: rgba(78,217,164,.95);

  --amb-filtro: blur(54px) saturate(1.1) brightness(1.08);
  --amb-opacidade: .75;
  --amb-veu: linear-gradient(180deg, rgba(240,240,240,.5) 0%, rgba(240,240,240,.7) 38%, rgba(240,240,240,.92) 66%, #F0F0F0 100%);
  --amb-luz: radial-gradient(circle, rgba(255,187,16,.3), transparent 65%);
  --amb-veu-topo: linear-gradient(180deg, rgba(240,240,240,.3) 0, rgba(240,240,240,.3) 130px, rgba(240,240,240,0) 230px);
  --palco: radial-gradient(1200px 700px at 50% 30%, #FFFFFF 0%, #F0F0F0 70%);
  --rodape-veu: linear-gradient(180deg, rgba(240,240,240,0), rgba(240,240,240,.92) 45%, #F0F0F0);

  --sombra: 0 16px 40px rgba(12,24,31,.16);
  --sombra-painel: 0 24px 60px rgba(12,24,31,.18);
  --sombra-peca: 0 30px 50px rgba(12,24,31,.35);
  --sombra-miniatura: 0 10px 22px rgba(12,24,31,.25);
  --brilho-texto: none;
  --reflexo: inset 0 1px 0 rgba(255,255,255,.1);
}

/* "sistema" = sem escolha: segue o aparelho (ADR-0016 §4). Os valores são os do claro, repetidos. */
@media (prefers-color-scheme: light) {
  [data-tema="sistema"] {
    color-scheme: light;
    --fundo: #F0F0F0; --fundo-2: #FFFFFF; --texto: #0C181F;
    --texto-2: rgba(12,24,31,.74); --texto-3: rgba(12,24,31,.84); --rotulo: rgba(12,24,31,.66);
    --previa-leg: #0C181F;
    --sombra-previa: 0 14px 28px rgba(12,24,31,.22);
    --destaque: #0C181F; --sobre-ambar: #0C181F; --ok-texto: #0C181F; --foco: #0C181F;
    --brilho-a: #0C181F; --brilho-b: #0C181F; --sublinhado: #FFBB10;
    --vidro: rgba(255,255,255,.62);
    --vidro-borda: linear-gradient(140deg, rgba(255,255,255,.95), rgba(12,24,31,.1) 50%, rgba(255,187,16,.6));
    --vidro-forte: rgba(255,255,255,.9); --vidro-selo: rgba(255,255,255,.7); --pilula-fundo: rgba(12,24,31,.92);
    --op-fundo: radial-gradient(120% 90% at 100% 0%, rgba(255,187,16,.26), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
    --botao-fundo: rgba(12,24,31,.04); --botao-fundo-hover: rgba(255,187,16,.16);
    --linha: rgba(12,24,31,.16); --linha-fraca: rgba(12,24,31,.08); --caixa-fraca: rgba(255,255,255,.4);
    --trilho: rgba(12,24,31,.14); --tint-ambar: rgba(255,187,16,.2); --borda-ambar: rgba(209,140,0,.55);
    --tint-ok: rgba(78,217,164,.24); --borda-ok: rgba(78,217,164,.95);
    --amb-filtro: blur(54px) saturate(1.1) brightness(1.08); --amb-opacidade: .75;
    --amb-veu: linear-gradient(180deg, rgba(240,240,240,.5) 0%, rgba(240,240,240,.7) 38%, rgba(240,240,240,.92) 66%, #F0F0F0 100%);
    --amb-luz: radial-gradient(circle, rgba(255,187,16,.3), transparent 65%);
    --amb-veu-topo: linear-gradient(180deg, rgba(240,240,240,.3) 0, rgba(240,240,240,.3) 130px, rgba(240,240,240,0) 230px);
    --palco: radial-gradient(1200px 700px at 50% 30%, #FFFFFF 0%, #F0F0F0 70%);
    --rodape-veu: linear-gradient(180deg, rgba(240,240,240,0), rgba(240,240,240,.92) 45%, #F0F0F0);
    --sombra: 0 16px 40px rgba(12,24,31,.16); --sombra-painel: 0 24px 60px rgba(12,24,31,.18);
    --sombra-peca: 0 30px 50px rgba(12,24,31,.35); --sombra-miniatura: 0 10px 22px rgba(12,24,31,.25);
    --brilho-texto: none;
  }
}

/* Quem tem data-tema repinta texto e fundo com os tokens do próprio tema. */
[data-tema] { color: var(--texto); }

/* Notebook: o protótipo troca em 1080 px (estilo.css:569-572). */
@media (min-width: 1080px) {
  :root { --gut: 40px; }                                /* estilo.css:572 */
}

/* ======================================================================= componentes.css */
/* Konex Studio · componentes do design system
 *
 * Cada regra aponta a linha de docs/prototipo/navegavel/estilo.css de onde veio. As cores saem
 * SEMPRE de tokens.css, para valer nos dois temas. O que muda em relação ao protótipo está
 * marcado: "NÃO EXISTE NO PROTÓTIPO" (subiu ao Luciano) ou "trocado: ..." (cor fixa → token).
 * Celular primeiro; o notebook entra em min-width: 1080px, como o .is-desk do protótipo.
 */

/* ---------- base (estilo.css:23-32) ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--fundo); color: var(--texto); font-family: var(--fb); -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100dvh; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; }
input, textarea { font: inherit; color: inherit; }
img, video { display: block; }
.ic { display: inline-flex; font-style: normal; }
.ic svg { width: 1em; height: 1em; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- ambiente (estilo.css:47-55) ----------
 * A foto do imóvel desfocada, o véu e a luz amarela. ☠️ A .amb-grade (estilo.css:51) NÃO entra:
 * o quadriculado sai de todas as telas (Q60). */
.ambiente { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--fundo); }
.amb-foto { position: absolute; inset: -80px; width: calc(100% + 160px); height: calc(100% + 160px); object-fit: cover; filter: var(--amb-filtro); opacity: 0; transition: opacity 1.4s ease; }
.amb-foto.on { opacity: var(--amb-opacidade); }
.amb-veu { position: absolute; inset: 0; background: var(--amb-veu-topo), var(--amb-veu); }
.amb-luz { position: absolute; left: -160px; top: -160px; width: 420px; height: 420px; background: var(--amb-luz); }
.amb-poeira span { position: absolute; bottom: -10px; border-radius: 50%; background: var(--ambar-claro); box-shadow: 0 0 6px var(--ambar); opacity: 0; animation: sobe linear infinite; }
@keyframes sobe { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .45; } 100% { transform: translate(var(--dx, 10px), -105vh); opacity: 0; } }

/* ---------- vidro (estilo.css:65) ---------- */
.vidro { border: 1px solid transparent; background: linear-gradient(var(--vf, var(--vidro)), var(--vf, var(--vidro))) padding-box, var(--vidro-borda) border-box; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }

/* ---------- topo, marca, botão de ícone e avatar (estilo.css:66-75) ---------- */
.topo { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gut) 0; position: relative; z-index: 3; }
.topo-vazio { width: 40px; height: 40px; }
.btn-ic { position: relative; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; transition: transform .2s; }
/* NÃO EXISTE NO PROTÓTIPO: área de toque de 52 px sem mudar o desenho de 40 px. */
.btn-ic::after { content: ''; position: absolute; inset: calc((40px - var(--alvo)) / 2); }
a.btn-ic { color: inherit; }
.btn-ic:active { transform: scale(.92); }
.avatar b { font: 700 15px/1 var(--fd); color: var(--destaque); }
.marca { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.k-sim { width: 21px; height: 18px; display: inline-block; background: var(--ambar); -webkit-mask: url(../img/logo-simbolo.svg) center/contain no-repeat; mask: url(../img/logo-simbolo.svg) center/contain no-repeat; filter: drop-shadow(0 0 8px rgba(255,187,16,.5)); }
.marca-txt { font: 650 15px/1 var(--fd); letter-spacing: -.01em; }
.marca-txt b { color: var(--destaque); font-weight: 700; }
/* Q65: o logo usa a fonte da marca. Só há o peso 600, então nada de negrito sintético. */
.marca-txt, .marca-txt b { font-family: var(--fm); font-weight: 600; font-synthesis: none; }
.marca.grande .k-sim { width: 34px; height: 29px; }
.marca.grande .marca-txt { font-size: 22px; }

/* ---------- olho, ponto e cabeçalho (estilo.css:77-89) ---------- */
.olho { display: inline-flex; align-items: center; gap: 8px; font: 650 11px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 12px var(--ambar); flex: none; }
.ponto.pulsa { animation: pulsa 1.8s ease-out infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 12px var(--ambar), 0 0 0 0 rgba(255,187,16,.5); } 100% { box-shadow: 0 0 12px var(--ambar), 0 0 0 9px rgba(255,187,16,0); } }
.cab { padding: 14px 22px 0; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; position: relative; z-index: 2; }
.titulo-tela { margin: 0; font: 750 28px/1.04 var(--fd); letter-spacing: -.04em; }
.titulo-tela.grande { font-size: 33px; }
/* DESVIO MEDIDO: o protótipo pinta o .cab-sub com --t2 (estilo.css:84). Ele fica direto sobre a foto
   e a luz amarela, e mediu 4,05:1 em Minhas campanhas (375, escuro). Sobe para --texto-3 (--t3). */
.cab-sub { margin: 0; font: 500 13px/1.2 var(--fb); color: var(--texto-3); }
.cab-sub b { color: var(--texto); }
/* O brilho que passa na palavra em destaque (estilo.css:86-89). No claro, a palavra fica navy
   sobre uma faixa âmbar (NÃO EXISTE NO PROTÓTIPO: é a derivação do tema claro). */
.brilho-txt { position: relative; background-image: linear-gradient(100deg, var(--brilho-a) 0%, var(--brilho-a) 38%, var(--brilho-b) 50%, var(--brilho-a) 62%, var(--brilho-a) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho 5.5s linear infinite; }
.brilho-txt::after { content: ''; position: absolute; z-index: -1; left: -.04em; right: -.06em; bottom: .02em; height: .3em; border-radius: 2px; background: var(--sublinhado); }
@keyframes brilho { 0% { background-position: 100% 0; } 100% { background-position: -200% 0; } }

/* ---------- chips, selo e etiqueta (estilo.css:90-98, 487-489) ---------- */
.chip-ok { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: var(--r-chip); background: var(--tint-ok); border: 1px solid var(--borda-ok); font: 650 10.5px/1 var(--fb); color: var(--ok-texto); white-space: nowrap; }
.chip-ok .ic { font-size: 11px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font: 650 10px/1 var(--fb); padding: 5px 7px; border-radius: var(--r-chip); border: 1px solid var(--linha); color: var(--texto-3); white-space: nowrap; }
.chip.novo { color: var(--sobre-ambar); background: var(--ambar); border-color: var(--ambar); box-shadow: 0 0 10px rgba(255,187,16,.4); }
.chip.rasc { border-style: dashed; color: var(--rotulo); }
.selo-real { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--r-selo); border: 1px solid transparent; background: linear-gradient(var(--vidro-selo), var(--vidro-selo)) padding-box, linear-gradient(100deg, rgba(255,187,16,.55), rgba(255,255,255,.06) 45%, rgba(255,255,255,.18)) border-box; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 500 11.5px/1 var(--fb); color: var(--texto-2); white-space: nowrap; }
.selo-real .ic { color: var(--destaque); font-size: 15px; }
.selo-real b { color: var(--texto); font-weight: 650; }
.pt { width: 3px; height: 3px; border-radius: 50%; background: var(--cinza); flex: none; }
/* A etiqueta vive SOBRE a foto ou a peça: fica escura nos dois temas. */
.etq { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: var(--r-chip); background: rgba(7,9,11,.62); border: 1px solid rgba(255,255,255,.14); font: 700 8.5px/1 var(--fb); letter-spacing: .06em; white-space: nowrap; z-index: 4; color: #F0F0F0; font-variant-numeric: tabular-nums; }
.rec { width: 5px; height: 5px; border-radius: 50%; background: var(--rec); animation: pisca 1.2s steps(2) infinite; }
@keyframes pisca { 50% { opacity: .25; } }

/* ---------- a pílula com orbe: a ação principal (estilo.css:101-119) ----------
 * A cápsula é navy nos DOIS temas; por isso o texto dentro dela usa os tokens do escuro. */
.pilula-orbe { --texto: #F0F0F0; --texto-2: #A9B1BE; color: var(--texto); position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; height: 62px; padding: 0 26px 0 6px; border-radius: var(--r-pilula); text-align: left; text-decoration: none; transition: transform .25s var(--mola), opacity .3s; }
.pilula-orbe::before { content: ''; position: absolute; inset: -1.5px; border-radius: 33px; z-index: -2; background: conic-gradient(from var(--ang), rgba(255,187,16,.22), var(--ambar) 40deg, var(--ambar-luz-2) 60deg, rgba(255,187,16,.22) 120deg, rgba(255,187,16,.22) 200deg, var(--ambar) 240deg, rgba(255,187,16,.22) 300deg); animation: gira 3.2s linear infinite; }
.pilula-orbe::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-pilula); z-index: -1; background: var(--pilula-fundo); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--reflexo), var(--brilho-pilula), var(--sombra); }
@keyframes gira { to { --ang: 360deg; } }
.pilula-orbe:active { transform: scale(.96); }
.pilula-orbe:disabled, .pilula-orbe[aria-disabled="true"] { opacity: .35; filter: saturate(.3); }      /* estilo.css:106 */
.pilula-orbe:disabled::before, .pilula-orbe[aria-disabled="true"]::before { animation: none; }        /* estilo.css:107 */
.orbe { width: 50px; height: 50px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--navy); background: radial-gradient(circle at 35% 28%, var(--ambar-luz), var(--ambar) 52%, var(--ambar-escuro)); box-shadow: var(--brilho-ambar), inset 0 -4px 10px rgba(140,80,0,.35); animation: orbe 1.8s ease-out infinite; }
.orbe .ic svg { stroke-width: 2.3; }
@keyframes orbe { 0% { box-shadow: 0 0 22px rgba(255,187,16,.75), 0 0 0 0 rgba(255,187,16,.5), inset 0 -4px 10px rgba(140,80,0,.35); } 100% { box-shadow: 0 0 22px rgba(255,187,16,.75), 0 0 0 13px rgba(255,187,16,0), inset 0 -4px 10px rgba(140,80,0,.35); } }
.pilula-orbe:disabled .orbe, .pilula-orbe[aria-disabled="true"] .orbe { animation: none; }
.po-txt { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.po-t { font: 700 17px/1 var(--fd); letter-spacing: -.02em; }
.po-s { font: 500 11.5px/1 var(--fb); color: var(--texto-2); }
/* Com o folder (M-17) a lista de peças passa da tela em 320: a pílula fica dentro da tela e o subtítulo quebra em duas linhas,
   que ainda cabem nos 62 px. */
.pilula-orbe { max-width: calc(100vw - 32px); }
.po-txt { min-width: 0; }
.po-s { white-space: normal; line-height: 1.2; text-wrap: balance; }
.pilula-orbe.compacta { height: 56px; border-radius: 28px; }
.pilula-orbe.compacta .orbe { width: 44px; height: 44px; font-size: 19px; }
.rodape-cta { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; padding: 22px var(--gut) 26px; background: var(--rodape-veu); margin-top: auto; }
.rodape-cta .campo-erro { flex-basis: 100%; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-campo); background: var(--fundo); text-align: center; } /* fundo próprio: a ficha rola por trás */
.rodape-cta[aria-busy="true"] .pilula-orbe { opacity: .7; pointer-events: none; }
.pilula-fixa { position: sticky; bottom: 0; z-index: 6; margin-top: 8px; display: flex; justify-content: center; padding: 40px 0 26px; background: var(--rodape-veu); pointer-events: none; }
.pilula-fixa > * { pointer-events: auto; }

/* ---------- passos (estilo.css:122-128) ---------- */
.passos { list-style: none; margin: 14px var(--gut) 0; padding: 0; display: flex; gap: 6px; }
/* Os passos inativos em --texto-2 (navy a 74% no claro; no escuro é o mesmo #A9B1BE do --rotulo): a 66%, o fundo das fotos derrubava para 4,4 (UX/UI, B2 da faixa 1). */
.passos li { flex: 1; display: flex; flex-direction: column; gap: 7px; font: 600 10.5px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.passos li::before { content: ''; height: 3px; border-radius: 2px; background: var(--trilho); }
.passos li.on { color: var(--texto); }
.passos li.on::before { background: linear-gradient(90deg, var(--ambar), var(--ambar-claro)); box-shadow: 0 0 10px rgba(255,187,16,.7); }
.passos li.ok { color: var(--texto-2); }
.passos li.ok::before { background: rgba(255,187,16,.55); }
/* NÃO EXISTE NO PROTÓTIPO (06/11): os passos viraram caminho entre as telas. O link toca em 52 px sem o passo crescer: as
   margens negativas devolvem o que o enchimento passa da faixa. Por cima, só 8 px além dela (18 = 10 da faixa + 8), para não
   tirar o toque do voltar; por baixo, o resto, sobre o olho da .cab, que não é botão. O z-index passa da .cab (2). O passo sem
   link é o Kit sem kit: fica como no protótipo, com a faixa apagada,
   e o texto segue no AA (é o mesmo --texto-2 dos passos inativos). */
.passos a { position: relative; display: block; min-height: var(--alvo); z-index: 3; margin: -18px 0 -24px; padding: 18px 0 24px; border-radius: 8px; color: inherit; text-decoration: none; transition: color .2s; }
.passos a:hover { color: var(--texto); }
.passos a:focus-visible { outline-offset: -2px; }

/* ================= ENTRADA (estilo.css:131-156) ================= */
.t-entrada { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.ent-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: kb 18s ease-in-out infinite; filter: saturate(1.05) brightness(.94); } /* M-01: fotos abertas e claras, a 94% da luz (melhorias.css:306) */
.kb2 { animation-delay: 6s; } .kb3 { animation-delay: 12s; }
@keyframes kb { 0% { opacity: 0; transform: scale(1.18) translate(2%, 1%); } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1.04) translate(-2%, -1%); } 100% { opacity: 0; } }
.ent-veu { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 60% at 50% 18%, rgba(7,9,11,0), rgba(7,9,11,.55) 75%), linear-gradient(180deg, rgba(7,9,11,.3) 0%, rgba(7,9,11,.08) 26%, rgba(7,9,11,.82) 56%, #07090B 82%); } /* M-01: o véu leve (melhorias.css:307) */
/* Proposta, caso o Luciano queira a entrada clara (a recomendação é a entrada sempre escura). */
[data-tema="claro"] .ent-veu { background: radial-gradient(120% 60% at 50% 18%, rgba(240,240,240,.15), rgba(240,240,240,.8) 70%), linear-gradient(180deg, rgba(240,240,240,.45) 0%, rgba(240,240,240,.15) 26%, rgba(240,240,240,.9) 56%, #F0F0F0 80%); }
[data-tema="claro"] .kb { filter: saturate(1.05) brightness(1); }
.ent-pecas { position: relative; z-index: 1; height: 47%; min-height: 330px; perspective: 900px; perspective-origin: 50% 40%; }
.flut { position: absolute; left: 50%; top: 52%; border-radius: 12px; overflow: hidden; background: var(--navy); box-shadow: var(--sombra-peca), inset 0 0 0 1px rgba(255,255,255,.12); transform-style: preserve-3d; }
.flut img, .flut video { width: 100%; height: 100%; object-fit: cover; }
.f-reel { width: 146px; height: 260px; margin: -130px 0 0 -73px; z-index: 3; animation: bob0 6s ease-in-out infinite; box-shadow: var(--sombra-peca), 0 0 46px rgba(255,187,16,.32), inset 0 0 0 1px rgba(255,255,255,.12); overflow: visible; }
.f-reel::before { content: ''; position: absolute; inset: -1.5px; border-radius: 13.5px; z-index: -1; background: conic-gradient(from var(--ang), rgba(255,187,16,.15), var(--ambar) 50deg, var(--ambar-luz) 70deg, rgba(255,187,16,.12) 140deg, rgba(255,187,16,.15) 360deg); animation: gira 3s linear infinite; }
.f-reel video, .f-reel img { border-radius: 12px; }
.f-feed { width: 150px; height: 188px; margin: -94px 0 0 -75px; z-index: 2; transform: translateX(-112px) translateY(-34px) translateZ(-90px) rotateY(30deg) rotateZ(-6deg); animation: bob1 7s ease-in-out infinite; filter: brightness(.96); }
.f-car { width: 150px; height: 188px; margin: -94px 0 0 -75px; z-index: 2; transform: translateX(112px) translateY(-34px) translateZ(-90px) rotateY(-30deg) rotateZ(6deg); animation: bob2 6.5s ease-in-out infinite; filter: brightness(.96); } /* M-01: feed e carrossel a 96% (melhorias.css:308) */
@keyframes bob0 { 50% { transform: translateY(-7px) rotateX(2deg); } }
@keyframes bob1 { 50% { transform: translateX(-114px) translateY(-42px) translateZ(-90px) rotateY(26deg) rotateZ(-5deg); } }
@keyframes bob2 { 50% { transform: translateX(114px) translateY(-28px) translateZ(-90px) rotateY(-26deg) rotateZ(5deg); } }
.chao { position: absolute; left: 50%; bottom: 0; width: 300px; height: 44px; margin-left: -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,187,16,.34), transparent); filter: blur(12px); }
.varre { position: absolute; left: 0; right: 0; top: -10%; height: 1px; background: var(--ambar-medio); box-shadow: 0 0 8px var(--ambar), 0 -20px 30px rgba(255,187,16,.18); animation: varre 5s ease-in-out infinite; z-index: 3; }
@keyframes varre { 0% { top: -5%; opacity: 0; } 8% { opacity: 1; } 28% { top: 105%; opacity: 0; } 100% { top: 105%; opacity: 0; } }
.ent-conteudo { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 6px 24px 30px; justify-content: flex-end; }
.ent-titulo { margin: 4px 0 0; font: 780 40px/1 var(--fd); letter-spacing: -.045em; }
.ent-frase { margin: 0; max-width: 330px; font: 450 15px/1.45 var(--fb); color: var(--texto-3); text-wrap: pretty; }
.ent-conteudo .pilula-orbe { margin-top: 6px; }
.ent-conteudo .selo-real { margin-top: 2px; }

/* ================= NOVO IMÓVEL (estilo.css:159-214, 557-567) ================= */
.tela { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; }
.novo-opcoes { padding: 18px var(--gut) 0; display: flex; flex-direction: column; gap: 10px; }
.op { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border-radius: var(--r-cartao); padding: 16px; transition: transform .25s var(--mola), box-shadow .3s; }
.op:not([aria-disabled="true"]):active { transform: scale(.97); }
.op-enviar { min-height: 190px; padding: 22px; justify-content: flex-end; overflow: hidden; background: var(--op-fundo); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.op-borda { position: absolute; inset: 0; border-radius: var(--r-cartao); padding: 1.5px; background: conic-gradient(from var(--ang), rgba(255,187,16,.1), var(--ambar) 30deg, var(--ambar-luz) 50deg, rgba(255,187,16,.1) 110deg, rgba(255,255,255,.14) 200deg, rgba(255,187,16,.1) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gira 4s linear infinite; pointer-events: none; }
.op-enviar::after { content: ''; position: absolute; inset: 10px; border-radius: 10px; border: 1.5px dashed rgba(255,231,166,.25); pointer-events: none; }
[data-tema="claro"] .op-enviar::after { border-color: rgba(12,24,31,.18); }
.op-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--destaque); background: var(--tint-ambar); border: 1px solid var(--borda-ambar); }
.op-ic.grande { width: 54px; height: 54px; border-radius: 16px; font-size: 26px; color: var(--navy); background: radial-gradient(circle at 35% 28%, var(--ambar-luz), var(--ambar) 52%, var(--ambar-escuro)); border: 0; box-shadow: 0 0 26px rgba(255,187,16,.55); margin-bottom: 6px; }
.op-t { font: 700 17px/1.1 var(--fd); letter-spacing: -.02em; }
.op-enviar .op-t { font-size: 22px; }
.op-s { font: 500 12.5px/1.3 var(--fb); color: var(--texto-2); }
.op-mini { position: absolute; right: 18px; top: 22px; width: 120px; height: 120px; }
.op-mini img { position: absolute; width: 62px; height: 47px; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.15); animation: flutua 5s ease-in-out infinite; }
.op-mini img:nth-child(1) { right: 6px; top: 0; transform: rotate(8deg); }
.op-mini img:nth-child(2) { right: 46px; top: 26px; transform: rotate(-7deg); animation-delay: -1.5s; }
.op-mini img:nth-child(3) { right: 0; top: 58px; transform: rotate(3deg); animation-delay: -3s; }
@keyframes flutua { 50% { translate: 0 -6px; } }
.op-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.op-p { min-height: 112px; justify-content: flex-end; }
.op-p .op-t { font-size: 15px; }
.op-p .op-s { font-size: 11.5px; }
/* Desvio do protótipo (UX, 10/11): abaixo de 1080 o texto "a ordem da visita sai sozinha" quebra em duas linhas de 390 a 413 px e,
   com flex-end, desalinha os títulos dos dois cartões lado a lado. Ancorados no alto, os títulos ficam na mesma linha de 320 a 1079. */
@media (max-width: 1079px) { .op-p { justify-content: flex-start; } }
/* NÃO EXISTE NO PROTÓTIPO: o cartão "chega depois" (F0-11). Derivado do desligado da pílula
   (estilo.css:106) e do .aj-mod:disabled (estilo.css:433): esmaece ícone, título e borda;
   o chip tracejado .chip.rasc (estilo.css:489) diz "em breve" com contraste cheio. */
.op[aria-disabled="true"] .op-ic, .op[aria-disabled="true"] .op-t, .op[aria-disabled="true"] .op-s, .op[aria-disabled="true"] .op-mini { opacity: .5; }
.op[aria-disabled="true"] .op-borda { animation: none; opacity: .45; }
.op[aria-disabled="true"] .op-ic.grande { filter: saturate(.4); box-shadow: none; }
.op .chip.rasc { position: absolute; top: 14px; right: 14px; }
.op-enviar .chip.rasc { top: 22px; left: 22px; right: auto; }
.recebe { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 14px; border-radius: var(--r-cartao); border: 1px solid var(--linha-fraca); background: var(--caixa-fraca); }
.rc-lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; }
.rc-it { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.rc-q { width: 100%; max-height: 92px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,187,16,.35), var(--sombra-miniatura); display: flex; align-items: center; justify-content: center; }
.rc-q img { width: 100%; height: 100%; object-fit: cover; }
.rc-it:first-child .rc-q { box-shadow: 0 0 0 1.5px var(--ambar), 0 0 18px rgba(255,187,16,.4); }
.rc-leg { background: linear-gradient(160deg, rgba(34,60,72,.9), rgba(12,24,31,.9)); color: var(--ambar); font-size: 22px; }
.rc-it b { font: 700 11.5px/1 var(--fd); }
.rc-it small { font: 500 10px/1 var(--fb); color: var(--texto-2); }

/* ================= MINHAS CAMPANHAS (estilo.css:471-493) ================= */
.lista-camp { padding: 16px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.camp { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 12px; border-radius: var(--r-cartao); text-align: left; transition: transform .25s var(--mola); }
.camp-pilha { position: relative; height: 128px; perspective: 500px; }
.camp-pilha img { position: absolute; top: 4px; width: 78px; aspect-ratio: 4/5; object-fit: cover; border-radius: 7px; box-shadow: var(--sombra-miniatura), 0 0 0 1px rgba(255,255,255,.12); }
.camp-pilha img:nth-child(1) { left: 0; transform: rotate(-7deg) translateY(8px); filter: brightness(.65); }
.camp-pilha img:nth-child(2) { left: 22px; transform: rotate(5deg) translateY(4px); filter: brightness(.8); }
.camp-pilha img:nth-child(3) { left: 11px; z-index: 2; }
.camp:first-child .camp-pilha img:nth-child(3) { box-shadow: var(--sombra-miniatura), 0 0 0 1.5px var(--ambar), 0 0 18px rgba(255,187,16,.4); }
.camp-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.camp-quando { font: 650 10.5px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--rotulo); }
.camp-tit { font: 720 15.5px/1.15 var(--fd); letter-spacing: -.02em; text-wrap: balance; }
.camp-pecas { font: 500 12px/1.3 var(--fb); color: var(--texto-2); }
.camp-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.camp-acoes { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.camp-acoes button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: var(--r-botao); font: 650 12px/1 var(--fb); background: var(--botao-fundo); border: 1px solid var(--linha); transition: background .2s, border-color .2s; }
/* NÃO EXISTE NO PROTÓTIPO: área de toque de 52 px na altura (o botão desenhado tem 32 px). */
.camp-acoes button::after { content: ''; position: absolute; inset: -10px -3px; }
.camp-acoes button .ic { color: var(--destaque); font-size: 14px; }
.camp-acoes button:hover { background: var(--botao-fundo-hover); border-color: var(--borda-ambar); }

/* ================= MINHA CONTA — NÃO EXISTE NO PROTÓTIPO ================= *
 * Montada só com peças do protótipo: o cartão de vidro (estilo.css:65, 472), o rótulo em
 * caixa-alta (.aj-rot, estilo.css:426), o seletor de paleta (.aj-pal, estilo.css:435-438) para o
 * tema e o link de lista (.lnk, estilo.css:644-646) para as ações. */
.conta { padding: 16px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.cartao { padding: 16px; border-radius: var(--r-cartao); display: flex; flex-direction: column; gap: 12px; }
.rot { font: 650 10px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }
.quem { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; }
.quem-avatar { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font: 750 20px/1 var(--fd); color: var(--navy); background: radial-gradient(circle at 35% 28%, var(--ambar-luz), var(--ambar) 52%, var(--ambar-escuro)); box-shadow: 0 0 26px rgba(255,187,16,.45); } /* = .op-ic.grande, estilo.css:168 */
.quem-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.quem-txt b { font: 720 17px/1.15 var(--fd); letter-spacing: -.02em; }
.quem-txt span { font: 500 12.5px/1.3 var(--fb); color: var(--texto-2); overflow-wrap: anywhere; }
.nota { margin: 0; font: 500 12px/1.4 var(--fb); color: var(--texto-2); }
.tema-ops { display: flex; gap: 8px; }
.tema-op { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: var(--alvo); padding: 10px 6px; border-radius: 11px; border: 1px solid var(--linha); font: 650 13px/1 var(--fb); cursor: pointer; transition: all .25s; }
.tema-op input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tema-op small { font: 500 10.5px/1.1 var(--fb); color: var(--texto-2); }
.tema-op .sw { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--linha); position: relative; overflow: hidden; }   /* estilo.css:436 */
.tema-op .sw::after { content: ''; position: absolute; right: 0; bottom: 0; width: 50%; height: 50%; background: var(--ambar); }       /* estilo.css:437 */
.sw-escuro { background: #07090B; } .sw-claro { background: #F0F0F0; } .sw-sistema { background: linear-gradient(135deg, #F0F0F0 50%, #07090B 50%); }
.tema-op:has(input:checked) { border-color: var(--ambar); background: var(--tint-ambar); box-shadow: 0 0 16px rgba(255,187,16,.25); }  /* estilo.css:438 */
.tema-op:has(input:disabled) { opacity: .45; }
.tema-op input:disabled { cursor: not-allowed; }
.tema-op:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
.lnk { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--alvo); padding: 0 10px; border-radius: 10px; font: 600 14px/1 var(--fb); color: var(--texto-3); text-align: left; text-decoration: none; width: 100%; }
.lnk .ic { color: var(--destaque); font-size: 16px; }
.lnk small { margin-left: auto; font: 500 11.5px/1 var(--fb); color: var(--texto-2); }
.lnk:hover { background: var(--botao-fundo); }
.lnks { display: flex; flex-direction: column; gap: 2px; padding: 6px; }

/* NÃO EXISTE NO PROTÓTIPO: o menu da conta (aberto pelo avatar). Mesma caixa do "Modelo e
   paleta" (.est-ajustes, estilo.css:423-424). */
.menu-conta { width: 280px; padding: 12px; border-radius: var(--r-cartao); --vf: var(--vidro-forte); box-shadow: var(--sombra-painel); display: flex; flex-direction: column; gap: 6px; transform-origin: top right; animation: abreAj .45s var(--mola); }
@keyframes abreAj { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
.menu-conta .quem { grid-template-columns: 42px 1fr; padding: 4px 4px 10px; border-bottom: 1px solid var(--linha-fraca); }
.menu-conta .quem-avatar { width: 42px; height: 42px; border-radius: 12px; font-size: 16px; }

/* ---------- toast (estilo.css:551-554) ---------- */
.toast { display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; border-radius: 10px; background: var(--vidro-forte); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,187,16,.5); box-shadow: 0 0 24px rgba(255,187,16,.25), var(--sombra); font: 650 13px/1.2 var(--fb); white-space: nowrap; }
.toast .ic { color: var(--destaque); font-size: 14px; }

/* ---------- campo e barra (estilo.css:255-259, 305-307) ---------- */
.campo { position: relative; display: flex; flex-direction: column; gap: 5px; border-radius: var(--r-campo); padding: 9px 11px; min-width: 0; transition: box-shadow .3s; }
/* O contorno do foco é o --foco: âmbar no escuro, navy no claro (DESIGN.md). Âmbar sobre o vidro branco dava 1,3 (UX/UI, B3 da faixa 1); o brilho âmbar fica de enfeite. */
.campo:focus-within { box-shadow: 0 0 0 1.5px var(--foco), 0 0 22px rgba(255,187,16,.25); }
.c-rot { font: 650 10px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--rotulo); }
.campo input { background: none; border: 0; outline: 0; padding: 0; width: 100%; min-width: 0; font: 650 14.5px/1.25 var(--fd); letter-spacing: -.01em; }
.campo input::placeholder { color: var(--rotulo); font-style: italic; font-weight: 500; }
.barra { position: relative; width: 100%; height: 6px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 3px; background: linear-gradient(90deg, var(--ambar-escuro), var(--ambar) 60%, var(--ambar-luz-2)); box-shadow: 0 0 14px var(--ambar), 0 0 4px var(--ambar); }
.barra i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); background-size: 200% 100%; animation: brilho 1.1s linear infinite; }

/* =====================================================================
 * NOTEBOOK (≥ 1080 px) · estilo.css:569-675 · não é a tela esticada
 * ===================================================================== */
@media (min-width: 1080px) {
  .topo { padding: 22px 40px 0; max-width: var(--largura); margin: 0 auto; width: 100%; }          /* :573 */
  .cab { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 14px 40px 0; }           /* :574 */
  .passos { max-width: var(--largura); width: 100%; margin: 16px auto 0; padding: 0 40px; }       /* :575 */
  .passos li { flex: 0 0 150px; }                                                                /* :576 */
  .titulo-tela { font-size: 38px; }                                                              /* :577 */
  .rodape-cta { background: none; justify-content: flex-end; max-width: var(--largura); width: 100%; margin: auto auto 0; padding: 22px 40px 32px; } /* :578 */
  /* O aviso do "Gerar kit" fica com a largura da pílula, logo acima dela (UX/UI, rodada 3): a coluna é a da pílula, e o
     aviso, que não conta para a largura dela, a ocupa inteira. */
  .rodape-cta:has(> .campo-erro) { display: grid; justify-content: end; }
  .rodape-cta > .campo-erro { width: 0; min-width: 100%; }

  .t-entrada { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }          /* :581 */
  .ent-veu { background: linear-gradient(90deg, rgba(7,9,11,.06) 0%, rgba(7,9,11,.2) 42%, rgba(7,9,11,.9) 63%, #07090B 100%), linear-gradient(180deg, rgba(7,9,11,.25), transparent 28%, transparent 76%, rgba(7,9,11,.45)); } /* M-01: o véu leve no notebook (melhorias.css:310) */
  [data-tema="claro"] .ent-veu { background: linear-gradient(90deg, rgba(240,240,240,.2) 0%, rgba(240,240,240,.45) 45%, rgba(240,240,240,.94) 64%, #F0F0F0 100%), linear-gradient(180deg, rgba(240,240,240,.35), transparent 30%, transparent 70%, rgba(240,240,240,.6)); }
  .ent-pecas { height: 100%; min-height: 0; transform: scale(1.45); }                             /* :583 */
  .ent-conteudo { align-items: flex-start; text-align: left; justify-content: center; padding: 0 70px 0 20px; gap: 20px; } /* :584 */
  .ent-titulo { font-size: 60px; }                                                               /* :585 */
  .ent-frase { font-size: 17px; max-width: 420px; }                                              /* :586 */

  .novo-opcoes { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 24px 40px 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; } /* :589 */
  .op-enviar { min-height: 290px; grid-row: span 2; }                                            /* :590 */
  .op-enviar .op-t { font-size: 30px; }                                                          /* :591 */
  .op-mini { width: 220px; height: 200px; right: 40px; top: 40px; transform: scale(1.7); transform-origin: top right; } /* :592 */
  .op-linha { grid-template-columns: 1fr; }                                                      /* :593 */
  .op-p { min-height: 138px; }                                                                   /* :594 */
  .novo-opcoes .busca, .novo-opcoes .achado, .novo-opcoes .busca-aviso { grid-column: 2; }        /* :595 */
  .recebe { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 30px; padding: 16px 22px; } /* :566 */
  .rc-lista { flex: 1; grid-template-columns: repeat(5, 70px); justify-content: start; gap: 22px; } /* :567 */

  .lista-camp { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 26px 40px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } /* :668 */
  .camp { grid-template-columns: 150px 1fr; padding: 16px; }                                     /* :669 */
  .camp-pilha { height: 170px; }                                                                 /* :670 */
  .camp-pilha img { width: 112px; }                                                              /* :671 */
  .camp-pilha img:nth-child(2) { left: 32px; }                                                   /* :672 */
  .camp-pilha img:nth-child(3) { left: 16px; }                                                   /* :673 */
  .camp-tit { font-size: 18px; }                                                                 /* :674 */
  .pilula-fixa { justify-content: flex-end; padding-right: 48px; background: none; }             /* :675 */

  /* Minha conta no notebook — NÃO EXISTE NO PROTÓTIPO: duas colunas na mesma largura do .lista-camp. */
  .conta { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 26px 40px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .conta .cartao { padding: 20px; }
}

/* ---------- movimento reduzido (estilo.css:680-686) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .kb { animation: none !important; opacity: 0; }
  .kb1 { opacity: 1; }
  .amb-poeira { display: none; }
  .varre { display: none; }   /* sem o movimento, a linha que varre ficaria parada sobre o Reel */
}
html.sem-mov *, html.sem-mov *::before, html.sem-mov *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; }
html.sem-mov .kb { animation: none !important; } html.sem-mov .kb1 { opacity: 1; } html.sem-mov .varre { display: none; }

/* ======================================================================= Studio
 * O que o sistema precisa além das telas do design system. Só tokens; nada de cor solta.
 * A CSP do Studio recusa estilo em linha, então o que o design system fazia com style="" vira classe.
 */

/* A poeira dourada (app.js:147-156 do protótipo), sem script: 14 grãos fixos. */
.amb-poeira span:nth-child(1)  { left: 23%; width: 1px;   height: 1px;   animation-duration: 14s; animation-delay: 0s;     --dx: -6px; }
.amb-poeira span:nth-child(2)  { left: 20%; width: 1.8px; height: 1.8px; animation-duration: 18s; animation-delay: -2.3s;  --dx: 7px; }
.amb-poeira span:nth-child(3)  { left: 17%; width: 2.6px; height: 2.6px; animation-duration: 22s; animation-delay: -4.6s;  --dx: -8px; }
.amb-poeira span:nth-child(4)  { left: 14%; width: 1px;   height: 1px;   animation-duration: 26s; animation-delay: -6.9s;  --dx: 9px; }
.amb-poeira span:nth-child(5)  { left: 11%; width: 1.8px; height: 1.8px; animation-duration: 30s; animation-delay: -9.2s;  --dx: -10px; }
.amb-poeira span:nth-child(6)  { left: 8%;  width: 2.6px; height: 2.6px; animation-duration: 14s; animation-delay: -11.5s; --dx: 11px; }
.amb-poeira span:nth-child(7)  { left: 5%;  width: 1px;   height: 1px;   animation-duration: 18s; animation-delay: -13.8s; --dx: -12px; }
.amb-poeira span:nth-child(8)  { left: 2%;  width: 1.8px; height: 1.8px; animation-duration: 22s; animation-delay: -16.1s; --dx: 13px; }
.amb-poeira span:nth-child(9)  { left: 99%; width: 2.6px; height: 2.6px; animation-duration: 26s; animation-delay: -18.4s; --dx: -14px; }
.amb-poeira span:nth-child(10) { left: 96%; width: 1px;   height: 1px;   animation-duration: 30s; animation-delay: -20.7s; --dx: 15px; }
.amb-poeira span:nth-child(11) { left: 93%; width: 1.8px; height: 1.8px; animation-duration: 14s; animation-delay: -23s;   --dx: -16px; }
.amb-poeira span:nth-child(12) { left: 90%; width: 2.6px; height: 2.6px; animation-duration: 18s; animation-delay: -25.3s; --dx: 17px; }
.amb-poeira span:nth-child(13) { left: 87%; width: 1px;   height: 1px;   animation-duration: 22s; animation-delay: -27.6s; --dx: -18px; }
.amb-poeira span:nth-child(14) { left: 84%; width: 1.8px; height: 1.8px; animation-duration: 26s; animation-delay: -29.9s; --dx: 19px; }

/* O miolo da tela logada: a pílula do rodapé desce até o fim da tela (.rodape-cta, margin-top: auto). */
.tela-miolo { flex: 1; display: flex; flex-direction: column; }
.topo-lado { width: 40px; height: 40px; }

/* As proporções das miniaturas de "Você recebe" (no design system, style="aspect-ratio"). */
.rc-9x16 { aspect-ratio: 9 / 16; }
.rc-4x5 { aspect-ratio: 4 / 5; }

/* O menu da conta abre pelo popover nativo, preso ao canto do avatar. */
/* O display: flex do componente venceria o "fechado" do popover: fechado, some. */
.menu-conta[popover]:not(:popover-open) { display: none; }
.menu-conta[popover] { position: fixed; inset: auto; top: 60px; right: var(--gut); margin: 0; color: var(--texto); }
.menu-conta .lnks { padding: 0; }
.menu-conta form { margin: 0; }
@media (min-width: 1080px) {
  .menu-conta[popover] { top: 70px; right: max(40px, calc((100vw - var(--largura)) / 2 + 40px)); }
}

/* Minha conta: o fieldset do tema e o aviso de "tema salvo" (no design system, style=""). */
.tema-campo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tema-campo legend { padding: 0; margin-bottom: 12px; }
.tema-estado { margin: 0; min-height: 1.2em; font: 500 12px/1.2 var(--fb); color: var(--texto-2); }
.botao-lnk { cursor: pointer; }

/* O aviso da entrada (o SSO recusou, a sessão expirou, o SSO fora do ar): o toast do protótipo
   (estilo.css:551), no topo. NÃO EXISTE NO PROTÓTIPO (item 7 do DESIGN.md). */
.ent-aviso { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 2 * var(--gut)); white-space: normal; text-align: left; }

/* A estrela de "Legendas" ocupa o quadro, como no protótipo (app.js:188 desenha o svg sem o
   i[data-ic], então ele não fica preso a 1em). Decisão do Luciano, 05/11: "Fica grande". O
   componentes.css do design system tem as mesmas duas regras desde 05/11. */
.rc-leg .ic { width: 78%; justify-content: center; }
.rc-leg .ic svg { width: 100%; height: auto; }

/* NÃO EXISTE NO PROTÓTIPO: a marca do topo é link para o início; toca em 52 px sem mudar o desenho,
   como o .btn-ic (componentes.css). */
.topo .marca { position: relative; }
.topo .marca::after { content: ''; position: absolute; inset: -17px -6px; }

/* O e-mail não quebra no hífen ("studio-" / "gerente@…"): quebra em qualquer letra, só quando não cabe. */
.quem-txt .email { word-break: break-all; }

/* ======================================================================= Studio · Fase 1
 * As telas de fotos e de ficha do protótipo (estilo.css:182-283 e 595-612), com as cores trocadas
 * pelos tokens do design system para valer nos dois temas. Cada bloco diz a linha de origem.
 */
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.97); } }          /* :191 */

/* O aviso das fotos que não entraram e o "enviando…" (NÃO EXISTE NO PROTÓTIPO, que simula o envio). */
/* "Buscar pelo código" (estilo.css:182-190). O campo tem a faixa inteira de toque, e o botão, 52 px pelo ::after. */
.busca[hidden], .achado[hidden] { display: none; }
.busca { display: flex; align-items: center; gap: 10px; border-radius: var(--r-busca); padding: 6px 6px 6px 14px; color: var(--destaque); font-size: 18px; animation: entra .4s var(--mola); }
.busca input { flex: 1; min-width: 0; height: var(--alvo); margin: -6px 0; background: none; border: 0; outline: 0; font: 650 17px/1 var(--fd); letter-spacing: .04em; color: var(--texto); padding: 0; }
.busca input::placeholder { color: var(--rotulo); font-weight: 500; letter-spacing: 0; }
.busca:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.busca-ir { position: relative; flex: none; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--ambar); color: var(--sobre-ambar); font: 700 14px/1 var(--fb); box-shadow: 0 0 18px rgba(255,187,16,.45); }
.busca-ir::after { content: ""; position: absolute; inset: calc((40px - var(--alvo)) / 2) 0; }
.busca-ir:disabled { opacity: .55; }
.busca-aviso { margin: 0; font: 600 12.5px/1.4 var(--fb); color: var(--destaque); }
.busca-aviso:empty { display: none; }
.achado { display: flex; align-items: center; gap: 12px; border-radius: var(--r-busca); padding: 8px 10px 8px 8px; animation: entra .5s var(--mola); }
.achado-ic { display: flex; align-items: center; justify-content: center; width: 54px; height: 42px; border-radius: 8px; font-size: 20px; color: var(--destaque); background: var(--tint-ambar); }
.achado-ic .ic { animation: giraIc 1.4s linear infinite; }
.achado div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.achado b { font: 700 14px/1.1 var(--fd); }
.achado div span { font: 500 12px/1.2 var(--fb); color: var(--texto-2); }
.expiradas .busca { margin-top: 2px; }
.aviso-envio { margin: 14px var(--gut) 0; padding: 12px 14px; border-radius: var(--r-busca); font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
.aviso-envio b { color: var(--texto); font-weight: 650; }
.aviso-envio ul { margin: 6px 0 0; padding-left: 18px; }
.envio-estado { margin: 0; min-height: 1.2em; font: 600 12.5px/1.2 var(--fb); color: var(--destaque); }
.envio-estado:empty { display: none; }
.op-enviar.soltando { box-shadow: 0 0 0 2px var(--ambar), 0 0 30px rgba(255,187,16,.35); }
label.op { cursor: pointer; }
label.op:focus-within { outline: 2px solid var(--foco); outline-offset: 3px; }
form[aria-busy="true"] label.op { opacity: .6; pointer-events: none; }

/* A chegada e a grade (estilo.css:193-212). */
.chegada { padding: 18px var(--gut) 0; display: flex; flex-direction: column; gap: 12px; }
.chegada-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chegada-cab .cont { font: 780 34px/1 var(--fd); letter-spacing: -.04em; color: var(--destaque); font-variant-numeric: tabular-nums; text-shadow: var(--brilho-texto); }
.chegada-cab .de { font: 600 15px/1 var(--fd); color: var(--texto-2); margin-left: 3px; }
.chegada-estado { font: 600 12px/1 var(--fb); color: var(--texto-2); display: inline-flex; gap: 6px; align-items: center; }
.chegada-estado.ok { color: var(--ok-texto); }
.grade-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fm { position: relative; aspect-ratio: 4/3; border-radius: var(--r-miniatura); overflow: hidden; background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--linha-fraca); animation: entra .45s var(--mola) both; }
.fm img { width: 100%; height: 100%; object-fit: cover; }
.fm .fm-n { position: absolute; top: 4px; left: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 750 9.5px/1 var(--fb); background: rgba(7,9,11,.72); color: #F0F0F0; border: 1px solid rgba(255,255,255,.18); font-variant-numeric: tabular-nums; }
.fm.capa .fm-n { background: var(--ambar); color: var(--navy); border-color: var(--ambar); }
.fm .fm-r { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 5px 4px; font: 600 8.5px/1 var(--fb); color: #F0F0F0; background: linear-gradient(180deg, transparent, rgba(7,9,11,.8) 45%, rgba(7,9,11,.92)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* mais forte que o protótipo (UX/UI, ressalva 3): a letra cruzava a parte clara da foto */
.fm.capa::before { content: "CAPA"; position: absolute; top: 4px; right: 4px; z-index: 2; font: 800 7.5px/1 var(--fb); letter-spacing: .1em; padding: 3px 4px; border-radius: 3px; background: rgba(7,9,11,.72); color: var(--ambar); }
/* NÃO EXISTE NO PROTÓTIPO (que não deixa tirar foto): o × no canto de baixo, com toque de 52 px. */
.fm-tirar { position: absolute; right: 2px; bottom: 2px; margin: 0; z-index: 3; }
.fm-tirar button { position: relative; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(7,9,11,.72); color: #F0F0F0; border: 1px solid rgba(255,255,255,.18); }
/* A área de toque cresce para dentro da foto (para a esquerda e para cima), que não é alvo: a .fm corta
   o que passa da borda, e a foto vizinha cobriria o resto (UX/UI, bloqueante 1 da faixa 1). 30 + 22 + 2 = 54. */
/* O toque do × fica no canto (UX/UI, melhorias, B1): com o Ajustar foto (M-09), o meio da foto abre o ajuste, e o "Desfazer" do
   aviso cobre o engano. Exceção à régua dos 52, só na grade, aberta pela UX/UI. */
.fm-tirar button::after { content: none; }
.mais-fotos { cursor: pointer; justify-content: center; border: 1px dashed var(--linha); }
.mais-fotos:focus-within { outline: 2px solid var(--foco); outline-offset: 3px; }

/* A ficha (estilo.css:231-283). */
.ficha-corpo { padding: 16px var(--gut) 0; display: grid; grid-template-columns: 142px 1fr; gap: 12px; align-items: start; }
.previa-caixa { width: 100%; }
.previa-col { display: flex; flex-direction: column; gap: 8px; align-items: center; position: sticky; top: 8px; }
.previa-arte { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; background: var(--navy); color: #FFFFFF; box-shadow: var(--sombra-previa), 0 0 0 1px rgba(255,187,16,.35), 0 0 34px rgba(255,187,16,.18); container-type: inline-size; animation: entra .35s var(--suave); }
.previa-arte img { position: absolute; inset: 0; width: 100%; height: 62%; object-fit: cover; }
.pa-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,24,31,.25) 0%, transparent 18%, transparent 36%, rgba(12,24,31,.85) 54%, var(--navy) 64%); }
.pa-topo { position: absolute; top: 5cqw; left: 6cqw; right: 6cqw; display: flex; justify-content: space-between; align-items: center; }
/* DESVIO DO PROTÓTIPO (Luciano, 06/11): lá o logo é uma máscara toda branca (estilo.css:237); aqui é o mesmo da peça, o K âmbar e as letras brancas (Recursos/marca, sem a margem transparente). */
.pa-logo { width: 26cqw; height: 6cqw; background: url(../img/konex-logotipo-branco.png) left center/contain no-repeat; }
.pa-tag { font: 800 4.2cqw/1 var(--fb); background: var(--ambar); color: var(--navy); padding: 1.6cqw 2.6cqw; border-radius: 1.6cqw; letter-spacing: .04em; }
.pa-base { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; display: flex; flex-direction: column; gap: 2.6cqw; isolation: isolate; }
/* O texto cai no navy sólido, como na arte (UX/UI, ressalva 4): o véu sobe junto com o bloco, seja qual for a altura dele. */
.pa-base::before { content: ""; position: absolute; z-index: -1; inset: -12cqw -6cqw -6cqw; background: linear-gradient(180deg, transparent, var(--navy) 12cqw); }
.pa-olho { font: 750 3.8cqw/1.1 var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); }
.pa-tit { font: 760 8.6cqw/1.05 var(--fd); letter-spacing: -.03em; text-wrap: balance; }
.pa-specs { display: flex; gap: 3.5cqw; flex-wrap: wrap; }
.pa-specs span { display: flex; flex-direction: column; gap: .8cqw; padding-right: 3.5cqw; border-right: 1px solid rgba(255,255,255,.2); }
.pa-specs span:last-child { border-right: 0; }
.pa-specs b { font: 760 7.4cqw/1 var(--fd); }
.pa-specs small { font: 650 2.9cqw/1 var(--fb); letter-spacing: .08em; text-transform: uppercase; color: #A9B1BE; }
.pa-preco { font: 780 8.2cqw/1 var(--fd); letter-spacing: -.02em; }
.previa-leg { display: inline-flex; align-items: center; gap: 6px; font: 650 10px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--previa-leg); }
.previa-leg .ponto { animation: pulsa 1.8s ease-out infinite; width: 6px; height: 6px; }
.campos { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo textarea, .campo select { background: none; border: 0; outline: 0; padding: 0; width: 100%; min-width: 0; font: 650 14.5px/1.25 var(--fd); letter-spacing: -.01em; resize: none; color: inherit; }
.campo select option { color: #0C181F; }
.c-valor { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 5px; }
.c-valor .c-rot, .c-cond .c-rot { width: 100%; }
.c-valor .c-pre { font: 700 14px/1 var(--fd); color: var(--destaque); }
/* A letra do valor diminui quando ele não cabe, com a conta da área (UX/UI, ressalva 1 da conferência da Fase 1): --n vem do
   data-caracteres, que o servidor escreve e o ts/campos.ts acompanha. 100cqw é a largura do cartão, os 26 são o "R$" e o .58
   é a largura de um caractere, em em, com folga. A altura não acompanha: o cartão não pula enquanto se digita. Sem
   transição, como na área: com movimento reduzido, o "*" animaria a letra. */
.c-valor { --letra: 21px; --n: 7; container-type: inline-size; }
.c-valor[data-caracteres="8"] { --n: 8; }
.c-valor[data-caracteres="9"] { --n: 9; }
.c-valor[data-caracteres="10"] { --n: 10; }
.c-valor[data-caracteres="11"] { --n: 11; }
.c-valor[data-caracteres="12"] { --n: 12; }
.c-valor[data-caracteres="13"] { --n: 13; }
.c-valor[data-caracteres="14"] { --n: 14; }
.c-valor[data-caracteres="15"] { --n: 15; }
.c-valor input { flex: 1; width: auto; height: var(--letra); font: 780 var(--letra)/1 var(--fd); color: var(--destaque); letter-spacing: -.02em; }
.ficha-corpo .campo.c-valor input { font-size: min(var(--letra), (100cqw - 26px) / (var(--n) * .58)); transition-property: none; }
.c-cond { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 5px; border-style: dashed; }
.c-cond .c-pre { font: 650 13px/1 var(--fd); color: var(--rotulo); }
.c-cond input { flex: 1; width: auto; }
.c-nota { position: absolute; right: 10px; top: 9px; font: 650 9.5px/1 var(--fb); color: var(--rotulo); }
.c-cond.cheio .c-nota { color: var(--ok-texto); }
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stp { padding: 9px 9px 40px 11px; min-height: 92px; }
.stp-v { font: 780 24px/1 var(--fd); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stp-v small { font: 600 12px/1 var(--fb); color: var(--texto-2); margin-left: 2px; }
.stp.zero .stp-v { color: var(--rotulo); }
.stp-tag { font: 650 9.5px/1 var(--fb); color: var(--rotulo); }
/* A área digitável (F1-22, NÃO EXISTE NO PROTÓTIPO, que só tem o + e o −): o campo tem a letra do número e cresce
   com o que se digita; o rótulo em volta dele toca em 52 de altura, sem mudar a altura do cartão. O "não
   aparece" vem sempre e só se mostra zerado (ts/campos.ts). */
.stp-dig { position: relative; align-self: flex-start; display: flex; align-items: baseline; min-width: 60px; max-width: 100%; padding: 14px 0; margin: -14px 0; cursor: text; }
/* A letra da área diminui com a quantidade de algarismos (UX/UI, rodada 3): --n vem do data-algarismos, que o servidor
   escreve e o ts/campos.ts acompanha, e a conta divide a largura do cartão (100cqw, sem o "m²") pelos algarismos. O .58
   é a largura de um algarismo, em em, com folga. Até 3 algarismos, a letra é sempre a cheia. A altura do campo não
   acompanha a letra: o cartão não pula enquanto se digita. Sem transição: com movimento reduzido, o "*" animaria a letra. */
.stp:has(.stp-dig) { --letra: 24px; container-type: inline-size; }
.stp .stp-dig { --n: 3; }
.stp .stp-dig[data-algarismos="4"] { --n: 4; }
.stp .stp-dig[data-algarismos="5"] { --n: 5; }
.stp .stp-dig[data-algarismos="6"] { --n: 6; }
.stp .stp-dig[data-algarismos="7"] { --n: 7; }
.stp .stp-dig[data-algarismos="8"] { --n: 8; }
.stp .stp-dig[data-algarismos="9"] { --n: 9; }
.ficha-corpo .campo .stp-dig input { width: calc(var(--n) * 1ch); height: var(--letra); max-width: 100%; min-width: 1ch; font: inherit; font-size: min(var(--letra), (100cqw - 17px) / (var(--n) * .58)); letter-spacing: inherit; color: inherit; transition-property: none; }
@supports (field-sizing: content) {
  .ficha-corpo .campo .stp-dig input { width: auto; field-sizing: content; }
}
.ficha-corpo .campo .stp-dig input::placeholder { font: inherit; color: inherit; }
.stp:not(.zero) .stp-dig ~ .stp-tag { display: none; }
.stp:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--borda-ambar), 0 0 18px var(--tint-ambar); }
.stp-b { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 28px; }
.stp-b button { position: relative; width: 26px; height: 26px; border-radius: 8px; font: 700 16px/1 var(--fb); background: var(--botao-fundo); border: 1px solid var(--linha); transition: background .2s, transform .15s; }
.stp-b button:hover { background: var(--botao-fundo-hover); border-color: var(--borda-ambar); }
.stp-b button:active { transform: scale(.88); }
.stp-b button:disabled { opacity: .35; }
/* NÃO EXISTE NO PROTÓTIPO (que os põe a 4 px um do outro): o − e o + de 26 px tocam em 54 × 54 cada
   (o --alvo do design system), lado a lado sem um cobrir o outro, então os dois ficam a 28 px
   (UX/UI, bloqueante 1 da faixa 1). A área passa 7 px da borda do cartão, menos que o vão de 8. */
.stp-b button::after { content: ""; position: absolute; inset: -14px; }
/* No celular estreito, o cartão de 2 por linha tem uns 88 px: não cabem duas áreas de 54. O contador
   vira uma linha (rótulo e número à esquerda, o − e o + à direita). Decisão do Dev, a validar. */
@media (max-width: 419px) {
  .steppers { grid-template-columns: 1fr; }
  .stp { min-height: 0; padding: 9px 104px 9px 11px; }
  .stp-b { top: 50%; bottom: auto; transform: translateY(-50%); }
  /* O aviso do condomínio não cabe ao lado do rótulo (UX/UI, rodada 3): desce para uma linha sob o valor. */
  .c-nota { position: static; flex-basis: 100%; }
  .stp:has(.stp-dig) { padding-right: 100px; }                                                  /* até a área de toque do − */
}
/* Abaixo de 375, ao lado do − só cabem uns 2 algarismos legíveis: a área volta ao cartão de 2 por linha, com o número em
   cima e o − e o + embaixo. Os 48 põem o número fora da área de toque do −. Decisão do Dev, a validar. */
@media (max-width: 374px) {
  .stp:has(.stp-dig) { padding: 9px 9px 48px 11px; }
  .stp:has(.stp-dig) .stp-b { top: auto; bottom: 7px; transform: none; }
}
/* Em 320 (e no zoom do notebook que chega lá), os outros contadores usam o desenho da área, porque "QUARTOS" não cabe ao lado
   do − (ressalva 3), e as duas opções da finalidade ficam uma sobre a outra, porque "Locação" passa do cartão (ressalva 2). */
@media (max-width: 359px) {
  .stp { padding: 9px 9px 48px 11px; }
  .stp-b { top: auto; bottom: 7px; transform: none; }
  .c-fin .tema-ops { flex-direction: column; }
}
.linha2 { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* NÃO EXISTE NO PROTÓTIPO (F1-23): as sugestões do Tipo, com a caixa do painel que abre por cima (.est-ajustes). */
.sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: calc(var(--alvo) * 5.5 + 6px); margin: 0; padding: 4px; list-style: none; overflow-y: auto; border-radius: var(--r-campo); border: 1px solid var(--linha); background: var(--fundo); box-shadow: var(--sombra-painel); scroll-margin-bottom: 110px; }
.sugestoes[hidden] { display: none; }
.sugestoes li { display: flex; align-items: center; min-height: var(--alvo); padding: 0 10px; border-radius: 8px; font: 650 14.5px/1.2 var(--fd); color: var(--texto); cursor: pointer; }
.sugestoes li:hover, .sugestoes li[aria-selected="true"] { background: var(--tint-ambar); }
.campo:has(.sugestoes:not([hidden])) { z-index: 20; }
/* NÃO EXISTE NO PROTÓTIPO (F1-20): a finalidade, com a peça .tema-op da Minha conta dentro de um .campo. */
.c-fin { margin: 0; min-width: 0; }
.c-fin legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; }
.c-fin .tema-ops { clear: both; }
.c-fin-nota { margin-top: 8px; }
.c-fin .tema-op { flex-direction: row; font-size: 14px; }
.dica { margin: 14px var(--gut) 0; display: flex; gap: 8px; align-items: flex-start; font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
.dica .ic { color: var(--destaque); font-size: 15px; margin-top: 1px; }

@media (min-width: 1080px) {
  .aviso-envio, .dica { max-width: var(--largura); margin-left: auto; margin-right: auto; width: calc(100% - 80px); }
  .chegada { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 24px 40px 0; display: grid; grid-template-columns: 260px 1fr; gap: 14px 30px; align-items: start; }   /* :596 */
  .chegada-cab { flex-direction: column; gap: 10px; }                                          /* :597 */
  .chegada-cab .cont { font-size: 64px; }                                                      /* :598 */
  .grade-fotos { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(6, 1fr); gap: 10px; } /* :601 */
  .fm .fm-r { font-size: 10px; padding: 14px 7px 6px; }                                        /* :602 */
  .fm .fm-n { font-size: 11px; height: 20px; min-width: 20px; }                                /* :603 */
  .ficha-corpo { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 24px 40px 0; grid-template-columns: 1fr 340px; gap: 40px; } /* :606 */
  .previa-col { grid-column: 2; grid-row: 1; top: 0; }                                         /* :607 */
  .campos { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* :608 */
  .c-tit, .c-valor { grid-column: span 2; }                                                    /* :609-610 */
  .c-fin { grid-column: span 4; }
  .steppers { grid-column: span 4; grid-template-columns: repeat(4, 1fr); gap: 12px; }         /* :611 */
  .linha2 { grid-column: span 4; gap: 12px; grid-template-columns: 1.4fr 2fr 2fr 80px; }        /* :612, com Tipo e UF; 1.4 para o "Apartamento" caber com a letra do notebook */
  .c-cond { grid-column: span 2; }
  /* A letra do notebook (estilo.css:614-620; UX/UI, ressalva 3 da faixa 1). */
  .ficha-corpo .campo { padding: 14px 16px; border-radius: 14px; }                             /* :614 */
  .ficha-corpo .campo textarea { font-size: 20px; }                                            /* :615 */
  .ficha-corpo .campo input { font-size: 17px; }                                               /* :616 */
  .c-valor { --letra: 26px; }                                                                  /* :617 */
  .stp { min-height: 110px; padding: 14px 16px; }                                              /* :618 */
  .stp-v { font-size: 40px; }                                                                  /* :619 */
  .stp:has(.stp-dig) { --letra: 40px; min-height: 114px; }                                     /* 4 px entre o número e o − */
  .stp-b { gap: 22px; }
  .stp-b button { width: 32px; height: 32px; }                                                 /* :620 */
  .stp-b button::after { inset: -11px; }                                                       /* 32 + 22 = 54 */
}
/* A pílula não cobre a prévia (Luciano, 06/11, janela de 1212 × 610). A pílula fica grudada no fim da tela, logo abaixo da
   coluna da prévia. Em janela baixa, a prévia encolhe (mantém 4:5) até caber entre o título e a pílula, com a legenda. Das 332
   px que sobram da altura: o topo, os passos e o título (200), a legenda (22), o vão e a pílula (110). O selo "preenchida
   pelo CRM" põe mais uma linha no título. */
@media (min-width: 1080px) {
  .ficha-corpo { --previa-acima: 332px; }
  .cab:has(.chip-ok) ~ .ficha-corpo { --previa-acima: 362px; }
  .previa-caixa { width: min(100%, max(200px, (100dvh - var(--previa-acima)) * .8)); }
}
/* Entre 1080 e 1179, a coluna do Tipo do notebook não leva o "Apartamento" (ressalva 4); de 1180 em diante, leva. */
@media (min-width: 1080px) and (max-width: 1179px) {
  .linha2 { grid-template-columns: 1.8fr 2fr 2fr 80px; }
  /* Nesta faixa o cartão é estreito, e o "não aparece" batia no −: os botões ficam embaixo, como em 320 (UX/UI da Fase 2, item 2). */
  .ficha-corpo .stp { padding-bottom: 46px; }
}

/* ======================================================================= Studio · Fase 1 · kit
 * O kit em Modo câmera (Claude Design B; index.html:252-334): estilo.css:390-470 (a peça, o painel, a
 * régua e o obturador), :371-392 (a legenda), :286-315 (o "gerando") e :625-665 (o estúdio no
 * notebook), com as cores trocadas pelos tokens para valer nos dois temas. ☠️ Sem baralho (Q30, Q38):
 * o .baralho e as .carta do protótipo (estilo.css:320-357) não entram.
 * O que fica SOBRE a peça (setas, pontinhos) é escuro nos dois temas, como a .etq.
 */

/* A tela (estilo.css:392-395). No celular, a câmera ocupa a altura da tela e a legenda vem logo
   abaixo (NÃO EXISTE NO PROTÓTIPO, que põe a legenda no baralho: decisão do Dev, a validar). */
.kit { position: relative; }
/* O olho do Reel só pergunta ao servidor (every 3s): fora do fluxo, para não abrir uma linha na grade do kit, que é a altura da tela. */
#reel-olho { position: absolute; width: 0; height: 0; overflow: hidden; }
.est-trilho { display: none; }
.est-centro { position: relative; height: 100svh; min-height: 560px; overflow: hidden; overflow: clip; }
/* A área da peça (app.js:589-597): abaixo do topo (84 px) e acima da régua (196 px), 16 px dos lados. */
.est-area { position: absolute; top: calc(env(safe-area-inset-top) + 84px); bottom: 196px; left: 16px; right: 16px; display: grid; place-items: center; container-type: size; }

/* O quadro (estilo.css:396-397): a peça inteira, na proporção dela, emoldurada. A medida vem do
   contêiner (cqw/cqh), e não do script de posição do protótipo. trocado: sombra preta → --sombra-peca. */
.quadro { position: relative; width: min(100cqw, calc(100cqh * 4 / 5)); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; overflow: clip; background: var(--navy); box-shadow: var(--sombra-peca), 0 0 0 1px var(--linha), 0 0 60px rgba(255,187,16,.12); animation: entra .45s var(--suave); }
.quadro.q-stories { width: min(100cqw, calc(100cqh * 9 / 16)); aspect-ratio: 9 / 16; }
.quadro > img, .q-trilho img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* O carrossel (estilo.css:406-409): as lâminas deslizam com o dedo e param inteiras (scroll-snap). */
.q-trilho { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.q-trilho::-webkit-scrollbar { display: none; }
.q-trilho img { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; user-select: none; -webkit-user-drag: none; }
.q-trilho:focus-visible { outline-offset: -3px; }
.q-pontos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.q-pontos span { width: 4px; height: 4px; border-radius: 2px; background: rgba(240,240,240,.55); transition: width .35s, background .35s; }
.q-pontos span.on { width: 16px; background: var(--ambar); box-shadow: 0 0 8px rgba(255,187,16,.8); }
.q-seta { position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(7,9,11,.5); border: 1px solid rgba(255,255,255,.18); color: #F0F0F0; font-size: 15px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }  /* :410 */
.q-seta::after { content: ""; position: absolute; inset: calc((32px - var(--alvo)) / 2); }   /* NÃO EXISTE NO PROTÓTIPO: toque de 52 px */
.q-seta.e { left: 8px; } .q-seta.d { right: 8px; }                                                                                  /* :411 */

/* A barra de vidro do topo (estilo.css:413-421). */
.est-topo { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + 10px); left: 12px; right: 12px; height: 56px; border-radius: var(--r-cartao); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; }
.et-info { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.et-nome { font: 750 17px/1 var(--fd); letter-spacing: -.02em; }
.et-meta { display: flex; align-items: center; gap: 7px; font: 600 11px/1 var(--fb); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.et-fmt { color: var(--destaque); }
/* Com o sininho na barra, sobra menos em 375: o nome longo fecha em reticências, sem passar por baixo do "Modelo e paleta". */
.et-mp { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn-ajuste { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 11px; font: 650 12.5px/1 var(--fb); background: var(--tint-ambar); border: 1px solid var(--borda-ambar); color: var(--destaque); white-space: nowrap; transition: background .2s, color .2s, border-color .2s, box-shadow .3s; }
.btn-ajuste::after { content: ""; position: absolute; inset: calc((38px - var(--alvo)) / 2) 0; }   /* toque de 52 px */
.btn-ajuste .ic { font-size: 16px; }
/* Aberto (estilo.css:420-421): o painel é um popover nativo, que fecha com Esc e com toque fora. */
.kit:has(.est-ajustes:popover-open) .btn-ajuste { background: var(--ambar); border-color: var(--ambar); color: var(--sobre-ambar); box-shadow: 0 0 20px rgba(255,187,16,.5); }

/* O painel "Modelo e paleta" (estilo.css:423-438), com a lista das peças (F1-09, NÃO EXISTE NO
   PROTÓTIPO: feita com o .aj-pal). */
.est-ajustes[popover]:not(:popover-open) { display: none; }
.est-ajustes[popover] { position: fixed; inset: auto; top: calc(env(safe-area-inset-top) + 74px); left: 12px; right: 12px; width: auto; margin: 0; max-height: calc(100svh - 290px); overflow: auto; color: var(--texto); }
.est-ajustes { --aj-margem: 12px; border-radius: var(--r-cartao); padding: var(--aj-margem); display: flex; flex-direction: column; gap: 12px; --vf: var(--vidro-forte); box-shadow: var(--sombra-painel); transform-origin: top right; animation: abreAj .45s var(--mola); }
.est-ajustes[data-abrir="true"] { animation: none; }   /* reaberto depois de cada troca: sem pular de novo */
.est-ajustes fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.aj-grupo { display: flex; flex-direction: column; gap: 8px; }
.aj-rot { padding: 0; margin-bottom: 8px; font: 650 10px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }   /* :426 */
.aj-modelos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aj-mod { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; cursor: pointer; }
.aj-mod img, .aj-vazio { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-miniatura); box-shadow: 0 0 0 1px var(--linha); transition: box-shadow .3s, transform .3s var(--mola); }
.aj-vazio { display: block; border: 1px dashed var(--linha); box-shadow: none; opacity: .35; }
.aj-mod span:not(.aj-vazio) { font: 650 11.5px/1.15 var(--fb); color: var(--texto-2); }
.aj-mod small { font: 500 10.5px/1.2 var(--fb); color: var(--texto-2); }
.aj-mod:has(input:checked) img { box-shadow: 0 0 0 2px var(--ambar), 0 0 18px rgba(255,187,16,.45); transform: translateY(-2px); }
.aj-mod:has(input:checked) span { color: var(--texto); }
.aj-mod:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--r-miniatura); }
.aj-mod.sem { cursor: default; }
.aj-mod.sem span:not(.aj-vazio) { opacity: .35; }   /* :432, desligado; o "sem preço na ficha" fica com contraste cheio */
.aj-paletas, .aj-pecas { display: flex; gap: 8px; }
/* Com o Reel, são 4 peças: numa linha só, "Stories" passava do painel em 375 e 390 (UX/UI da Fase 2, item 1). */
.aj-pecas { flex-wrap: wrap; }
.aj-pal { position: relative; flex: 1; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--linha); font: 650 13px/1 var(--fb); cursor: pointer; transition: all .25s; }
.aj-pal::after { content: ""; position: absolute; inset: calc((42px - var(--alvo)) / 2) 0; }   /* toque de 52 px */
.aj-pal .sw { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--linha); position: relative; overflow: hidden; flex: none; }   /* :436 */
.aj-pal .sw::after { content: ''; position: absolute; right: 0; bottom: 0; width: 50%; height: 50%; background: var(--ambar); }                                /* :437 */
.sw-classica { background: var(--navy); }   /* dados.js:71 */
.sw-clara { background: var(--claro); }     /* dados.js:72 */
.aj-pal:has(input:checked) { border-color: var(--ambar); background: var(--tint-ambar); box-shadow: 0 0 16px rgba(255,187,16,.25); }   /* :438 */
.aj-pal:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
.aj-peca { padding: 0 10px; gap: 7px; }
.aj-marca { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--linha); display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; flex: none; }
.aj-peca:has(input:checked) .aj-marca { background: var(--ambar); border-color: var(--ambar); color: var(--sobre-ambar); }
.aj-nota { margin: 0; font: 500 11.5px/1.35 var(--fb); color: var(--texto-2); }   /* :439 */
.aj-nota:not(:has(> span:not([hidden]):not(.aj-montando))) { display: none; }
.est-ajustes.htmx-request .aj-nota { display: block; }
.aj-montando { display: none; color: var(--destaque); font-weight: 650; }
.est-ajustes.htmx-request .aj-montando { display: inline; }
.est-ajustes.htmx-request .aj-montando ~ span { display: none; }
.aj-aviso { color: var(--texto); font-weight: 650; }

/* A base: a régua e o obturador (estilo.css:441-469). trocado: o véu preto → --rodape-veu. */
.est-base { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 30px 0 calc(34px + env(safe-area-inset-bottom)); background: var(--rodape-veu); }
.regua { position: relative; height: 52px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
/* Os nomes deslizam com o dedo e param no centro (scroll-snap), em vez do arrastar do app.js:630-647.
   Os riscos andam junto (background local). trocado: rgba(240,240,240,.38) → --texto a 38%. */
.r-trilho { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: calc(50% - 70px); cursor: grab; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--texto) 38%, transparent) 0 1px, transparent 1px 10px) 0 calc(100% - 6px) / 100% 14px no-repeat local; }
.r-trilho::-webkit-scrollbar { display: none; }
/* trocado: rgba(240,240,240,.55) → --texto-2, que passa na medição de contraste nos dois temas. */
.r-trilho button { flex: 0 0 140px; scroll-snap-align: center; height: 100%; padding-top: 6px; display: flex; justify-content: center; gap: .5em; font: 750 13px/20px var(--fb); letter-spacing: .14em; color: var(--texto-2); white-space: nowrap; transition: color .3s, text-shadow .3s; }
.r-trilho button[aria-selected="true"] { color: var(--destaque); text-shadow: var(--brilho-texto); }   /* :444 */
.r-trilho button:focus-visible { outline-offset: -2px; }
.r-agulha { position: absolute; left: 50%; bottom: 3px; width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); pointer-events: none; }   /* :446 */
.r-agulha::before { content: ''; position: absolute; left: 50%; top: -26px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 8px var(--ambar); }   /* :447 */
.obt-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 28px 0; }   /* :448 */
.obt-galeria { justify-self: start; position: relative; width: 54px; height: 54px; color: inherit; }
.obt-galeria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 2px solid rgba(240,240,240,.85); }
.obt-galeria img:nth-last-of-type(2) { transform: rotate(-8deg) translate(-4px, 2px); opacity: .6; }
.obt-galeria b { position: absolute; right: -8px; bottom: -8px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: var(--ambar); color: var(--sobre-ambar); font: 800 11px/24px var(--fb); text-align: center; box-shadow: 0 0 12px rgba(255,187,16,.6); }   /* :452 */
.obturador { position: relative; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .25s var(--mola); }   /* :453 */
.obturador:active { transform: scale(.93); }
.obt-anel { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--ang), rgba(255,187,16,.35), var(--ambar) 60deg, var(--ambar-luz-2) 90deg, rgba(255,187,16,.35) 160deg, var(--ambar) 260deg, rgba(255,187,16,.35) 360deg); animation: gira 3s linear infinite; box-shadow: 0 0 40px rgba(255,187,16,.5); }
.obt-anel::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--fundo); }   /* trocado: #0a0d10 → --fundo */
.obt-nucleo { position: relative; width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--navy); background: radial-gradient(circle at 35% 28%, var(--ambar-luz), var(--ambar) 55%, var(--ambar-escuro)); box-shadow: inset 0 -4px 10px rgba(140,80,0,.35); animation: orbe 1.8s ease-out infinite; }   /* :457 */
/* O "Compartilhar" embaixo (estilo.css:459, que era um ::after com content): aqui é texto de verdade,
   e dá o nome ao botão. trocado: --y2 → --destaque. */
.obt-rot { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 7px; font: 650 11px/1 var(--fb); color: var(--destaque); white-space: nowrap; }
.obt-baixar { justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; }   /* :466 */
.obt-baixar span { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.obt-baixar small { font: 650 11px/1 var(--fb); color: var(--texto-3); }

/* A legenda (estilo.css:371-392). Sem o "gerar outra versão" e o "1/2" (F1-12: nesta fase, não). */
.est-lado { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 18px 14px 40px; }
.est-lado .selo-real { align-self: flex-start; }
.legenda { position: relative; border-radius: var(--r-busca); border: 1px solid transparent; background: linear-gradient(var(--vidro), var(--vidro)) padding-box, linear-gradient(var(--ang), rgba(255,187,16,.6), var(--linha-fraca) 30%, var(--linha-fraca) 70%, var(--linha)) border-box; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: var(--sombra-painel); animation: gira 9s linear infinite; }
.lg-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 0; min-height: 35px; }   /* a altura com a etiqueta: sem ela, o texto pulava 10 px (UX/UI da Fase 3, correção 1) */
.lg-tit { display: inline-flex; align-items: center; gap: 6px; font: 650 10.5px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }   /* :374, trocado: --cinza → --rotulo */
.lg-tit .ic { color: var(--destaque); font-size: 13px; }
.lg-tit .ic svg { animation: giraIc 6s linear infinite; }   /* :374, .gira; o movimento reduzido para no bloco global */
.lg-abas { position: relative; display: flex; margin: 8px 14px 0; border-bottom: 1px solid var(--linha-fraca); }
.lg-abas button { position: relative; flex: 1; text-align: center; padding: 9px 0 10px; font: 650 13px/1 var(--fb); color: var(--rotulo); transition: color .25s; }
.lg-abas button::after { content: ""; position: absolute; inset: calc((32px - var(--alvo)) / 2) 0; }   /* toque de 52 px */
.lg-abas button[aria-selected="true"] { color: var(--texto); }
.lg-abas .ind { position: absolute; bottom: -1px; left: 0; height: 2px; width: 33.333%; background: var(--ambar); box-shadow: 0 0 12px var(--ambar), 0 0 3px var(--ambar); border-radius: 2px; transition: transform .5s var(--mola); pointer-events: none; }
/* A posição do traço sai da aba marcada (o protótipo escrevia o transform pelo script). */
.lg-abas:has(button:nth-of-type(2)[aria-selected="true"]) .ind { transform: translateX(100%); }
.lg-abas:has(button:nth-of-type(3)[aria-selected="true"]) .ind { transform: translateX(200%); }
/* O texto é um <textarea>: o corretor ajusta antes de copiar (F1-12, "editável"). */
.lg-texto { display: block; width: 100%; min-height: 320px; field-sizing: content; padding: 12px 14px 6px; border: 0; background: none; color: var(--texto); font: 400 14px/1.5 var(--fb); resize: none; text-wrap: pretty; overflow-wrap: anywhere; }
.lg-texto:focus-visible { outline-offset: -3px; }
.lg-rodape { display: flex; justify-content: flex-end; padding: 4px 8px 8px 6px; border-top: 1px solid var(--linha-fraca); }
.lg-copiar { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 12px; border-radius: 10px; font: 650 13px/1 var(--fb); color: var(--destaque); transition: background .2s; }
.lg-copiar .ic { font-size: 16px; }
.lg-copiar:hover { background: var(--botao-fundo-hover); }
/* A legenda com IA (F3-05, F3-06). O rodapé do protótipo (estilo.css:383-390): "gerar outra versão", o contador no lugar do
   "1/2" e o copiar só com o ícone. NÃO EXISTEM NO PROTÓTIPO: o "Ajustar" da legenda, o aviso e o "escrevendo…"; feitos com as
   peças do "Modelo e paleta" (.aj-*) e os tokens. */
.lg-form { justify-content: flex-start; align-items: center; gap: 6px; }
.lg-outra { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 8px; font: 650 13px/1 var(--fb); color: var(--destaque); white-space: nowrap; transition: background .2s; }   /* :384 */
.lg-outra::after, .lg-ajustar::after, .lg-copiar.so-icone::after { content: ""; position: absolute; inset: calc((40px - var(--alvo)) / 2) 0; }   /* toque de 52 px */
.lg-ajustar::after, .lg-copiar.so-icone::after { inset: calc((40px - var(--alvo)) / 2); }   /* quadrados de 40: 52 também na largura (UX/UI da Fase 3, correção 3) */
.lg-outra:hover:not(:disabled) { background: var(--tint-ambar); }   /* :385 */
.lg-outra .ic { font-size: 16px; transition: transform .7s var(--suave); }   /* :386 */
.lg-outra:disabled, .lg-ajustar:has(~ .lg-ajustes :disabled) { opacity: .45; cursor: default; }
/* Os dois textos na mesma célula: o botão fica na largura do maior, e nada anda durante o "escrevendo…" (UX/UI da Fase 3, menor 2). */
.lg-outra-rot { display: inline-grid; }
.lg-outra-rot > * { grid-area: 1 / 1; text-align: start; }   /* o "escrevendo…" colado no ícone (UX/UI da Fase 3, correção 2) */
.lg-escrevendo { display: none; }
.lg-form.htmx-request .lg-outra-txt { visibility: hidden; }
.lg-form.htmx-request .lg-escrevendo { display: inline; }
.lg-form.htmx-request .lg-outra .ic { animation: giraIc 1s linear infinite; }
.lg-form.htmx-request button { pointer-events: none; }
.legenda:has(.lg-form.htmx-request) .lg-texto { opacity: .55; transition: opacity .3s; }
@keyframes giraIc { to { transform: rotate(360deg); } }
.lg-ajustar { position: relative; width: 40px; height: 40px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 16px; color: var(--texto-3); transition: background .2s, color .2s; }
.lg-ajustar:hover { background: var(--botao-fundo-hover); }
.legenda:has(.lg-ajustes:popover-open) .lg-ajustar { background: var(--tint-ambar); color: var(--destaque); box-shadow: inset 0 0 0 1px var(--borda-ambar); }
.lg-ver { margin-left: auto; font: 500 11px/1 var(--fb); color: var(--rotulo); font-variant-numeric: tabular-nums; white-space: nowrap; }   /* :388 */
.lg-copiar.so-icone { position: relative; width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; margin-left: auto; flex: none; color: var(--texto-3); }   /* :389 */
.lg-ver + .lg-copiar.so-icone { margin-left: 0; }
.lg-aviso { margin: 10px 14px 0; padding: 8px 10px; border-radius: var(--r-chip); background: var(--tint-ambar); border: 1px solid var(--borda-ambar); font: 600 12px/1.4 var(--fb); color: var(--texto); text-wrap: pretty; }
.lg-painel > .lg-aviso { margin-bottom: 0; }
/* O "Ajustar" da legenda: no celular, uma folha que sobe do pé da tela; no notebook, junto da coluna da legenda. */
.lg-ajustes[popover]:not(:popover-open) { display: none; }
.lg-ajustes[popover] { position: fixed; inset: auto 12px calc(env(safe-area-inset-bottom) + 12px) 12px; width: auto; margin: 0; max-height: calc(100svh - 24px); overflow: auto; color: var(--texto); }
.lg-ajustes { border-radius: var(--r-cartao); padding: 14px; display: flex; flex-direction: column; gap: 14px; --vf: var(--vidro-forte); box-shadow: var(--sombra-painel); transform-origin: bottom center; animation: abreAj .45s var(--mola); }
.lg-ajustes fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lg-ajustes .aj-rot { margin-bottom: 0; }
.lg-ajustes .aj-formatos { flex-wrap: wrap; }
.lg-ajustes .aj-pal { justify-content: center; }
.lg-gerar { align-self: stretch; justify-content: center; border: 1px solid var(--borda-ambar); background: var(--tint-ambar); }
.lg-gerar::after { inset: calc((38px - var(--alvo)) / 2) 0; }   /* toque de 52 px: o ::after mede a partir de dentro da borda (5ba205d) */
/* As opções mudam de altura entre o celular e o notebook: o ::after tem os 52 e fica no meio, qualquer que seja a altura. */
.lg-ajustes .aj-pal::after { inset: 50% 0 auto; height: var(--alvo); transform: translateY(-50%); }
/* Com "restam N", o rodapé só cabe numa linha a partir de 345 px: abaixo disso, o contador sobe (UX/UI da Fase 3, correção 1). */
@media (max-width: 344px) {
  .lg-form { flex-wrap: wrap; }
  .lg-ver { order: -1; flex-basis: 100%; text-align: right; margin: 4px 6px 0 0; }
  .lg-ver + .lg-copiar.so-icone { margin-left: auto; }
}

/* O aviso curto (estilo.css:551-556): "Legenda copiada". */
.kit-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 78px); z-index: 50; max-width: calc(100% - 28px); transform: translate(-50%, -16px); opacity: 0; transition: transform .5s var(--mola), opacity .3s; pointer-events: none; }
.kit-toast span { overflow: hidden; text-overflow: ellipsis; }
.kit-toast.vis { transform: translate(-50%, 0); opacity: 1; }

/* Antes do kit: o CRECI que falta, ou o "Gerar" (NÃO EXISTE NO PROTÓTIPO). */
.kit-pedido { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px var(--gut) 0; }
.kit-pedido .aviso-envio { margin: 0; }

/* "Montando seu kit…" (estilo.css:286-316), com as molduras das peças (Luciano, 05/11) e o andamento de
   verdade: o servidor conta as lâminas e as etapas, e a tela só acompanha. Sem o Reel, que vai pela fila
   depois: três cartões em leque em vez de quatro. A tela troca o bloco a cada resposta; o que muda de um
   estado para o outro é a classe (o HTMX acerta a classe velha e põe a nova), e quem anima é a transição.
   Nenhuma animação nos elementos trocados, senão ela recomeçaria a cada 700 ms. */
/* Tudo cabe na altura visível, sem rolar (Luciano, 06/11). O --k é a medida das molduras: 1 px por unidade do protótipo, 1,55
   no notebook (:624-625), e menos quando a janela é baixa. As molduras ocupam 146 unidades de altura; somam-se o rótulo
   (30), o vão, o bloco da porcentagem e dos passos (--ger-info) e a folga de cima e de baixo (32). O palco tem só a altura
   das molduras (o protótipo: 300 e 420, com sobra em cima que empurrava o conjunto para baixo do centro). */
.gerando { --ger-info: 236px; --ger-vao: 34px; --ger-k-max: 1px; --k: max(.5px, min(var(--ger-k-max), (100dvh - var(--ger-info) - var(--ger-vao) - 62px) / 146));
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ger-vao); overflow: hidden; }   /* :286; o fundo é o ambiente, a foto desfocada e a luz amarela (Q60; UX/UI, ressalva 2) */
.gerando:has(.ger-erro) { --ger-info: 310px; }   /* a saída da falha precisa caber */
.ger-palco { position: relative; width: 100%; height: calc(146 * var(--k) + 30px); perspective: 900px; flex: none; }   /* :287 */
.ger-anel { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,187,16,.22), transparent 70%); animation: respira 1.6s ease-in-out infinite; }   /* :288 */
@keyframes respira { 50% { transform: scale(1.12); opacity: .7; } }
.ger-cartoes { position: absolute; inset: 0; }
/* A tela cobre tudo menos o ambiente: enquanto ela está à mostra, o resto some da vista, do teclado e do
   leitor de tela. */
.tela-miolo:has(> .gerando:not([hidden])) > :not(.gerando), .tela:has(.gerando:not([hidden])) > .topo { visibility: hidden; }
/* O cartão (:290-299; trocado: o fundo rgba(12,24,31,.5) → o --fundo do tema a 55%, que no claro não fica cinza): a moldura âmbar aparece (vis), recebe a miniatura da primeira lâmina (cheio) e acende
   quando a última sai (pronto). A posição no leque vem do tipo (o protótipo a escrevia pelo script). */
.gq { position: absolute; left: 50%; top: calc(62 * var(--k)); width: calc(86 * var(--k)); height: calc(108 * var(--k)); margin: calc(-54 * var(--k)) 0 0 calc(-43 * var(--k)); border-radius: 9px; background: color-mix(in srgb, var(--fundo) 55%, transparent); box-shadow: inset 0 0 0 1.5px rgba(255,187,16,.5), 0 0 24px rgba(255,187,16,.15); opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .5s, transform .7s var(--mola), box-shadow .5s; }
.gq.vis { opacity: 1; transform: var(--tf); }
.gq.cheio { box-shadow: inset 0 0 0 1.5px var(--ambar), 0 0 34px rgba(255,187,16,.45), 0 20px 40px rgba(0,0,0,.6); }
.gq.pronto { box-shadow: inset 0 0 0 2px var(--ambar), 0 0 44px rgba(255,187,16,.6), 0 20px 40px rgba(0,0,0,.6); }
.gq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; opacity: 0; transition: opacity .6s; }
.gq img.on { opacity: 1; }
.gq img:not([src]) { display: none; }
.gq-rot { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font: 700 10px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.gq-rot small { font: inherit; letter-spacing: .04em; color: var(--destaque); }
.gq-carrossel { --tf: translateX(calc(-100 * var(--k))) translateY(calc(4 * var(--k))) rotateY(10deg) rotateZ(-6deg); }
.gq-feed { --tf: translateY(calc(-6 * var(--k))); transition-delay: .09s; }
.gq-stories { width: calc(72 * var(--k)); height: calc(128 * var(--k)); margin: calc(-64 * var(--k)) 0 0 calc(-36 * var(--k)); --tf: translateX(calc(100 * var(--k))) translateY(calc(10 * var(--k))) rotateY(-12deg) rotateZ(7deg); transition-delay: .18s; }
.gq.cheio, .gq.pronto { transition-delay: 0s; }
/* O número, a barra, a frase e os passos (:302-313). A barra é um <progress> (sem estilo em linha). */
.ger-info { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 300px; z-index: 2; }   /* :302 */
.ger-pct { font: 800 54px/1 var(--fd); letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-shadow: var(--brilho-texto); }   /* :303 */
.ger-pct span { font-size: 24px; color: var(--destaque); margin-left: 2px; }
.ger-barra { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; background: var(--trilho); color: var(--ambar); }   /* :305 */
.ger-barra::-webkit-progress-bar { background: var(--trilho); border-radius: 3px; }
.ger-barra::-webkit-progress-value { border-radius: 3px; background: linear-gradient(90deg, var(--ambar-escuro), var(--ambar) 60%, var(--ambar-luz-2)); box-shadow: 0 0 14px var(--ambar); transition: inline-size .4s; }   /* :306 */
.ger-barra::-moz-progress-bar { border-radius: 3px; background: linear-gradient(90deg, var(--ambar-escuro), var(--ambar) 60%, var(--ambar-luz-2)); }
.ger-status { font: 650 15px/1.2 var(--fd); min-height: 18px; text-align: center; }   /* :308 */
.ger-passos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; width: 100%; }   /* :309 */
.ger-passos li { display: flex; align-items: center; gap: 9px; font: 500 12.5px/1.2 var(--fb); color: var(--texto-2); transition: color .3s; }
.ger-passos li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--trilho); flex: none; transition: all .3s; }
/* O passo de agora: o anel âmbar, sem o check. O feito (:312-313): o verde com o check. */
.ger-passos li.agora { color: var(--texto); }
.ger-passos li.agora::before { border-color: var(--destaque); box-shadow: 0 0 10px rgba(255,187,16,.45); }   /* âmbar no escuro, navy no claro */
.ger-passos li.ok { color: var(--texto); }
.ger-passos li.ok::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C181F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/9px no-repeat; box-shadow: 0 0 10px rgba(78,217,164,.5); }
.ger-erro { margin: 0; font: 600 13px/1.4 var(--fb); color: var(--destaque); text-align: center; }
/* A saída da tela de falha: o texto segue pequeno, e o toque tem os 52 do --alvo (UX/UI, rodada 2). */
.ger-erro a { display: flex; align-items: center; justify-content: center; min-height: var(--alvo); color: inherit; }
@media (min-width: 1080px) {
  /* O notebook (:624-625): os cartões 1,55 vezes maiores, se a altura da janela deixar. */
  .gerando { --ger-vao: 20px; --ger-k-max: 1.55px; }
  .gq-rot { bottom: -26px; font-size: 11px; }
}

/* O QR "Continuar no celular" é do notebook: no celular a pessoa já está no celular. */
.qr-cartao { display: none; }

/* O estúdio no notebook (estilo.css:628-665): trilho, peça no centro, legenda à direita. */
@media (min-width: 1080px) {
  .kit { display: grid; grid-template-columns: 290px 1fr 380px; height: 100dvh; }   /* :629 */
  .est-trilho { display: flex; flex-direction: column; gap: 10px; padding: 24px 18px 20px 26px; border-right: 1px solid var(--linha-fraca); min-height: 0; overflow: auto;
    background: linear-gradient(90deg, color-mix(in srgb, var(--fundo) 55%, transparent), color-mix(in srgb, var(--fundo) 20%, transparent)); }   /* :630, trocado: rgba(7,9,11,…) → --fundo */
  .est-trilho .marca { margin-bottom: 14px; }
  .et-tit { font: 740 19px/1.15 var(--fd); letter-spacing: -.02em; margin-top: 4px; }   /* :632 */
  .et-sub { font: 500 12.5px/1 var(--fb); color: var(--texto-2); margin-bottom: 8px; }
  .et-lista { display: flex; flex-direction: column; gap: 8px; }
  .et-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-align: left; border: 1px solid var(--linha-fraca); background: var(--caixa-fraca); transition: all .3s; }   /* :635 */
  .et-th { width: 52px; height: 64px; border-radius: 7px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); }
  .et-th img { object-fit: cover; border-radius: 5px; }
  .et-th .th-4x5 { width: 52px; height: 65px; }
  .et-th .th-9x16 { width: 36px; height: 64px; }
  .et-item b { display: block; font: 700 14.5px/1.1 var(--fd); }
  .et-item small { font: 500 11.5px/1.2 var(--fb); color: var(--texto-2); }
  .et-item:hover { background: var(--botao-fundo); }
  .et-item[aria-current="true"] { border-color: rgba(255,187,16,.6); background: var(--tint-ambar); box-shadow: 0 0 22px rgba(255,187,16,.15); }   /* :642 */
  .et-item[aria-current="true"] b { color: var(--destaque); }
  .est-trilho .selo-real { margin-top: 8px; white-space: normal; line-height: 1.3; align-self: flex-start; }
  .et-sem-copia { padding: 4px 10px; }
  .et-links { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }   /* :644 */
  .est-centro { height: auto; min-width: 0; min-height: 0; }
  .est-area { top: 92px; bottom: 206px; left: 24px; right: 24px; }   /* :649 */
  .est-topo { top: 22px; left: 24px; right: 24px; }
  .kit .so-cel { display: none; }
  .est-ajustes[popover] { top: 86px; left: calc(290px + 24px); right: calc(380px + 24px); max-height: none; flex-direction: row; align-items: flex-start; gap: 26px; padding: 12px 16px; transform-origin: top center; }   /* :653 */
  .aj-modelos { grid-template-columns: repeat(2, 62px); gap: 10px; }
  .aj-mod span:not(.aj-vazio) { font-size: 10.5px; }
  .aj-paletas, .aj-pecas { flex-direction: column; gap: 6px; }
  .aj-pal { min-height: 36px; min-width: 130px; }
  .aj-nota { align-self: center; max-width: 220px; }
  .est-base { background: none; padding: 14px 0 34px; }   /* :659, com o 34 do !important do :462, que vale no notebook também */
  .est-lado { display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 22px 6px; min-height: 0; overflow: auto; scrollbar-width: none; }   /* :660 */
  .lg-texto { min-height: 120px; max-height: 300px; overflow: auto; scrollbar-width: thin; }   /* :661 */
  .lg-ajustes[popover] { inset: auto 26px 24px auto; width: 352px; transform-origin: bottom right; }   /* sobre a coluna da legenda (380 px) */
  .lg-ajustes .aj-pal { min-width: 0; padding: 0 8px; }   /* o 130 px do "Modelo e paleta" jogava o "Sofisticado" para outra linha */
  .qr-cartao { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; margin-top: auto; }   /* :662 */
  .qr-cartao img { width: 96px; height: 96px; background: #fff; padding: 6px; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,187,16,.6), 0 0 24px rgba(255,187,16,.25); }   /* :663, o QR fica em fundo branco nos dois temas */
  .qr-cartao b { display: block; font: 740 16px/1.1 var(--fd); margin-bottom: 6px; }
  .qr-cartao span { font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
  .kit-toast { top: 26px; }
  .kit-pedido { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 24px 40px 0; }
  .kit-pedido .campo { max-width: 360px; }
}

/* ==================================================================== Studio · campos
 * O erro de um campo (rodada de campos, 05/11). NÃO EXISTE NO PROTÓTIPO, que não valida nada.
 * Só tokens do design system: o campo inválido ganha o contorno âmbar (a cor de atenção da marca;
 * o vermelho não é da marca) e a frase vem embaixo, no --destaque (âmbar no escuro, navy no
 * claro, onde âmbar não é texto). A cor nunca está sozinha: a frase diz o que fazer.
 * O parágrafo vazio some (não ocupa o vão do flex nem uma célula do grid). */
.campo:has(> [aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--borda-ambar), 0 0 18px var(--tint-ambar); }
.campo:has(> [aria-invalid="true"]):focus-within { box-shadow: 0 0 0 1.5px var(--foco), 0 0 22px rgba(255,187,16,.25); }
.campo-erro { margin: -2px 2px 0; font: 600 12px/1.35 var(--fb); color: var(--destaque); }
.campo-erro:empty { display: none; }
.linha2 > .campo-erro { grid-column: 1 / -1; }
@media (min-width: 1080px) {
  /* No notebook a ficha é um grid de 4 colunas: os campos ficam nas linhas deles e o erro vem logo
     abaixo da linha, na largura toda. No celular (uma coluna), o erro fica embaixo do próprio campo. */
  .campos > .campo-erro { grid-column: 1 / -1; }
  .c-tit, .c-valor, .linha2 > .campo { order: -1; }
  .c-fin, #erro-finalidade { order: -2; }
}

/* ======================================================================= Studio · Fase 1 · campanhas
 * Minhas campanhas (F1-14), a guarda das fotos e o sininho (F1-15). A lista é a do protótipo
 * (estilo.css:471-493, 667-675), que o design system já traz (.lista-camp, .camp, .camp-acoes); aqui
 * fica só o que o sistema precisa a mais. Só tokens; nada de cor solta.
 */
.camp.novo-item { animation: entraCamp .7s var(--mola); }                                     /* :474 */
@keyframes entraCamp { from { opacity: 0; transform: translateY(-20px) scale(.92); box-shadow: 0 0 0 2px var(--ambar), 0 0 40px rgba(255,187,16,.5); } } /* :475 */
/* A pilha é o link do cartão (o protótipo abre o kit ao tocar no cartão, app.js:782). */
a.camp-pilha { display: block; color: inherit; border-radius: 9px; }
a.camp-pilha:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
/* NÃO EXISTE NO PROTÓTIPO: a campanha sem foto nenhuma (a guarda tirou as fotos). */
.camp-pilha.vazia { display: flex; align-items: center; justify-content: center; width: 78px; aspect-ratio: 4 / 5; height: auto; margin-top: 4px; border: 1px dashed var(--linha); font-size: 26px; color: var(--rotulo); }
/* O "Editar" é link (vai para a ficha): o mesmo botão do .camp-acoes (componentes.css). */
.camp-acoes form { display: contents; }
.camp-acoes > a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: var(--r-botao); font: 650 12px/1 var(--fb); color: inherit; text-decoration: none; background: var(--botao-fundo); border: 1px solid var(--linha); transition: background .2s, border-color .2s; }
.camp-acoes > a::after { content: ''; position: absolute; inset: -10px -3px; }
.camp-acoes > a .ic { color: var(--destaque); font-size: 14px; }
.camp-acoes > a:hover { background: var(--botao-fundo-hover); border-color: var(--borda-ambar); }
/* O prazo das fotos (F1-15): o chip do protótipo; a 7 dias ou menos, o tom âmbar do .chip.novo, sem o fundo cheio. */
.chip.prazo .ic { font-size: 11px; }
.chip.prazo.curto { color: var(--destaque); border-color: var(--borda-ambar); background: var(--tint-ambar); }
.camp-pecas.sem-fotos { color: var(--destaque); font-weight: 650; }
/* O aviso do "Duplicar" (app.js:777): o toast do protótipo (estilo.css:551), no topo, que some sozinho. */
.camp-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 16px); z-index: 50; width: max-content; max-width: calc(100% - 28px); margin: 0; white-space: normal; transform: translateX(-50%); pointer-events: none; animation: someToast .4s ease 3.6s forwards; }
@keyframes someToast { to { opacity: 0; visibility: hidden; transform: translate(-50%, -16px); } }

/* NÃO EXISTE NO PROTÓTIPO: "Fotos expiradas" na tela das fotos (F1-15), com o cartão de vidro e o chip "em breve". */
.expiradas { margin: 14px var(--gut) 0; padding: 14px 16px; border-radius: var(--r-cartao); display: flex; flex-direction: column; gap: 8px; }
.expiradas-t { display: inline-flex; align-items: center; gap: 8px; font: 720 15px/1.2 var(--fd); letter-spacing: -.01em; color: var(--destaque); }
.expiradas p { margin: 0; font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
.expiradas-vista .chip { margin-right: 6px; vertical-align: 1px; }

/* NÃO EXISTE NO PROTÓTIPO: o sininho (F1-15). O botão de ícone do topo, ao lado do avatar, e a
   caixa do menu da conta. No celular a marca fica no meio do espaço que sobra (no centro da tela ela
   encostaria no sino); no notebook, que tem espaço, ela volta ao centro da tela. O .sininho é só quem o HTMX troca:
   para o layout, o botão continua filho do topo. */
.sininho { display: contents; }
.topo:has(.sino) .marca { margin: 0 auto; }
.sino { margin-right: 12px; }   /* 12 = o que as áreas de 52 do sino e do avatar passam dos 40: uma não cobre a outra */
.sino .ic { color: var(--destaque); }
.sino.apagado .ic { color: var(--texto-3); }
.sino-ponto { position: absolute; right: -2px; bottom: -2px; }   /* um Reel a caminho: embaixo, para não brigar com o número */
.aviso-nada { margin: 0; padding: 4px; font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
.a-caminho { align-items: flex-start; padding: 10px; }
.a-caminho .ponto { margin: 5px 4px 0; }
/* Na barra do Modo câmera, que já é de vidro: o botão fica liso, como o voltar, e o menu desce da barra. */
.est-topo .sino { margin: 0; background: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.est-topo .menu-avisos[popover] { top: calc(env(safe-area-inset-top) + 72px); right: 12px; }
.sino-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font: 750 10.5px/1 var(--fb); color: var(--sobre-ambar); background: var(--ambar); box-shadow: 0 0 10px rgba(255,187,16,.45); }
.menu-avisos[popover] { width: 320px; max-width: calc(100vw - 2 * var(--gut)); }
.menu-avisos .rot { padding: 2px 4px 4px; }
.aviso { align-items: flex-start; padding: 10px; }
.aviso .ic { margin-top: 1px; }
.aviso-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aviso-txt b { font: 650 13px/1.3 var(--fb); color: var(--texto); }
.lnk .aviso-txt small { margin-left: 0; font: 500 11.5px/1.35 var(--fb); color: var(--texto-2); }
@media (min-width: 1080px) {
  .topo:has(.sino) .marca { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .sino { margin-left: auto; }
  .est-topo .menu-avisos[popover] { top: 84px; right: calc(380px + 24px); }
  .expiradas { max-width: var(--largura); width: auto; margin: 18px auto 0; padding: 16px 20px; box-sizing: border-box; }
  .camp-pilha.vazia { width: 112px; }
}

/* ======================================================================= Studio · Fase 1 · painel
 * O painel de uso (F1-16). NÃO EXISTE NO PROTÓTIPO: só peças e tokens do design system. O cartão de
 * vidro e o rótulo são os da Minha conta; o número grande é o contador da chegada das fotos
 * (.chegada-cab .cont, estilo.css:195); a tabela não existe no design system e usa só tokens. */
.painel { padding: 16px 14px 28px; display: flex; flex-direction: column; gap: 12px; }
.painel-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pn-num { gap: 8px; }
.pn-v { font: 780 34px/1 var(--fd); letter-spacing: -.04em; color: var(--destaque); font-variant-numeric: tabular-nums; text-shadow: var(--brilho-texto); }
.pn-num .nota { font-size: 11.5px; }
.pn-vazio { text-align: center; }
.cartao h2.rot { margin: 0; }
.tabela { width: 100%; border-collapse: collapse; font: 500 13px/1.3 var(--fb); font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 10px 6px; border-bottom: 1px solid var(--linha-fraca); text-align: right; vertical-align: top; }
.tabela tr > :first-child { text-align: left; padding-left: 0; }
.tabela tr > :last-child { padding-right: 0; }
.tabela thead th { font: 650 10px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--rotulo); padding-top: 4px; }
.tabela tbody th { font: 650 13.5px/1.25 var(--fd); letter-spacing: -.01em; color: var(--texto); }
.tabela tbody th small { display: block; margin-top: 4px; font: 500 11.5px/1.3 var(--fb); letter-spacing: 0; color: var(--texto-2); }
.tabela tbody th small:empty { display: none; }
.tabela tbody td { font-weight: 650; color: var(--texto); }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.pn-rodape { padding: 0 4px; }
/* As peças antes de gerar (F1-09, Q39, Q44). NÃO EXISTE NO PROTÓTIPO: as opções marcáveis do "Modelo e paleta" (.aj-pal, .aj-marca), num cartão de vidro. */
.pecas-antes { margin: 14px var(--gut) 0; padding: 14px; border: 0; border-radius: var(--r-cartao); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pecas-antes .aj-rot { float: left; width: 100%; margin-bottom: 0; }
.pecas-antes .aj-pecas { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.pecas-antes .aj-pal { min-width: 0; min-height: var(--alvo); }
@media (min-width: 1080px) {
  .pecas-antes { max-width: var(--largura); margin-left: auto; margin-right: auto; width: calc(100% - 80px); }
  .pecas-antes .aj-pecas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A página de "não encontrado". NÃO EXISTE NO PROTÓTIPO: o cabeçalho de tela e a pílula, no centro. */
.nao-achado { flex: 1; min-height: 60dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px var(--gut); text-align: center; }
/* O app instalável (F1-02), na Minha conta. Quem já abriu instalado não precisa do cartão. */
.instalar-gaveta summary { display: flex; align-items: center; min-height: var(--alvo); padding: 0 10px; border-radius: 10px; font: 600 14px/1.2 var(--fb); color: var(--texto-3); cursor: pointer; }
.instalar-gaveta summary:hover { background: var(--botao-fundo); }
.instalar-caminhos { margin: 4px 0 0; padding: 0 10px; display: flex; flex-direction: column; gap: 10px; }
.instalar-caminho dt { font: 650 13px/1.3 var(--fb); color: var(--texto); }
.instalar-caminho dd { margin: 2px 0 0; font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
@media (display-mode: standalone) { .instalar { display: none; } }
/* Quem saiu (Q13): o nome, o link do imóvel e a grade de miniaturas para ver e baixar. */
.qs-nome { margin: 0; font: 650 16px/1.25 var(--fd); letter-spacing: -.01em; color: var(--texto); }
.qs-nome small { display: block; margin-top: 4px; font: 500 12px/1.3 var(--fb); letter-spacing: 0; color: var(--texto-2); overflow-wrap: anywhere; }
.qs-link { color: var(--destaque); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--alvo); }
/* Na tabela de quem saiu, o link fica na altura da primeira linha, junto dos números de fotos e peças (UX, 10/11); o toque segue em --alvo. */
.qs-pessoa .qs-link { align-items: flex-start; }
.qs-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.qs-item { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qs-item img, .qs-item video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-campo); background: var(--botao-fundo); }
[data-arquivos-pecas] .qs-item img { object-fit: contain; }
.qs-baixar { display: flex; align-items: center; gap: 6px; min-height: var(--alvo); font: 600 12.5px/1.2 var(--fb); color: var(--texto-3); text-decoration: none; }
.qs-baixar .ic { flex: none; color: var(--destaque); font-size: 15px; }
@media (min-width: 1080px) {
  /* No notebook: os quatro números numa linha e as tabelas em duas colunas, na largura do .lista-camp. */
  .painel { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 26px 40px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .painel-numeros, .pn-vazio, .pn-imoveis, .pn-ia, .pn-cota, .pn-rodape, .pn-quem-saiu, .qs-pessoa { grid-column: 1 / -1; }
  .painel-numeros { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .painel .cartao { padding: 20px; }
  .painel .cartao.lnks { padding: 6px; }
  .pn-v { font-size: 44px; }
}

/* ==================================================================== Studio · Fase 1 · artes
 * F1-07, F1-08, F1-17 (faixa 3, subagente B). NÃO EXISTE NO PROTÓTIPO, que só tem 3 modelos e 2
 * paletas (celular-08b, 08c): os 10 modelos em fila que desliza, o formato, as 4 paletas, o selo, o
 * preço, a chamada, as fotos do carrossel, o duplicar, a tela de enquadrar e o catálogo do
 * administrador. Tudo com as peças e os tokens do design system (.aj-mod, .aj-pal, .aj-marca,
 * .campo, .grade-fotos). Decisão do Dev, a validar. */
.est-ajustes .aj-largo { min-width: 0; }
/* A fila rola, e quem rola corta o que passa da caixa dela. O contorno e o brilho da miniatura marcada (2 px mais
   18 px de sombra, e ela sobe 2 px) precisam de 20 px em volta: a folga fica dentro da fila, que puxa a mesma
   medida com margem negativa até a borda do painel, e o encaixe da rolagem respeita a folga (F1-21). */
.aj-dez { --folga: 20px; display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 30%; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--folga); padding: 22px var(--folga) 8px; margin: -18px calc(-1 * var(--aj-margem)) 0; scrollbar-width: thin; }
.aj-dez .aj-mod { scroll-snap-align: start; }
.aj-mod img.aj-antiga { position: absolute; top: 0; left: 0; z-index: 1; }   /* a miniatura de antes, até a nova chegar (ts/kit.ts) */
.aj-mod.f-1x1 img, .aj-mod.f-1x1 .aj-vazio { aspect-ratio: 1; }
.aj-mod.f-9x16 img, .aj-mod.f-9x16 .aj-vazio { aspect-ratio: 9 / 16; }
.aj-dica { margin: 0; font: 500 12px/1.4 var(--fb); color: var(--texto-2); }
.aj-acoes { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.aj-formatos { display: flex; gap: 8px; }
.aj-qd { display: block; width: 14px; height: 17px; border: 1.5px solid currentColor; border-radius: 3px; flex: none; }
.aj-qd.q-1x1 { height: 14px; }
.aj-quatro { display: grid; grid-template-columns: 1fr 1fr; }
.sw-cinza { background: var(--cinza); }
.sw-amarela { background: var(--ambar); }
.sw-amarela::after { background: var(--navy) !important; }   /* na Amarela, o acento é o navy */
.aj-selos { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-selo { flex: 0 1 auto; }
.aj-campo { margin-top: 4px; }
.aj-campo[hidden] { display: none; }
.aj-fotos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.aj-foto { position: relative; aspect-ratio: 4 / 3; min-height: var(--alvo); border-radius: var(--r-miniatura); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linha); }
.aj-foto img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .45; transition: opacity .2s; }
.aj-foto .aj-marca { position: absolute; top: 4px; right: 4px; background: rgba(7,9,11,.72); }
.aj-foto:has(input:checked) img { opacity: 1; }
.aj-foto:has(input:checked) { box-shadow: 0 0 0 2px var(--ambar); }
.aj-foto:has(input:checked) .aj-marca { background: var(--ambar); border-color: var(--ambar); color: var(--sobre-ambar); }
.aj-foto:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.aj-foto.capa { cursor: default; box-shadow: 0 0 0 2px var(--ambar); }
.aj-foto.capa img { opacity: 1; }
.aj-foto.capa small { position: absolute; left: 4px; bottom: 4px; font: 800 8px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; padding: 3px 4px; border-radius: 3px; background: var(--ambar); color: var(--sobre-ambar); }
.quadro.q-1x1 { width: min(100cqw, 100cqh); aspect-ratio: 1; }
.et-th .th-1x1 { width: 58px; height: 58px; }
@media (min-width: 1080px) {
  .est-ajustes[popover] { --aj-margem: 16px; flex-wrap: wrap; max-height: calc(100dvh - 200px); overflow: auto; }
  .est-ajustes .aj-largo { flex: 1 1 100%; }
  .aj-dez { grid-auto-columns: 92px; }
  .aj-quatro { grid-template-columns: 1fr; }
  .aj-selos { flex-direction: column; flex-wrap: nowrap; }
  .aj-fotos { grid-template-columns: repeat(8, 1fr); }
}

/* A grade arrastável (F1-04, F1-17), da prova scripts/editor-dotnet/wwwroot/css/editor.css. */
.grade-fotos[data-ordenavel] .fm { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.grade-fotos[data-ordenavel] .fm img { pointer-events: none; }
.grade-fotos .fm:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fm.segurando { animation: f3b-segura .26s ease-out forwards; }
@keyframes f3b-segura { to { transform: scale(.94); box-shadow: 0 0 0 3px var(--borda-ambar); } }
.fm.vaga { opacity: .28; outline: 2px dashed var(--ambar); outline-offset: -2px; }
.fm.vaga img { filter: grayscale(1); }
.fm.pego { box-shadow: 0 0 0 3px var(--ambar), var(--sombra); transform: scale(1.04); z-index: 1; }
.arrastando .fm { cursor: grabbing; }
.fm.fantasma { position: fixed; top: 0; left: 0; z-index: 50; margin: 0; pointer-events: none; cursor: grabbing; outline: 2px solid var(--ambar); outline-offset: -2px; box-shadow: var(--sombra-peca), 0 0 0 6px var(--tint-ambar); will-change: transform; animation: none; }
@media (prefers-reduced-motion: reduce) { .fm.segurando { animation: none; outline: 2px solid var(--ambar); } }

/* A tela de enquadrar. */
.enq-bloco { display: flex; flex-direction: column; gap: 10px; padding: 18px var(--gut) 0; }
@media (min-width: 1080px) { .enq-bloco { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 22px 40px 0; } }
.enq-tit { margin: 0; font: 650 11px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }   /* --rotulo dava 4,25 no claro (UX/UI, bloqueante 3) */
.enq-grade .fm { cursor: default; }
.enq-grade .fm button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.enq-grade .fm button::after { content: ""; position: absolute; inset: 0; }
.enq-grade .fm button:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.enq-grade .fm.capa { box-shadow: 0 0 0 2px var(--ambar); }
.enq-nota { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
.enq-fotos { display: flex; gap: 8px; }
.enq-foto { position: relative; display: flex; flex-direction: column; gap: 4px; width: 92px; min-height: 52px; font: 600 11px/1.2 var(--fb); color: var(--texto-2); text-decoration: none; }
.enq-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-miniatura); box-shadow: 0 0 0 1px var(--linha); }
.enq-foto[aria-current="true"] { color: var(--texto); }
.enq-foto[aria-current="true"] img { box-shadow: 0 0 0 2px var(--ambar); }
.enq-form { display: flex; flex-direction: column; gap: 12px; }
.enq-quadro { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--navy); box-shadow: var(--sombra-peca), 0 0 0 1px var(--linha), 0 0 40px var(--tint-ambar); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.enq-quadro.arrastando { cursor: grabbing; }
.enq-quadro img { position: absolute; top: 0; left: 0; max-width: none; width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; pointer-events: none; }
.enq-controles { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 420px; }
/* O controle toca em 52 de altura (o trilho não muda): sem o vão e o recuo de baixo da caixa, ela não cresce à toa. */
.enq-controles .campo { gap: 0; padding-bottom: 0; }
.enq-controles input[type="range"] { width: 100%; height: var(--alvo); margin: 0; accent-color: var(--ambar); }

/* O catálogo do administrador. */
.cat-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.cat-itens { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-item { flex: 0 1 auto; min-height: var(--alvo) !important; }
.cat-item::after { inset: 0; }
.cat-item:has(input:disabled) { opacity: .7; cursor: default; }

/* ======================================================================= Studio · Fase 1 · ajustes de 05/11
 * O que o Luciano pediu depois de olhar a Fase 1 no localhost. */

/* O texto que muda entre o celular e o notebook, no mesmo corte de 1080 px das outras telas: no notebook o
   navegador ignora o capture e abre as pastas, então o botão não promete câmera. */
.so-note { display: none; }
@media (min-width: 1080px) {
  .so-cel { display: none; }
  .so-note { display: inline; }
}
.mais-fotos + .mais-fotos { margin-top: 8px; }

/* O aviso das fotos que não entraram na mesma coluna das opções e da grade: no notebook, a caixa tinha a
   largura cheia (1240) e o conteúdo, 1240 menos os 40 + 40 do recuo. O nome de arquivo comprido
   ("{376C9AEB-…}.png") quebra em qualquer letra, em vez de empurrar a caixa para fora. */
.aviso-envio li { overflow-wrap: anywhere; }
@media (min-width: 1080px) {
  .aviso-envio, .dica { max-width: none; width: min(calc(100% - 80px), calc(var(--largura) - 80px)); }
}

/* A peça do kit é um botão que amplia (NÃO EXISTE NO PROTÓTIPO, 05/11). Por fora, nada muda: o botão
   ocupa o quadro (ou a lâmina) e a imagem o enche, como antes. */
.q-ampliar { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.q-trilho .q-ampliar { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.q-ampliar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.q-ampliar:focus-visible { outline: 2px solid var(--foco); outline-offset: -3px; }

/* A peça ampliada: o <dialog> nativo, escuro, com a imagem no maior tamanho que couber. No celular é a
   tela cheia; no notebook, o mesmo fundo escuro com mais respiro em volta. As lâminas deslizam com o dedo
   (scroll-snap) e com as setas (.q-seta do kit); o × é o .btn-ic de vidro do topo. */
.ampliar { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(4,6,8,.94); color: #F0F0F0; overflow: hidden; }
.ampliar::backdrop { background: rgba(0,0,0,.6); }
.amp-trilho { position: absolute; inset: calc(env(safe-area-inset-top) + 68px) 0 calc(env(safe-area-inset-bottom) + 24px); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.amp-trilho::-webkit-scrollbar { display: none; }
.amp-trilho img { flex: 0 0 100%; width: 100%; height: 100%; padding: 0 8px; object-fit: contain; scroll-snap-align: start; scroll-snap-stop: always; user-select: none; -webkit-user-drag: none; }
.amp-fechar { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: 14px; color: #F0F0F0; }
/* O fundo do diálogo é escuro nos dois temas: o × usa o vidro escuro da .q-seta, e não o vidro claro do tema. */
.ampliar .amp-fechar { background: rgba(7,9,11,.55); border: 1px solid rgba(255,255,255,.22); }
.amp-pos { position: absolute; top: calc(env(safe-area-inset-top) + 26px); left: 18px; font: 650 12px/1 var(--fb); letter-spacing: .1em; color: rgba(240,240,240,.8); }
.amp-seta { z-index: 1; }
.amp-seta[hidden] { display: none; }
.amp-seta:disabled { opacity: .35; }
@media (min-width: 1080px) {
  .amp-trilho { inset: 72px 72px 40px; }
  .amp-trilho img { padding: 0 24px; }
  .amp-fechar { top: 20px; right: 24px; }
  .amp-pos { top: 34px; left: 32px; }
  .amp-seta.e { left: 20px; }
  .amp-seta.d { right: 20px; }
}

/* ======================================================================= Studio · Fase 1 · ajustes 2 de 05/11
 * A segunda leva do que o Luciano pediu depois de olhar a Fase 1 no localhost. */

/* O título do grupo no catálogo ("MODELOS", "SELOS") encostava nas opções: o <legend> não recebe o vão do
   flex do cartão. Ganha o mesmo respiro do rótulo da Minha conta (.tema-campo legend, 12 px), que é o vão
   entre o .rot e o conteúdo no .cartao. */
.cat-grupo > legend { padding: 0; margin-bottom: 12px; }

/* NÃO EXISTE NO PROTÓTIPO: a lixeira das campanhas (05/11). Só peças e tokens do design system: o botão do
   .camp-acoes, o toast, o .lnk de lista no cartão de vidro e a caixa do menu da conta para a confirmação. */
/* O "Excluir" do cartão mora no menu "⋯" desde as melhorias (M-04), com o vermelho do .perigo. */
/* O aviso do "Excluir" leva o "Desfazer": recebe o toque, espera 10 s em vez de 3,6 s e para de sumir
   enquanto o dedo, o mouse ou o foco estão nele. */
.camp-toast.com-acao { pointer-events: auto; animation-delay: 10s; gap: 10px; padding-right: 8px; }
.camp-toast.com-acao:hover, .camp-toast.com-acao:focus-within { animation-play-state: paused; }
.camp-toast.com-acao form { margin: 0; }
.toast-acao { position: relative; min-height: 32px; padding: 0 10px; border-radius: var(--r-botao); font: 700 13px/1 var(--fb); color: var(--destaque); background: var(--tint-ambar); border: 1px solid var(--borda-ambar); }
.toast-acao::after { content: ''; position: absolute; inset: -10px -4px; }
.toast-acao:hover { background: var(--botao-fundo-hover); }
/* A entrada da Lixeira, embaixo da lista, só quando há alguma campanha lá. */
.lixeira-entrada { border-radius: var(--r-cartao); padding: 0 16px; }
.camp-vazia { margin: 0; text-align: center; }
@media (min-width: 1080px) {
  .lista-camp > .lixeira-entrada, .lista-camp > .camp-vazia, .lista-camp > .lixeira-topo { grid-column: 1 / -1; }
  .lixeira-entrada { justify-self: start; width: auto; min-width: 320px; }
}
/* A Lixeira: o "Esvaziar lixeira" no topo, à direita, no mesmo desenho dos botões do cartão. */
.lixeira-topo { display: flex; justify-content: flex-end; }
.lixeira-esvaziar { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--r-botao); font: 650 13px/1 var(--fb); background: var(--botao-fundo); border: 1px solid var(--linha); }
.lixeira-esvaziar::after { content: ''; position: absolute; inset: -6px 0; }
.lixeira-esvaziar .ic { color: var(--destaque); font-size: 15px; }
.lixeira-esvaziar:hover { background: var(--botao-fundo-hover); border-color: var(--borda-ambar); }
/* "Restaurar" e "Excluir agora" numa linha só no celular (o texto não quebra; se não couber, o segundo desce). */
.lixeira .camp-acoes { flex-wrap: wrap; row-gap: 20px; }   /* 20 = as duas áreas de toque (10 + 10), sem o "Excluir agora" cobrir o "Restaurar" */
.lixeira .camp-acoes button { white-space: nowrap; padding: 0 9px; gap: 5px; }
.lixeira .camp-pilha { pointer-events: none; }
.lixeira .camp-pilha img { filter: grayscale(.6) brightness(.7); }
.lixeira .camp-pilha img:nth-child(3) { filter: grayscale(.6); }
.lixeira .camp:first-child .camp-pilha img:nth-child(3) { box-shadow: var(--sombra-miniatura), 0 0 0 1px rgba(255,255,255,.12); }
/* A confirmação: o <dialog> nativo com a caixa do menu da conta (vidro forte, a sombra do painel). */
.confirmar { width: min(calc(100% - 28px), 420px); max-width: none; margin: auto; padding: 20px; border-radius: var(--r-cartao); color: var(--texto); --vf: var(--vidro-forte); box-shadow: var(--sombra-painel); }
.confirmar[open] { display: flex; flex-direction: column; gap: 12px; animation: abreAj .45s var(--mola); }
.confirmar::backdrop { background: rgba(4,6,8,.62); }
.conf-t { margin: 0; font: 720 18px/1.2 var(--fd); letter-spacing: -.02em; text-wrap: balance; }
.conf-d { margin: 0; font: 500 13px/1.45 var(--fb); color: var(--texto-2); }
.conf-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.conf-acoes form { margin: 0; }
.conf-nao, .conf-sim { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 16px; border-radius: var(--r-botao); font: 650 13.5px/1 var(--fb); }
.conf-nao { background: var(--botao-fundo); border: 1px solid var(--linha); }
.conf-nao:hover { background: var(--botao-fundo-hover); }
.conf-sim { background: var(--ambar); border: 1px solid var(--ambar); color: var(--sobre-ambar); }
.conf-sim .ic { font-size: 15px; }

/* ======================================================================= Studio · Fase 1 · rodada 2 da UX/UI
 * O que a UX/UI pediu em docs/revisoes/2026-11-05-ux-ui-fase-1.md. */

/* Os chips da rota (estilo.css:199-202 e :599-600; capturas celular-03b e notebook-03b). Só os cômodos que
   a campanha tem, todos acesos, como no fim da chegada no protótipo. trocado: var(--y) e --navy → os tokens. */
.rota { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rota li { display: contents; }
.rota span { font: 600 10.5px/1 var(--fb); padding: 6px 8px; border-radius: 5px; color: var(--sobre-ambar); background: var(--ambar); border: 1px solid var(--ambar); box-shadow: 0 0 12px rgba(255,187,16,.5); }
.rota i { color: var(--rotulo); font-size: 10px; }
@media (min-width: 1080px) {
  .rota { grid-column: 1; flex-direction: column; align-items: flex-start; }
  .rota i { display: none; }
}

/* A linha que conta que dá para arrastar (UX/UI, ressalva 9). NÃO EXISTE NO PROTÓTIPO. */
.grade-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.grade-dica { margin: 0; font: 500 12.5px/1.4 var(--fb); color: var(--texto-2); }
@media (min-width: 1080px) { .grade-col { grid-column: 2; grid-row: 1 / span 2; } }   /* o lugar da .grade-fotos (estilo.css:601) */

/* O <select> ocupa a caixa do campo inteira, com o rótulo por cima sem pegar o toque: tocar no <label> só
   dá o foco, e a lista não abre (UX/UI, bloqueante 2). */
.campo:has(> select) { padding: 0; min-height: var(--alvo); }
.campo:has(> select) > .c-rot { position: absolute; top: 9px; left: 11px; pointer-events: none; }
.campo select { flex: 1; padding: 24px 11px 9px; border-radius: inherit; cursor: pointer; }
@media (min-width: 1080px) {
  .ficha-corpo .campo:has(> select) { padding: 0; }
  .ficha-corpo .campo:has(> select) > .c-rot { top: 14px; left: 16px; }
  .ficha-corpo .campo select { padding: 29px 16px 14px; }
}

/* A pílula desce até o fim da tela, como o .rodape-cta: com poucas campanhas ela ficava no meio, e o véu
   acabava numa linha reta (UX/UI, ressalva 1). */
.pilula-fixa { margin-top: auto; }

/* O aviso do kit sobe para a camada do topo quando aparece: o painel "Modelo e paleta" é popover, e um
   aviso comum ficaria atrás dele (celular-08c). Fechado, continua no lugar (.toast ganha do display: none
   do popover), invisível, e segue sendo a região viva do leitor de tela. */
.kit-toast[popover] { right: auto; bottom: auto; width: max-content; height: auto; margin: 0; overflow: visible; color: var(--texto); }

/* Studio · Fase 2 · Reel */
/* O quadro do Reel tem o tamanho do Stories, que também é 9:16 (celular-08a). O miolo é trocado pelo servidor, fora da banda. */
.quadro.q-reel { width: min(100cqw, calc(100cqh * 9 / 16)); aspect-ratio: 9 / 16; }
.reel-corpo { position: absolute; inset: 0; }
.reel-corpo video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.amp-trilho video { max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; margin: auto; background: #000; }
/* O aviso que não é sucesso sai sem o visto (UX/UI da Fase 2, item 5). */
.toast.sem-visto .ic { display: none; }
.r-trilho button span:empty { display: none; }
/* Tocar no vídeo pausa: o botão cobre o quadro, e o play só aparece parado (.c-pausa do protótipo, app.js:628). */
.q-tocar { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; background: none; border: 0; cursor: pointer; }
.q-pausa { display: none; width: 76px; height: 76px; border-radius: 50%; place-items: center; font-size: 32px; color: #FFFFFF; background: rgba(7,9,11,.55); }
.q-tocar.parado .q-pausa { display: grid; }
.q-tocar:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; }
/* A peça ampliada: 34 px à vista e 52 de toque, como as setas do carrossel (.q-seta). */
.q-expandir { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #FFFFFF; background: rgba(7,9,11,.5); border: 1px solid rgba(255,255,255,.2); }
.q-expandir::after { content: ""; position: absolute; inset: calc((32px - var(--alvo)) / 2); }
/* NÃO EXISTE NO PROTÓTIPO: o Reel a caminho, sobre a capa apagada. */
.reel-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.45); transform: scale(1.1); }
.reel-espera { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #FFFFFF; }
.reel-espera .olho { color: var(--ambar); }
.reel-tit { font: 760 20px/1.15 var(--fd); }
.reel-sub { font: 500 12.5px/1.35 var(--fb); color: #D6DBE3; }
.reel-espera .ger-barra { width: 100%; }
.reel-acao { width: auto; justify-content: center; min-height: var(--alvo); padding: 0 12px; color: #FFFFFF; }
.reel-acao .ic { color: var(--ambar); }
.reel-acao:hover { color: var(--ambar); }
/* No celular, o Reel vai de ponta a ponta, por baixo da régua (celular-08a; app.js:590). No tablet e no notebook, fica na moldura. */
/* Só em tela alta: na baixa (o iPhone com a barra do Safari, 390×664), a base cobria 45% do vídeo e o título, e o Reel fica na
   moldura do Stories (UX/UI, fechamento da Fase 2). */
@media (max-width: 767px) and (max-aspect-ratio: 10/21) {
  .est-area:has(> .q-reel:not([hidden])) { left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top) + 76px); place-items: start center; }
  .quadro.q-reel { width: 100%; border-radius: 0; box-shadow: none; }
  /* Com o vídeo de ponta a ponta, o que fica atrás da régua é o vídeo, e não o tema: o véu do tema é fraco na altura do texto, e
     a régua não lia (UX/UI da Fase 2, bloqueante). Aqui o véu já está forte onde o texto começa, e é o mesmo nos dois temas: o
     do escuro, que é o do protótipo (estilo.css:117), com os tokens do escuro para o que fica por cima dele. */
  .est-centro:has(.q-reel:not([hidden])) .est-base {
    --texto: #F0F0F0; --texto-2: #A9B1BE; --texto-3: #C9CED6; --destaque: #FFBB10; --foco: #FFBB10; --fundo: #07090B;
    --vidro: rgba(18,34,43,.55); --vidro-borda: linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 50%, rgba(255,187,16,.3));
    --brilho-texto: 0 0 22px rgba(255,187,16,.45);
    padding-top: 52px; color: var(--texto);
    background: linear-gradient(180deg, rgba(7,9,11,0) 26px, rgba(7,9,11,.82) 52px, #07090B 130px);
  }
}

/* ================= MELHORIAS DE 10/11 (docs/prototipo/melhorias/css/melhorias.css, copiado sem mexer) =================
 * Minhas campanhas: os números do mês (M-06), a busca e o filtro (M-03), um botão principal e o menu "⋯" (M-04) e o
 * chip dos cliques (M-05). Vem no fim, como o melhorias.css vem depois do studio.css no protótipo. */
/* Meus números: o que o corretor fez no mês e quantos cliques os links dele tiveram. */
.meus-numeros { margin: 14px 14px 0; padding: 14px 16px; border-radius: var(--r-cartao); display: flex; flex-direction: column; gap: 12px; }
.mn-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mn-linha span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mn-linha b { font: 780 28px/1 var(--fd); letter-spacing: -.04em; color: var(--destaque); font-variant-numeric: tabular-nums; text-shadow: var(--brilho-texto); }
.mn-linha small { font: 500 11.5px/1.25 var(--fb); color: var(--texto-2); }

/* Busca e filtro. O campo é o .busca do Novo imóvel, com letra de texto. */
.camp-busca { margin: 12px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.camp-busca .busca { animation: none; }
.camp-busca .busca input { font: 600 15px/1 var(--fb); letter-spacing: 0; }
.camp-busca .busca input::-webkit-search-cancel-button { filter: grayscale(1) brightness(2); }
.camp-filtros { display: flex; gap: 6px; }
.camp-filtros .aj-pal { flex: 1; justify-content: center; min-height: 38px; padding: 0 10px; gap: 6px; }
.camp-filtros .aj-pal::after { inset: calc((38px - var(--alvo)) / 2) 0; }
.camp-filtros b { font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.camp-nada { margin: 0; text-align: center; }
/* O cartão: um botão principal e o "⋯" com o resto. */
.camp-acoes > a.camp-abrir { height: 36px; padding: 0 14px; background: var(--ambar); border-color: var(--ambar); color: var(--sobre-ambar); font-weight: 700; box-shadow: 0 0 16px rgba(255,187,16,.35); }
.camp-acoes > a.camp-abrir:hover { background: var(--ambar-medio); border-color: var(--ambar-medio); }
.camp-acoes > a.camp-abrir .ic { color: inherit; }
.camp-acoes > a.camp-abrir::after { inset: -8px -3px; }
.camp-acoes button.camp-mais { width: 36px; height: 36px; padding: 0; justify-content: center; margin-left: auto; }
.camp-acoes button.camp-mais::after { inset: -8px; }
.camp-acoes button.camp-mais .ic { color: var(--texto-3); font-size: 18px; }
.menu-conta.menu-camp[popover] { width: 232px; top: var(--menu-topo, 60px); left: var(--menu-esq, auto); right: auto; }
/* O menu mora dentro do .camp-acoes: os botões dele são links de lista (.lnk), não os botões do cartão. */
.camp-acoes .menu-camp button.lnk { height: auto; min-height: var(--alvo); padding: 0 10px; gap: 10px; border: 0; border-radius: 10px; background: none; font: 600 14px/1 var(--fb); }
.camp-acoes .menu-camp button.lnk:hover { background: var(--botao-fundo); }
.camp-acoes .menu-camp button.lnk::after { content: none; }
.camp-acoes .menu-camp button.lnk .ic { font-size: 16px; }
.menu-camp .lnk.perigo .ic { color: var(--rec); }
.chip.cliques .ic { font-size: 11px; color: var(--destaque); }
.chip.crm { color: var(--destaque); border-color: var(--borda-ambar); background: var(--tint-ambar); }
.chip.crm .ic { font-size: 11px; }
@media (min-width: 1080px) {
  .meus-numeros, .camp-busca { max-width: calc(var(--largura) - 80px); width: calc(100% - 80px); margin-left: auto; margin-right: auto; box-sizing: border-box; }   /* a mesma coluna da .lista-camp */
  .meus-numeros { margin-top: 22px; flex-direction: row; align-items: center; gap: 40px; padding: 18px 22px; }
  .mn-linha { flex: 1; gap: 28px; }
  .mn-linha span { flex-direction: row; align-items: baseline; gap: 10px; }
  .mn-linha b { font-size: 34px; }
  .mn-linha small { font-size: 13px; }
  .camp-busca { flex-direction: row; align-items: center; margin-top: 16px; }
  .camp-busca .busca { flex: 1; }
  .camp-filtros .aj-pal { flex: none; min-width: 0; padding: 0 14px; }
}

/* O botão das melhorias (melhorias.css:7-14): o "Voltar ao original" e o "Pronto" do Ajustar foto. */
.m-botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; font: 700 14px/1 var(--fb); color: var(--texto); background: var(--botao-fundo); border: 1px solid var(--linha); text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, transform .15s; }
.m-botao::after { content: ''; position: absolute; inset: calc((44px - var(--alvo)) / 2) 0; }
.m-botao:hover { background: var(--botao-fundo-hover); border-color: var(--borda-ambar); }
.m-botao:active { transform: scale(.97); }
.m-botao .ic { font-size: 16px; color: var(--destaque); }
.m-botao.pri { background: var(--ambar); border-color: var(--ambar); color: var(--sobre-ambar); box-shadow: 0 0 18px rgba(255,187,16,.4); }
.m-botao.pri:hover { background: var(--ambar-medio); }
.m-botao.pri .ic { color: inherit; }
/* Fotos (melhorias.css:16-22, 80-87, 106-108): a chave de ligar e desligar e o "Realçar as fotos" (M-08). O toque da chave tem os
 * 52 px do --alvo. */
.m-chave { position: relative; flex: none; width: 52px; height: 32px; border-radius: 16px; background: var(--trilho); border: 1px solid var(--linha); transition: background .25s, border-color .25s, box-shadow .25s; }
.m-chave input { position: absolute; inset: -11px -1px; width: calc(100% + 2px); height: calc(100% + 22px); margin: 0; opacity: 0; cursor: pointer; }
/* NÃO EXISTE NO PROTÓTIPO, só a camada: a bolinha passa do ::after para o ::before, e o ::after vira a área de toque de 52 px do
   design system (o mesmo desenho; a caixa que recebe o toque é o input, que já passa da chave). */
.m-chave::before { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--texto); transition: transform .3s var(--mola), background .25s; pointer-events: none; }
.m-chave::after { content: ''; position: absolute; inset: -11px -1px; pointer-events: none; }
.m-chave:has(input:checked) { background: var(--ambar); border-color: var(--ambar); box-shadow: 0 0 16px rgba(255,187,16,.4); }
.m-chave:has(input:checked)::before { transform: translateX(20px); background: var(--sobre-ambar); }
.m-chave:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
/* ------------------------------------------------------------------ Fotos: realçar, ajustar e o aviso de foto fraca */
.realce { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; align-items: center; padding: 13px 14px; border-radius: var(--r-cartao); }
.realce-t { display: flex; align-items: center; gap: 8px; font: 720 15px/1.2 var(--fd); letter-spacing: -.01em; }
.realce-t .ic { color: var(--destaque); font-size: 17px; }
.realce-s { grid-column: 1; margin: 0; font: 500 12px/1.4 var(--fb); color: var(--texto-2); text-wrap: pretty; }
.realce .m-chave { grid-column: 2; grid-row: 1 / span 2; }
.realce-ver { grid-column: 1 / -1; min-height: 40px; padding: 0; width: auto; justify-self: start; color: var(--destaque); font-size: 13px; }
.realce-ver:hover { background: none; text-decoration: underline; }
/* NÃO EXISTE NO PROTÓTIPO: o link de 40 px toca em 52 (a camada ::after do design system). */
.realce-ver::after { content: ''; position: absolute; inset: -6px 0; }
/* Fotos (melhorias.css:100-151): as marcas da foto na grade (ajustada, M-09; fraca, M-11), a grade de alto a baixo no notebook e
 * o "Ajustar foto" (M-09, M-10), tela cheia no celular e janela no notebook. Sem o .ajf-auto: o "Endireitar sozinho" não entra (Q95). */

/* Na grade: tocar na foto abre o "Ajustar foto" (segurar continua sendo arrastar). */
.grade-fotos[data-ajustavel] .fm { cursor: pointer; }
.fm-marcas { position: absolute; top: 4px; left: 25px; z-index: 2; display: flex; gap: 3px; pointer-events: none; }
.fm-marcas i { min-width: 17px; height: 17px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; background: var(--ambar); color: var(--navy); font-style: normal; }
.fm-marcas i.fm-ok { background: rgba(7,9,11,.72); color: var(--ambar); border: 1px solid rgba(255,255,255,.18); }
.fm.fraca { box-shadow: inset 0 0 0 2px var(--ambar); }
.fm.fraca img { border-radius: inherit; }
@media (min-width: 1080px) {
  .chegada > .grade-col { grid-row: 1 / span 9; }
  .fm-marcas { left: 28px; }
  .fm-marcas i { min-width: 20px; height: 20px; font-size: 12px; }
}

/* O "Ajustar foto": tela cheia no celular, janela no notebook. Antes e depois na mesma foto, com a linha que arrasta. */
.ajf { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--fundo); color: var(--texto); overflow: hidden; }
.ajf::backdrop { background: rgba(4,6,8,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ajf-corpo { display: flex; flex-direction: column; height: 100%; }
.ajf-topo { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 10px) var(--gut) 10px; }
.ajf-topo div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ajf-topo b { font: 740 17px/1.1 var(--fd); letter-spacing: -.02em; }
.ajf-topo small { font: 500 12px/1.2 var(--fb); color: var(--texto-2); }
.ajf-palco { position: relative; flex: 1; min-height: 0; background: #000; display: grid; place-items: center; container-type: size; overflow: hidden; }
.ajf-quadro { position: relative; width: min(100cqw, calc(100cqh * var(--ar, 1.3333))); aspect-ratio: var(--ar, 1.3333); overflow: hidden; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ajf-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: rotate(var(--giro, 0deg)) scale(var(--zoom, 1)); }
.ajf-depois { clip-path: inset(0 0 0 var(--corte, 50%)); filter: brightness(var(--luz, 1)) contrast(var(--con, 1)) saturate(var(--cor, 1)); }
.ajf-divisor { position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 2px; margin-left: -1px; background: var(--ambar); box-shadow: 0 0 12px var(--ambar); pointer-events: none; }
.ajf-divisor::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--ambar); color: var(--navy); font: 800 15px/40px var(--fb); text-align: center; letter-spacing: .1em; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ajf-rot { position: absolute; top: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(7,9,11,.72); color: #F0F0F0; font: 650 10.5px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.ajf-rot.a { left: 10px; } .ajf-rot.d { right: 10px; color: var(--ambar); }
.ajf-grade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / 100% 12.5%, linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / 12.5% 100%; }
.ajf.girando .ajf-grade { opacity: 1; }
.ajf.girando .ajf-divisor, .ajf.girando .ajf-rot { opacity: 0; }
.ajf.girando .ajf-depois { clip-path: none; }
.ajf-ctl { padding: 12px var(--gut) calc(env(safe-area-inset-bottom) + 14px); display: flex; flex-direction: column; gap: 4px; }
.ajf-realcar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--alvo); font: 700 14.5px/1.2 var(--fd); }
.ajf-realcar span { display: flex; align-items: center; gap: 8px; } .ajf-realcar .ic { color: var(--destaque); font-size: 17px; }
.ajf-linha { display: grid; grid-template-columns: 82px 1fr 38px; align-items: center; gap: 10px; font: 600 13px/1 var(--fb); color: var(--texto-3); }
.ajf-linha input[type="range"] { width: 100%; height: var(--alvo); margin: 0; accent-color: var(--ambar); }   /* 40 px no protótipo; 52, como o zoom do Enquadrar */
.ajf-linha output { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.ajf-sep { height: 1px; margin: 6px 0; background: var(--linha-fraca); }
.ajf-acoes { display: flex; gap: 8px; margin-top: 8px; }
.ajf-acoes .m-botao { flex: 1; }
.ajf-nota { margin: 6px 0 0; font: 500 11.5px/1.4 var(--fb); color: var(--texto-2); }
@media (min-width: 1080px) {
  .ajf { inset: 0; margin: auto; width: min(1080px, 92vw); height: min(700px, 90dvh); border-radius: 18px; box-shadow: var(--sombra-painel), 0 0 0 1px var(--linha); }
  .ajf-corpo { display: grid; grid-template-columns: 1fr 330px; grid-template-rows: auto 1fr; }
  .ajf-topo { grid-column: 1 / -1; padding: 14px 18px; border-bottom: 1px solid var(--linha-fraca); }
  .ajf-ctl { padding: 16px 18px 18px; overflow: auto; gap: 6px; }
  .ajf-acoes { margin-top: auto; padding-top: 12px; }
}
/* Fotos (melhorias.css:90-98): o aviso de foto fraca (M-11). */
.fracas { padding: 12px 8px 6px 14px; border-radius: var(--r-cartao); display: flex; flex-direction: column; gap: 4px; }
.fracas-t { display: flex; align-items: center; gap: 8px; font: 700 13.5px/1.25 var(--fd); color: var(--destaque); padding-right: 6px; }
.fracas-t .ic { font-size: 16px; flex: none; }
.fracas ul { list-style: none; margin: 0 0 0 -10px; padding: 0; }
.fracas .lnk { font-size: 13px; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
.fracas .lnk b { color: var(--texto); font-weight: 650; }
.fracas .lnk span { display: flex; flex-direction: column; gap: 3px; }
.fracas .lnk small { margin: 0; font-size: 12px; line-height: 1.3; }
.fracas li[hidden] { display: none; }
.fracas .feito small { color: var(--ok-texto); }

/* Ficha (melhorias.css:153-182): a ficha do CRM em resumo, "Está tudo certo?" (M-12). As linhas são links (sem script levam ao
 * formulário), por isso perdem a cor e o sublinhado de link. */
.resumo-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.resumo { padding: 2px 12px; border-radius: var(--r-cartao); display: flex; flex-direction: column; }
.resumo-linha { position: relative; display: grid; grid-template-columns: 1fr 16px; gap: 4px 8px; align-items: center; width: 100%; min-height: var(--alvo); padding: 9px 0; border-bottom: 1px solid var(--linha-fraca); text-align: left; }
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha:hover .ic, .resumo-linha:focus-visible .ic { color: var(--destaque); }
.r-rot { grid-column: 1; font: 650 9.5px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--rotulo); }
.r-val { grid-column: 1; font: 650 14.5px/1.25 var(--fd); letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.r-val.grande { font-size: 19px; font-weight: 760; letter-spacing: -.03em; }
.r-val.vazio { font: 500 13px/1.25 var(--fb); font-style: italic; color: var(--rotulo); }
.resumo-linha .ic { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; color: var(--texto-2); transition: color .2s; }
.r-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.r-nums span { white-space: nowrap; } .r-nums small { font: 500 11.5px/1 var(--fb); color: var(--texto-2); margin-left: 3px; }
.resumo-corrigir { justify-content: center; border: 1px dashed var(--linha); }
.campos .resumo-voltar { justify-content: center; border: 1px dashed var(--linha); }
.ficha-corpo[data-modo="resumo"] > .campos, .ficha-corpo[data-modo="corrigir"] > .resumo-col { display: none; }
@media (min-width: 1080px) {
  .resumo-col { grid-column: 1; grid-row: 1; gap: 12px; }
  .resumo { padding: 4px 20px; }
  .resumo-linha { grid-template-columns: 150px 1fr 18px; padding: 14px 0; }
  .r-rot { font-size: 10.5px; }
  .r-val { grid-column: 2; font-size: 17px; }
  .r-val.grande { font-size: 24px; }
  .resumo-linha .ic { grid-column: 3; grid-row: 1; font-size: 16px; }
  .r-nums { gap: 4px 22px; } .r-nums small { font-size: 13px; }
  .resumo-corrigir { align-self: flex-start; width: auto; padding: 0 18px; }
  .campos .resumo-voltar { grid-column: 1 / -1; }
}
a.resumo-linha { color: inherit; text-decoration: none; }

/* Kit no notebook (M-13; melhorias.css:208-243): a peça usa a altura da janela; a régua e o obturador saem; a barra de vidro de cima
 * desce e vira a barra das ações (o nome da peça, Modelo e paleta, Copiar, Baixar tudo e Compartilhar), no lugar do .est-barra do
 * protótipo, para não repetir o nome da peça, o tempo do Reel e o sininho, que o HTMX troca pelo id. O sininho sobe para o topo da
 * lista da esquerda (ts/kit.ts). No celular nada muda. ⚠️ Passa por cima do protótipo de 04/11 e da regra 6 (a régua no notebook). */
.so-amplo, .et-cab { display: none; }
@media (min-width: 1080px) {
  .kit.amplo { grid-template-columns: 264px 1fr 360px; }
  .kit.amplo .regua, .kit.amplo .obt-linha, .kit.amplo .est-base { display: none; }
  .kit.amplo .et-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .kit.amplo .et-cab .marca { margin: 0; }
  .kit.amplo .et-cab .sino { margin: 0; }
  .kit.amplo .et-cab .menu-avisos[popover] { top: 70px; left: 26px; right: auto; }
  /* Com o folder são cinco peças: os itens do trilho ficam um pouco mais baixos, para caber numa janela de 768 sem rolar. */
  .kit.amplo .est-trilho { gap: 8px; scrollbar-width: thin; }
  .kit.amplo .et-lista { gap: 6px; }
  .kit.amplo .et-item { grid-template-columns: 44px 1fr; padding: 6px 8px; }
  .kit.amplo .et-th { width: 44px; height: 54px; }
  .kit.amplo .et-th .th-4x5 { width: 44px; height: 55px; }
  .kit.amplo .et-th .th-9x16 { width: 30px; height: 54px; }
  .kit.amplo .et-links { padding-top: 6px; }
  .kit.amplo .est-area { top: 22px; bottom: 100px; }
  .kit.amplo .est-topo { top: auto; bottom: 22px; height: 62px; gap: 10px; padding: 0 10px 0 18px; }
  .kit.amplo .est-topo .et-info { flex: 1; }
  .kit.amplo .so-amplo { display: inline-flex; }
  .kit.amplo .est-topo .m-botao { height: 42px; padding: 0 14px; font-size: 13.5px; }
  .kit.amplo .est-topo .m-botao::after { inset: calc((42px - var(--alvo)) / 2) 0; }   /* o toque continua com 52 px */
  /* O "Modelo e paleta" é o mesmo botão do celular, com a cara do .m-botao.sec da barra. */
  .kit.amplo .est-topo .btn-ajuste { height: 42px; padding: 0 14px; gap: 8px; border-radius: 12px; font: 700 13.5px/1 var(--fb); color: var(--texto); background: var(--botao-fundo); border-color: var(--linha); }
  .kit.amplo .est-topo .btn-ajuste:hover { background: var(--botao-fundo-hover); border-color: var(--borda-ambar); }
  .kit.amplo .est-topo .btn-ajuste .ic { color: var(--destaque); }
  .kit.amplo .est-topo .btn-ajuste::after { inset: calc((42px - var(--alvo)) / 2) 0; }
  .kit.amplo .est-topo a.m-botao { text-decoration: none; }
  .kit.amplo .est-ajustes[popover] { top: auto; bottom: 100px; left: calc(264px + 24px); right: calc(360px + 24px); transform-origin: bottom center; }
  .kit.amplo .est-lado { padding-right: 22px; }
}
@media (min-width: 1080px) and (max-width: 1279px) {
  .kit.amplo .est-topo .m-botao.sec span, .kit.amplo .est-topo .btn-ajuste .ba-txt { display: none; }   /* janela estreita: os secundários ficam só com o ícone e o nome para o leitor */
  .kit.amplo .est-topo .m-botao.sec, .kit.amplo .est-topo .btn-ajuste { width: 42px; padding: 0; justify-content: center; }
}

/* A legenda diz de quais ambientes falou (M-15; melhorias.css): os rótulos que a SigLIP já dá às fotos. */
.lg-ambientes { margin: 10px 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.lg-ambientes > span:first-child { flex-basis: 100%; font: 600 11.5px/1.3 var(--fb); color: var(--texto-2); }
.lg-ambientes .chip .ic { font-size: 11px; color: var(--destaque); }

/* O folder em PDF no kit (M-17; melhorias.css): a página A4 em pé, do tamanho que cabe na área. */
.quadro.q-folder { width: min(100cqw, calc(100cqh * 210 / 297)); aspect-ratio: 210 / 297; border-radius: 6px; }
.quadro.q-folder img { width: 100%; height: 100%; object-fit: contain; }
.et-th .th-a4 { width: 45px; height: 64px; object-fit: cover; }
@media (min-width: 1080px) { .kit.amplo .et-th .th-a4 { width: 38px; height: 54px; } }

/* O aviso de que o CRM mudou depois do kit (M-18; melhorias.css): fica até a pessoa atualizar ou dispensar. */
.kit-crm { position: fixed; z-index: 40; left: 50%; top: calc(env(safe-area-inset-top) + 74px); transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 10px 10px 14px; white-space: normal; }
.kit-crm[hidden] { display: none; }
.kit-crm > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 200px; }
.kit-crm b { font: 700 13.5px/1.25 var(--fd); }
.kit-crm small { font: 500 12px/1.3 var(--fb); color: var(--texto-2); }
.kit-crm div { display: flex; gap: 6px; }
.kit-crm .m-botao { height: 36px; padding: 0 12px; font-size: 13px; }
.kit-crm .m-botao::after { inset: calc((36px - var(--alvo)) / 2) 0; }   /* o toque com 52 (UX/UI, melhorias, C2) */
.kit-crm form { margin: 0; }
@media (min-width: 1080px) { .kit.amplo .kit-crm { top: 22px; left: calc(264px + (100% - 264px - 360px) / 2); } }

/* Os cliques do link no kit (M-05): no trilho do notebook, abaixo do bairro e do código. */
.et-cliques { display: flex; margin: -2px 0 6px; }

/* O painel de uso com as melhorias (M-19 a M-21; melhorias.css): a comparação, o gráfico por semana, os rankings e as barras da IA.
 * As medidas das barras chegam pelo ts/painel.ts (data-v → --v), porque a CSP não aceita estilo em linha. */
.pn-num .pn-delta { display: inline-flex; align-items: center; gap: 4px; font: 650 11.5px/1 var(--fb); color: var(--ok-texto); }
.pn-num .pn-delta.cai { color: var(--destaque); }
.pg-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pg-ops { display: flex; gap: 6px; }
.pg-ops .aj-pal { flex: none; min-width: 0; min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.pg-ops .aj-pal::after { inset: calc((34px - var(--alvo)) / 2) 0; }
.pg-barras { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 190px; margin: 0; padding: 0; list-style: none; }
.pg-barras > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.pg-barras i { display: block; width: 100%; max-width: 46px; height: calc(var(--v) * 1%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--ambar), var(--ambar-escuro)); opacity: .55; transition: height .5s var(--suave); }
.pg-barras > div:last-child i { opacity: 1; box-shadow: 0 0 18px rgba(255,187,16,.45); }
.pg-barras b { font: 700 12px/1 var(--fb); font-variant-numeric: tabular-nums; }
.pg-barras small { font: 600 10px/1 var(--fb); color: var(--rotulo); white-space: nowrap; }
.pg-nota { margin: 0; }
.pn-ver-tabela { border-top: 1px solid var(--linha-fraca); padding-top: 4px; }
.pn-ver-tabela summary { display: flex; align-items: center; min-height: var(--alvo); font: 600 13px/1 var(--fb); color: var(--texto-3); cursor: pointer; list-style: none; }
.pn-ver-tabela summary::-webkit-details-marker { display: none; }
.pn-ver-tabela summary::after { content: '›'; margin-left: 8px; color: var(--destaque); transition: transform .2s; }
.pn-ver-tabela[open] summary::after { transform: rotate(90deg); }
.pr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pr li { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px 10px; align-items: baseline; }
.pr-n { font: 750 12px/1 var(--fb); color: var(--rotulo); font-variant-numeric: tabular-nums; }
.pr-nome { font: 650 13.5px/1.25 var(--fd); letter-spacing: -.01em; min-width: 0; }
.pr-nome small { display: block; margin-top: 3px; font: 500 11.5px/1.3 var(--fb); letter-spacing: 0; color: var(--texto-2); }
.pr-v { font: 700 13.5px/1 var(--fb); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-v small { font: 500 11.5px/1 var(--fb); color: var(--texto-2); margin-left: 3px; }
.pr-barra { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.pr-barra i { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 3px; background: var(--ambar); }
.pr li:first-child .pr-barra i { box-shadow: 0 0 10px rgba(255,187,16,.6); }
.pia .pr-barra { height: 10px; border-radius: 5px; display: flex; gap: 2px; background: none; }
.pia .pr-barra i { border-radius: 5px; flex: none; }
.pia .pr-barra i + i { background: var(--cinza); }
.pia-leg { display: flex; gap: 14px; flex-wrap: wrap; font: 500 12px/1 var(--fb); color: var(--texto-2); }
.pia-leg span { display: inline-flex; align-items: center; gap: 6px; }
.pia-leg span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--ambar); }
.pia-leg span + span::before { background: var(--cinza); }
@media (min-width: 1080px) {
  .pn-grafico { grid-column: 1 / -1; }
  .pg-barras { height: 230px; gap: 14px; }
  .pg-barras i { max-width: 72px; }
  .pg-barras b { font-size: 13.5px; } .pg-barras small { font-size: 11px; }
}