/* ===========================================================================
   home.css — o resto da home, abaixo da dobra.
   A dobra é lei: nada aqui a toca. Todo valor desce do
   identidade/design-guide.md TRAVADO em 16/09 — paleta, as duas fontes, a régua
   de 1px em três opacidades (0,28 · 0,75 · 0,98), pílula sem sombra, curvas e
   durações.

   21/09/2026 — REVESTIMENTO pela direção do corpo escolhida em imagem
   (direcao/corpo/*.png, medida em direcao/spec-corpo.md). O que a imagem
   trouxe de novo: a escala dos títulos (74-80px @1440), a PLACA (acrílico
   quase opaco com o fio de cima aceso — só nos 3 cards e no formulário), os
   numerais hairline do método, as seções de duas colunas com a coluna direita
   ancorada na margem direita, e o fundo fixo do auditório. Tudo o mais
   (copy, ids, data-revela, estados do formulário, elasticidade, provas) ficou.
   Este arquivo também é carregado pelas internas: o que é da home vive sob
   .secao--palco/.secao--metodo/.secao--vizu/.secao--conteudo (só existem
   aqui) ou sob .placa (só a home a recebe); o que é linguagem (escala do h2,
   rótulo, link com seta) vale pro site inteiro.
   =========================================================================== */

/* ===========================================================================
   0. FUNDO DO CORPO (21/09/2026). Pedido dele: "as partes de baixo, tudo preto
   com letra branca, não tem sentido". Fixo atrás de tudo abaixo da dobra; as
   seções são transparentes; a dobra continua opaca com o palco.
   PROVISÓRIO: fundo-corpo.webp é OUTRO auditório (spec-corpo decisão 5); o
   definitivo (mesma cena das 6 imagens, câmera ≈1,4× mais fechada) chega do
   ChatGPT e entra aqui sem mexer em mais nada.
   =========================================================================== */
.fundo-corpo{
  position: fixed;
  inset: 0;
  z-index: -1;   /* refino r2 (patch 24): atrás do fluxo, no MESMO grupo — a poça (screen) blenda com a cena, não com transparente */
  background: var(--chao) url("../assets/camadas/fundo-corpo.webp") center / cover no-repeat;
  pointer-events: none;
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .fundo-corpo{ background-image: url("../assets/camadas/fundo-corpo-mobile.webp"); }
}
/* refino r2 (patch 24): <main> sem z-index — um stacking context aqui isolava a
   poça da .fundo-corpo e o `screen` virava source-over (névoa marrom uniforme) */
main{ position: relative; }
.rodape{ position: relative; z-index: 1; }
/* a régua de corte e (quando a camada chegar) o celular do Vizu X sangram pela
   borda direita: o clip mora no <main>, nunca na seção — na seção ele cortaria
   a poça de luz. `clip` (não `hidden`) não cria caixa de rolagem nem quebra o
   position: sticky das provas. */
main{ overflow-x: clip; }
.secao{ background: transparent; }

/* GANCHO DO FUNDO POR SEÇÃO (mesa 2, dec. 31) — a mesa provou que a câmera anda
   entre as seções: cada uma vai ter o SEU render. attr() não funciona dentro de
   url(), então é uma regra por seção; o fundo fixo de cima segue como provisório
   declarado enquanto os 4 arquivos não existem. Pra ligar: gerar
   assets/camadas/fundo-<secao>.webp e pôr data-fundo="<secao>" no <section>
   (o HTML já traz a linha comentada em cada uma). */
.secao[data-fundo]{ background-size: cover; background-position: center top; background-repeat: no-repeat; }
.secao--metodo[data-fundo]{   background-image: url("../assets/camadas/fundo-metodo.webp"); }
.secao--vizu[data-fundo]{     background-image: url("../assets/camadas/fundo-vizux.webp"); }
.secao--conteudo[data-fundo]{ background-image: url("../assets/camadas/fundo-conteudo.webp"); }
.secao--final[data-fundo]{    background-image: url("../assets/camadas/fundo-chamada.webp"); }
.rodape{ background: rgb(var(--chao-canto-rgb) / .55); }
/* header em modo "fundo" sobre a cena iluminada (lei da luz, 21/09): translúcido
   com desfoque — a luz passa, o texto não vaza (o blur o dissolve; r2 P-8 tinha
   posto opaco, que virou uma faixa preta sobre o palco aceso). */
/* refino r3 (patch 35d, P1 provado a 390 em scrollY=200): o modo "curto" também
   ganha a chapa — a headline da dobra rolava por baixo do monograma/da nav sem
   nada entre os dois (o "fundo" só ligava depois da dobra inteira) */
html[data-cabecalho="curto"] .cabecalho,
html[data-cabecalho="fundo"] .cabecalho{
  background: rgb(var(--chao-rgb) / .66);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}
@supports not (backdrop-filter: blur(1px)){
  html[data-cabecalho="curto"] .cabecalho,
  html[data-cabecalho="fundo"] .cabecalho{ background: rgb(var(--chao-rgb) / .92); }   /* nunca opaco (design-guide; refino r1 patch 25) */
}

/* ---------------------------------------------------------------------------
   0b. A LEI DA LUZ NO CORPO (21/09/2026, decisão do Anthony: "o site está muito
   escuro"). Medido: dobra lum 34 · corpo 17-23 · fundo provisório 14. A cena
   do corpo agora nasce na MESMA exposição da dobra (fundo-corpo.webp = fundo.png
   com sombras levantadas, lum 35), e cada seção recebe uma POÇA DE LUZ: o mesmo
   refletor da dobra (alto à direita, âmbar do halo #A67749) virado pra aquele
   bloco. Uma fonte só — a poça nunca nasce em outro canto. `screen` pra somar
   como luz, não como tinta. Intensidade por seção (--poca); dos três níveis
   oferecidos (a/b/c) ele escolheu o A, vendo (22/09). O design-guide ganhou o
   capítulo "Luz no corpo"; as proibições de vinheta/sombra/segunda luz
   continuam valendo na hero.
   --------------------------------------------------------------------------- */
.secao[data-fundo]{ isolation: isolate; }   /* só quando a camada por seção chegar (refino r2, patch 24) */
.secao::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* o MESMO refletor em toda seção (refino r2, patch 23): dimensionado pela
     TELA (62vw × 78vh = 893×702 @1440×900), não pela seção — numa seção alta a
     elipse por % virava um véu de 5.000px; o cone morre a ≈56vh, como na cena */
  background: radial-gradient(ellipse 62vw 78vh at 90% 0%,
              rgb(var(--ambar-halo-rgb) / var(--poca, .055)) 0%,
              rgb(var(--ambar-halo-rgb) / calc(var(--poca, .055) * .45)) 34%,
              rgb(var(--ambar-halo-rgb) / 0) 72%);   /* um hex, um token; o knob --luz morreu e o fallback é o piso .055 (refino r3, patch 26) */
  mix-blend-mode: screen;
}
/* no celular a poça é o MESMO refletor dimensionado pela tela (refino r3, patch
   25 — design-guide "Luz no corpo"): 62vw×78vh em 390×844 dava 242×658, uma
   banda vertical colada na borda; 84vw×46vh = 328×388, o cone morre a 46% H */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .secao::before{
    background: radial-gradient(ellipse 84vw 46vh at 90% 0%,
                rgb(var(--ambar-halo-rgb) / var(--poca, .055)) 0%,
                rgb(var(--ambar-halo-rgb) / calc(var(--poca, .055) * .45)) 34%,
                rgb(var(--ambar-halo-rgb) / 0) 72%);
  }
}
.secao--palco{ --poca: .14; }       /* o palco: a seção mais iluminada do corpo */
.secao--caminhos{ --poca: .08; }
.secao--metodo{ --poca: .055; }
.secao--vizu{ --poca: .10; }
.secao--conteudo{ --poca: .13; }
.secao--final{ --poca: .13; }       /* a chamada: a luz volta a subir */
.secao--voz{ --poca: .08; }         /* refino r1 (patch 13): o depoimento não herda o .12 */
/* 22/09/2026: o Anthony escolheu vendo o nível A (o mais fechado) entre a/b/c —
   virou padrão: fundo-corpo.webp reexportado a 82% da exposição da dobra
   (lum ≈29) e as poças a 55% do que a rodada 3 tinha. O parâmetro ?luz= saiu. */

/* ===========================================================================
   1. ESQUELETO DE SEÇÃO
   =========================================================================== */
.secao{
  position: relative;
  padding-block: var(--secao-y);
  padding-inline: var(--margem);
}
.secao > * + *{ margin-top: var(--e6); }

.secao__coluna{ max-width: 76ch; }

/* rótulo de seção: o tratamento do selo da dobra, na escala da imagem
   (17px @1440, tracking +0,25em, #B7B7B9 — spec-corpo A6/B7; peso 400
   medido em B7 — a 300 o pico renderizado caía pra #908F90, r2 P-6) */
.rotulo{
  font-size: var(--tam-rotulo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo-corpo);
  line-height: 1.4;
  color: var(--cinza-selo);
  margin: 0;
}

/* título de seção: 74px @1440, entrelinha 0,95 (headline, não corrido),
   SEM max-width — a quebra vem da largura da coluna (decisão 6) */
.secao__titulo{
  margin: var(--e3) 0 0;            /* rótulo (baseline) → título (cap) ≈ 40px visuais */
  font-family: var(--fonte-sans);
  font-weight: 300;
  font-size: var(--h2);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--branco);
}
.secao__titulo--grande{ font-size: var(--h2-grande); }

.secao__apoio{
  margin: var(--e3) 0 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  color: var(--branco);
  max-width: 28ch;
}

/* corpo: uma escala só — 18 @1440, entrelinha 1,4 (decisão 7) */
.secao__texto{
  margin: var(--e5) 0 0;            /* última baseline do título → cap do parágrafo ≈ 56px */
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.45;
  color: var(--cinza-rodape);
  max-width: var(--coluna-texto);
}
.secao__texto + .secao__texto{ margin-top: var(--e2); }

.secao__micro{
  margin: var(--e3) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;   /* refino r1 (patch 23): 14px a 300 renderiza #908F90 (spec-corpo dec. 16) */
  line-height: 1.5;
  color: var(--cinza-selo);
  max-width: 52ch;
}

/* o rótulo de botão nunca quebra no meio: a pílula é uma peça só */
.btn__rotulo,
.btn-fantasma__rotulo{ white-space: nowrap; }

/* ===========================================================================
   2. LINK COM SETA — o secundário da dobra, reaproveitado (24,5px @1440 nas
   seções; 19,5 no pé do card e dentro do painel)
   =========================================================================== */
.link-seta{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .55em;                       /* vão texto→seta 0,7-0,78em medido; a seta tem .78em */
  padding-bottom: .1em;             /* sublinhado ≈8-10px abaixo da baseline (B4; r2 P-5: a .4em media 17,5) */
  font-size: var(--tam-link);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--branco);
  transition: color var(--t-rapido) var(--ease-ui), opacity var(--t-ativo) var(--ease-ui);
}
.link-seta .seta{ width: .68em; height: .68em; transition: transform var(--t-rapido) var(--ease-ui); }   /* .675em = cap da Gantari (refino r1 patch 32) */
/* ?v=f (refino r2, patch 34 — gosto): a seta de ÂNCORA aponta pra onde a página
   vai (↓ = a seta.svg girada, o mesmo desenho do select); o "Pedir uma data" da
   FAQ de Palestras aponta ↑ (o formulário está acima). A dobra é medida: não muda. */
html[data-v~="f"] main .secao a[href^="#"] .seta,
html[data-v~="f"] .dobra--interna a[href^="#"] .seta,   /* refino r3 (patch 37): a dobra INTERNA também aponta ↓; a da home é medida */
html[data-v~="f"] .btn--fixo .seta{ transform: rotate(135deg); }
html[data-v~="f"] #perguntas .secao__acao .seta{ transform: rotate(-45deg); }
@media (hover: hover){
  html[data-v~="f"] main .secao a[href^="#"]:hover .seta,
  html[data-v~="f"] .dobra--interna a[href^="#"]:hover .seta,
  html[data-v~="f"] .btn--fixo:hover .seta{ transform: rotate(135deg) translate(1.4px, -1.4px); }
  html[data-v~="f"] #perguntas .secao__acao a:hover .seta{ transform: rotate(-45deg) translate(1.4px, -1.4px); }
}
.link-seta__traco{
  position: absolute;
  left: -1px;
  right: -5px;
  bottom: 0;
  height: 1.5px;
  background: currentColor;   /* uma peça: o traço na cor do texto (refino r3, patch 24 — o "Chamar no WhatsApp" cinza tinha traço branco) */
  opacity: var(--traco-link);
  transform-origin: right center;
  transition: transform var(--t-rapido) var(--ease-ui);
}
/* alvo de 44px de altura sem mover a tinta nem o sublinhado — a mesma técnica
   do hambúrguer da dobra (pseudo-elemento invisível) */
.link-seta::before,
.secao .btn-fantasma::before,
.dobra .btn-fantasma::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.secao .btn-fantasma{ position: relative; }
/* hover só com ponteiro de verdade (A6): no toque o :hover grudava */
@media (hover: hover){
  .link-seta:hover .link-seta__traco{ animation: refaz 260ms var(--ease-ui) forwards; }
  .link-seta:hover .seta{ transform: translate(1.4px, -1.4px); }
}
.link-seta:active{ opacity: .8; }
.link-seta:focus-visible{ outline-offset: 6px; }

/* parágrafo que só carrega um link: última linha do texto → link ≈ 72px (B5) */
.secao__acao{ margin-top: var(--e7); }
.secao__acao + .secao__micro{ margin-top: var(--e3); }

/* os dois links empilhados do conteúdo, separados por régua de 1px a 0,45 que
   vai até a margem direita (B4). Cada link vive num .dupla-links__item pra a
   régua ter a largura da coluna sem o sublinhado ganhar a mesma largura. */
.dupla-links{
  display: flex;
  flex-direction: column;
  margin: var(--e4) 0 0;
}
.dupla-links__item{
  display: block;
  padding-block: 26px;             /* passo cap-a-cap 89px, medido na home (dec. 26; refino r1 patch 26 tornou padrão) */
}
.dupla-links__item:first-child{ padding-top: 0; }
.dupla-links__item:last-child{ padding-bottom: 0; }
.dupla-links__item + .dupla-links__item{
  border-top: 1px solid rgba(255, 255, 255, var(--regua-dupla-links));   /* .65 (dec. 26) */
}

.link-simples{
  color: var(--cinza-rodape);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;   /* dois pesos de sublinhado (spec-corpo B6): 1,5 nos traços, .75 aqui (refino r2, patch 28) */
  text-decoration-color: rgba(255, 255, 255, var(--regua-rodape));
  transition: color var(--t-rapido) var(--ease-ui), opacity var(--t-ativo) var(--ease-ui);
}
@media (hover: hover){
  .link-simples:hover{ color: var(--branco-quente); }
}
.link-simples:active{ opacity: .8; }

/* ===========================================================================
   2b. A PLACA — o componente novo do corpo (spec-corpo A3, decisões 2 e 3).
   Acrílico fosco QUASE OPACO e neutro: rgba(20,18,18,.90), sem backdrop-filter,
   sem sombra, sem brilho. O que a distingue de um card chapado é o fio de
   cima: 1px em gradiente branco 0,25 → 0,50 (esq→dir). Laterais 0,15
   esvaindo até 0,06 na base. O fio é um anel de 1px feito com máscara (sem
   box-shadow, sem border-image): o preenchimento fica no ::before (atrás do
   conteúdo) e o fio no ::after (na frente, sem alvo).
   r2 P-1: o anel tem DUAS camadas só — a vertical full (.15→.06) é a única
   fonte das laterais, da base e dos cantos; a linha de topo COMPÕE com ela,
   por isso --fio-a/--fio-b guardam o valor bruto (.118→.41) que, somado ao
   .15 por baixo, dá os .25→.50 do contrato (hover .29→.65 = .40→.70).
   Só os 3 cards dos caminhos e o painel do formulário recebem a placa.
   =========================================================================== */
@property --fio-a{ syntax: "<number>"; inherits: true; initial-value: .118; }
@property --fio-b{ syntax: "<number>"; inherits: true; initial-value: .41; }

/* refino r3 (patch 21 — spec-corpo A3/A8, engenharia "correção óptica: bordas e
   raios"): o fio de topo era uma faixa RETANGULAR de 1px e morria ≈10px antes de
   cada canto, onde a máscara curva e a faixa não. Agora as camadas são três:
   o PREENCHIMENTO mora no próprio elemento (background-color, animável na
   entrada), o anel vertical .15→.06 no ::before (máscara de anel) e o fio de
   topo no ::after — máscara de anel ∩ fade vertical do tamanho do raio: a linha
   contorna o arco e se dissolve na lateral. Zero contaminação do interior. */
.placa{
  position: relative;
  isolation: isolate;
  --fio-a: .118;
  --fio-b: .41;
  border-radius: var(--placa-raio-card);
  background: var(--placa-fundo);
}
.placa::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06));   /* laterais, base e cantos */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.placa::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, var(--fio-a)), rgba(255, 255, 255, var(--fio-b)));
  -webkit-mask: linear-gradient(180deg, #000 0, transparent var(--placa-raio-card)), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor, source-over;
          mask: linear-gradient(180deg, #000 0, transparent var(--placa-raio-card)), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: intersect, exclude, add;
  transition: --fio-a var(--t-medio) var(--ease-ui), --fio-b var(--t-medio) var(--ease-ui);
}
.placa--card{ padding: var(--placa-pad-card); }
/* o painel: UM só em todo o site (refino r1, patch 1 — spec-corpo dec. 28):
   raio 10, padding 43, laterais e base a .22 chapado. O fio de topo continua
   .25→.50 do contrato — e como COMPÕE com a camada de baixo, o valor bruto é
   .0385→.359 sobre .22 (a + b(1−a) dá os mesmos .25 e .50 renderizados). */
.placa--painel{
  padding: var(--placa-pad-painel);
  border-radius: var(--placa-raio-painel);
  /* refino r2 (patch 25): a aresta na luz — o fio de topo do painel medido é
     ≈.44→.54 (spec-corpo A3/C3), não o .25→.50 do card; composto sobre o .22
     das laterais (a + .22·(1−a)): .28→.44 · .41→.54. Sem hover no painel. */
  --fio-a: .28;
  --fio-b: .41;
}
.placa--painel::before{
  background: linear-gradient(180deg, rgba(255, 255, 255, var(--fio-painel-lado)), rgba(255, 255, 255, var(--fio-painel-lado)));
}
/* ?v=i (refino r3, patch 36 — gosto): o painel passa a luz que a imagem mostra
   (alpha .78 medido em A3 e C3, "passa 22%") em vez do .90 da decisão 2. Só o
   painel; o card fica .90. Padrão = .90. */
html[data-v~="i"] .placa--painel{ --placa-fundo: rgb(var(--placa-rgb) / .78); }
/* o painel entra junto com o conteúdo dele: o preenchimento e o fio só
   acendem quando o primeiro filho revelado aparece (os filhos continuam com o
   data-revela deles e a máscara de linha). Sem JS ou com reduced-motion o
   html.js-revela não existe e a placa nasce pronta. */
html.js-revela .placa--painel{ background-color: transparent; transition: background-color var(--t-lento) var(--ease-luz); }
html.js-revela .placa--painel::before,
html.js-revela .placa--painel::after{
  opacity: 0;
  transition: opacity var(--t-lento) var(--ease-luz);
}
html.js-revela .placa--painel:has(.revelado){ background-color: var(--placa-fundo); }
html.js-revela .placa--painel:has(.revelado)::before,
html.js-revela .placa--painel:has(.revelado)::after{ opacity: 1; }

/* ===========================================================================
   3. PROVA DE PALCO — duas colunas: texto à esquerda, o slot da foto à direita
   (moldura 1,65:1, fio 0,40, raio 6 — B3), centrado com o bloco esquerdo;
   embaixo, a régua full e a faixa "Onde ele já esteve" de margem a margem.
   O slot fica `hidden` até a foto real (decisão 10): a seção vira 1 coluna.
   =========================================================================== */
.secao--palco{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--vao-colunas);
  align-items: center;
}
.secao--palco > * + *{ margin-top: 0; }

/* faixa de eventos: régua full (1px a 0,45) + rótulo 15px + itens em DUAS
   colunas com o ponto branco (a 0,55) no eixo dos 50% W — item 1 na margem,
   item 2 começando ≈3,7vw depois do ponto (B3; r2 P-4). Item 3+ segue nas
   linhas seguintes do grid, ponto só na 2ª coluna. Só existe com a lista
   cheia (o piso é do home.js). */
.eventos{
  grid-column: 1 / -1;
  position: relative;
  margin: var(--e8) 0 0;
  padding-top: var(--e5);          /* régua → rótulo da faixa 44px (B3) */
}
/* a régua da faixa é um pseudo-elemento pra se DESENHAR na entrada (F2,
   refino r1 patch 36); sem JS nasce inteira */
.eventos::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.eventos[hidden]{ display: none; }
.eventos__titulo{
  font-size: var(--tam-rotulo-faixa);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;              /* família FAIXA (refino r1 patch 24) */
  line-height: 1.4;
  color: var(--cinza-rodape);
}
.eventos__lista{
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 8px;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.5;
  color: var(--cinza-rodape);
}
.eventos__lista li{ position: relative; }
.eventos__lista li:nth-child(even){ padding-left: 3.7vw; }   /* ponto → item 2: 55px @1440 */
.eventos__lista li:nth-child(even)::before{
  content: "";
  position: absolute;
  left: 0;
  top: .75em;                      /* centro da 1ª linha (entrelinha 1,5) */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--regua-cabecalho-fundo));   /* um hex, um token (refino r2, patch 28) */
  transform: translate(-50%, -50%);
}
.eventos + .secao__acao{ margin-top: var(--e5); }

/* moldura de slot de imagem: régua de 1px, sem preenchimento */
.moldura{ margin: 0; }
/* a moldura da casa em todo slot (refino r1, patch 18/26): fio .40 por token,
   raio 6 — a geometria medida na imagem (dec. 10); tracking .14em = família FAIXA */
.moldura__vazio{
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, var(--fio-moldura));
  border-radius: 6px;
  padding: var(--e3);
  text-align: center;
  font-size: var(--tam-micro);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cinza-selo);
}
/* o slot da foto de palco com a proporção medida na imagem (B3) */
.moldura--foto .moldura__vazio{ aspect-ratio: 1.65; }
/* a moldura CHEIA com o acabamento da vazia (refino r3, patch 23 — elasticidade
   nos dois extremos): fio, raio 6 e a proporção do slot; vale na home e nas
   internas. O print do app (moldura--app) fica na proporção nativa. */
.moldura__img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, var(--fio-moldura));
  border-radius: 6px;
}
.moldura--foto .moldura__img{ aspect-ratio: 1.65; }
.moldura--app .moldura__img{ aspect-ratio: auto; }   /* 505×335 nativo; fio e raio = a família dos tablets */
.moldura--app[data-camada] .moldura__img{ border: 0; border-radius: 0; }   /* a saída pronta pra camada alpha */
.moldura[hidden]{ display: none; }
.moldura__nota{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
}

/* PROVISÓRIO: trocar por assets/camadas/celular-vizu-x.png quando chegar
   (spec-corpo B2). O print atual (505×335) sobe pra ≈47% da largura numa
   moldura simples, sem régua, centrado na seção. */
.moldura--app{ max-width: 340px; }
.moldura--app .moldura__vazio{ aspect-ratio: 4 / 5; }
.moldura--app:has(.moldura__img){ max-width: 505px; justify-self: end; align-self: center; }

/* ===========================================================================
   4. OS TRÊS CAMINHOS — 3 placas-card, gap 26px @1440, margem a margem (A4)
   =========================================================================== */
.secao--caminhos:has(.placa--card) .secao__coluna{ max-width: none; }   /* o título é 1 linha @1440 */
.cards{
  list-style: none;
  margin: var(--e10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
}
.cards:has(.placa--card){
  margin-top: var(--e6);           /* abertura → cards 52px (A4) */
  gap: clamp(16px, 1.8vw, 32px);   /* 26px @1440 */
}
.card{
  display: flex;
  flex-direction: column;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));   /* .45 entre itens (spec-corpo dec. 9) */
}
/* com a placa, a régua de cima vira o fio da placa */
.card.placa{ padding-top: var(--placa-pad-card); border-top: 0; }
/* o card base sobe pro nível da placa (refino r1, patch 5): nome 32, rótulo
   14/400/.22em, dd + dt 32 — o mesmo acabamento nos 6 temas, nos 3 "pra quem"
   e nas portas; a placa marca só a OFERTA */
.card__titulo{
  margin: 0;
  font-size: var(--h3-card);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
  text-wrap: balance;
  transition: color var(--t-rapido) var(--ease-ui);
}
.placa--card .card__titulo{ text-wrap: initial; }
.card__lista{
  margin: var(--e4) 0 0;
  flex: 0 0 auto;
}
.placa--card .card__lista{ margin-top: var(--e5); flex: 1 0 auto; }   /* o link vai pro pé (decisão 12) */
.card__lista dt{
  font-size: var(--tam-rotulo-interno);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo-interno);
  line-height: 1.4;
  color: var(--cinza-selo);
}
.card__lista dd{
  margin: var(--e1) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.55;
  color: var(--cinza-rodape);
}
.placa--card .card__lista dd{ line-height: 1.4; }
.card__lista dd + dt{ margin-top: var(--e4); }
.card__duracao{ margin-top: var(--e3); }
.placa--card .card__duracao{ margin-top: var(--e4); }
.card__duracao[hidden]{ display: none; }
.card .btn-fantasma{ margin-top: var(--e4); align-self: flex-start; }
.placa--card .btn-fantasma{ margin-top: var(--e6); }
.btn-fantasma--card{ font-size: var(--tam-corpo); }
.placa--card .btn-fantasma--card{ font-size: var(--tam-link-card); font-weight: 500; }
.card{ transition: border-top-color var(--t-medio) var(--ease-ui); }
/* hover do card, só com ponteiro; o passo não tem hover. Na placa o fio de
   cima acende (.25→.50 vira .40→.70 compostos; bruto .29→.65), nada se move. */
/* refino r1 (patch 38): hover só em card COM ação — os 6 temas e os 3 "pra
   quem" param de prometer clique */
@media (hover: hover){
  .card:has(.btn-fantasma, .link-seta, a):hover .card__titulo{ color: var(--branco-quente); }
  .card:has(.btn-fantasma, .link-seta, a):hover{ border-top-color: rgba(255, 255, 255, var(--regua-cabecalho-fundo)); }
  .placa--card:has(.btn-fantasma, .link-seta, a):hover{ --fio-a: .29; --fio-b: .65; }   /* toda placa COM ação acende (refino r2, patch 20: formatos, portas e planos) */
}
/* o foco por teclado acende a placa/o card como o hover (refino r3, patch 30 —
   receita 4 + coreografia §Estados): mesmos valores, mesma transição */
.placa--card:has(:is(.btn-fantasma, .link-seta, a):focus-visible){ --fio-a: .29; --fio-b: .65; }
.card:has(a:focus-visible){ border-top-color: rgba(255, 255, 255, var(--regua-cabecalho-fundo)); }
.card:has(a:focus-visible) .card__titulo{ color: var(--branco-quente); }
.secao--caminhos .secao__micro{ margin-top: var(--e10); }
.secao--caminhos:has(.placa--card) .secao__micro{ margin-top: var(--e7); }   /* cards → micro 58px (A4) */

/* ===========================================================================
   5. DEPOIMENTO — sem placa (o silêncio do palco escuro); escala da direção
   =========================================================================== */
.secao--voz[hidden]{ display: none; }
.voz{
  margin: 0;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
  max-width: 34ch;
}
.voz__fala{
  font-size: var(--h3-card);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--branco);
}
.voz__quem{ margin-top: var(--e3); }
.voz__quem cite{
  display: block;
  font-style: normal;
  font-size: var(--tam-corpo);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cinza-rodape);
}
.voz__cargo{
  display: block;
  margin-top: 4px;
  font-size: var(--tam-rotulo-interno);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo-interno);
  line-height: 1.4;
  color: var(--cinza-selo);
}

/* ===========================================================================
   6. O MÉTODO — 2 colunas: esquerda rótulo + título (3 linhas) + parágrafo;
   direita os 3 passos empilhados, numeral hairline (Gantari 100, 112px @1440,
   #D5D0D0 a 1 — r2 P-9: a 200/.85 a haste media 7px e o tom caía ΔE 11-16;
   a decisão 8 muda pra opacidade 1) à esquerda cobrindo nome + apoio, separadores de 1px a
   0,45 começando 10px à esquerda do numeral e indo até a margem direita (B1).
   =========================================================================== */
.secao--metodo [data-montagem-a][hidden],
.secao--metodo [data-montagem-b][hidden]{ display: none; }

.passos{
  list-style: none;
  margin: var(--e10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: passo;
}
.passo{
  display: grid;
  grid-template-columns: calc(var(--numeral) * .56) minmax(0, 1fr);   /* coluna fixa: o 1, o 2 e o 3 alinham o texto */
  column-gap: clamp(24px, 3.8vw, 56px);   /* numeral → texto 55px @1440 */
  align-items: start;
  padding-block: var(--e6);               /* apoio → separador 56 · separador → cap do nome 56 (B5) */
  padding-left: 10px;
  margin-left: -10px;                     /* a linha começa 10px à esquerda do numeral */
}
.passo:first-child{ padding-top: 0; }
.passo:last-child{ padding-bottom: 0; }
.passo + .passo{ border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta)); }
.passo__n{
  display: block;
  grid-row: 1 / span 2;
  margin-top: -.18em;                     /* o numeral começa 12-16px acima do cap do nome */
  font-size: var(--numeral);
  font-weight: 100;
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
  line-height: 1;
  color: var(--numeral-cor);
  opacity: 1;
}
.passo__titulo{
  grid-column: 2;
  margin: 0;
  font-size: var(--h3-passo);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.06em;               /* r2 P-6: tinta do nome 1 = 391px @1440 */
  color: var(--branco);
}
.passo__texto{
  grid-column: 2;
  margin: var(--e1) 0 0;                  /* nome → apoio 32px baseline a baseline */
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.45;
  color: var(--cinza-rodape);
}
/* refino r1 (patch 39): uma saída no fim do método, alinhada à coluna dos
   numerais (a única seção do corpo sem link — design-que-conclui §4.3) */
.secao--metodo .passos + .secao__acao{ margin-top: var(--e7); }   /* última linha → link 56 (spec-corpo §B5; refino r2 patch 22) */
@media (min-width: 1024px){
  .secao--metodo .passos + .secao__acao{ grid-column: 2; }
}

/* ?v=b (refino r1, patch 39): enquanto a foto de palco não existe, a faixa de
   eventos ocupa a coluna direita como NUMERAIS (o ano hairline sobre o nome).
   No padrão o <li> renderiza como hoje: "Expo Óptica Brasil · 2026". */
.evento__ano, .evento__nome, .evento__sep{ display: inline; }
html[data-v~="b"] .secao--palco .eventos{ grid-column: 2; align-self: center; margin: 0; padding-top: 0; }
html[data-v~="b"] .secao--palco .eventos::before{ display: none; }
html[data-v~="b"] .eventos__lista{ row-gap: var(--e4); }
html[data-v~="b"] .eventos__lista li{ display: flex; flex-direction: column; }
html[data-v~="b"] .evento__sep{ display: none; }
html[data-v~="b"] .evento__ano{
  display: block;
  order: -1;
  font-size: var(--numeral);
  font-weight: 100;
  line-height: 1;
  color: var(--numeral-cor);
  font-variant-numeric: lining-nums;
}
html[data-v~="b"] .evento__nome{
  display: block;
  margin-top: 8px;
  font-size: var(--h3-card);
  font-weight: 300;
  line-height: 1.2;
  color: var(--branco);
}
@media (min-width: 1024px){
  html[data-v~="b"] .secao--palco:has(.moldura--foto[hidden]){ grid-template-columns: minmax(0, 1fr) minmax(0, 50.6%); }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  html[data-v~="b"] .eventos__lista{ row-gap: var(--e4); }
}

/* ===========================================================================
   7. CHAMADA FINAL + FORMULÁRIO
   =========================================================================== */
.secao--final{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
}
/* sem a placa (Conteúdo, Vizu X) a chamada é a FAIXA de 2 colunas com as ações
   à direita (refino r1, patch 11 — spec-corpo dec. 26/32): régua de borda a
   borda em cima, junta de 135 @1440 */
.secao--final:not(:has(.placa--painel)){ padding-top: var(--chamada-topo); }
/* o corte é o MESMO nas 10 (refino r2, patch 25 — spec-corpo dec. 27): 1px a
   .20 da margem sangrando à direita, também sem painel (Vizu X, Conteúdo) */
.secao--final:not(:has(.placa--painel))::before{
  content: "";
  position: absolute;
  left: var(--margem);
  right: 0;
  top: 0;
  height: 1px;
  z-index: -1;
  background: var(--branco);
  opacity: var(--regua-corte);
  pointer-events: none;
}
.secao--final > * + *{ margin-top: 0; }
.secao--final .secao__titulo{ margin-top: 0; }   /* não há rótulo em cima (C6) */
/* título → apoio a 16 em toda chamada (refino r3, patch 8 — spec-corpo dec. 28,
   home.css §7 l.746 medido); a home usa .secao__apoio e não muda */
.secao--final .secao__texto,
.secao--formulario .secao__texto,
.secao--interesse .secao__texto{ margin-top: var(--e2); }
.acoes--final{ margin-top: var(--e6); }
@media (min-width: 1024px){
  .secao--final:not(:has(.placa--painel)){
    /* patch r2 (P1 do verificador): a coluna das ações cresce com a pílula —
       24.4vw cortava "Ver palestras e treinamentos" entre 1024 e 1300px */
    grid-template-columns: minmax(0, 1fr) minmax(24.4vw, max-content);
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--final:not(:has(.placa--painel)) .secao__coluna{ max-width: 60vw; }   /* o h2 de 80 vai a 3 linhas (refino r2, patch 6: o 47vw era pra copy curta da home) */
  /* a pílula topo com topo com o título; o fantasma embaixo (design-guide: nunca nivelar) */
  .secao--final:not(:has(.placa--painel)) > .acoes--final{
    grid-column: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e4);
    margin-top: 0;
    align-self: start;
  }
}

/* com a placa (home): coluna esquerda centrada na altura do painel, painel de
   41,1% da largura ancorado na margem direita (A2). A linha de apoio (D1,
   pendência 9) fica no corpo — a imagem só tem o título e 2 linhas de texto. */
.secao--final:has(.placa--painel){
  grid-template-columns: minmax(0, 1fr) 41.1vw;
  column-gap: var(--vao-colunas);
  align-items: center;
}
.secao--final:has(.placa--painel) .secao__apoio{
  margin-top: var(--e2);
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.45;
  color: var(--cinza-rodape);
  max-width: var(--coluna-texto);
}
.secao--final:has(.placa--painel) .acoes--final{ margin-top: var(--e8); }   /* texto → pílula 68px (A4) */

.formulario{ scroll-margin-top: calc(var(--cab-altura) + 24px); }
.formulario__titulo{
  margin: 0;
  font-size: var(--h3-painel);   /* 40 @1440 em todo painel (dec. 25; refino r1 patch 1) */
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
}
/* decisão 14 (r2): o apoio FICA no painel — microcopy funcional que explica o
   asterisco, formato de site; a imagem não tem porque ali era marcação. */
.formulario__apoio{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
  max-width: 46ch;
}
/* painel sem título (o h2 mora na coluna esquerda — patch 4) */
.placa--painel > .formulario__apoio:first-child{ margin-top: 0; }
.placa--painel .formulario__apoio + .form{ margin-top: var(--e4); }
/* o apoio ao PÉ do painel (refino r2, patch 11): a placa abre pelo 1º rótulo
   de campo e a nota do asterisco fecha, abaixo da alternativa do WhatsApp */
.placa--painel .form:first-child{ margin-top: 0; }
.placa--painel .form + .formulario__apoio--pe{ margin-top: var(--e3); }
.placa--painel .form[hidden] + .formulario__apoio--pe{ display: none; }

.form{
  margin-top: var(--e6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5) var(--e4);
}
.form[hidden]{ display: none; }
.campo--largo{ grid-column: 1 / -1; }
/* no painel os campos empilham numa coluna só, como a imagem: título → 1º
   rótulo 53px, ritmo campo a campo ≈76 (72 na imagem) com rótulo → régua ≈40
   (r2 P-3: caixa de 36px + vão de 20). O alvo de toque de 44px é o .campo
   inteiro — rótulo com `for` + caixa; clicar no rótulo foca o campo. */
.placa--painel .form{
  margin-top: 36px;                          /* medido: título → 1º rótulo 111px (dec. 28) */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;                                 /* passo campo a campo 88px: 19,6 + 36 + 32 */
}

.campo__rotulo{
  display: block;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cinza-rodape);
  transition: color var(--t-rapido) var(--ease-ui);
}
/* rótulo de campo em TODO formulário: 14/400/.22em #B7B7B9 (refino r1 patch 1) */
.campo__rotulo:not(.campo__rotulo--marca){
  font-size: var(--tam-rotulo-interno);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo-interno);
  color: var(--cinza-rotulo-campo);
}
.campo__rotulo abbr{
  text-decoration: none;
  color: inherit;
  margin-left: 2px;
}
.campo__opcional{ color: var(--cinza-selo); }
/* estado do campo no rótulo: hover e foco acendem o rótulo (a régua já está a 0,98) */
@media (hover: hover){
  .placa--painel .campo:hover .campo__rotulo{ color: var(--branco); }
}
.placa--painel .campo:focus-within .campo__rotulo{ color: var(--branco); }

/* campo = régua de 1px embaixo. Sem caixa, sem raio, sem preenchimento. */
.campo__caixa{
  display: block;
  width: 100%;
  margin-top: var(--e1);
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, var(--traco-link));   /* régua .98 (dec. 9; refino r1 patch 1) */
  border-radius: 0;
  background: transparent;
  color: var(--branco);
  font-family: var(--fonte-sans);
  font-size: var(--tam-corpo);
  font-weight: 400;                  /* o valor digitado em 400; o placeholder fica em 300 */
  line-height: 1.5;
  min-height: 44px;
  transition: border-color var(--t-rapido) var(--ease-ui);
}
/* placeholder que lê como placeholder nos dois motores (refino r3, patch 26): um
   dimmer só — o PESO (300 × 400 do valor); opacity 1 explícita iguala Chrome e
   Firefox (o UA .54 some) e fica no mesmo degrau do "Escolha" do select (≈9,4:1) */
.campo__caixa::placeholder{ font-weight: 300; color: var(--cinza-selo); opacity: 1; }
/* o campo de data vazio mostra "dd/mm/aaaa" na tinta do PLACEHOLDER, não do valor
   (base.js põe required quando o campo aparece → vazio = :invalid = cinza) */
input[type="date"].campo__caixa:invalid{ color: var(--cinza-selo); font-weight: 300; }
input[type="date"].campo__caixa:invalid::-webkit-datetime-edit{ color: var(--cinza-selo); font-weight: 300; }
@media (hover: hover){
  .campo__caixa:hover{ border-bottom-color: var(--branco); }
}
.campo__caixa:focus-visible{ outline-offset: 4px; }
/* o autofill do Chrome não pinta a caixa de azul (refino r3, patch 24 — design-
   guide "cor proibida": nunca no azul do sistema): a cor de fundo do UA nunca
   chega a pintar (transição que não termina); a tinta e o cursor ficam brancos */
.campo__caixa:-webkit-autofill,
.campo__caixa:-webkit-autofill:hover,
.campo__caixa:-webkit-autofill:focus{
  transition: background-color 2147483647s step-end, border-bottom-color var(--t-rapido) var(--ease-ui);
  -webkit-text-fill-color: var(--branco);
  caret-color: var(--branco);
}
/* no painel a régua do campo é a do sublinhado do link: 0,98 (decisão 9) */
.placa--painel .campo__caixa{
  margin-top: 0;
  min-height: 36px;                /* r2 P-3: o alvo de 44 é o .campo inteiro */
  padding-bottom: 8px;
  border-bottom-color: rgba(255, 255, 255, var(--traco-link));
}
@media (hover: hover){
  .placa--painel .campo__caixa:hover{ border-bottom-color: var(--branco); }
}
.placa--painel .campo__caixa:focus{ border-bottom-color: var(--branco); }
/* a alça da textarea sai do set (refino r1 patch 31): cresce com o conteúdo
   (field-sizing); sem suporte fica no `rows` com rolagem interna */
.campo__caixa--area{ resize: none; field-sizing: content; min-height: 88px; max-height: 40vh; }
/* a seta do select é a seta.svg do set girada 135° (↓), traço 1,5, 14px —
   nunca o glifo do navegador (componentes-vivos tell 9; refino r1 patch 31) */
/* a seta vem do token (tokens.css --seta; refino r3, patch 31) e os estados só
   trocam o token. Centro da seta = centro da linha de texto: a caixa de 44 com
   8 de padding embaixo tem a linha centrada em 18 = (44 − 8)/2 → top calc(50% − 4px)
   (refino r3, patch 26: estava 4px abaixo). */
select.campo__caixa{
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--e4);
  background-image: var(--seta);
  background-repeat: no-repeat;
  background-position: right 2px top calc(50% - 4px);
  background-size: 14px 14px;
}
.campo:focus-within select.campo__caixa{ --seta: var(--seta-branca); }
@media (hover: hover){
  select.campo__caixa:hover{ --seta: var(--seta-branca); }
}
select.campo__caixa option{ background: var(--chao); color: var(--branco); }
/* "Escolha" é placeholder, na tinta da seta; com valor escolhido a seta fica
   branca como o texto (refino r2, patch 26) */
select.campo__caixa:has(option[value=""]:checked){ color: var(--cinza-selo); font-weight: 300; }
select.campo__caixa:not(:has(option[value=""]:checked)){ --seta: var(--seta-branca); }

.campo__dica{
  margin-top: var(--e1);
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
}
/* o erro escreve em BRANCO (refino r3, patch 24 — design-que-conclui §3.1 "estado
   do sistema vence significado de marca": com 3-6 erros o painel virava 3-6
   blocos de âmbar e o acento deixava de significar "clique"). O estado continua
   âmbar na régua de 2px e na borda do checkbox/rádio. */
.campo__erro{
  margin-top: var(--e1);
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--branco);
}
.campo__erro[hidden]{ display: none; }
/* erro ganha peso além da cor (refino r1 patch 1): 2px, sem mover o layout */
.campo[data-erro="1"] .campo__caixa{ border-bottom: 2px solid var(--ambar); padding-bottom: calc(var(--e1) - 1px); }

.campo--marca{ display: grid; gap: var(--e1); }
/* a caixa de aceite no desenho da casa: régua de 1px, sem raio, e o visto em
   âmbar chapado. O visto é SVG em data: (permitido pelo CSP de fábrica). */
.campo__marca{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
  border-radius: 0;
  /* o visto já mora aqui a 0×0 e CRESCE no :checked (refino r1 patch 38) */
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23140000' stroke-width='1.714' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / 0 0 no-repeat;   /* traço 1,714 = 1,5px a 14px, um traço por set (refino r3, patch 26) */
  cursor: pointer;
  transition: border-color var(--t-rapido) var(--ease-ui), background-color var(--t-rapido) var(--ease-ui), background-size var(--t-rapido) var(--ease-ui);
}
.placa--painel .campo__marca{ border-color: rgba(255, 255, 255, var(--traco-link)); }
@media (hover: hover){
  .campo__rotulo--marca:hover .campo__marca{ border-color: rgba(255, 255, 255, var(--regua-cabecalho-fundo)); }
  .placa--painel .campo__rotulo--marca:hover .campo__marca{ border-color: var(--branco); }
}
.campo__marca:checked{
  border-color: var(--ambar);
  background-color: var(--ambar);
  background-size: 14px 14px;
}
.campo__marca:focus-visible{ outline-offset: 4px; }
.campo[data-erro="1"] .campo__marca,
.campo[data-erro="1"] .campo__radio{ border-color: var(--ambar); border-width: 2px; }
.campo__rotulo--marca{
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  color: var(--cinza-rodape);
  font-size: var(--tam-micro);
  line-height: 1.5;
  cursor: pointer;
}
.campo__politica{ justify-self: start; }
.rodape__politica,
.campo__politica,
.rodape__dado .link-simples{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.campo--marca .campo__erro{ grid-column: 1 / -1; }

/* HONEYPOT: fora da tela, fora do fluxo do grid e sem alvo de toque. Não é
   display:none de propósito: robô que filtra display:none pula a isca. */
.campo--mel{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__envio{ grid-column: 1 / -1; margin-top: var(--e1); }
/* a pílula de envio com a largura toda do painel, rótulo centrado, sem seta (A2) */
.placa--painel .form__envio{ margin-top: var(--e4); }   /* última régua → pílula 52px */
.placa--painel .form__envio .btn{ width: 100%; justify-content: center; }
.form__envio .btn .seta{ display: none; }   /* submit sem seta em TODO formulário (refino r1 patch 32) */
.placa--painel .link-seta{ font-size: var(--tam-link-card); }
.form__aviso{
  grid-column: 1 / -1;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.5;
  /* o estado continua âmbar, na régua de 2px do campo com erro; o texto volta
     pro degrau de texto (refino r2, patch 26: dois blocos âmbar sob a pílula
     eram ação + falha do mesmo peso) */
  color: var(--branco);
  padding-left: var(--e2);
  border-left: 1px solid var(--ambar);   /* 1px (o detector da casa marca faixa lateral >1px como tell; o plano pedia 2 — declarado) */
  max-width: 46ch;
  transition: opacity var(--t-medio) var(--ease-luz), transform var(--t-medio) var(--ease-luz);
}
.form__aviso[hidden]{ display: none; }
/* a alternativa ao envio (D9) — visível ANTES do erro (refino r1 patch 21):
   o caminho curto fica à vista; ?v=d volta ao "só no erro" */
.form__alternativa{
  grid-column: 1 / -1;
  margin-top: var(--e3);
  font-size: var(--tam-link-card);
  font-weight: 400;
  color: var(--cinza-rodape);
}
.form__alternativa .link-seta{ font-size: var(--tam-link-card); color: var(--cinza-rodape); }
.form__alternativa[hidden]{ display: none; }
html[data-v~="d"] .form:not([data-estado="erro"]) .form__alternativa{ display: none; }
/* disabled e o formulário sob inert (refino r2, patch 25 — componentes-vivos
   receita 4): o mesmo #C98D3D do active/loading, nada de cinza novo */
.btn:disabled,
.btn[aria-disabled="true"]{ background: var(--ambar-fundo); color: rgb(var(--tinta-rgb) / .6); cursor: not-allowed; pointer-events: none; }
.btn-fantasma[aria-disabled="true"]{ opacity: .5; pointer-events: none; }
.form[inert] .campo,
.form[inert] .campo--marca,
.form[inert] .form__alternativa{ opacity: .55; transition: opacity var(--t-medio) var(--ease-ui); }

/* F1: erro, aviso e sucesso ENTRAM (starting-style); sem suporte, nascem no
   estado final. O erro sobe 4px em 160ms, o aviso em 260, o sucesso na F1. */
.campo__erro{ transition: opacity var(--t-rapido) var(--ease-luz), transform var(--t-rapido) var(--ease-luz); }
@starting-style{
  .campo__erro:not([hidden]),
  .form__aviso:not([hidden]){ opacity: 0; transform: translateY(-4px); }
  .form-sucesso:not([hidden]){ opacity: 0; transform: translateY(12px); clip-path: inset(104% -.1em -12px -.1em); }
}
/* o campo condicional ENTRA (refino r2, patch 29 — perfil §4 F1): 260ms, 8px,
   em --ease-luz; a saída é instantânea (0,6× exigiria JS). Zero mudança no
   mecanismo hidden/required/aria; sem JS nada muda; navegador sem
   @starting-style nasce no estado final; reduced-motion zerado em dobra.css §8. */
html.js .form .campo:not(.campo--mel),
html.js .form .form__bloco,
html.js .campo__dica{ transition: opacity var(--t-medio) var(--ease-luz), transform var(--t-medio) var(--ease-luz); }
@starting-style{
  html.js .form .campo:not([hidden]):not(.campo--mel),
  html.js .form .form__bloco:not([hidden]),
  html.js .campo__dica:not([hidden]){ opacity: 0; transform: translateY(var(--sobe-miudo)); }
}
/* ao sair do campo a borda volta no MESMO frame em que a linha do F4 sai:
   mesmos pixels, mesma opacidade, sem pisca (perfil §5 F4) */
.placa--painel .campo__caixa:not(select){ transition: border-bottom-color 0s; }

.form-sucesso{
  margin-top: var(--e6);
  max-width: 46ch;
  clip-path: inset(-12px -.1em -12px -.1em);
  transition: opacity var(--t-lento) var(--ease-luz), transform var(--t-lento) var(--ease-luz), clip-path var(--t-lento) var(--ease-luz);
}
.form-sucesso[hidden]{ display: none; }
.form-sucesso__titulo{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
}
.placa--painel .form-sucesso__titulo{ font-size: var(--h3-painel); }
.form-sucesso__texto{
  margin: var(--e2) 0 var(--e4);
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.45;
  color: var(--cinza-rodape);
}

/* ===========================================================================
   8. RODAPÉ — sobre o fundo fixo, o preto de canto a 55% (ver §0)
   =========================================================================== */
.rodape{
  padding: var(--secao-y) var(--margem) var(--e8);
}
/* a régua de 1px .28 no topo do rodapé, que se DESENHA ao entrar (refino r2,
   patch 15 — o degrau #070709 × #0B0B0C é invisível; F2 do perfil §5) */
.rodape::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, var(--regua-cabecalho));
  transform-origin: left center;
}
html.js-revela .rodape::before{ transform: scaleX(0); transition: transform var(--t-lento) var(--ease-luz); }
html.js-revela .rodape:has(.revelado)::before{ transform: scaleX(1); }
/* a página atual marcada no rodapé (coreografia §Estados → Nav: traço a .75) */
.rodape__nav a[aria-current="page"]{
  color: var(--branco);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(255, 255, 255, var(--traco-nav));
}
.rodape__linha{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e6);
}
.marca--rodape .marca__lockup{ display: block; }
.marca--rodape .marca__nome{ font-size: clamp(1.5rem, 1.1rem + 1.02vw, 2.25rem); }
.marca--rodape .marca__selo{ letter-spacing: clamp(.25px, -1.2px + .27vw, 3px); }
.rodape__nav{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
}
.rodape__nav a{
  font-size: var(--tam-corpo);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cinza-rodape);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--t-rapido) var(--ease-ui), opacity var(--t-ativo) var(--ease-ui);
}
@media (hover: hover){
  .rodape__nav a:hover{ color: var(--branco-quente); }
}
.rodape__nav a:active{ opacity: .8; }

.rodape__corte{
  display: block;
  width: 100%;
  height: 1px;
  margin: var(--e8) 0 var(--e4);
  background: var(--branco);
  opacity: var(--regua-rodape);
  transform-origin: left center;
}
/* F2 no rodapé (refino r1 patch 36): a régua se desenha ao entrar */
html.js-revela .rodape__corte[data-revela]{ opacity: var(--regua-rodape); transform: scaleX(0); }
html.js-revela .rodape__corte[data-revela].revelado{ opacity: var(--regua-rodape); transform: scaleX(1); transition: transform var(--t-lento) var(--ease-luz); }
.rodape__fim{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e6);
}
.rodape__dado{
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
}

/* ===========================================================================
   9. ENTRADA POR SEÇÃO — a mesma língua da dobra (máscara + 12px, ease-luz).
   O estado escondido só existe quando o JS está vivo E o movimento é bem-vindo:
   sem JS, ou com reduced-motion, a página nasce inteira e no lugar.
   =========================================================================== */
html.js-revela [data-revela]{
  opacity: 0;
  transform: translateY(12px);
}
/* refino r3 (patch 30): a transição do reveal declara também border-top-color, pra
   não SUBSTITUIR a `transition: border-top-color` dos itens com régua (a régua
   pulava de .45 pra .55 sem curva depois de revelado) */
html.js-revela [data-revela].revelado{
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-lento) var(--ease-luz),
              transform var(--t-lento) var(--ease-luz),
              border-top-color var(--t-medio) var(--ease-ui);
  transition-delay: var(--atraso, 0ms), var(--atraso, 0ms), 0ms;
}
/* amplitude conta o tamanho (refino r3, patch 34 — perfil §3: 8px em texto ≤16;
   foto não anda — "o que se mexe é a luz e o foco", a foto só acende) */
html.js-revela :is(.secao__micro, .formulario__apoio, .moldura__nota, .moldura__legenda, .app-foto__legenda, .campo__dica, .rodape__fim)[data-revela]{ transform: translateY(var(--sobe-miudo)); }
html.js-revela :is(.app-foto, .moldura, .app-assinatura)[data-revela]{ transform: none; }
/* a máscara de linha (F1) só em alvo de uma linha ou card; bloco alto vai só
   com fade + 12px (A2). A placa-card é o próprio [data-revela]: entra com a
   máscara junto do conteúdo. A folga de 12px em cima e embaixo preserva o
   alvo de 44px dos links (clip-path também corta o hit-test). */
@keyframes mascara-secao{
  from{ clip-path: inset(104% -.1em -12px -.1em); }
  to  { clip-path: inset(-12px -.1em -12px -.1em); }
}
html.js-revela .rotulo[data-revela].revelado,
html.js-revela .secao__titulo[data-revela].revelado,
html.js-revela .secao__apoio[data-revela].revelado,
html.js-revela .formulario__titulo[data-revela].revelado,
html.js-revela .card[data-revela].revelado,
html.js-revela .passo[data-revela].revelado,
html.js-revela .secao__acao[data-revela].revelado,
html.js-revela .dupla-links[data-revela].revelado,
html.js-revela .politica__titulo[data-revela].revelado,
html.js-revela .plano[data-revela].revelado,
html.js-revela .post[data-revela].revelado,
html.js-revela .numero[data-revela].revelado,
html.js-revela .objecao[data-revela].revelado,
html.js-revela .fato[data-revela].revelado,
html.js-revela .episodio[data-revela].revelado,
html.js-revela .faq__item[data-revela].revelado,
html.js-revela .agenda__item[data-revela].revelado,
html.js-revela .alcance__linha[data-revela].revelado,
html.js-revela .secao--demonstra .tipos[data-revela].revelado,   /* refino r3 (patch 10): o payoff do h2 entra em F1; em Parcerias a .tipos é cascata por item */
html.js-revela .voz[data-revela].revelado{
  animation: mascara-secao var(--t-lento) var(--ease-luz) var(--atraso, 0ms) backwards;   /* backwards: o from cobre o delay; ao terminar o clip-path volta a none e o anel de foco fica inteiro */
}

/* as ações em cascata (refino r1 patch 38, perfil §3: stagger 60): o grupo
   nasce visível e cada filho entra 60ms depois do anterior.
   refino r3 (patch 28): por ANIMATION, não transition — a transition no filho
   substituía a própria da pílula (background 160 / transform 90) e do fantasma:
   depois de revelado o hover F3 saltava seco e o :active demorava 520ms em
   --ease-luz. @keyframes entra mora em dobra.css (12px / 8px via --sobe). */
html.js-revela .acoes[data-revela]{ opacity: 1; transform: none; transition: none; }
html.js-revela .acoes[data-revela]:not(.revelado) > *{ opacity: 0; }
html.js-revela .acoes[data-revela].revelado > *{ animation: entra var(--t-lento) var(--ease-luz) var(--atraso, 0ms) backwards; }
html.js-revela .acoes[data-revela].revelado > :nth-child(2){ animation-delay: calc(var(--atraso, 0ms) + 60ms); }
html.js-revela .acoes[data-revela].revelado > :nth-child(3){ animation-delay: calc(var(--atraso, 0ms) + 120ms); }
html.js-revela .acoes[data-revela].revelado > :nth-child(4){ animation-delay: calc(var(--atraso, 0ms) + 180ms); }

/* F2 abaixo da dobra (refino r1 patch 36): as réguas de seção se DESENHAM
   quando o primeiro bloco da seção aparece; sem JS nascem inteiras */
html.js-revela .secao--final:not(:has(.placa--painel))::before,
html.js-revela .secao--final:has(.placa--painel)::after,
html.js-revela .secao--formulario::after,
html.js-revela .secao--interesse::after,
html.js-revela .eventos[data-revela]::before,
html.js-revela .marcas[data-revela]::before,
html.js-revela .marcas[data-revela]::after{
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-lento) var(--ease-luz);
}
html.js-revela .secao--final:not(:has(.placa--painel)):has(.revelado)::before,
html.js-revela .secao--final:has(.placa--painel):has(.revelado)::after,
html.js-revela .secao--formulario:has(.revelado)::after,
html.js-revela .secao--interesse:has(.revelado)::after,
html.js-revela .eventos[data-revela].revelado::before,
html.js-revela .marcas[data-revela].revelado::before,
html.js-revela .marcas[data-revela].revelado::after{ transform: scaleX(1); }

/* F4 no campo do painel (refino r1 patch 37): no foco a régua some pela
   direita e volta pela esquerda, 1px, sem engrossar. Erro continua âmbar parado. */
@keyframes regua-refaz{
  0%  { background-size: 100% 1px; background-position: right bottom; }
  49% { background-size: 0 1px;    background-position: right bottom; }
  50% { background-size: 0 1px;    background-position: left bottom; }
  100%{ background-size: 100% 1px; background-position: left bottom; }
}
.placa--painel .campo__caixa:not(select){
  background-image: linear-gradient(var(--branco), var(--branco));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
}
.placa--painel .campo__caixa:not(select):focus{
  border-bottom-color: transparent;
  transition: none;
  animation: regua-refaz var(--t-medio) var(--ease-ui) forwards;
}
/* o select do painel ganha o F4 (refino r3, patch 31 — perfil §5 F4): a régua se
   refaz no foco como nos campos vizinhos; a seta é a 2ª camada, parada, no lugar
   do patch 26 */
@keyframes regua-refaz-select{
  0%  { background-size: 100% 1px, 14px 14px; background-position: right bottom, right 2px top calc(50% - 4px); }
  49% { background-size: 0 1px, 14px 14px;    background-position: right bottom, right 2px top calc(50% - 4px); }
  50% { background-size: 0 1px, 14px 14px;    background-position: left bottom,  right 2px top calc(50% - 4px); }
  100%{ background-size: 100% 1px, 14px 14px; background-position: left bottom,  right 2px top calc(50% - 4px); }
}
.placa--painel select.campo__caixa{
  background-image: linear-gradient(var(--branco), var(--branco)), var(--seta);
  background-repeat: no-repeat;
  background-size: 0 1px, 14px 14px;
  background-position: left bottom, right 2px top calc(50% - 4px);
}
.placa--painel select.campo__caixa:focus{
  border-bottom-color: transparent;
  transition: none;
  animation: regua-refaz-select var(--t-medio) var(--ease-ui) forwards;
}
.placa--painel .campo[data-erro="1"] .campo__caixa:focus{ animation: none; border-bottom-color: var(--ambar); }

@media (prefers-reduced-motion: reduce){
  html.js-revela [data-revela]{ opacity: 1; transform: none; clip-path: none; animation: none; }
  html.js-revela .acoes[data-revela] > *{ opacity: 1; transform: none; transition: none; animation: none; }   /* refino r3, patch 28 */
  html.js-revela .placa--painel{ background-color: var(--placa-fundo); transition: none; }   /* refino r3, patch 21 */
  html.js-revela .placa--painel::before,
  html.js-revela .placa--painel::after{ opacity: 1; transition: none; }
  .placa--painel select.campo__caixa:focus{ animation: none; border-bottom-color: var(--branco); }   /* refino r3, patch 31 */
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]{ animation: none; clip-path: none; opacity: 1; transform: none; }   /* refino r3, patch 33 */
  html.js-revela .secao--final::before,
  html.js-revela .secao--final::after,
  html.js-revela .secao--formulario::after,
  html.js-revela .secao--interesse::after,
  html.js-revela .eventos::before,
  html.js-revela .marcas::before,
  html.js-revela .marcas::after,
  html.js-revela .rodape__corte[data-revela]{ transform: none; transition: none; }
  html.js-revela .rodape::before{ transform: none; transition: none; }   /* refino r2, patch 15 */
  .placa--painel .campo__caixa:focus{ animation: none; border-bottom-color: var(--branco); }
  /* sem movimento o hover ainda avisa (A6) */
  .link-seta:hover,
  .btn-fantasma:hover{ color: var(--branco-quente); }
  .btn:hover{ background: var(--ambar-luz); }
  .placa::after{ transition: none; }
}

/* ===========================================================================
   9b. A PASSAGEM ENTRE PÁGINAS (refino r1, patch 34 — perfil §6: "toda página
   interna herda a passagem"). Morava em provas-home.css, que só a home
   carregava: o clique nas internas esperava 170ms sem sinal. As seções e o
   rodapé perdem 14% de luz na saída (a dobra tem o gesto dela e não se mexe),
   e o link clicado recolhe o traço e anda a seta. Ligada por ?prova=passagem
   (padrão: ligada, base.js §PROVAS).
   =========================================================================== */
html[data-prova~="passagem"] main .secao,
html[data-prova~="passagem"] .rodape{
  transition: filter 170ms var(--ease-filamento);
}
html[data-prova~="passagem"][data-passagem="sai"] main .secao,
html[data-prova~="passagem"][data-passagem="sai"] .rodape{
  filter: brightness(.86);
}
html[data-prova~="passagem"] a[data-saindo="1"] .link-seta__traco,
html[data-prova~="passagem"] a[data-saindo="1"] .btn-fantasma__traco{
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 110ms var(--ease-ui);
  animation: none;
}
html[data-prova~="passagem"] a[data-saindo="1"] .seta{
  transform: translate(3.4px, -3.4px);   /* os 1,4px do hover + 2px */
  transition: transform 110ms var(--ease-ui);
}
/* (a régua do topo do rodapé virou padrão em §8 — refino r2, patch 15; o
   escopo ?prova=regua saiu) */
@media (prefers-reduced-motion: reduce){
  html[data-prova~="passagem"] main .secao,
  html[data-prova~="passagem"] .rodape{ filter: none; transition: none; }
  html[data-prova~="passagem"] a[data-saindo="1"] .link-seta__traco,
  html[data-prova~="passagem"] a[data-saindo="1"] .btn-fantasma__traco{ transform: none; }
  html[data-prova~="passagem"] a[data-saindo="1"] .seta{ transform: none; }
}

/* âncora com rolagem suave só pra quem quer movimento */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* ===========================================================================
   10. AS DUAS COLUNAS DO CORPO (≥1024) — coluna direita ancorada na margem
   direita com a largura medida (B5): método 39,1% W · palco 50,6% · Vizu X
   45% (49,9% na imagem, onde o telefone encosta no texto — deriva; 45% mantém
   o título em 2 linhas com o vão de 48px) · conteúdo 22,3%. A coluna esquerda
   tem no máximo 44% W: é o que faz as headlines quebrarem como na imagem
   (3 linhas no método, 2 no Vizu X, no palco e no conteúdo).
   =========================================================================== */
.secao--metodo,
.secao--vizu,
.secao--palco,
.secao--conteudo,
.secao--voz,
.secao--caminhos:has(.placa--card),
.secao--final:has(.placa--painel){
  padding-top: var(--secao-topo);
  padding-bottom: var(--secao-base);
}

@media (min-width: 1024px){
  .secao--metodo,
  .secao--vizu,
  .secao--palco,
  .secao--conteudo{
    display: grid;
    column-gap: var(--vao-colunas);
  }
  .secao--metodo > * + *,
  .secao--vizu > * + *,
  .secao--palco > * + *,
  .secao--conteudo > * + *{ margin-top: 0; }
  .secao--metodo .secao__coluna,
  .secao--vizu .secao__coluna,
  .secao--palco .secao__coluna,
  .secao--conteudo .secao__coluna{ max-width: 44vw; }

  /* método: topo com topo (cap do rótulo = cap do nome do passo 1) */
  .secao--metodo{ grid-template-columns: minmax(0, 1fr) calc(39.1vw + 10px); align-items: start; }
  .secao--metodo .passos{ margin-top: 0; }

  /* Vizu X: o telefone centrado na seção, ancorado na margem direita. 45% W
     com vão de 48px: é o que deixa "O cliente vê a lente" inteiro na linha 1
     (578px de tinta @1440) — na imagem o telefone encosta no texto (deriva). */
  .secao--vizu{ grid-template-columns: minmax(0, 1fr) 45vw; column-gap: var(--e6); align-items: center; }
  .secao--vizu .moldura--app{ max-width: none; width: 100%; justify-self: end; align-self: center; }
  /* PROVISÓRIO (r2 P-10): o print tem 505×335 — não estica além do tamanho
     nativo (a 648px borrava). Sai junto com o print quando celular-vizu-x.png chegar. */
  .secao--vizu .moldura--app:has(.moldura__img){ width: auto; max-width: 505px; }

  /* palco: a foto centrada com o bloco esquerdo; sem a foto, uma coluna só,
     mas o bloco esquerdo guarda a largura (a geometria da imagem não muda) */
  .secao--palco{ grid-template-columns: minmax(0, 1fr) 50.6vw; align-items: center; }
  .secao--palco:has(.moldura[hidden]){ grid-template-columns: minmax(0, 1fr); }
  .secao--palco .eventos{ margin-top: var(--e8); }   /* link → régua full ≈ 84px (B3) */

  /* conteúdo: os links começam em ≈72% W, centrados com o bloco esquerdo */
  .secao--conteudo{ grid-template-columns: minmax(0, 1fr) 22.3vw; align-items: center; }
  .secao--conteudo .dupla-links{ margin-top: 0; align-self: center; }
}

/* ===========================================================================
   11. TABLET E MOBILE
   =========================================================================== */
/* tablet 768-1023 (D5): um card por linha com dt/dd em duas colunas */
@media (max-width: 1023px){
  .cards{ grid-template-columns: minmax(0, 1fr); }
  .secao--final{ grid-template-columns: minmax(0, 1fr); }
  .secao--final:has(.placa--painel){ grid-template-columns: minmax(0, 1fr); }
  .secao--metodo .passos{ margin-top: var(--e8); }
}
@media (min-width: 768px) and (max-width: 1023px){
  .card__lista{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e4);
    row-gap: var(--e2);
  }
  .card__lista dd,
  .card__lista dd + dt{ margin-top: 0; }
  .card__duracao{ grid-column: 1 / -1; margin-top: 0; }
}

/* MOBILE (390) — a imagem mobile ainda não existe: DEDUÇÃO DECLARADA.
   1 coluna; placas empilhadas com padding 24 e raio 10; títulos no piso do
   clamp (36px); numerais 72px; telefone abaixo do texto em largura cheia;
   formulário em largura cheia; ?prova=trilho continua (provas-home.css
   sobrescreve .cards em ≤767 — os cards-placa viram trilho). Toque ≥44px em
   tudo clicável (pseudo-elemento dos links, min-height nos campos). */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  /* ?v=c (refino r2, patch 36 — gosto): no celular a chamada da home fica sem a
     pílula dupla — o fantasma sozinho na coluna, a pílula âmbar é o submit a
     200px dali. Desktop não muda. */
  html[data-v~="c"] .secao--final:has(.placa--painel) .acoes--final .btn{ display: none; }
  .eventos__lista{ grid-template-columns: minmax(0, 1fr); row-gap: var(--e1); }   /* empilhado, sem ponto (r2 P-4) */
  .eventos__lista li:nth-child(even){ padding-left: 0; }
  .eventos__lista li:nth-child(even)::before{ content: none; }
  .secao--palco,
  .secao--vizu{ grid-template-columns: minmax(0, 1fr); }
  .secao--palco > * + *,
  .secao--vizu > * + *{ margin-top: var(--e8); }
  .eventos{ margin-top: var(--e7); padding-top: var(--e4); }
  .cards,
  .passos{ grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .cards{ margin-top: var(--e8); }
  .cards:has(.placa--card){ margin-top: var(--e6); gap: var(--e2); }
  .placa--card,
  .placa--painel{ padding: var(--e3); border-radius: var(--placa-raio-card); }
  .card.placa{ padding-top: var(--e3); }
  .passos{ gap: 0; }
  .passo{ padding-block: var(--e4); column-gap: var(--e3); }
  .form{ grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .placa--painel .form{ gap: var(--e2); }
  .moldura--app,
  .moldura--app:has(.moldura__img){ max-width: none; width: 100%; }
  .rodape__linha{ flex-direction: column; gap: var(--e6); }
  /* o centro é lei só na dobra (C8): na chamada final os botões alinham à esquerda */
  .secao--final{ row-gap: var(--e8); }   /* 64 em todas, com e sem placa (refino r1 patch 11/12) */
  /* um eixo só no celular (refino r3, patch 8 — r1 patch 30): as ações de TODA
     chamada empilham à esquerda, com o gap da chamada da home (32) */
  .secao--final .acoes,
  .secao--formulario .acoes,
  .secao--interesse .acoes,
  .acoes--lojas{ flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: auto; gap: var(--e4); }
  .passo__titulo{ letter-spacing: -.02em; }   /* tracking negativo só em título GRANDE (refino r1 patch 29) */
  /* ?prova=trilho: os 3 cards-placa revelam JUNTOS, em cascata, no sentido do
     gesto (refino r2 patch 32, escrito em internas.css que a home não carrega —
     refino r3, patch 33 traz pra cá) */
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]{ opacity: 1; transform: none; animation: mascara-secao var(--t-lento) var(--ease-luz) backwards; }
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]:nth-child(2){ animation-delay: 60ms; }
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]:nth-child(3){ animation-delay: 120ms; }
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]:nth-child(n+4){ animation-delay: 180ms; }
}

/* ===========================================================================
   12. MESA 2 — OS ATOS II E III (21/09/2026, direcao/spec-corpo.md §C)
   Depois do Gate B ("escuro, genérico, cru"), o Anthony gerou dois retratos 2:3,
   um por ATO, com duas seções cada: ato-2-metodo-vizux.png (método + Vizu X) e
   ato-3-conteudo-chamada.png (faixa de conteúdo + chamada). Cada seção é um
   quadro 4:3 = 1440×1080. O que a mesa mudou está nas decisões 17-32: o numeral
   de 200px, o nome do passo de 32, a coluna direita mais estreita e mais à
   direita, o ar de 216/240, o Vizu X com a coluna de texto estreita, o conteúdo
   virando FAIXA sem parágrafo, a régua de corte e o painel de 37,8% alinhado
   pelo topo.
   TUDO AQUI É ESCOPADO À HOME (.secao--metodo/--vizu/--conteudo só existem no
   index; o painel dentro de .secao--final também). As internas carregam este
   arquivo e não podem mudar: por isso tokens LOCAIS em vez de mexer no
   tokens.css compartilhado. Este bloco vem depois do §11 de propósito — ele
   corrige o §10 e o §11 da rodada 2.
   =========================================================================== */

/* --- 12a · título das seções de 2 colunas: 80px (dec. 18 e 25) ------------- */
.secao--metodo .secao__titulo,
.secao--vizu .secao__titulo,
.secao--conteudo .secao__titulo{ font-size: var(--h2-grande); }

/* a quebra da headline é SEGURADA na mão: a Gantari é ~15% mais larga que a
   face do gerador e a janela de max-width que reproduz a quebra da imagem tem
   3px em uma das seções (dec. 25/C3). O <br class="quebra"> só existe no
   desktop — abaixo de 1024 a headline reflui sozinha. */
@media (max-width: 1023px){
  br.quebra{ display: none; }
}

/* --- 12b · ATO II · O MÉTODO (dec. 17-19, 21) ----------------------------- */
.secao--metodo,
.secao--vizu{
  padding-top: var(--secao-topo-2col);       /* 216px @1440 (dec. 21) */
  padding-bottom: var(--secao-base-2col);    /* 240px @1440 */
}

/* tokens locais: o projeto-social também tem .passos e fica como estava */
.secao--metodo{
  --numeral: var(--numeral-metodo);          /* 200px @1440 · 96px @390 */
  --h3-passo: var(--h3-passo-metodo);        /* 32px @1440 · 24px @390 */
}
.secao--metodo .passo{
  grid-template-columns: calc(var(--numeral) * .55) minmax(0, 1fr);
  column-gap: 44px;                          /* leva o cap do nome pros 71% W medidos (C1) */
  padding-left: 0;                           /* o separador começa na coluna (60,4% W) */
  margin-left: 0;
  padding-block: 56px;                       /* apoio→separador 53 · separador→cap do nome 55 (C1) */
}
.secao--metodo .passo:first-child{ padding-top: 0; }
.secao--metodo .passo:last-child{ padding-bottom: 0; }
/* o numeral encosta o CAP do nome do passo: os dois nascem no mesmo topo de
   linha do grid, e a diferença é só a distância caixa→cap de cada corpo.
   Centrado na coluna porque os três dígitos têm avanço diferente (a fonte não é
   tabular): centrar é o que põe a TINTA dos três no mesmo eixo, 64% W. */
.secao--metodo .passo__n{
  margin-top: calc(var(--h3-passo) * var(--cap-lh120) - var(--numeral) * var(--cap-lh100));
  text-align: center;
}
.secao--metodo .passo__titulo{ max-width: 21vw; }   /* 300px @1440: o nome quebra em 2 linhas (dec. 18) */

/* --- 12c · ATO II · VIZU X (dec. 20) --------------------------------------
   O celular SANGRA pela borda direita na imagem (30,9% → 100% W). A camada
   `celular-vizu-x` refeita (aparelho inteiro, 17°, ≥2000×1510, alpha) ainda não
   chegou: até lá o print provisório fica em 505px nativos ancorado na margem
   direita — sangria de imagem borrada seria pior que a moldura.
   QUANDO A CAMADA CHEGAR: trocar o <img> e pôr data-camada no <figure>. A regra
   abaixo já está escrita; é só descomentar.
   .secao--vizu .moldura--app[data-camada],
   .secao--vizu .moldura--app[data-camada]:has(.moldura__img){
     width: 69vw;
     max-width: none;
     margin-right: calc(-1 * var(--margem));
   }
   (o clip mora no <main>, §0 — a seção não pode cortar, senão corta a poça) */

/* --- 12d · ATO III · A FAIXA DE CONTEÚDO (dec. 26, 32) --------------------- */
.secao--conteudo{
  padding-top: var(--faixa-topo);            /* topo → cap do rótulo 188px @1440 */
  padding-bottom: var(--faixa-base);         /* tinta do título → corte 141px @1440 */
}
/* passo cap-a-cap 89px e régua a 0,65 (dec. 26) — virou o padrão de
   .dupla-links em §2 (refino r1 patch 26) */

/* --- 12e · A RÉGUA DE CORTE entre a faixa e a chamada (dec. 27) -----------
   1px branco a 0,20, da margem esquerda sangrando até a borda direita. Mora na
   CHAMADA (top: 0), não na faixa: é o único jeito de a poça de luz da chamada
   (mix-blend-mode: screen, z-index −1) passar POR CIMA e acendê-la sob o halo,
   como na imagem. Por isso z-index −2. Divergência declarada da ficha: `left`
   é a margem e `right` é 0 porque a caixa de referência de um absoluto é a
   PADDING-box da seção (que já inclui a --margem) — o `right: -margem` da ficha
   sangraria uma margem inteira além da tela. */
.secao--final:has(.placa--painel)::after{
  content: "";
  position: absolute;
  left: var(--margem);
  right: 0;
  top: 0;
  height: 1px;
  z-index: -1;   /* refino r2 (patch 24): com −2 a régua ficaria atrás do fundo */
  pointer-events: none;
  background: var(--branco);
  opacity: var(--regua-corte);
}

/* --- 12f · ATO III · A CHAMADA FINAL (dec. 28, 32) ------------------------- */
.secao--final:has(.placa--painel){
  padding-top: var(--chamada-topo);          /* corte → topo do painel 135px @1440 */
  padding-bottom: var(--chamada-base);       /* cena embaixo do painel ≈200px */
}
.secao--final:has(.placa--painel) .acoes--final{ gap: 54px; }   /* pílula → link 54 (dec. 28) */

/* o painel (544px, raio 10, padding 43, título 40, fio .22, passo 88) virou o
   PADRÃO de .placa--painel em §2b e §7 (refino r1, patch 1): os tokens locais
   *-home saíram do tokens.css. Nada mais é escopado à home aqui. */

/* --- 12g · GEOMETRIA DE DUAS COLUNAS ≥1024 (dec. 19, 20, 26, 28) ---------- */
@media (min-width: 1024px){
  /* método: coluna direita de 35% W (503px) ancorada na margem direita, +20px
     de sangria à esquerda pro separador. A esquerda tem 47% W: é a largura que
     quebra "Ele ensina na / ordem em que / a venda acontece." em 3 linhas. */
  .secao--metodo{ grid-template-columns: minmax(0, 1fr) 35vw; }
  .secao--metodo .secao__coluna{ max-width: 47vw; }
  /* o numeral 1 começa ≈20px abaixo do cap do rótulo (dec. 19: topo-com-topo
     saiu). A conta desce do cap de cada corpo, não de um pixel chutado. */
  .secao--metodo .passos{
    margin-top: calc(20px + var(--tam-rotulo) * var(--cap-lh140) - var(--h3-passo) * var(--cap-lh120));
  }

  /* Vizu X: coluna de texto estreita (32% W de tinta) — o título vai a 3 linhas */
  .secao--vizu .secao__coluna{ max-width: 34vw; }

  /* conteúdo: FAIXA. Os links começam em 71% W (col. de 24,4% W ancorada na
     margem direita) e alinham TOPO COM TOPO com o título (dec. 26): o cap do
     link 1 no cap da L1. O deslocamento é o rótulo + o vão + a diferença de cap
     entre 80px/lh.95 e 24,5px/lh1.4. */
  .secao--conteudo{ grid-template-columns: minmax(0, 1fr) 24.4vw; align-items: start; }
  .secao--conteudo .secao__coluna{ max-width: 47vw; }
  .secao--conteudo .dupla-links{
    align-self: start;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3)
                     + var(--h2-grande) * var(--cap-lh095)
                     - var(--tam-link) * var(--cap-lh140));
  }

  /* chamada: painel de 37,8% W e o bloco esquerdo alinhado pelo TOPO — o cap de
     "Comece pela data." (80) na linha do cap de "Peça uma data" (40), que nasce
     43px abaixo do topo do painel (o padding). */
  .secao--final:has(.placa--painel){
    grid-template-columns: minmax(0, 1fr) 37.8vw;
    align-items: start;
  }
  .secao--final:has(.placa--painel) .secao__coluna{
    max-width: none;                         /* "Comece pela data." é 1 linha (dec. 25) */
    margin-top: calc(var(--placa-pad-painel)
                     + var(--h3-painel) * var(--cap-lh120-300)
                     - var(--h2-grande) * var(--cap-lh095));
  }
}

/* --- 12h · MOBILE 390 — DEDUÇÃO DECLARADA ---------------------------------
   Não existe imagem mobile da mesa 2. Mantido o que a mesa decidiu e adaptado o
   que o formato exige: numeral 96 e nome 24 (o piso dos clamps), uma coluna em
   tudo, links da faixa empilhados ABAIXO do título com a mesma régua a 0,65, a
   régua de corte sangrando igual (da margem à borda), painel em largura cheia e
   padding de 24. Alvo de toque ≥44px em tudo que clica (o .campo inteiro é o
   alvo; o link tem o pseudo-elemento de 44). */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .secao--metodo .passo{
    column-gap: var(--e3);
    padding-block: var(--e5);
    padding-left: 12px;
    margin-left: -12px;
  }
  .secao--metodo .passo__titulo{ max-width: none; }
  .secao--conteudo .dupla-links__item{ padding-block: var(--e3); }
  .placa--painel{ --placa-pad-painel: var(--e3); }
  .placa--painel .form{ margin-top: var(--e5); gap: var(--e3); }
  .secao--final:has(.placa--painel) .acoes--final{ gap: var(--e4); }
  /* F4 r1 (item 2): o rótulo de envio ("Enviar a mensagem pro Anderson")
     sangrava da pílula em 360. No celular ele pode virar 2 linhas, centrado,
     com entrelinha 1,2; a pílula estreita o padding lateral pra 20 e mantém
     a altura mínima. Vale pra todo .form__envio (home, Palestras, Vizu One
     e as três novas). */
  .form__envio .btn{ padding-inline: 20px; }
  /* (o rótulo não quebra mais: no celular ele é o curto, data-rotulo-curto —
     refino r2, patch 27) */
}
/* F4 r1 (item 8): no rodapé estreito a nav vira 2+2 (antes 3+1, "Contato"
   órfão). Geometria invisível, mesmo caso dos alvos de 44 da F2. */
@media (max-width: 480px){
  .rodape__nav{ display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); }
}
@media (max-width: 1023px){
  .secao--final:has(.placa--painel) .secao__coluna{ margin-top: 0; }
  .secao--conteudo .dupla-links{ margin-top: var(--e6); }
}