/* ===========================================================================
   internas.css — a base de página interna (F2, 18/09/2026).
   Carrega DEPOIS de tokens.css, dobra.css e home.css: tudo aqui desce dos
   tokens e do vocabulário da home (rótulo em caixa alta, título, texto, card
   com régua de 1px, moldura de slot, campo com régua embaixo, link com seta).
   Nenhuma cor, raio, sombra, gradiente ou forma nova. O fundo das internas é
   o palco da home (escolha do Anthony vendo, Gate B de 18/09).
   =========================================================================== */

/* ===========================================================================
   1. A DOBRA CURTA — sem herói, texto sobre o palco escuro
   =========================================================================== */
.dobra--interna{
  /* a headline da interna é 2,5× mais comprida que a da home e a L1 nunca
     quebra no desktop (copy): o corpo é o da home, TRAVADO pela largura
     (6,8vw = a L2, a mais larga das três). Sem teto de altura (rodada 3): o
     corpo é o mesmo da home. No celular a banda volta à da home, com quebras
     controladas (ver §13). */
  --h1: min(clamp(2.55rem, 1.285rem + 5.19vw, 6.35rem), 6.8vw);
  /* a cena precisa do chão dela: com menos de 100dvh o fundo.png cortava nas
     poltronas claras e virava linha dura contra a seção seguinte. A mesma
     altura da home, nos dois tamanhos. */
  min-height: 100vh;
  min-height: 100dvh;
}

.dobra--interna .dobra__corpo{
  /* centrado entre cabeçalho e rodapé da dobra (como a home), com respiro em
     cima e, embaixo, a reserva da lente (rodada 2). A linha `.dobra__rodape`
     do grid já reserva --rodape-linha; o corpo reserva o resto: os 8px da
     lente acima da régua + os 28px dos algarismos + 24px de folga. Total
     abaixo do texto = --rodape-linha + 60px, em qualquer altura. */
  justify-content: center;
  padding-top: var(--e5);
  padding-bottom: calc(8px + 28px + var(--e3));
}

/* o rótulo no tratamento do SELO, em cima da headline (refino r1, patch 22 —
   design-guide: rótulo em caixa alta, 14/400/.28em, cinza #B7B7B9; o acento
   âmbar fica pra ação e pro selo da home, que é peça aprovada) */
.dobra__rotulo{
  margin: 0 0 var(--e3);   /* 24 nos dois viewports (refino r3, patch 2: era 25,3 fracionário) */
  font-size: var(--tam-selo);
  font-weight: 400;
  letter-spacing: var(--tracking-rotulo);
  line-height: 1.4;
  color: var(--cinza-selo);
}
.dobra__rotulo > span{ display: block; }

/* as três linhas: nenhuma quebra que o navegador escolha (nowrap); no celular
   a quebra é um <br class="quebra-mobile">, escondido no desktop */
.dobra--interna .titulo__linha{ white-space: nowrap; }
.quebra-mobile{ display: none; }
/* sem herói não existe guarda 1: a L3 volta ao corpo natural da arte */
.dobra--interna .titulo__l3{ font-size: var(--h1-l3); }

.dobra__micro{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;   /* refino r1 (patch 23): 14px nunca a 300 */
  line-height: 1.5;
  color: var(--cinza-selo);
  max-width: 52ch;
}
.dobra__apoio{
  margin: var(--e4) 0 0;   /* 32 nos dois viewports (refino r2, patch 22) */
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);   /* uma entrelinha pro corpo (refino r3, patch 18) */
  color: var(--cinza-rodape);
  max-width: 58ch;
}
.dobra__micro > span,
.dobra__apoio > span{ display: block; }

/* a copy tem versão curta pro celular: as duas estão no HTML, uma por vez */
.so-mobile{ display: none !important; }

/* na dobra da interna a régua fica no MESMO lugar da home (a faixa de texto
   não se repete; o espaço dela fica) */
.dobra--interna .dobra__rodape{ padding-bottom: calc(var(--rodape-linha) - 1px); }

/* ===========================================================================
   2. O FUNDO — o palco da home (as duas camadas de fundo.png, sem herói),
   com as regras de dobra.css §1 e §1b tal como estão. Escolhido pelo Anthony
   vendo, entre palco e um fundo liso, no Gate B de 18/09; o liso saiu do
   código nessa data.
   =========================================================================== */

/* ===========================================================================
   3. A ABERTURA — o que a dobra da interna tem a mais entra no mesmo relógio
   =========================================================================== */
html[data-entrada="rodando"] .dobra__rotulo{
  animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-marca) backwards;
}
html[data-entrada="rodando"] .dobra__micro{
  animation: entra-miudo var(--t-medio) var(--ease-luz) calc(var(--d-link) + 50ms) backwards;
}
html[data-entrada="rodando"] .dobra__apoio{
  animation: entra var(--t-medio) var(--ease-luz) calc(var(--d-link) + 100ms) backwards;
}

/* ===========================================================================
   4. ESQUELETO DAS INTERNAS
   =========================================================================== */
.secao{ scroll-margin-top: calc(var(--cab-altura-curta) + var(--e2)); }
.secao[hidden],
.campo[hidden],
.campo__dica[hidden],
.card[hidden],
.moldura[hidden],
.faq__item[hidden],
[data-agenda-so][hidden],
[data-sucesso-link][hidden]{ display: none; }

/* marca de fábrica visível: o que ainda depende de outra fase */
.nota-fabrica{ color: var(--cinza-selo); }

/* --- ritmo vertical: UMA escala em quatro degraus (refino r3, patch 1 —
       engenharia "mesma escala no site todo"; spec-corpo dec. 13/21/32: a
       home é um crescendo medido 192 · 304 · 456 · 422 · 255). A BASE é uma só
       (104/88 @1440 · 64/56 @390) e o TOPO vem da classe; a junta é sempre
       base + topo, nunca a soma de dois paddings independentes.
       @1440: →ato 304 · →faixa 270 · →seção simples 192 · →chamada 255 ·
       pré-rodapé 200. @390: 136 · 137 · 120 · 126 · 96.
       --secao-y não é mais usado nas internas (fica só no rodapé). --- */
main:has(.dobra--interna) :where(.secao:not(.secao--final, .secao--formulario, .secao--interesse, .secao--eventos)){ padding-top: var(--secao-topo); padding-bottom: var(--secao-base); }
main:has(.dobra--interna) :is(.secao--faixa, .secao--canal){ padding-top: var(--faixa-topo); }       /* 182 · 81 (o #canal do Conteúdo é faixa por composição) */
main:has(.dobra--interna) .secao--ato{ padding-top: var(--secao-topo-2col); }                        /* 216 · 96 — 0,2,1 vence o :has() de 0,2,0 do home.css §10 */
main:has(.dobra--interna) .secao:has(+ .secao--final, + .secao--formulario, + .secao--interesse){ padding-bottom: var(--faixa-base); }   /* 120 · 54: junta antes da chamada = 255, a da home */
main:has(.dobra--interna) .secao--final + .secao--faq{ padding-top: var(--secao-base); }              /* Palestras: o apêndice cola na chamada (88 · 56 → junta 288 / 152) */
/* (grades a 80 — o 3º degrau coluna→grade — declaradas em cada bloco; a
   regra genérica daqui perdia por ordem: refino r2, patch 22) */

/* o h2 de 74 ganha mão (refino r3, patch 4 — spec-corpo dec. 6/§C3, "quebras
   seguradas na mão"): `balance` equilibra as linhas e mata a viúva; vale até
   6 linhas (nenhum h2 das internas passa de 5), nos dois viewports */
main:has(.dobra--interna) .secao__titulo{ text-wrap: balance; }

/* --- a escada de luz das internas (refino r1, patch 13 — design-guide "Luz no
       corpo", nível A: a 1ª seção após a dobra .14, chamada/formulário .13,
       nunca duas vizinhas iguais, NADA acima de .14) --- */
:where(main:has(.dobra--interna)) .secao{ --poca: .07; }   /* piso em :where(): especificidade 0,1,0 — a escada abaixo vence por ordem */
/* palestras (refino r2, patch 8: a 1ª seção após a dobra é a .14 — a luz não
   SOBE ao sair da dobra) */
.secao--eventos{ --poca: .14; }
.secao--temas{ --poca: .10; }
main:has(.dobra--interna) .secao--caminhos{ --poca: .08; }
.secao--agenda{ --poca: .055; }
.secao--galeria{ --poca: .10; }
.secao--kit{ --poca: .08; }
main:has(.dobra--interna) .secao--objecoes{ --poca: .055; }
main:has(.dobra--interna) .secao--final{ --poca: .13; }
.secao--faq{ --poca: .08; }
/* vizu-x */
.secao--problema{ --poca: .14; }
.secao--app{ --poca: .10; }
.secao--demonstra{ --poca: .055; }
.secao--pra-quem{ --poca: .08; }
.secao--planos{ --poca: .13; }
main:has(.dobra--interna) .secao--vozes{ --poca: .055; }
main:has(.dobra--interna) .secao--objecoes-vizu{ --poca: .08; }   /* precisa empatar com ...secao--objecoes (.055) e vencer por ordem */
.secao--faq-vizu{ --poca: .055; }
/* vizu-one */
.secao--interesse{ --poca: .13; }
/* parcerias */
.secao--recebe{ --poca: .14; }
.secao--formatos{ --poca: .08; }
.secao--marcas{ --poca: .055; }
.secao--alcance{ --poca: .08; }
main:has(.dobra--interna) .secao--objecoes#antes-de-propor{ --poca: .08; }   /* com #alcance escondido, marcas .055 → objeções .08 → formulário .13 (refino r3, patch 24) */
.secao--formulario{ --poca: .13; }
/* projeto social */
.secao--projeto{ --poca: .14; }
main:has(.dobra--interna) .secao--caminhos#portas{ --poca: .10; }
/* conteúdo */
.secao--podcast{ --poca: .14; }
.secao--episodios{ --poca: .08; }
.secao--canal{ --poca: .10; }
.secao--grupos{ --poca: .055; }
.secao--blog{ --poca: .08; }
/* contato */
.secao--canais{ --poca: .14; }
/* política */
.secao--politica{ --poca: .08; }

/* ===========================================================================
   5. TEMAS — 6 cards no vocabulário de card da home, sem botão
   =========================================================================== */
.cards--temas .card__pra-quem{ margin-top: var(--e3); }
/* piso de 4: com menos (?temas=3) vira lista simples, sem "pra quem" */
.cards--temas[data-modo="lista"]{
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
  max-width: 64ch;
}
.cards--temas[data-modo="lista"] .card__pra-quem,
.cards--temas[data-modo="lista"] .card__lista > dt{ display: none; }
.cards--temas[data-modo="lista"] .card__lista{ margin-top: var(--e2); }

/* ===========================================================================
   6. AGENDA PÚBLICA — três estados: vazia (padrão) · uma · cheia
   =========================================================================== */
.agenda{
  list-style: none;
  margin: var(--e8) 0 0;
  padding: 0;
  max-width: 72ch;
}
.agenda__item[hidden]{ display: none; }   /* o display:grid vencia o hidden e ?eventos=1 mostrava as 8 (refino r3, patch 6) */
.agenda__item{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--e2) var(--e4);
  align-items: baseline;
  padding: var(--e3) 0;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.agenda__nome{
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--branco);
}
.agenda__onde,
.agenda__quando{
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
  font-variant-numeric: tabular-nums;
}
.agenda__quando{ white-space: nowrap; }
.agenda__link{ grid-column: 1 / -1; }
/* a régua acende no hover dos itens COM ação (refino r1 patch 26: .45→.55) */
.plano, .post, .episodio, .agenda__item, .alcance__linha{ transition: border-top-color var(--t-medio) var(--ease-ui); }
@media (hover: hover){
  /* refino r3 (patch 30 — componentes-vivos "hover = resposta, não show"): acende
     quando o ponteiro está NO LINK; o parágrafo a 300px dele não esquenta o nome */
  .post:has(a:hover), .episodio:has(a:hover), .canal:has(a:hover), .agenda__item:has(a:hover), .alcance__linha:has(a:hover){
    border-top-color: rgba(255, 255, 255, var(--regua-cabecalho-fundo));
  }
}
/* com uma data só: um item, sem moldura de lista */
[data-agenda][data-estado="uma"] .agenda{ margin-top: var(--e6); }
[data-agenda][data-estado="uma"] .agenda__item{ border-top: 0; padding-top: 0; }

/* ===========================================================================
   7. GALERIA — molduras de slot, 3 por linha
   =========================================================================== */
.galeria{ margin: var(--e10) 0 0; }
.galeria__grade{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
}
.moldura__legenda{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-rodape);
}
.moldura__legenda > span{ display: block; color: var(--cinza-selo); }
.galeria > .moldura__nota{ margin-top: var(--e4); max-width: 64ch; }
/* a galeria vazia sem texto de bastidor (refino r3, patch 23 — Stanford #10): a
   moldura fica só com o [SLOT]; com foto, legenda e nota voltam */
.moldura:has(.moldura__vazio) .moldura__legenda{ display: none; }
.galeria:not(:has(.moldura__img)) > .moldura__nota{ display: none; }

/* ===========================================================================
   8. KIT DE CONTRATAÇÃO — construído, escondido até o PDF existir (?kit=1)
   =========================================================================== */
/* (o respiro texto→link vem de home.css: .secao__acao = 40px) */

/* ===========================================================================
   9. OBJEÇÕES — pergunta e resposta lado a lado, uma régua por item
   =========================================================================== */
/* refino r3 (patch 2 — refino-composição régua 1; engenharia "12 colunas" +
   largura de leitura 45-75ch; spec-corpo §B1): a pergunta mora na coluna que
   sobra, a resposta na coluna direita de 47vw (≈75ch @1440, o teto), a régua
   .45 vai de margem a margem, o h2 fica sobre a coluna das perguntas */
.objecoes{
  list-style: none;
  margin: var(--e8) 0 0;
  padding: 0;
  max-width: none;
}
.objecao{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--e2) var(--vao-colunas);   /* 16 / 69 (o clamp de 57,6 saiu: base 8) */
  padding: var(--e4) 0;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
@media (min-width: 1024px){
  .objecao{ grid-template-columns: minmax(0, 1fr) 47vw; }
  .objecao__resposta{ max-width: 75ch; }
  .secao--objecoes .secao__coluna{ max-width: 47vw; }
  .fatos--todos .fato{ grid-template-columns: minmax(0, 1fr) 47vw; column-gap: var(--vao-colunas); }
  .fatos--todos .fato__texto{ max-width: 75ch; }
}
.objecao__pergunta{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
}
.objecao__resposta{
  margin: 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}

/* ===========================================================================
   10. FAQ — acordeão: botão com aria-expanded, abre em 260ms --ease-ui.
   Quem colapsa (html.js-faq) é o mesmo arquivo que abre (palestras.js): sem
   ele, tudo nasce aberto e nada depende de script pra ler.
   =========================================================================== */
.faq{
  margin: var(--e8) 0 0;
  max-width: 72ch;
}
/* esquerda sticky + acordeão à direita (refino r2, patch 4 — substitui a grade
   de 2 colunas do r1 patch 8; refino-composição régua 1: objeções = linhas
   largas, FAQ = coluna direita — dois esqueletos) */
@media (min-width: 1024px){
  .secao--faq{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;   /* um eixo por página (refino r3, patch 3 — spec-corpo §B3: 50,6% W medido) */
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--faq > * + *{ margin-top: 0; }
  .secao--faq .secao__coluna{ max-width: none; position: sticky; top: calc(var(--cab-altura-curta) + var(--e4)); }
  .secao--faq .faq{ grid-column: 2; margin-top: 0; max-width: none; display: block; }
  .secao--faq > .secao__acao{ grid-column: 2; margin-top: var(--e6); }
  .faq__resposta{ padding-right: var(--e5); max-width: 58ch; }   /* ≈72 caracteres; o "+" continua na margem direita do item (refino r3, patch 3) */
}
.faq__item{ border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta)); }
/* (o último item termina no texto, como toda lista com régua — refino r3, patch 17) */
/* só onde a FAQ é apêndice DEPOIS da chamada (Palestras): o h2 fala mais baixo,
   40 @1440 · 24 @390 (design-que-conclui §4.3: o decrescendo) */
h2:is(.secao--final + .secao--faq .secao__titulo){ font-size: var(--h3-painel); line-height: 1.1; letter-spacing: -.02em; }
@media (max-width: 1023px){
  .secao--final + .secao--faq .faq{ margin-top: var(--e6); }
}
/* o "+" só promete abrir quando o acordeão existe (componentes-vivos receita 4) */
html:not(.js-faq) .faq__sinal{ display: none; }
html:not(.js-faq) .faq__botao{ cursor: default; }
.faq__pergunta{ margin: 0; font-size: inherit; font-weight: inherit; }
.faq__botao{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  min-height: 44px;
  padding: var(--e3) 0;
  text-align: left;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
  transition: color var(--t-rapido) var(--ease-ui);
}
@media (hover: hover){
  .faq__botao:hover{ color: var(--branco-quente); }
}
.faq__botao:active{ opacity: .8; }
.faq__botao:focus-visible{ outline-offset: 4px; }
/* o sinal: duas réguas de 1px (o "+"); a vertical some quando abre */
/* o "+" tem o tamanho do CAP, como todo glifo do set ao lado de texto (refino
   r3, patch 27 — design-guide "setas na altura da maiúscula"): .68em = 17,7 @26 ·
   15 @22; o centro do sinal no centro do cap (lh 1,3). O alvo de toque é o
   botão inteiro (min-height 44), não o glifo. */
.faq__sinal{
  position: relative;
  flex: 0 0 auto;
  width: .68em;
  height: .68em;
  margin-top: calc((1.3em - .68em) / 2);
  opacity: var(--traco-link);
}
.faq__sinal::before,
.faq__sinal::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}
.faq__sinal::before{ width: 100%; height: 1.5px; transform: translate(-50%, -50%); }
.faq__sinal::after{
  width: 1.5px; height: 100%;
  transform: translate(-50%, -50%) scaleY(1);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease-ui);
}
.faq__item[data-aberto="1"] .faq__sinal::after{ transform: translate(-50%, -50%) scaleY(0); }

.faq__miolo{ min-height: 0; overflow: hidden; }
.faq__resposta{
  margin: 0;
  padding: 0 var(--e8) var(--e4) 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}
html.js-faq .faq__corpo{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-medio) var(--ease-ui);
}
html.js-faq .faq__item[data-aberto="1"] .faq__corpo{ grid-template-rows: 1fr; }
/* a resposta ENTRA (F1), não "nasce cortada" (refino r1 patch 8); sem JS
   tudo nasce aberto e visível */
html.js-faq .faq__miolo{
  opacity: 0;
  transform: translateY(var(--sobe-miudo));
  transition: opacity var(--t-rapido) var(--ease-luz), transform var(--t-rapido) var(--ease-luz);
}
html.js-faq .faq__item[data-aberto="1"] .faq__miolo{ opacity: 1; transform: none; transition-delay: 80ms; }
/* saída = 0,6× da entrada (perfil §3): fecha em 160, abre em 260 (refino r2, patch 4) */
html.js-faq .faq__item:not([data-aberto="1"]) .faq__corpo{ transition-duration: var(--t-rapido); }
.faq__item:not([data-aberto="1"]) .faq__sinal::after{ transition-duration: var(--t-rapido); }

/* ===========================================================================
   11. FORMULÁRIO QUALIFICADO — o campo condicional e o seletor de data
   =========================================================================== */
/* (color-scheme: dark e accent-color âmbar moram em tokens.css :root — refino r2, patch 26) */
/* o ícone do calendário é a seta ↓ do set (refino r1 patch 31), 14px, traço 1,5 */
input[type="date"].campo__caixa::-webkit-calendar-picker-indicator{
  opacity: 1;
  width: 14px;
  height: 14px;
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B7B7B9' stroke-width='1.714' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(135 8 8)' d='M2.2 13.8 13.8 2.2M5.6 2.2h8.2v8.2'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  cursor: pointer;
}

/* ===========================================================================
   12. REDUCED MOTION — o acordeão abre sem transição (as globais de dobra.css
   já zeram duração); nada mais aqui anima
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  html.js-faq .faq__corpo,
  .faq__sinal::after{ transition: none; }
  html.js-faq .faq__miolo{ transition: none; transform: none; opacity: 1; }
  .btn--fixo{ animation: none; transform: none; opacity: 1; }
}

/* ===========================================================================
   13. MOBILE E LARGURAS INTERMEDIÁRIAS
   =========================================================================== */
@media (max-width: 1023px){
  .galeria__grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .objecao{ grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
}

@media (max-width: 767px), (max-aspect-ratio: 1.25){
  /* rodada 2: a headline volta à banda da home no celular (40,6px @390 ·
     37,4px @360: o piso de 40,8 do clamp deixava "Ele ensina ótica" a 2px da
     margem no 360, por isso o teto de 10,4vw) com quebras CONTROLADAS: L1
     depois de "ótica", L2 depois de "evento," (os <br> só existem aqui).
     5 linhas no total. */
  .dobra--interna{ --h1: min(clamp(2.55rem, 1.285rem + 5.19vw, 6.35rem), 10.4vw); }
  /* Vizu X e Vizu One (F3): a linha mais larga mede 7,8em do h1 ("a lente
     antes do preço." · "Um CRM pra ótica,"), contra 6,5 em Palestras; o teto
     desce pra 9,2vw (35,9px @390 · 33,1px @360) pra nenhuma linha estourar */
  .dobra--vizu{ --h1: min(clamp(2.55rem, 1.285rem + 5.19vw, 6.35rem), 9.2vw); }
  /* refino r2 (patch 19): nessas páginas a h1 é capada a 9,2vw (35,9 @390) e o
     h2 tem que ficar em 80% dela (design-guide: L3 = 79% da L1) → 7,4vw =
     28,9 @390 · 26,6 @360. Desktop inalterado. */
  main:has(.dobra--vizu){
    --h2: min(clamp(2rem, 1.1rem + 3.9vw, 4.8rem), 7.4vw);
    --h2-grande: min(clamp(2rem, 1.1rem + 4.3vw, 5rem), 7.4vw);
    /* o degrau abaixo acompanha (refino r3, patch 19): 22 @390 · 20,3 @360 —
       h2/item 1,31 · item/corpo 1,37 (o 24 quase empatava com o h2 de 28,9) */
    --h3-card: min(clamp(1.5rem, 1.314rem + .762vw, 2rem), 5.65vw);
  }
  /* tracking negativo só em título GRANDE (refino r1 patch 29): a 32,8 o -.04em
     encostava as hastes; só internas — a home mobile não se toca */
  main:has(.dobra--interna) .secao__titulo{ letter-spacing: -.02em; }
  /* a política: o título da página pesa mais que o item (28,9 → 22 → 16/500 → 16) */
  h2:is(.secao--politica .secao__titulo){ font-size: var(--h2); line-height: .95; }
  /* F4 r1 (item 1): a L3 mais comprida das internas ("e entram no mercado." ·
     "um canal e o assunto.", 9,5em) estourava a coluna de 77,9vw e o clip da
     linha cortava o "o" (mercadc). Só a L3 ganha teto por vw, no mesmo
     mecanismo do dobra--vizu: 7,5vw = 27px @360 (sobra 9,7px) · 29,3px @390
     (sobra 26px). L1 e L2 não mudam. */
  .dobra--interna.dobra--l3-longa .titulo__l3{ font-size: min(var(--h1-l3), 7.5vw); }
  .quebra-mobile{ display: inline; }
  .dobra--interna .dobra__corpo{
    /* a dobra é 100dvh e o corpo centra na sobra, como no desktop; o respiro
       mínimo em cima é 12px (= 40px da RÉGUA do header, que fica 28px acima
       do fim do cabeçalho de 80px) e embaixo a reserva da lente */
    padding-top: 12px;
    padding-bottom: calc(8px + 28px + var(--e3));
  }
  /* no celular o rótulo em caixa alta quebra em duas linhas (não cabe nem com
     tracking zero); o tracking desce pro da faixa (.14em) e o separador viaja
     com a palavra SEGUINTE (nbsp depois do ·, no HTML) */
  .dobra__rotulo{ letter-spacing: var(--tracking-rotulo-interno); }   /* .22em: a família RÓTULO, como o .rotulo das seções (refino r3, patch 19) */
  .so-desktop{ display: none !important; }
  .so-mobile{ display: block !important; }
  /* o microtexto é legenda dos botões: centrado como eles (a arte mobile
     centra a dupla); a linha de apoio volta pra coluna de texto */
  .dobra__micro{
    text-align: center;
    max-width: 36ch;
    margin-inline: auto;
  }
  /* um eixo só na dobra do celular (refino r1 patch 30): o apoio também centra */
  .dobra--interna .dobra__apoio{ text-align: center; margin-inline: auto; max-width: 34ch; }

  .galeria__grade{ grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  /* enquanto a foto real não chega (patch r2, P1 do qa-mobile): no celular só
     o 1º slot fica de pé — 3 molduras vazias empilhadas eram ~3 telas sem
     conteúdo. Moldura com foto (.moldura__img) nunca some. */
  .galeria__grade .moldura:nth-child(n+2):has(.moldura__vazio){ display: none; }
  .agenda__item{ grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .faq__resposta{ padding-right: var(--e5); }
  /* no celular o apêndice sobe um degrau (refino r3, patch 12 — engenharia
     "degraus DISTANTES": 24 contra perguntas a 22 era 1,09; 32,8 @390 dá 1,49) */
  h2:is(.secao--final + .secao--faq .secao__titulo){ font-size: var(--h2); line-height: .95; letter-spacing: -.02em; }
}

/* ===========================================================================
   14. VIZU X + VIZU ONE (F3, 21/09/2026) — tudo no vocabulário das internas:
   régua de 1px, tipografia, respiro. O azul do Vizu X só dentro das fotos.
   =========================================================================== */

/* --- B · o app em uso: 3 fotos reais, nunca acima do nativo, sem sombra --- */
.app-fotos{
  margin-top: var(--e10);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}
.app-foto{ margin: 0; }
.app-foto--celular{ grid-column: 1 / -1; }
.app-foto__img{
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
}
.app-foto--celular .app-foto__img{ max-width: 505px; border: 1px solid rgba(255, 255, 255, var(--fio-moldura)); border-radius: 6px; }   /* a mesma família dos tablets (refino r3, patch 23) */
.app-foto--celular[data-camada] .app-foto__img{ border: 0; border-radius: 0; }   /* pronto pra camada alpha */
.app-foto__legenda{
  margin: var(--e2) 0 0;
  max-width: 52ch;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-rodape);
}
/* o wordmark do Vizu X assina a seção, pequeno (produto dele, não terceiro) */
.app-assinatura{ margin-top: var(--e6); }

/* --- C · a linha dos tipos e a lista do que o app demonstra --- */
/* a linha dos seis tipos é o PAYOFF do h2 (refino r1 patch 8): 26 @1440 */
.tipos{
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--h3-card);   /* 32 @1440 (refino r2, patch 21: o payoff do h2 sobe um degrau) */
  font-weight: 300;
  line-height: 1.4;   /* lista de seis itens em 3 linhas, não parágrafo: ar entre os itens (refino r3, patch 10; tell do detector zerado) */
  letter-spacing: -.02em;
  color: var(--branco);
}
/* o ponto fica no FIM do item (nunca abre linha) */
.tipos li:not(:last-child)::after{ content: "·"; margin-left: 20px; color: var(--cinza-selo); }

.fatos{
  margin: var(--e8) 0 0;
  max-width: 96ch;
}
.fato{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--e2) var(--e7);   /* 56, a grade 2×3 de #na-tela (refino r3, patch 2: base 8) */
  padding: var(--e4) 0;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.fato__nome{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
  text-wrap: balance;
}
.fato__texto{
  margin: 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}
/* "em todos os planos" (refino r1 patch 9): régua única em cima, rótulo estreito */
.fatos--todos{ max-width: none; margin-top: var(--e8); border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta)); }
.fatos--todos .fato{ border-top: 0; }   /* a coluna de leitura de 47vw ≥1024 mora no §9 (refino r3, patch 2) */

/* --- D · card de texto (sem dl) --- */
.card__texto{
  margin: var(--e4) 0 0;   /* paridade com o card de Palestras (G6) */
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}

/* --- E · os planos: preço na frente (R$ menor, valor grande, "por mês") --- */
.planos{
  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);
}
/* os três planos são PLACAS com os pés alinhados (refino r1 patch 9 —
   componentes-vivos "cards comparáveis"); o preço desce do 80 pro degrau 56 */
.plano{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--placa-pad-card);
  border-top: 0;
}
/* a anatomia da placa (refino r2, patch 20 — spec-corpo A6): nome 32 → preço 56
   → rótulo 14 ("por mês") → lista 18 */
.plano__nome{
  margin: 0;
  font-size: var(--h3-card);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--branco);
}
.plano__preco{
  margin-top: var(--e3);
  display: flex;
  align-items: baseline;
  gap: .3em;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}
.plano__moeda{
  font-size: var(--tam-corpo);
  font-weight: 400;   /* todo texto ≤18 sai do 300 (refino r3, patch 20): o "R$" sumia ao lado do 79,90 */
  line-height: 1;
}
.plano__valor{
  font-size: clamp(2.5rem, 1.9rem + 2.1vw, 3.5rem);   /* 40 @390 · 56 @1440: o h2 volta a ser o único 74-80 da seção */
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
}
.plano__periodo{
  margin-top: var(--e1);
  font-size: var(--tam-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo-interno);
  line-height: 1.5;
  color: var(--cinza-selo);
}
/* "Tudo do Essential, mais:" é RÓTULO, não item (refino r3, patch 20 — spec-corpo
   A6: o dt da placa é 14/400/.22em) */
.plano__base{
  margin-top: var(--e4);
  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);
}
.plano__base[hidden]{ display: none; }
.plano__lista{
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e2);
  flex: 1 0 auto;
  align-content: start;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}
.plano__base + .plano__lista{ margin-top: var(--e1); }
/* a placa deixa de ser tabela (refino r3, patch 17 — Gestalt região comum: o
   divisor interno nunca mais forte que a borda da região): réguas a .28, um
   degrau abaixo do fio de topo, um acima da lateral; a 1ª some */
.plano__lista li{
  padding-top: var(--e2);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho));
}
.plano__lista li:first-child{ border-top: 0; padding-top: 0; }
.plano .btn-fantasma{ margin-top: auto; padding-top: var(--e5); align-self: flex-start; }   /* os três "Assinar…" no mesmo pé */
/* ?v=b: o plano-alvo aceso (fio de topo no nível do hover, sem sombra) —
   QUAL plano é o alvo é decisão do Anderson */
html[data-v~="b"] .plano:nth-child(2){ --fio-a: .29; --fio-b: .65; }
/* com um plano só (?planos=1): um card, na largura de um card */
.planos[data-modo="um"]{ grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.plano[hidden],
[data-planos-so][hidden]{ display: none; }

/* --- F · os depoimentos em grade (4) ou citação única (1) --- */
.vozes{
  margin: var(--e10) 0 0;   /* grade a 80 (refino r2, patch 22) */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
}
.vozes .voz{ max-width: none; }
/* a fala é o título (refino r1 patch 28 — design-que-conclui §5.3): 26 @1440 */
.vozes .voz__fala{
  font-size: var(--h3-passo);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--branco);
}
.vozes .voz__quem cite{ font-size: var(--tam-corpo); }
/* uma citação só: o desenho da home (grande, 34ch), sem grade */
.vozes[data-modo="uma"]{ grid-template-columns: minmax(0, 1fr); }
.vozes[data-modo="uma"] .voz{ max-width: 34ch; }
.vozes[data-modo="uma"] .voz__fala{ font-size: var(--h3); line-height: 1.4; letter-spacing: -.01em; }
.secao--vozes[hidden],
.voz[hidden]{ display: none; }

/* --- I · a chamada final com as lojas: pílula + dois secundários --- */
.acoes--lojas{ flex-wrap: wrap; column-gap: var(--e3); row-gap: var(--e3); }
.acoes--lojas .btn-fantasma{ flex: 0 0 auto; }   /* sem órfão na quebra (G2) */

/* --- J · a coda "palestras e app" foi fundida em #baixar (refino r2, patch 7):
       a página termina na chamada; o link fala mais baixo que as ações da
       coluna direita (19,5: nunca nivelar) --- */
.secao--baixar .secao__micro + .secao__micro{ margin-top: var(--e2); }
.secao--baixar .secao__coluna .secao__acao{ margin-top: var(--e4); }
.secao--baixar .secao__coluna .secao__acao .link-seta{ font-size: var(--tam-link-card); }
/* a saída ao fim das objeções do Vizu X (patch 7) */
.secao--objecoes .objecoes + .secao__acao{ margin-top: var(--e6); }

/* --- Vizu One (refino r1, patch 3): a lista de interesse entra na PLACA e a
       seção vira a chamada da home (grid 37,8vw, topo com topo — home.css §12g);
       o rótulo→título é 24 como no resto; régua de corte .20 acesa pela poça --- */
.secao--interesse .secao__titulo{ margin-top: var(--e3); }
.secao--interesse::after{
  content: "";
  position: absolute;
  left: var(--margem);
  right: 0;
  top: 0;
  height: 1px;
  z-index: -1;   /* refino r2 (patch 24) */
  pointer-events: none;
  background: var(--branco);
  opacity: var(--regua-corte);
}
.formulario__honestidade{ margin-top: var(--e4); }
.secao--interesse .acoes--final{ margin-top: var(--e8); }   /* o fantasma do WhatsApp (refino r2, patch 11) */

@media (max-width: 1023px){
  .planos{ grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .fato,
  .fatos--todos .fato{ grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  .vozes{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .app-fotos{ grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .planos{ gap: var(--e6); margin-top: var(--e8); }
  .plano{ padding: var(--e3); }
  .vozes{ gap: var(--e6); }
  .acoes--lojas{ align-items: flex-start; align-self: auto; }
  .tipos{ gap: 8px 16px; }
  .tipos li:not(:last-child)::after{ margin-left: 16px; }
  /* os quatro depoimentos andam num TRILHO (refino r1 patch 28; ?v=c empilha) */
  .vozes:not([data-modo="uma"]){
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: var(--e3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margem);
    margin-inline: calc(-1 * var(--margem));
    padding-inline: var(--margem);
    scrollbar-width: none;
  }
  .vozes::-webkit-scrollbar{ display: none; }
  .vozes .voz{ scroll-snap-align: start; }
  html[data-v~="c"] .vozes:not([data-modo="uma"]){
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--e6);
  }
  /* ?v=d (refino r2, patch 20): os planos num TRILHO no celular, pra se
     compararem (padrão = empilhados); [data-modo="um"] fica fora */
  html[data-v~="d"] .planos:has(.placa--card):not([data-modo="um"]){
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: var(--e3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margem);
    margin-inline: calc(-1 * var(--margem));
    padding-inline: var(--margem);
    scrollbar-width: none;
    max-width: none;
    align-items: stretch;
  }
  html[data-v~="d"] .planos:has(.placa--card):not([data-modo="um"]) .plano{ scroll-snap-align: start; }
  html[data-v~="d"] .planos::-webkit-scrollbar{ display: none; }
}

/* ===========================================================================
   15. PARCERIAS + PROJETO SOCIAL + CONTEÚDO (F4 leva 1, 21/09/2026) — o mesmo
   vocabulário: régua de 1px, rótulo em caixa alta, placa nos cards e no
   painel do formulário (home.css §2b), link com seta. Nada novo de cor,
   raio ou sombra.
   =========================================================================== */

/* --- a seção do formulário (Parcerias, Projeto social, Contato) É a chamada
       final da home (refino r1, patch 4 — spec-corpo dec. 28 + §A2): bloco
       esquerdo com o h2 grande, o texto, a linha de honestidade e o fantasma do
       WhatsApp; painel de 37,8% W na margem direita, alinhado pelo topo; régua
       de corte .20 acesa pela poça (.13, era .24 = 1,7× o teto) --- */
.secao--formulario{
  --poca: .13;
  padding-top: var(--chamada-topo);
  padding-bottom: var(--chamada-base);
}
.secao--formulario::after{
  content: "";
  position: absolute;
  left: var(--margem);
  right: 0;
  top: 0;
  height: 1px;
  z-index: -1;   /* refino r2 (patch 24) */
  background: var(--branco);
  opacity: var(--regua-corte);
  pointer-events: none;
}
.secao--formulario > * + *{ margin-top: 0; }
.secao--formulario .secao__titulo{ margin-top: 0; }
.secao--formulario .acoes--final{ margin-top: var(--e8); gap: var(--vao-pilula-link); }   /* 54px medido (dec. 28), via token */
.secao--formulario .secao__micro{ margin-top: var(--e3); }
@media (min-width: 1024px){
  .secao--formulario{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 37.8vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  /* cap do h2 (80/.95) na linha do cap do título do painel (40/1,2), que
     nasce 43px abaixo do topo do painel — a fórmula do home.css §12g (refino
     r3, patch 9: o painel abre em 40 como os outros três) */
  .secao--formulario .secao__coluna{
    max-width: none;
    margin-top: calc(var(--placa-pad-painel)
                     + var(--h3-painel) * var(--cap-lh120-300)
                     - var(--h2-grande) * var(--cap-lh095));
  }
  .secao--formulario .formulario{ max-width: none; grid-column: 2; }
}
@media (max-width: 1023px){
  .secao--formulario{ display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--e8); }
  .secao--formulario .secao__coluna{ margin-top: 0; }
  /* (o .acoes--final herda os 64 do home.css §7 — refino r3, patch 8) */
}
/* dentro da placa o sucesso ocupa o lugar do formulário */
.placa--painel .form-sucesso{ margin-top: var(--e5); max-width: none; }

/* --- grupo de rádio (a porta do projeto social): o mesmo desenho da caixa
       de aceite, redondo, com o ponto em âmbar chapado --- */
fieldset.campo{ margin: 0; padding: 0; border: 0; min-width: 0; }
.campo--opcoes > legend{ padding: 0; }
.campo__opcoes{
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e4);
  margin: var(--e1) 0 0;
  padding: 0;
  min-width: 0;
}
/* sem JS (html sem .js) os campos condicionais nascem visíveis e nada
   condicional é obrigatório: o formulário continua inteiro e utilizável */
html:not(.js) .form [data-se-campo][hidden],
html:not(.js) .form [data-se-menor][hidden]{ display: block; }
/* F4 r1 (item 11): o bloco condicional é grid, não block; e o asterisco de
   campo condicional só vale com JS (sem JS nada condicional é obrigatório) */
html:not(.js) .form .form__bloco[hidden]{ display: grid; }
html:not(.js) .form [data-se-campo] abbr,
html:not(.js) .form [data-se-menor] abbr{ display: none; }
.campo__opcao{
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease-ui), opacity var(--t-ativo) var(--ease-ui);
}
.campo__opcao:active,
.campo__rotulo--marca:active{ opacity: .85; }
.campo__radio{
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, var(--traco-link));
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-rapido) var(--ease-ui), background-color var(--t-rapido) var(--ease-ui);
}
/* marcado = placa âmbar cheia com o ponto na tinta escura, a gramática do visto
   (refino r3, patch 13 — componentes-vivos receita 4: "o mesmo desenho, redondo") */
.campo__radio::after{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--tinta-no-ambar);
  transform: scale(0);
  transition: transform var(--t-rapido) var(--ease-ui);
}
.campo__radio:checked{ border-color: var(--ambar); background: var(--ambar); }
.campo__radio:checked::after{ transform: scale(1); }
.campo__radio:focus-visible{ outline-offset: 4px; border-radius: 50%; }
@media (hover: hover){
  .campo__opcao:hover{ color: var(--branco); }
  .campo__opcao:hover .campo__radio{ border-color: var(--branco); }
}
.campo__opcao:has(.campo__radio:checked){ color: var(--branco); }
.campo[data-erro="1"] .campo__radio{ border-color: var(--ambar); }

/* --- bloco condicional dentro do formulário (o responsável): título em h3
       pequeno, linha de abertura, e os campos empilhados como o resto --- */
.form__bloco{
  grid-column: 1 / -1;
  display: grid;
  gap: 20px;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.form__bloco[hidden]{ display: none; }
.form__bloco-titulo{
  margin: 0;
  font-size: var(--h3-card);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
}
.form__bloco-abertura{
  margin: calc(var(--e1) - 20px) 0 0;   /* cola no título: o gap do grid já é 20 */
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}
/* a caixa de consentimento do responsável, em DESTAQUE e separada do aceite
   geral: uma régua de 1px em volta (o vocabulário de linha da marca) */
/* refino r2 (patch 16): sem caixa de 4 lados (componentes-vivos tell 4) —
   régua dupla .55, o desenho de .marcas */
.campo--destaque{
  padding: var(--e3) 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-fundo));
  border-bottom: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-fundo));
}
.campo--destaque .campo__rotulo--marca{
  align-items: flex-start;
  color: var(--branco);
}
.campo--destaque .campo__marca{ margin-top: 2px; }
.campo__base-legal{
  margin: var(--e1) 0 0;
  font-size: var(--tam-micro);   /* piso 14px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
}
/* a linha extra do erro só na porta participar com menor de 18 (base.js põe
   data-estado e data-menor no form; sem JS o form nunca chega a "erro") */
.form__aviso--menor{ display: none; margin-top: calc(var(--e1) - 20px); }
.form[data-estado="erro"][data-menor="1"] .form__aviso--menor{ display: block; }
/* os blocos de sucesso do projeto social (um por porta) */
.form-sucesso__bloco[hidden]{ display: none; }

/* --- Parcerias A (refino r2, patch 2): "onde a marca aparece" é a coluna
       direita da FAIXA, lista com régua .45, cap do 1º item na linha do cap da
       L1 do h2 (spec-corpo §B4/B5, dec. 26). Com o frame do podcast visível a
       foto ocupa a direita e a lista desce pra baixo do texto. Um desenho só
       nas duas larguras: a linha inline com "·" saiu. --- */
.secao--recebe > .tipos{
  display: block;
  margin-top: var(--e5);
  max-width: 64ch;
  font-size: var(--h3-card);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.secao--recebe > .tipos li{
  display: block;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.secao--recebe > .tipos li:first-child{ border-top: 0; padding-top: 0; }
.secao--recebe > .tipos li::after{ content: none; margin: 0; }
.secao--recebe > .moldura{ margin-top: var(--e8); }
/* (.moldura--foto .moldura__img mora no home.css §3 — refino r3, patch 23) */
@media (min-width: 1024px){
  .secao--recebe{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.4vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--recebe > * + *{ margin-top: 0; }
  .secao--recebe .secao__coluna{ max-width: 47vw; }
  .secao--recebe > .tipos{
    grid-column: 2;
    max-width: none;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095) - var(--h3-card) * .30);
  }
  .secao--recebe:has(.moldura:not([hidden])){ grid-template-columns: minmax(0, 1fr) 50.6vw; align-items: center; }
  .secao--recebe:has(.moldura:not([hidden])) > .moldura{ grid-column: 2; margin: 0; }
  .secao--recebe:has(.moldura:not([hidden])) > .tipos{ grid-column: 1; margin-top: var(--e5); }
}

/* --- Parcerias B: os formatos em dl .fatos; com 2 (?formatos=2) vira lista
       simples, sem régua, dt e dd empilhados --- */
.fatos[data-modo="lista"]{ max-width: 64ch; }
.fatos[data-modo="lista"] .fato{
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e1);
  padding: 0;
  border-top: 0;
}
.fatos[data-modo="lista"] .fato + .fato{ margin-top: var(--e4); }
.fato[hidden]{ display: none; }

/* --- Parcerias C: os nomes das marcas, só tipografia, nunca logo. Faixa de
       margem a margem no desenho da faixa de eventos (refino r1 patch 14):
       régua dupla .45 (pseudo-elementos, pra se desenharem — F2, patch 36) --- */
.marcas{
  position: relative;
  list-style: none;
  margin: var(--e8) 0 0;
  padding: var(--e5) 0;
  max-width: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
}
.marcas::before,
.marcas::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.marcas::before{ top: 0; }
.marcas::after{ bottom: 0; }
.marcas[data-modo="longa"]{ justify-content: flex-start; column-gap: var(--e8); }
.marcas li{ white-space: nowrap; }
.secao--marcas[hidden]{ display: none; }

/* --- Parcerias D: alcance por canal, construído SEM número (?alcance=1) --- */
.alcance{
  margin: var(--e8) 0 0;
  max-width: 72ch;
}
.alcance__linha{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--e1) var(--e4);
  align-items: baseline;
  padding: var(--e3) 0;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.alcance__canal{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
}
.alcance__numero,
.alcance__data{
  margin: 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
  font-variant-numeric: tabular-nums;
}

/* --- Projeto social C: as seções escondidas (esqueleto) --- */
.numeros{
  margin: var(--e10) 0 0;   /* grade a 80 (refino r2, patch 22) */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
}
.numero{
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.numero__valor{
  margin: 0;
  font-size: var(--h2);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--numeral-cor);
  font-variant-numeric: lining-nums tabular-nums;
}
.numero__nome{
  margin: var(--e2) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 400;
  line-height: var(--lh-corpo);
  color: var(--branco);
}
.numero__fonte{
  margin: var(--e1) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.5;
  color: var(--cinza-selo);
}
.secao--escondida .passos{ margin-top: var(--e8); }
/* o slot da turma na língua da casa (refino r2, patch 16): moldura 1,65:1 à
   direita, centrada com o texto (spec-corpo dec. 10/§B3); ?historia=1 mostra */
.secao--escondida .moldura{ margin-top: var(--e8); }
.secao--escondida .moldura :is(.moldura__vazio, .moldura__img){ aspect-ratio: 1.65; }
@media (min-width: 1024px){
  .secao--escondida:not([hidden]):has(.moldura){   /* :not([hidden]): o grid não pode vencer o display:none da seção escondida */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;
    column-gap: var(--vao-colunas);
    align-items: center;
  }
  .secao--escondida:has(.moldura) > * + *{ margin-top: 0; }
  .secao--escondida:has(.moldura) .secao__coluna{ max-width: 44vw; }
  .secao--escondida .moldura{ grid-column: 2; max-width: none; margin-top: 0; }
}

/* --- Conteúdo A: as duas saídas do podcast na dupla-links do #canal (refino
       r3, patch 14 — Gestalt similaridade: um desenho de "lista de saídas à
       direita" na página); geometria no §17 --- */

/* --- Conteúdo B: os episódios, uma linha cada, régua de 1px --- */
.episodios{
  list-style: none;
  margin: var(--e8) 0 0;
  padding: 0;
  max-width: 96ch;
}
/* cada episódio no grid do .passo da home (refino r1 patch 10): o número do
   episódio é o numeral hairline (112 @1440 · 72 @390) cobrindo nome + linha */
.episodio{
  display: grid;
  /* ajuste óptico declarado: o .passo da home tem UM dígito (coluna .56 do
     numeral); aqui são DOIS ("80" mede ≈1,12 do corpo) — coluna 1.15 */
  grid-template-columns: calc(var(--numeral) * 1.15) minmax(0, 1fr);
  column-gap: clamp(24px, 3.8vw, 56px);
  row-gap: 0;
  align-items: start;
  padding-block: var(--e6);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.episodio__cabeca,
.episodio__corpo{ grid-column: 2; }
.episodio__corpo{ margin-top: var(--e2); }
.episodio__quem{
  margin: 0;
  font-size: var(--h3-passo);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.04em;   /* na língua do .passo__titulo, no teto do detector (patch r2: -.06em era tell novo em internas); -.02em no celular */
  color: var(--branco);
  transition: color var(--t-rapido) var(--ease-ui);
}
/* o frame do episódio (slot elástico, patch 6): 120px à direita, 1:1; hidden até o arquivo chegar */
.episodio__capa[hidden]{ display: none; }
.episodio__capa{
  width: 120px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, var(--fio-moldura));
  border-radius: 6px;
  align-self: start;
}
@media (min-width: 1024px){
  .episodio:has(.episodio__capa:not([hidden])){ grid-template-columns: calc(var(--numeral) * 1.15) minmax(0, 1fr) 120px; }
  .episodio__capa{ grid-column: 3; grid-row: 1 / span 2; }
}
/* o item com link responde como o card com ação: o nome esquenta (patch 6) */
.post__titulo{ transition: color var(--t-rapido) var(--ease-ui); }
@media (hover: hover){
  .episodio:has(a:hover) .episodio__quem,
  .post:has(a:hover) .post__titulo{ color: var(--branco-quente); }
}
.episodio__n{
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: -.18em;
  font-size: var(--numeral);
  font-weight: 100;
  line-height: 1;
  color: var(--numeral-cor);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: left;
}
.episodio__meta{
  margin: var(--e1) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
  font-variant-numeric: tabular-nums;
}
.episodio__linha{
  margin: 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}
.episodio__acao{ margin-top: var(--e2); }
/* o link do episódio no degrau do pé de card (19,5) e sem a seta (refino r3, patch
   14 — design-que-conclui §3.6: seis carimbos idênticos viram textura; "no
   Spotify" + aria-label já dizem que abre fora). A seta da seção fica só em
   "Todos os episódios no Spotify". */
.episodio__acao .link-seta{ font-size: var(--tam-link-card); gap: 0; }
.episodio__acao .seta{ display: none; }
.episodio__acao .link-seta__traco{ right: -1px; }
/* com um episódio só (?episodios=1): sem moldura de lista */
.episodios[data-modo="um"] .episodio{ border-top: 0; padding-top: 0; }
.episodio[hidden],
.secao--episodios[hidden]{ display: none; }
.episodios + .secao__acao{ margin-top: var(--e6); }

/* --- Conteúdo C: os três links do canal, empilhados com régua (dupla-links
       da home, com três itens) --- */
.secao--canal .dupla-links{ margin-top: var(--e6); max-width: none; }

/* --- Conteúdo D (refino r2, patch 5): os três grupos numa FAIXA de margem a
       margem — régua dupla .45 que se desenha (F2, como .marcas), três links
       com seta em linha, 26 @1440 --- */
.acoes--grupos{
  position: relative;
  margin-top: var(--e8);
  padding: var(--e5) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* os três leem como UM grupo, encostados na margem (refino r3, patch 14 — lei da proximidade) */
  align-items: baseline;
  gap: var(--e3) var(--e10);
}
.acoes--grupos::before,
.acoes--grupos::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, var(--regua-cabecalho-curta));
  transform-origin: left center;
}
.acoes--grupos::before{ top: 0; }
.acoes--grupos::after{ bottom: 0; }
html.js-revela .acoes--grupos[data-revela]::before,
html.js-revela .acoes--grupos[data-revela]::after{ transform: scaleX(0); transition: transform var(--t-lento) var(--ease-luz); }
html.js-revela .acoes--grupos[data-revela].revelado::before,
html.js-revela .acoes--grupos[data-revela].revelado::after{ transform: scaleX(1); }
.acoes--grupos .link-seta{ font-size: var(--tam-link); }   /* 24,5: a faixa fala a língua da dupla-links (refino r3, patch 14) */
.secao--grupos .acoes--grupos + .secao__texto{ margin-top: var(--e6); max-width: var(--coluna-texto); }

/* --- Conteúdo E: o blog nasce vazio; os cards só na prova (?posts=1|12) --- */
[data-blog-so][hidden]{ display: none; }
.posts{
  list-style: none;
  margin: var(--e10) 0 0;   /* grade a 80 (refino r2, patch 22) */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
}
.posts[data-modo="um"]{ grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.post{
  display: flex;
  flex-direction: column;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.post__titulo{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
}
.post__data{
  margin: var(--e1) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
}
.post__linha{
  margin: var(--e2) 0 0;
  flex: 1 0 auto;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: var(--lh-corpo);
  color: var(--cinza-rodape);
}
.post .link-seta{ margin-top: var(--e4); align-self: flex-start; font-size: var(--tam-link-card); }
.post[hidden]{ display: none; }

@media (max-width: 1023px){
  .episodio{ padding-block: var(--e5); }
  .numeros{ grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .posts{ grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .alcance__linha{ grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .campo__opcoes{ flex-direction: column; gap: 0; }
  /* F4 r1 (item 4): duas colunas alinhadas (5 nomes = 3 linhas, a última com
     1 à esquerda); ?marcas=12 deixa de virar pilha irregular */
  .marcas{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e4); padding: var(--e4) 0; font-size: var(--h3-card); }
  /* a faixa dos grupos empilha: um link por linha, régua entre eles (patch 5);
     a regra .acoes do celular (dobra.css §6: centrado, gap 12) não vale aqui */
  .acoes--grupos{ flex-direction: column; align-items: flex-start; align-self: auto; gap: 0; padding: 0; margin-top: var(--e8); }
  .acoes--grupos .link-seta{ padding-block: 20px; }
  .acoes--grupos .link-seta__traco{ bottom: calc(20px - .1em); }   /* o traço fica onde sempre ficou: .1em abaixo da tinta */
  /* a régua entre os links tem a largura do conteúdo (o link é fit-content:
     o traço não pode crescer com ele) */
  .acoes--grupos .link-seta + .link-seta::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100vw - 2 * var(--margem));
    height: 1px;
    background: rgba(255, 255, 255, var(--regua-cabecalho-curta));
  }
  .numeros,
  .posts{ gap: var(--e6); }
  .campo--destaque{ padding: var(--e2) 0; }
}

/* ===========================================================================
   16. CONTATO + POLÍTICA DE PRIVACIDADE + 404 (F4 leva 2, 21/09/2026) — o
   mesmo vocabulário da leva 1: régua de 1px, rótulo em caixa alta, a placa
   do painel no formulário, link com seta. Nada novo de cor, raio ou sombra.
   =========================================================================== */

/* --- Contato A: os dois canais LADO A LADO (refino r1 patch 16): rótulo no
       lugar do rótulo (14/400/.22em). Refino r2 (patch 12): a seção é a FAIXA
       de 2 colunas (texto à esquerda, os canais a 50,6% W topo com topo) e o
       WhatsApp é link como o e-mail — a pílula âmbar da página é a do envio.
       Junta canais→chamada = 120 + 135 = 255 @1440 (spec-corpo dec. 32). --- */
.canais{ max-width: none; margin-top: var(--e8); }
.canal{
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e2);
  padding: var(--e3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.canal .fato__nome{
  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);
  padding-top: .35em;
  text-wrap: initial;
}
.canal .fato__texto{ display: grid; gap: var(--e2); justify-items: start; }
.canal__acao{ margin: 0; }
.canal{ transition: border-top-color var(--t-medio) var(--ease-ui); }
@media (hover: hover){
  .canal:has(a:hover){ border-top-color: rgba(255, 255, 255, var(--regua-cabecalho-fundo)); }
}
@media (min-width: 1024px){
  .secao--canais{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;
    column-gap: var(--vao-colunas);
    align-items: start;
    padding-bottom: var(--faixa-base);
  }
  .secao--canais > * + *{ margin-top: 0; }
  .secao--canais .secao__coluna{ max-width: 47vw; }
  .canais{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vao-colunas);
    grid-column: 2;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095));
  }
}
.canal__linha{
  margin: 0;
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cinza-selo);
  max-width: 44ch;
}

/* --- Contato B: as duas portas do estado de erro (WhatsApp E e-mail) lado a
       lado; empilham no celular --- */
.form__alternativa--dupla{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
}
.form__alternativa--dupla[hidden]{ display: none; }
/* as dicas por assunto: sem JS as duas nascem visíveis (como todo
   condicional da leva 1); com JS só a do assunto marcado */
.campo__dica .link-simples{ color: var(--cinza-rodape); }

/* --- Política (refino r1 patch 17): coluna de leitura de 68ch com o sumário
       STICKY à direita (≥1024; ?v=b: em cima do texto, como antes); hierarquia
       de leitura longa — o h2 da seção desce pro 40, a h1 de 95 fica sozinha --- */
.secao--politica .secao__coluna{ max-width: 68ch; }
.secao--politica .secao__titulo{ font-size: var(--h3-painel); line-height: 1.1; }
.politica__versao{
  margin: var(--e3) 0 0;
  font-size: var(--tam-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-rotulo-interno);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--cinza-selo);
  font-variant-numeric: tabular-nums;
}
.politica__texto{
  margin: var(--e3) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.55;   /* EXCEÇÃO declarada (refino r3, patch 18): a única coluna de leitura longa — engenharia "leitura longa 1,5-1,7"; o resto do corpo é --lh-corpo */
  color: var(--cinza-rodape);
  max-width: 68ch;
}
.politica__abertura{ margin-top: var(--e4); }
.politica__sumario{ margin-top: var(--e5); }
/* o sumário é UI, não parágrafo (refino r3, patch 20): 18/400 #B7B7B9 lh 1,4 */
.sumario{
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sumario;
  display: grid;
  gap: 0;
  font-size: var(--tam-corpo);
  font-weight: 400;   /* refino r2 (patch 18): ≤18px nunca a 300 */
  line-height: 1.4;
  color: var(--cinza-selo);
}
/* o numeral do sumário no desenho do .politica__n */
.sumario li{ display: flex; gap: var(--e2); align-items: baseline; counter-increment: sumario; }
.sumario li::before{
  content: counter(sumario);
  flex: 0 0 auto;
  min-width: 1.4em;
  font-size: var(--tam-rotulo-interno);
  font-weight: 400;
  letter-spacing: var(--tracking-rotulo-interno);
  color: var(--cinza-selo);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px){
  .secao--politica{
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--politica > * + *{ margin-top: 0; }
  .secao--politica .politica__sumario{
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--cab-altura-curta) + var(--e4));
    /* sem a linha vertical (refino r3, patch 17: a única vertical das 10 páginas;
       o vão de 80 já separa): régua .28 em cima, e a conta desconta os 24 + 1
       pra o cap do 1º item continuar na linha do cap do h2 */
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h3-painel) * .231 - var(--tam-corpo) * var(--cap-lh140) - (44px - var(--tam-corpo) * 1.4) / 2 - var(--e3) - 1px);   /* .231 = (1,1 − 1,1875)/2 + (,95 − ,675): o cap do 40/300 em lh 1,1; o padding do alvo de 44 do 1º item também sai da conta (medido no DOM: Δ ≤ 1px) */
    padding-left: 0;
    padding-top: var(--e3);
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho));
  }
  /* ?v=b: o sumário em cima do texto (como antes) */
  html[data-v~="b"] .secao--politica{ display: block; }
  html[data-v~="b"] .secao--politica .politica__sumario{ position: static; margin-top: var(--e5); padding-left: 0; padding-top: 0; border-left: 0; border-top: 0; max-width: 68ch; }
}
/* F4 r1 (item 5): o alvo de 44px vem do padding, não da entrelinha (item
   que quebra em 2 linhas no 360 abria um buraco de 88px) */
.sumario .link-simples{ display: block; padding-block: calc((44px - 1.4em) / 2); line-height: 1.4; }
.politica__item{
  margin-top: var(--e6);
  padding-top: var(--e6);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));   /* .45 entre itens (spec-corpo dec. 9; refino r2 patch 17) */
  scroll-margin-top: calc(var(--cab-altura-curta) + var(--e3));
}
/* a escada de leitura longa (refino r2, patch 17 — degraus DISTANTES): h2 40 →
   item 32/300 → subtítulo 18/500 → corpo 18/400 */
.politica__titulo{
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: var(--h3-card);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
}
.politica__n{
  flex: 0 0 auto;
  min-width: 1.4em;
  font-size: var(--tam-rotulo-interno);
  font-weight: 400;
  letter-spacing: var(--tracking-rotulo-interno);
  color: var(--cinza-selo);
  font-variant-numeric: tabular-nums;
}
.politica__subtitulo{
  margin: var(--e5) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--branco);
}
.politica__subtitulo + .politica__texto{ margin-top: var(--e1); }
/* o sumário sabe onde você está (refino r2, patch 17 — F5; js/politica-de-privacidade.js
   põe aria-current no item que cruza a janela; sem JS nada muda) */
.sumario a{ position: relative; text-decoration: none; }
.sumario a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc((44px - 1.4em) / 2 - 4px);
  height: 1px;
  background: currentColor;
  opacity: var(--traco-nav);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-rapido) var(--ease-ui);   /* token, não literal (refino r3, patch 20) */
}
.sumario a[aria-current="true"]{ color: var(--branco); }
.sumario a[aria-current="true"]::after{ transform: scaleX(1); }
.politica__texto .link-simples{ color: var(--branco); }

/* --- 404: a dobra é a página. Ordem própria (apoio ANTES das saídas, a
       linha do rodapé depois); três saídas na mesma linha, quebrando sem
       órfão; a linha de rodapé com o link da página de contato --- */
.dobra--404 .dobra__apoio{ margin-top: var(--e4); max-width: 52ch; }
.dobra--404 .acoes--saidas{ flex-wrap: wrap; row-gap: var(--e3); margin-top: var(--e5); }
.dobra--404 .acoes--saidas .btn-fantasma{ flex: 0 0 auto; }
.dobra--404 .dobra__micro{ margin-top: var(--e5); max-width: 56ch; }
.dobra__micro .link-simples{ color: var(--cinza-rodape); }

@media (max-width: 1023px){
  .canal + .canal{ margin-top: var(--e6); }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .form__alternativa--dupla{ flex-direction: column; gap: var(--e3); }   /* F4 r1 (item 6): 24, os alvos de 44 não se sobrepõem */
  .politica__item{ margin-top: var(--e5); padding-top: var(--e5); }
  .dobra--404 .dobra__apoio{ margin-top: var(--e3); }
  .dobra--404 .acoes--saidas{ margin-top: var(--e3); row-gap: 20px; }   /* F4 r1 (item 10): os dois alvos de 44 deixam de se sobrepor */
  .dobra--404 .dobra__micro{ margin-top: var(--e3); }
}

/* ===========================================================================
   17. COMPOSIÇÕES DO REFINO NOTURNO r1 (22/09/2026) — o esqueleto repetido
   (rótulo→h2→parágrafo→lista) dá lugar a uma composição por seção, na língua
   das duas colunas da home (spec-corpo §B: coluna direita ancorada na margem
   direita, numeral hairline como composição, faixa topo com topo).
   Desktop ≥1024 e celular ≤767 nascem juntos aqui.
   =========================================================================== */

/* --- Palestras · a faixa de eventos é a CAUDA da dobra (refino r2, patch 8 —
       spec-corpo §B3): 104/0 @1440 · 64/0 @390; a junta lista→"TEMAS" vira o
       topo do próprio ato (216) --- */
.secao--eventos{ padding-top: var(--secao-topo); padding-bottom: 0; }
.secao--eventos .eventos{ margin-top: 0; padding-top: var(--e5); }

/* --- Palestras · #temas: esquerda sticky, direita lista numerada hairline
       (patch 6; ?v=b no celular = empilhado) --- */
.cards--temas{ counter-reset: tema; }
/* a saída do bloco na coluna sticky (refino r2, patch 10); grade→micro 56 nos
   dois viewports */
.secao--temas .secao__coluna .secao__acao{ margin-top: var(--e5); }
.secao--temas .secao__micro{ margin-top: var(--e7); }
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .secao--temas .secao__coluna .secao__acao{ margin-top: var(--e4); }
}
@media (min-width: 1024px){
  .secao--temas{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--temas > * + *{ margin-top: 0; }
  .secao--temas .secao__coluna{ max-width: none; position: sticky; top: calc(var(--cab-altura-curta) + var(--e4)); }   /* o 1fr já dá 35,3vw (refino r3, patch 3) */
  .secao--temas .secao__micro{ grid-column: 2; }   /* a nota que fecha a lista pousa sob a lista (refino r3, patch 3) */
  .cards--temas{ grid-column: 2; margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cards--temas:not([data-modo="lista"]) .card{
    display: grid;
    grid-template-columns: calc(var(--numeral) * .62) minmax(0, 1fr);
    column-gap: var(--e4);
    padding: var(--e5) 0;
    border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
  }
  .cards--temas:not([data-modo="lista"]) .card::before{
    counter-increment: tema;
    content: counter(tema, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-size: calc(var(--numeral) * .5);       /* 56 @1440: metade do numeral do método */
    font-weight: 100;
    line-height: 1;
    color: var(--numeral-cor);
    font-variant-numeric: lining-nums tabular-nums;
    margin-top: -.06em;
  }
  .cards--temas .card__titulo{ grid-column: 2; }
  .cards--temas .card__lista{
    grid-column: 2;
    margin-top: var(--e2);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: var(--e5);
  }
  .cards--temas .card__lista > dt,
  .cards--temas .card__lista > dd{ grid-column: 1; }
  .cards--temas .card__lista > dd{ margin-top: var(--e1); }
  .cards--temas .card__pra-quem{ grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .cards--temas:not([data-modo="lista"]){
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--e3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margem);
    margin-inline: calc(-1 * var(--margem));
    padding-inline: var(--margem);
    scrollbar-width: none;
  }
  .cards--temas::-webkit-scrollbar{ display: none; }
  .cards--temas:not([data-modo="lista"]) .card{ scroll-snap-align: start; padding-top: var(--e3); }
  .cards--temas:not([data-modo="lista"]) .card::before{
    counter-increment: tema;
    content: counter(tema, decimal-leading-zero);
    display: block;
    margin-bottom: var(--e2);
    font-size: calc(var(--numeral) * .5);       /* 36 @390 */
    font-weight: 100;
    line-height: 1;
    color: var(--numeral-cor);
    font-variant-numeric: lining-nums tabular-nums;
  }
  html[data-v~="b"] .cards--temas:not([data-modo="lista"]){
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--e8);
  }
}

/* --- Palestras · #agenda: a FAIXA de 2 colunas (refino r2, patch 9 — spec-corpo
       dec. 26/§B1): vazia = o link à direita topo com topo; uma/cheia = a lista
       à direita, a 50,6% W. Elasticidade ?eventos= intocada. --- */
@media (min-width: 1024px){
  .secao--agenda{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.4vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--agenda > * + *{ margin-top: 0; }
  .secao--agenda .secao__coluna{ max-width: 47vw; }
  .secao--agenda > .secao__acao{
    grid-column: 2;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095) - var(--tam-link) * var(--cap-lh140));
  }
  .secao--agenda[data-estado="cheia"],
  .secao--agenda[data-estado="uma"]{ grid-template-columns: minmax(0, 1fr) 50.6vw; }
  /* cap do nome do 1º evento na linha do cap da L1 do h2 (conferido no DOM,
     Δ ≤ 1px): o item "cheia" tem régua + 24 de padding em cima, o "uma" não;
     .375 = (1,4 − 1,2)/2 + (,95 − ,675), o cap da Gantari 300 em lh 1,4 */
  .secao--agenda .agenda{
    grid-column: 2;
    max-width: none;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--h2) * var(--cap-lh095) - var(--h3) * .375);
  }
  .secao--agenda[data-estado="uma"] .agenda{ margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095) - var(--h3) * .375); }
  .secao--agenda > .secao__micro{ grid-column: 2; margin-top: var(--e3); }
}

/* --- Palestras · a galeria assimétrica 2+1 com esquerda sticky (patch 18) --- */
@media (min-width: 1024px){
  .secao--galeria{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;   /* um eixo por página (refino r3, patch 3) */
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--galeria > * + *{ margin-top: 0; }
  .secao--galeria .secao__coluna{ max-width: none; position: sticky; top: calc(var(--cab-altura-curta) + var(--e4)); }
  .galeria{ grid-column: 2; margin-top: 0; }
  .galeria__grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
  .galeria__grade .moldura:first-child{ grid-column: 1 / -1; }
  .galeria__grade .moldura:first-child :is(.moldura__vazio, .moldura__img){ aspect-ratio: 1.65; }   /* a foto de palco grande = a moldura B3 */
}

/* --- Palestras · o prompt fixo no celular (patch 19; ?v=c: sem) --- */
.btn--fixo,
html[data-entrada="rodando"] .btn--fixo{   /* vence o `.btn{animation…var(--d-pilula)}` da abertura: o fixo nasce QUANDO aparece, não 560ms depois (refino r2, patch 30) */
  position: fixed;
  right: var(--margem);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));   /* respeita a barra do sistema */
  z-index: 40;
  min-height: 48px;
  animation: entra var(--t-medio) var(--ease-luz) 0ms backwards;
}
@keyframes sai-miudo{ to{ opacity: 0; transform: translateY(var(--sobe-miudo)); } }
.btn--fixo[data-sumindo="1"]{ animation: sai-miudo var(--t-rapido) var(--ease-ui) forwards; pointer-events: none; }   /* sai em 160 = 0,6× */
.btn--fixo[hidden]{ display: none; }
html[data-v~="c"] .btn--fixo{ display: none; }
@media (min-width: 768px){ .btn--fixo{ display: none; } }

/* --- Vizu X · #no-balcao: texto à esquerda + o celular (o objeto aceso) à
       direita, a cena da home (refino r2, patch 1 — spec-corpo §B2/dec. 20/22;
       design-que-conclui §3.4: 74% do olhar nas 2 primeiras telas). A poça .14
       da seção existe pra iluminar ele. --- */
@media (min-width: 1024px){
  .secao--problema{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 45vw;
    column-gap: var(--e6);
    align-items: center;
  }
  .secao--problema > * + *{ margin-top: 0; }
  .secao--problema .secao__coluna{ max-width: 42vw; }   /* 605px: 66 caracteres a 74 → 4 linhas, sem torre (refino r3, patch 3) */
  .secao--problema > .app-foto--celular{ grid-column: 2; justify-self: end; align-self: center; max-width: 505px; margin: 0; }   /* nativo, nunca upscale */
}
@media (max-width: 1023px){
  .secao--problema > .app-foto--celular{ margin-top: var(--e8); }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  /* o celular SANGRA pela borda (refino r3, patch 22 — spec-corpo dec. 20/22): a
     figura ocupa a tela toda, a imagem fica nos 505 nativos ancorada à direita
     (390 e 360 < 505: nunca upscale); a legenda volta pra margem */
  .secao--problema > .app-foto--celular{ margin-inline: calc(-1 * var(--margem)); }
  .secao--problema > .app-foto--celular .app-foto__img{ width: 100%; max-width: 505px; margin-left: auto; }
  .secao--problema > .app-foto--celular .app-foto__legenda{ padding-inline: var(--margem); }
}

/* --- Vizu X · #o-app-em-uso volta a 1 coluna (patch 1): rótulo → h2 (1 linha)
       → parágrafo → os dois tablets na proporção NATIVA 10:7 (1000×700; o 1,65
       do r1 cortava 13% da altura, a borda do tablet e a cabeça da cliente) --- */
.app-foto:not(.app-foto--celular) .app-foto__img{
  aspect-ratio: 10 / 7;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, var(--fio-moldura));
  border-radius: 6px;
  max-width: none;
}
/* as duas fotos ganham hierarquia 1,618:1 (refino r3, patch 22 — Kress: dois iguais
   = nenhum destaque; a 1ª informa, a 2ª é o close) e o wordmark pousa no canto
   inferior direito da 2ª, onde mora o crédito (spec-corpo §B3) */
.secao--app .app-fotos{ margin-top: var(--e10); grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: end; }
.secao--app .app-assinatura{ margin-top: var(--e4); display: flex; justify-content: flex-end; }
@media (min-width: 1024px){
  /* as legendas medem 2 e 3 linhas: reservando 3 nas duas, as BASES das fotos
     alinham (era o que o align-items: end queria) — elástico até 3 linhas */
  .secao--app .app-foto__legenda{ min-height: 4.5em; }
}
@media (min-width: 1024px){
  .secao--app .secao__coluna{ max-width: 60vw; }   /* "Metade com, metade sem." em 1 linha a 74 (patch 1); o parágrafo segue em 518 */
}
/* o wordmark do Vizu X no degrau da tabela (patch 28): máscara em #D5D0D0, 32px */
.app-assinatura__marca{
  display: block;
  width: calc(32px * 512 / 150);
  height: 32px;
  background: var(--cinza-rodape);
  -webkit-mask: url("../assets/vizux/logo-vizux-branca.webp") center / contain no-repeat;
          mask: url("../assets/vizux/logo-vizux-branca.webp") center / contain no-repeat;
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .secao--app .app-fotos{ grid-template-columns: minmax(0, 1fr); gap: var(--e6); margin-top: var(--e8); }
  .secao--app .app-assinatura{ justify-content: flex-start; }
}

/* --- Vizu X · #na-tela: a lista vira grade 2×3 à direita (patch 8) --- */
@media (min-width: 1024px){
  .secao--demonstra{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--demonstra > * + *{ margin-top: 0; }
  .secao--demonstra .secao__coluna{ max-width: none; }   /* refino r3, patch 3 */
  .secao--demonstra .fatos{
    grid-column: 2;
    margin-top: 0;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e6);
  }
  .secao--demonstra .fato{ grid-template-columns: minmax(0, 1fr); gap: var(--e2); padding: var(--e3) 0 0; }
}

/* --- Vizu X · #pra-quem: lista com régua à direita (refino r2, patch 3 —
       três esqueletos diferentes na sequência: lista → placas → 2×2; o grid do
       .fatos--todos). Sem hover: não tem ação. --- */
.secao--pra-quem .card{
  padding-top: var(--e4);
  padding-bottom: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
.secao--pra-quem .card__titulo{ font-size: var(--h3); line-height: 1.3; }   /* nome de lista com régua a 26, como as outras da página (refino r3, patch 20) */
.secao--pra-quem .secao__micro{ margin-top: var(--e6); }
.secao--pra-quem .secao__acao{ margin-top: var(--e3); }
@media (min-width: 1024px){
  .secao--pra-quem{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;   /* um eixo por página (refino r3, patch 3) */
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--pra-quem > * + *{ margin-top: 0; }
  .secao--pra-quem .secao__coluna{ max-width: none; }
  .secao--pra-quem .cards{ grid-column: 2; margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .secao--pra-quem .card{
    display: grid;
    grid-template-columns: minmax(0, .35fr) minmax(0, .65fr);
    column-gap: var(--e5);
    padding: var(--e4) 0;
    background: none;
  }
  .secao--pra-quem .card__texto{ margin-top: 0; }
  .secao--pra-quem .secao__micro,
  .secao--pra-quem .secao__acao{ grid-column: 2; }
  .secao--pra-quem .secao__micro{ margin-top: var(--e6); }
  .secao--pra-quem .secao__acao{ margin-top: var(--e3); }
}
@media (max-width: 1023px){
  .secao--pra-quem .cards{ gap: 0; margin-top: var(--e8); }
}

/* --- Vizu X · os planos como placas (patch 9) --- */
.planos:has(.placa--card){ margin-top: var(--e10); gap: clamp(16px, 1.8vw, 32px); }
@media (max-width: 1023px){
  .planos:has(.placa--card){ max-width: 520px; gap: var(--e2); }
}

/* --- Conteúdo · #podcast como FAIXA: título à esquerda, os dois links a 71% W
       topo com topo (patch 10) --- */
@media (min-width: 1024px){
  .secao--podcast{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.4vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--podcast > * + *{ margin-top: 0; }
  .secao--podcast .secao__coluna{ max-width: 60vw; }   /* a headline cabe em 3 linhas (refino r2, patch 6; o 47vw era pra copy curta da home) */
  .secao--podcast > .dupla-links{
    grid-column: 2;
    max-width: none;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095) - var(--tam-link) * var(--cap-lh140));   /* o cálculo do #canal (refino r3, patch 14) */
  }
  /* a capa do podcast (slot elástico, patch 6): coluna direita, topo com topo;
     com ela visível as saídas descem pra baixo dela */
  .secao--podcast > .moldura--capa{
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095));
  }
  .secao--podcast:has(.moldura--capa:not([hidden])) > .dupla-links{ grid-row: 2; margin-top: var(--e4); }
}
.moldura--capa .moldura__img{
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, var(--fio-moldura));
  border-radius: 6px;
}
@media (max-width: 1023px){
  .secao--podcast > .dupla-links{ margin-top: var(--e6); }
  .secao--podcast > .moldura--capa{ max-width: 240px; margin-top: var(--e6); }
}

/* --- Conteúdo · #episodios: esquerda sticky, a lista à direita (patch 10) --- */
@media (min-width: 1024px){
  .secao--episodios{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;   /* um eixo por página (refino r3, patch 3) */
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--episodios > * + *{ margin-top: 0; }
  .secao--episodios .secao__coluna{ max-width: none; position: sticky; top: calc(var(--cab-altura-curta) + var(--e4)); }
  .episodios{ grid-column: 2; margin-top: 0; max-width: none; }
  .secao--episodios > .secao__acao{ grid-column: 2; margin-top: var(--e6); }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  /* DIVERGÊNCIA do plano ("coluna 40px, texto ao lado"): "80" a 72px hairline
     mede ≈80px de tinta e invadia o nome; no celular o numeral fica EM CIMA do
     nome, alinhado à esquerda (a mesma língua, empilhada) */
  .episodio{ grid-template-columns: minmax(0, 1fr); padding-block: var(--e5); }
  .episodio__n{ grid-row: auto; margin: 0 0 var(--e1); text-align: left; }
  .episodio__cabeca, .episodio__corpo{ grid-column: 1; }
  .episodio__quem{ letter-spacing: -.02em; }
  .episodio__capa{ grid-column: 1; grid-row: auto; width: 96px; margin-bottom: var(--e2); order: -1; }
}

/* --- Conteúdo · #canal como a faixa da home (patch 10) --- */
@media (min-width: 1024px){
  .secao--canal{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.4vw;
    column-gap: var(--vao-colunas);
    align-items: start;
    padding-top: var(--faixa-topo);
    padding-bottom: var(--faixa-base);
  }
  .secao--canal > * + *{ margin-top: 0; }
  .secao--canal .secao__coluna{ max-width: 47vw; }
  .secao--canal .dupla-links{
    grid-column: 2;
    max-width: none;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095) - var(--tam-link) * var(--cap-lh140));
  }
}
/* os três links do canal entram em CASCATA (refino r2, patch 6 — perfil §5
   "lista em cascata"; escopado: a home não muda) */
/* refino r3 (patch 33): o pai nasce parado (sem fade + 12px por cima da cascata
   dos filhos — movimento duplicado no mesmo alvo vira ruído); cada item entra
   em máscara + 12px; o #podcast usa a mesma lista (patch 14) */
html.js-revela :is(.secao--canal, .secao--podcast) .dupla-links[data-revela]{ opacity: 1; transform: none; transition: none; animation: none; }
html.js-revela :is(.secao--canal, .secao--podcast) .dupla-links[data-revela] .dupla-links__item{ display: block; clip-path: inset(-12px -.1em -12px -.1em); }
html.js-revela :is(.secao--canal, .secao--podcast) .dupla-links[data-revela]:not(.revelado) .dupla-links__item{ opacity: 0; }
html.js-revela :is(.secao--canal, .secao--podcast) .dupla-links[data-revela].revelado .dupla-links__item{ animation: mascara-secao var(--t-lento) var(--ease-luz) var(--atraso, 0ms) backwards, entra var(--t-lento) var(--ease-luz) var(--atraso, 0ms) backwards; }
html.js-revela :is(.secao--canal, .secao--podcast) .dupla-links[data-revela].revelado .dupla-links__item:nth-child(2){ animation-delay: calc(var(--atraso, 0ms) + 60ms); }
html.js-revela :is(.secao--canal, .secao--podcast) .dupla-links[data-revela].revelado .dupla-links__item:nth-child(3){ animation-delay: calc(var(--atraso, 0ms) + 120ms); }

/* --- Parcerias · #formatos em grade numerada 2×2 (patch 14) --- */
.secao--formatos .fatos:not([data-modo="lista"]){ counter-reset: formato; }
@media (min-width: 1024px){
  .secao--formatos .fatos:not([data-modo="lista"]){
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e8) var(--vao-colunas);
  }
}
.secao--formatos .fatos:not([data-modo="lista"]) .fato{
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e2);
  padding: var(--e3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, var(--regua-cabecalho-curta));
}
/* o numeral HAIRLINE (refino r2, patch 13): 56 @1440 · 36 @390 — o degrau dos
   temas; substitui o ordinal 14/400 do r1. Nunca anima. */
.secao--formatos .fatos:not([data-modo="lista"]) .fato::before{
  counter-increment: formato;
  content: counter(formato, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e2);
  font-size: calc(var(--numeral) * .5);
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0;
  color: var(--numeral-cor);
  font-variant-numeric: lining-nums tabular-nums;
}
.secao--formatos .fato__nome{ font-size: var(--h3-card); }
.secao--formatos .fatos + .secao__micro{ margin-top: var(--e7); }   /* grade→micro 56 (a escada não inverte) */
@media (max-width: 1023px){
  .secao--formatos .fatos:not([data-modo="lista"]){ display: grid; gap: var(--e6); }
}

/* --- Parcerias · #marcas: a FAIXA com o link na coluna direita, topo com
       topo, e os nomes de margem a margem embaixo (refino r2, patch 13) --- */
@media (min-width: 1024px){
  .secao--marcas{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.4vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--marcas > * + *{ margin-top: 0; }
  .secao--marcas .secao__coluna{ max-width: 47vw; }
  .secao--marcas > .secao__acao{
    grid-column: 2;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095) - var(--tam-link) * var(--cap-lh140));
  }
  .secao--marcas > .marcas{ grid-column: 1 / -1; margin-top: var(--e8); }
}
@media (max-width: 1023px){
  .secao--marcas{ display: flex; flex-direction: column; }
  .secao--marcas > .secao__acao{ order: 3; margin-top: var(--e7); }
}

/* --- Projeto social · #o-projeto: faixa de 2 colunas topo com topo (patch 15) --- */
.secao--projeto > .secao__micro{ margin-top: var(--e4); max-width: 52ch; }
@media (min-width: 1024px){
  .secao--projeto{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.4vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--projeto > * + *{ margin-top: 0; }
  .secao--projeto .secao__coluna{ max-width: 47vw; }
  /* refino r2 (patch 16): a coluna direita da faixa é slot de LEITURA (18/400
     #D5D0D0, spec-corpo dec. 26), sem a régua — a faixa da home não tem; o cap
     do micro na linha do cap da L1 do h2 */
  .secao--projeto > .secao__micro{
    grid-column: 2;
    max-width: none;
    font-size: var(--tam-corpo);
    font-weight: 400;
    line-height: 1.4;
    color: var(--cinza-rodape);
    padding-top: 0;
    border-top: 0;
    margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h2) * var(--cap-lh095) - var(--tam-corpo) * var(--cap-lh140));
  }
}

/* --- Projeto social · ?v=b: o rótulo da pílula nomeia o destino (patch 15);
       Conteúdo · ?v=b (refino r2, patch 36): a pílula da chamada leva ao PEDIDO --- */
.so-v-b{ display: none; }
html[data-v~="b"] .so-v-b{ display: inline; }
html[data-v~="b"] .so-v-padrao{ display: none; }
html[data-v~="b"] .btn.so-v-b{ display: inline-flex; }

/* ===========================================================================
   18. REFINO NOTURNO r2 (22/09/2026) — as juntas, o rodapé, os degraus e as
   alternativas de gosto desta rodada. Desktop 1440 e celular 390 juntos.
   =========================================================================== */

/* --- 14 · a junta dobra→corpo: a saída da cena é um corte DECLARADO (a régua
       de corte de 1px a .20 da margem sangrando à direita — o elemento-assinatura
       de troca de cena, spec-corpo dec. 27), não uma linha dura sobre as
       poltronas acesas. F2 na entrada, no relógio da régua do rodapé da dobra.
       A cura definitiva é a camada fundo-corpo contínua (Pedidos). --- */
.dobra--interna::after{
  content: "";
  position: absolute;
  left: var(--margem);
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 5;
  background: var(--branco);
  opacity: var(--regua-cabecalho);   /* .28 (refino r3, patch 16): sobre a fileira acesa o .20 sumia — cláusula do r2 patch 14 */
  transform-origin: left center;
  pointer-events: none;
}
html[data-entrada="rodando"] .dobra--interna::after{
  animation: regua var(--dur-regua) var(--ease-luz) var(--d-regua-rod) backwards;
}
/* onde a seção seguinte já abre com a própria régua de corte (Vizu One) */
main:has(.dobra--interna + .secao--interesse) .dobra--interna::after{ display: none; }
/* no 404 é o rodapé que corta (refino r3, patch 16 — lei da proximidade: as duas
   réguas nasciam a 1px uma da outra) */
main:has(.dobra--404) .dobra--interna::after{ display: none; }
/* o ar dobra→1ª seção é 104 em todas (a home mede 104): especificidade 0,2,1
   vence .secao--ato/--faixa; o :not(.secao--final) preserva o 135 do Vizu One */
main > .dobra--interna + .secao:not(.secao--final){ padding-top: var(--secao-topo); }

/* --- 15 · o rodapé pousa igual nas 10: 200 de sobra de cena antes dele
       (spec-corpo dec. 32; as seções com painel já estão a 200) --- */
main > .secao:last-child:not(:has(.placa--painel)){ padding-bottom: var(--chamada-base); }

/* --- 22 · respiro no celular: o espaço DENTRO da placa menor que o ENTRE
       placas (lei da proximidade); grades a 64 (a escada 56/64/64); atos a
       80/88 (junta ato→ato 168 = 2,6× o interno de 64, não 200). Só internas:
       a home mobile não se toca sem ele. --- */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .cards:has(.placa--card),
  .planos:has(.placa--card){ gap: var(--e3); }
  .placa--card .card__lista{ margin-top: var(--e4); }
  .placa--card .card__lista dd + dt{ margin-top: var(--e3); }
  .placa--card .btn-fantasma{ margin-top: var(--e4); }
  .plano .btn-fantasma{ padding-top: var(--e4); }
  .vozes, .numeros, .posts, .galeria{ margin-top: var(--e8); }
  main:has(.dobra--interna) .secao--ato{ padding-top: 80px; }   /* refino r3 (patch 1): a base já é 56 pela regra genérica do §4 */
}

/* --- 32 · trilhos horizontais: os cards revelam JUNTOS, em cascata, no
       sentido do gesto (perfil §4 F1; coreografia §Mobile: nada depende de
       descoberta) — o observer recorta pelo container de rolagem, e os cards
       3-6 só cruzariam a janela quando a pessoa ARRASTA --- */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  html.js-revela .cards--temas:not([data-modo="lista"]):has(> .card.revelado) > .card[data-revela],
  html.js-revela .vozes:not([data-modo="uma"]):has(> .voz.revelado) > .voz[data-revela],
  html[data-v~="d"].js-revela .planos:has(> .plano.revelado) > .plano[data-revela],
  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.js-revela .cards--temas:not([data-modo="lista"]):has(> .card.revelado) > .card[data-revela]:nth-child(2),
  html.js-revela .vozes:not([data-modo="uma"]):has(> .voz.revelado) > .voz[data-revela]:nth-child(2),
  html[data-v~="d"].js-revela .planos:has(> .plano.revelado) > .plano[data-revela]:nth-child(2),
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]:nth-child(2){ animation-delay: 60ms; }
  html.js-revela .cards--temas:not([data-modo="lista"]):has(> .card.revelado) > .card[data-revela]:nth-child(3),
  html.js-revela .vozes:not([data-modo="uma"]):has(> .voz.revelado) > .voz[data-revela]:nth-child(3),
  html[data-v~="d"].js-revela .planos:has(> .plano.revelado) > .plano[data-revela]:nth-child(3),
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]:nth-child(3){ animation-delay: 120ms; }
  html.js-revela .cards--temas:not([data-modo="lista"]):has(> .card.revelado) > .card[data-revela]:nth-child(n+4),
  html.js-revela .vozes:not([data-modo="uma"]):has(> .voz.revelado) > .voz[data-revela]:nth-child(n+4),
  html[data-v~="d"].js-revela .planos:has(> .plano.revelado) > .plano[data-revela]:nth-child(n+4),
  html[data-prova~="trilho"].js-revela .cards:has(.placa--card):has(> .card.revelado) > .card[data-revela]:nth-child(n+4){ animation-delay: 180ms; }
}

/* --- reduced-motion das peças desta rodada: tudo vai ao estado final --- */
@media (prefers-reduced-motion: reduce){
  html[data-entrada="rodando"] .dobra--interna::after{ animation: none; }
  html.js-revela .acoes--grupos::before,
  html.js-revela .acoes--grupos::after{ transform: none; transition: none; }
  html.js-revela :is(.secao--canal, .secao--podcast) .dupla-links[data-revela] .dupla-links__item{ animation: none; clip-path: none; opacity: 1; }
  html.js-revela .cards--temas:not([data-modo="lista"]):has(> .card.revelado) > .card[data-revela],
  html.js-revela .vozes:not([data-modo="uma"]):has(> .voz.revelado) > .voz[data-revela],
  html[data-v~="d"].js-revela .planos:has(> .plano.revelado) > .plano[data-revela],
  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; }
  .btn--fixo[data-sumindo="1"]{ animation: none; }
  .sumario a::after{ transition: none; }
  .form[inert] .campo,
  .form[inert] .campo--marca,
  .form[inert] .form__alternativa{ transition: none; }
  html.js .form .campo,
  html.js .form .form__bloco,
  html.js .campo__dica{ transition: none; }
}

/* ===========================================================================
   19. REFINO NOTURNO r3 (22/09/2026) — ritmo, composição, estrutura e as
   alternativas de gosto desta rodada. Desktop 1440 e celular 390/360 juntos.
   O que era ajuste de regra existente entrou no lugar dela (marcado "refino
   r3, patch n"); aqui mora só o que é NOVO.
   =========================================================================== */

/* --- 5 · Vizu X #quem-usa: as vozes viram a coluna ancorada à direita (refino-
       composição régua 1; design-que-conclui §5.3 "a fala é o título"): 2×2
       dentro dos 50,6vw, h2 sticky à esquerda. ?vozes=1 (data-modo="uma") fica
       na coluna direita; ?v=c e o trilho ≤767 não mudam. --- */
@media (min-width: 1024px){
  .secao--vozes:not([hidden]){
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50.6vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--vozes > * + *{ margin-top: 0; }
  .secao--vozes .secao__coluna{ max-width: none; position: sticky; top: calc(var(--cab-altura-curta) + var(--e4)); }
  .secao--vozes .vozes{ grid-column: 2; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6) clamp(24px, 3.4vw, 56px); }
  .secao--vozes .vozes[data-modo="uma"]{ grid-column: 2; grid-template-columns: minmax(0, 1fr); }
}

/* --- 6 · Palestras #agenda vazia fala mais baixo (design-que-conclui §3.3
       Kress "saliência é troca"; componentes-vivos "vazio que orienta"): h2 40,
       faixa curta 104/120, link topo com topo. "uma"/"cheia" não mudam. --- */
h2:is(.secao--agenda[data-estado="vazia"] .secao__titulo){ font-size: var(--h3-painel); line-height: 1.1; letter-spacing: -.02em; }
main:has(.dobra--interna) .secao--agenda[data-estado="vazia"]{ padding-top: var(--secao-topo); padding-bottom: var(--faixa-base); }
.secao--agenda[data-estado="vazia"] .secao__texto{ margin-top: var(--e4); }
@media (min-width: 1024px){
  /* .225 = cap da Gantari 300 em lh 1,1: (1,1 − 1,2)/2 + (,95 − ,675) */
  .secao--agenda[data-estado="vazia"] > .secao__acao{ margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h3-painel) * .225 - var(--tam-link) * var(--cap-lh140)); }
}

/* --- 7 · Conteúdo #blog vazio: antes dos grupos (HTML), fala mais baixo, o
       link entrega o que promete (Spotify). Com ?posts= nada muda. --- */
h2:is(.secao--blog[data-estado="vazio"] .secao__titulo){ font-size: var(--h3-painel); line-height: 1.1; letter-spacing: -.02em; }
.secao--blog[data-estado="vazio"] .secao__texto{ margin-top: var(--e4); }
.secao--blog > .secao__micro{ margin-top: var(--e3); }
@media (min-width: 1024px){
  .secao--blog[data-estado="vazio"]{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.4vw;
    column-gap: var(--vao-colunas);
    align-items: start;
  }
  .secao--blog[data-estado="vazio"] > * + *{ margin-top: 0; }
  .secao--blog[data-estado="vazio"] .secao__coluna{ max-width: 47vw; }
  .secao--blog[data-estado="vazio"] > .secao__acao{ grid-column: 2; margin-top: calc(var(--tam-rotulo) * 1.4 + var(--e3) + var(--h3-painel) * .225 - var(--tam-link) * var(--cap-lh140)); }
  .secao--blog[data-estado="vazio"] > .secao__micro{ grid-column: 1 / -1; margin-top: var(--e3); }
}

/* --- 8 · As seis chamadas das internas viram A chamada da home --- */
/* coluna esquerda sticky no desktop (a home NÃO entra; onde o painel é curto a
   regra é inerte) */
@media (min-width: 1024px){
  main:has(.dobra--interna) .secao--final:has(.placa--painel) .secao__coluna,
  .secao--formulario .secao__coluna,
  .secao--interesse .secao__coluna{ position: sticky; top: calc(var(--cab-altura-curta) + var(--e4)); align-self: start; }
  /* uma alternativa de WhatsApp por tela (Hick + "nunca nivelar"): nas 4 páginas
     curtas o link do pé do painel só volta no erro/antispam (base.js põe
     data-estado no form). Home e Palestras ficam fora (painel de 12 campos). */
  .secao--formulario:has(.acoes--final a[data-whatsapp]) .form:not([data-estado="erro"]):not([data-estado="antispam"]) .form__alternativa,
  .secao--interesse:has(.acoes--final a[data-whatsapp]) .form:not([data-estado="erro"]):not([data-estado="antispam"]) .form__alternativa{ display: none; }
  /* Vizu One sem rótulo: o cap do h2 (74/.95) na linha do cap de "Lista de
     interesse" (40/1,2) — a fórmula do home.css §12g com o token deste h2 */
  main:has(.dobra--interna) .secao--interesse .secao__coluna{
    margin-top: calc(var(--placa-pad-painel) + var(--h3-painel) * var(--cap-lh120-300) - var(--h2) * var(--cap-lh095));
  }
}
.secao--interesse .secao__titulo{ margin-top: 0; }

/* --- 10 · Vizu X #na-tela: payoff depois do título (74 → 32 → 18) e o slot da
       tela em cada fato (elástico; com hidden, zero mudança visual) --- */
.secao--demonstra .tipos{ margin-top: var(--e4); }
.secao--demonstra .tipos + .secao__texto{ margin-top: var(--e5); }
.fato__tela[hidden]{ display: none; }
@media (min-width: 1024px){
  .fato:has(.fato__tela:not([hidden])){ grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--e4); }
  .fato__tela{
    grid-row: 1 / span 2;
    width: 96px;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    object-position: top;
    border: 1px solid rgba(255, 255, 255, var(--fio-moldura));
    border-radius: 6px;
  }
}
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .fato__tela{ width: 72px; }
}

/* --- 11 · Vizu X: o prompt volta no meio da página e o desktop não termina
       num beco (design-que-conclui §4.3; Stanford #10) --- */
@media (min-width: 1024px){
  .secao--demonstra > .secao__acao{ grid-column: 2; margin-top: var(--e6); }
  .secao--baixar > .secao__coluna{ grid-row: 1 / span 2; }   /* a nota nasce na linha 2, logo abaixo das lojas, não no pé da coluna esquerda */
  .secao--baixar > .lojas__nota{ grid-column: 2; grid-row: 2; margin-top: var(--e3); max-width: 34ch; }
}
@media (max-width: 1023px){
  .secao--demonstra > .secao__acao{ margin-top: var(--e5); }
  .secao--baixar > .lojas__nota{ margin-top: var(--e3); }
}
.lojas__nota{ display: none; }
html[data-so="outro"] .lojas__nota{ display: block; }

/* --- 12 · Palestras #temas no celular: o "Pedir uma data" FECHA os temas (o
       prompt reaparece ao fim do bloco; empilhado, a ordem do desktop inverte);
       sem tocar o desktop nem o HTML. ?v=b (empilhado) continua valendo. --- */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .secao--temas{ display: flex; flex-direction: column; }
  .secao--temas > .secao__coluna{ display: contents; }
  .secao--temas .cards--temas{ order: 1; }
  .secao--temas .secao__coluna > .secao__acao{ order: 2; margin-top: var(--e6); }
  .secao--temas > .secao__micro{ order: 3; margin-top: var(--e3); }
}

/* --- 33 · as listas em cascata de verdade (perfil §5 "lista em cascata" + §4 F1:
       stagger 60, amplitude 12 nunca dobrada) --- */
/* Parcerias · a coluna de "onde a marca aparece": o pai nasce parado, cada item
   entra em máscara + 12px. Sem JS a lista nasce inteira. */
html.js-revela .secao--recebe > .tipos[data-revela]{ opacity: 1; transform: none; transition: none; animation: none; }
html.js-revela .secao--recebe > .tipos[data-revela] li{ clip-path: inset(-12px -.1em -12px -.1em); }
html.js-revela .secao--recebe > .tipos[data-revela]:not(.revelado) li{ opacity: 0; }
html.js-revela .secao--recebe > .tipos[data-revela].revelado li{ animation: mascara-secao var(--t-lento) var(--ease-luz) var(--atraso, 0ms) backwards, entra var(--t-lento) var(--ease-luz) var(--atraso, 0ms) backwards; }
html.js-revela .secao--recebe > .tipos[data-revela].revelado li:nth-child(2){ animation-delay: calc(var(--atraso, 0ms) + 60ms); }
html.js-revela .secao--recebe > .tipos[data-revela].revelado li:nth-child(3){ animation-delay: calc(var(--atraso, 0ms) + 120ms); }
html.js-revela .secao--recebe > .tipos[data-revela].revelado li:nth-child(4){ animation-delay: calc(var(--atraso, 0ms) + 180ms); }
html.js-revela .secao--recebe > .tipos[data-revela].revelado li:nth-child(n+5){ animation-delay: calc(var(--atraso, 0ms) + 240ms); }
/* Parcerias · os nomes das marcas seguem a régua que se desenha (os 120ms iniciais
   deixam a régua começar antes dos nomes) */
html.js-revela .marcas[data-revela]{ opacity: 1; transform: none; transition: none; animation: none; }
html.js-revela .marcas[data-revela] li{ clip-path: inset(-12px -.1em -12px -.1em); }
html.js-revela .marcas[data-revela]:not(.revelado) li{ opacity: 0; }
html.js-revela .marcas[data-revela].revelado li{ animation: mascara-secao var(--t-lento) var(--ease-luz) calc(var(--atraso, 0ms) + 120ms) backwards, entra var(--t-lento) var(--ease-luz) calc(var(--atraso, 0ms) + 120ms) backwards; }
html.js-revela .marcas[data-revela].revelado li:nth-child(2){ animation-delay: calc(var(--atraso, 0ms) + 180ms); }
html.js-revela .marcas[data-revela].revelado li:nth-child(3){ animation-delay: calc(var(--atraso, 0ms) + 240ms); }
html.js-revela .marcas[data-revela].revelado li:nth-child(4){ animation-delay: calc(var(--atraso, 0ms) + 300ms); }
html.js-revela .marcas[data-revela].revelado li:nth-child(n+5){ animation-delay: calc(var(--atraso, 0ms) + 360ms); }
@media (prefers-reduced-motion: reduce){
  html.js-revela .secao--recebe > .tipos[data-revela] li,
  html.js-revela .marcas[data-revela] li{ animation: none; clip-path: none; opacity: 1; transform: none; }
}

/* --- 37 · alternativas de gosto: a letra `c` por página (classe de padrão
       escopada por letra pra não colidir com o .so-v-padrao do `b`) --- */
.so-v-c{ display: none; }
html[data-v~="c"] .so-v-c{ display: inline-flex; }
html[data-v~="c"] .so-v-padrao-c{ display: none; }
/* Conteúdo ?v=d: grupo 1 na frente, 2 e 3 como reserva (só tinta: a copy diz
   "entre em um; se estiver cheio, tente o seguinte") */
html[data-v~="d"] .acoes--grupos .link-seta:not(:first-child){ color: var(--cinza-rodape); }