@font-face{font-family:'Fraunces';src:url('fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/jakarta.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* ⭐ 06/09 · o JS grava aqui a altura da barra fixa, para o mini player
     sentar acima dela. Fica declarado para a varredura de tokens achar. */
  --sticky-alt:0px;

  --noite-900:#121a24; --noite-800:#1a2332; --noite-700:#25324a; --noite-600:#35455f;
  --dia-50:#fefdfb; --dia-100:#faf7f2; --dia-200:#f2ece2; --dia-300:#e5dbcc;
  --azul-700:#1e4358; --azul-600:#2c5f7c; --azul-400:#5b8ba8; --azul-100:#dbe8ef;
  --caramelo-600:#b8834f; --caramelo-500:#d4a574; --caramelo-200:#f0e0cc;
  --acao-800:#a23b1f; --acao-700:#b34123; --acao-600:#c54726; --acao-400:#e07a5f; --acao-100:#fbe8e2;
  --ok:#4a8b6f; --ok-txt:#3a6e57; --nao:#a85a5a;
  --f-titulo:'Fraunces',Georgia,serif;
  --f-texto:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif;
  --t-hero:clamp(2.125rem,7vw,3.5rem); --t-h2:clamp(1.625rem,4.5vw,2.375rem);
  --t-h3:clamp(1.25rem,3vw,1.5rem); --t-lead:clamp(1.125rem,2.4vw,1.25rem);
  --t-body:clamp(1.0625rem,2vw,1.125rem); --t-small:.9375rem; --t-micro:.8125rem;
  --t-num:clamp(2.5rem,8vw,3.5rem); --t-preco:clamp(3rem,8vw,4.25rem);
  --s-1:8px; --s-2:12px; --s-3:20px; --s-4:32px; --s-5:48px; --s-6:80px;
  --medida:640px; --largo:820px; --total:1120px;
  --r-sm:6px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --sombra-card:0 2px 12px rgba(18,26,36,.08);
  --sombra-alta:0 8px 32px rgba(18,26,36,.14);
  --sombra-btn:0 4px 16px rgba(197,71,38,.32);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:400ms; --dur-h:160ms;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:400 var(--t-body)/1.65 var(--f-texto);color:var(--noite-900);
     background:var(--dia-100);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-titulo);font-weight:600;line-height:1.15;
         letter-spacing:-.01em;margin:0 0 var(--s-3)}
h1{font-size:var(--t-hero);font-weight:700;line-height:1.08}
h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
/* ⭐ 05/09 · o paragrafo respirava 20px com texto de 17px, e colava.
   32px e a distancia que separa paragrafo de paragrafo sem parecer buraco. */
p{margin:0 0 var(--s-4);max-width:var(--medida)}
h2,h3{margin-bottom:var(--s-4)}
img{max-width:100%;height:auto;display:block}
.tabular{font-variant-numeric:tabular-nums}
mark{background:var(--caramelo-500);color:var(--noite-900);border-radius:var(--r-sm);padding:0 4px}
.alta{text-transform:uppercase;letter-spacing:.06em;font-weight:700}

/* ── secao ─────────────────────────────────────────── */
.sec{padding:64px var(--s-3)}
/* ⭐ a secao que CONTINUA a anterior: sem borda e sem respiro em cima */
.sec--segue{padding-top:0;border-top:0!important}
.wrap{max-width:var(--medida);margin-inline:auto}
.wrap--largo{max-width:var(--largo)}
.wrap--total{max-width:var(--total)}
/* 🔴 05/09 · dia-100 e dia-200 diferem em 1,06 de contraste: alternar as
   duas NAO divide nada. A divisao passa a ser um FIO, e ele aparece sempre
   que uma secao clara segue outra secao clara. */
.sec--dia{background:var(--dia-100)}
.sec--dia + .sec--dia,.sec--dia + .sec--dia2,
.sec--dia2 + .sec--dia,.sec--dia2 + .sec--dia2{border-top:1px solid var(--dia-300)}
/* 🔴 05/09 · O FIO CLARO ENTRE DUAS ESCURAS FOI REMOVIDO, a pedido.
   Ele existia para dividir, e a divisao entre escuras se faz por
   ESPACO e por conteudo, nao por risco.

   ══ E A COSTURA BRANCA, que era outra coisa e tinha outra causa ══
   O body e CREME (--dia-100). Cada secao e um bloco proprio, e a
   .dobra mede 100svh, que em tela de DPR fracionario da altura
   QUEBRADA. Quando a altura quebra, o navegador arredonda o fim de
   uma secao e o comeco da outra para pixels de aparelho diferentes,
   abre uma fresta de 1 pixel, e o CREME DO BODY APARECE ali.

   📏 Reproduzido: viewport 875px com DPR 1,5 e 2,5 → risco de brilho
   267 sobre um fundo de 111. Em DPR inteiro nao acontece nunca, e e
   por isso que ele nao aparecia nos meus testes e aparecia na tela
   do Cristian.

   ⭐ A cura: cada secao pinta 1px ACIMA de si mesma, na PROPRIA cor
   de fundo. A fresta continua existindo, e agora ela e pintada da
   cor certa em vez de deixar o body passar.
   ⚠️ Tem que ser a cor de cada uma: uma regra so, com uma cor so,
   deixaria um risco na hora em que o fundo realmente muda. */
.sec--dia   {box-shadow:0 -1px 0 0 var(--dia-100)}
.sec--dia2  {box-shadow:0 -1px 0 0 var(--dia-200)}
.sec--noite {box-shadow:0 -1px 0 0 var(--noite-800)}
.sec--dor   {box-shadow:0 -1px 0 0 var(--noite-900)}
.sec--dia2{background:var(--dia-200)}
.sec--noite{background:var(--noite-800);color:var(--dia-200)}
.sec--dor{background:var(--noite-900);color:var(--dia-200)}
.sec--noite h1,.sec--noite h2,.sec--noite h3,
.sec--dor h1,.sec--dor h2,.sec--dor h3{color:var(--dia-50)}
/* ⭐⭐ 05/09 · a virada era um linear de noite-800 para dia-100, e ele
   passava pelo CINZA, que e a cor morta entre azul e creme.
   Agora ela e um AMANHECER de verdade: escuro, azul, ambar, creme.
   E isso nao e so estetica: a pagina inteira e sobre a noite virar dia. */
.virada{height:340px;
  /* ⚠️ o degrade tem background-IMAGE e nao background-COLOR, entao a
     regra .sec--noite nao o alcancava e a fresta aparecia bem AQUI:
     era esta a costura branca do print. */
  background-color:var(--noite-800);box-shadow:0 -1px 0 0 var(--noite-800);
  background-image:linear-gradient(180deg,
  /* 🔴🔴 05/09, 3ª tentativa · o degradê media CINZA entre 43% e 50%,
     e os primeiros 28% quase não se moviam.

     ⭐ A causa é de COR, não de porcentagem: ir de AZUL para LARANJA
     em RGB passa por cinza, porque no meio do caminho R, G e B se
     igualam. Um amanhecer de verdade não passa por cinza: ele passa
     por VIOLETA, e é por isso que o céu fica roxo antes de ficar
     laranja.

     ⭐ A solução é manter o AZUL alto enquanto o VERMELHO sobe, e
     deixar o VERDE para trás. Isso dá magenta em vez de cinza. */
  /* 🔴🔴 05/09, 4ª tentativa · a IMAGEM do Cristian mostrou uma EMENDA
     no topo que a medição não pegava: a seção acima é --noite-800
     (#1a2332) e o degradê começava em --noite-900 (#121a24), que é mais
     ESCURO. A página escurecia antes de clarear, e isso vira uma linha.
     ⭐ A regra: o degradê começa na cor EXATA da seção que vem antes,
     e termina na cor EXATA da que vem depois. */
  #1a2332 0%,
  #1a2c40 10%,
  #1c3d5c 24%,
  #2f4670 38%,   /* já violeta-azulado, e o verde começa a ficar para trás */
  #55446e 48%,   /* ⭐ VIOLETA · o ponto onde antes havia cinza */
  #8a4e63 58%,   /* magenta quente */
  #b96150 68%,   /* o sol nascendo */
  #d9945f 78%,
  #eecfae 90%,
  #faf7f2 100%)}
/* o sol, um brilho quente no ponto da virada */
.virada::after{content:"";display:block;height:100%;
  /* ⚠️ o sol âmbar alcançava até 32% da altura e caía sobre a faixa
     VIOLETA. Âmbar sobre violeta dá OLIVA, e era a mancha marrom que
     aparece na imagem. Ele desceu e apertou: agora só toca o quente. */
  background:radial-gradient(46% 20% at 50% 76%,rgba(232,163,61,.34) 0%,transparent 70%)}

/* ══ 💎 O ONE BELIEF ════════════════════════════════════════
   05/09 · a frase que fecha a causa raiz, e ela e a mais importante
   da pagina. Vive numa secao CLARA, e por isso o bloco e ESCURO:
   e o maior contraste que a pagina tem. */
.virou{margin:var(--s-4) 0;padding:var(--s-4) var(--s-3);
  background:var(--noite-800);color:var(--dia-200);
  border-radius:var(--r-md);text-align:center;
  box-shadow:0 18px 46px rgba(18,26,36,.28)}
.virou p{margin:0;max-width:none;font-size:var(--t-lead);text-wrap:balance}
.virou__b{margin-top:var(--s-2)!important;font-family:var(--f-titulo);
  font-weight:700;color:var(--caramelo-500);line-height:1.15;
  font-size:var(--t-h3)!important}

/* ══ 📱 COMO O TEXTO QUEBRA ═════════════════════════════════
   05/09 · No celular a linha e curta, e uma quebra ruim custa leitura.

   ⭐ balance   reparte as linhas em tamanhos parecidos. Serve a texto
                CURTO: titulo, chapeu, botao, rotulo. Sem ele o titulo
                fica com a 1a linha cheia e a 2a com uma palavra so.
   ⭐ pretty    cuida do FIM do paragrafo, e impede que a ultima linha
                fique com uma palavra sozinha. Serve a texto LONGO.
   ⚠️ Nao se troca um pelo outro: balance em paragrafo longo custa caro
      e o navegador desiste; pretty em titulo de duas linhas nao faz nada. */
h1,h2,h3,.chapeu,.btn,.ancora__t,.slot__n,.card b,.item b,.preco b{text-wrap:balance}
p,li,.tab td,.faq__r,.disc,.seguro{text-wrap:pretty}

.chapeu{font:700 var(--t-micro)/1.2 var(--f-texto);letter-spacing:.22em;
        text-transform:uppercase;color:var(--azul-600);margin-bottom:var(--s-2)}
.sec--noite .chapeu,.sec--dor .chapeu{color:var(--azul-400)}
.centro{text-align:center}
.centro p{margin-inline:auto}

/* ── botao ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;
     background:var(--acao-600);color:var(--dia-50);
     font:700 1.125rem/1.25 var(--f-texto);text-decoration:none;text-align:center;
     border:0;border-radius:var(--r-full);min-height:56px;width:100%;
     padding:var(--s-2) var(--s-4);box-shadow:var(--sombra-btn);
     transition:background var(--dur-h) var(--ease),transform var(--dur-h) var(--ease);
     cursor:pointer;margin-top:var(--s-5)}
.btn:hover{background:var(--acao-700);transform:translateY(-2px)}
.btn:active{background:var(--acao-800);transform:none}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--azul-600);outline-offset:3px}
.seguro{margin-top:var(--s-2);font-size:var(--t-small);color:var(--noite-600);text-align:center}
.sec--noite .seguro,.sec--dor .seguro{color:var(--dia-300)}

/* ── cartao ────────────────────────────────────────── */
.card{background:var(--dia-50);border:1px solid var(--dia-300);border-radius:var(--r-md);
      padding:var(--s-3);box-shadow:var(--sombra-card)}
.sec--noite .card,.sec--dor .card{background:var(--noite-700);border-color:var(--noite-600);box-shadow:none}
.grid{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr)}

/* ── barra de prova ────────────────────────────────── */
/* ══ ★ A BARRA DE PROVA ═════════════════════════════════════
   05/09, refeita. O que estava errado, medido a 360px:

   🔴 os TRES numeros quebravam em DUAS fileiras, e o "+3" ficava
      sozinho embaixo. Era flex-wrap com gap de 32px e corpo de 40px:
      nao cabia, e o flex resolveu quebrando.
   🔴 as duas afirmacoes eram texto CENTRALIZADO com um <br> no meio,
      entao cada uma quebrava por conta e o negrito partia ao meio
      ("com 20 / bebes ao mesmo tempo").
   🔴 o emoji era parte da frase, entao a 2a linha voltava para baixo
      dele e a lista perdia o alinhamento.

   ⭐ Agora: GRADE de tres colunas que nunca quebra, com fio vertical
   entre elas, e as afirmacoes viram LISTA de duas colunas, emoji numa
   e texto na outra, alinhada a esquerda. */
.prova{background:var(--noite-700);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-3);margin-top:var(--s-4)}

.prova__l1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  padding-bottom:var(--s-3);border-bottom:1px solid var(--noite-600)}
.prova__c{text-align:center;padding:0 4px}
/* ⭐ o fio VERTICAL e o que transforma tres numeros soltos em um placar */
.prova__c + .prova__c{border-left:1px solid var(--noite-600)}
/* ⚠️ corpo PROPRIO, menor que o --t-num da pagina: tres numeros lado a
   lado em 240px de largura util nao cabem no tamanho de um numero so. */
.prova__n{font:700 clamp(1.35rem,6.2vw,2.25rem)/1 var(--f-texto);
  font-variant-numeric:tabular-nums;color:var(--caramelo-500);
  letter-spacing:-.02em;white-space:nowrap}
.prova__r{font-size:var(--t-micro);color:var(--dia-300);text-align:center;
  margin-top:6px;letter-spacing:.04em}

.prova__l2{list-style:none;margin:0;padding:var(--s-3) 0 0;
  display:grid;gap:var(--s-2);font-size:var(--t-small);color:var(--dia-200)}
/* ⭐ emoji numa coluna, texto na outra: a 2a linha do texto alinha com
   a 1a, e nao volta para debaixo do emoji. */
.prova__l2 li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-2);align-items:start;text-align:left}
/* ⭐ balance e nao pretty: sao frases CURTAS, de duas ou tres linhas.
   Com pretty a 1a linha enchia ate a borda e o negrito comecava na
   ultima palavra dela, partindo "20 | bebes ao mesmo tempo" no meio.
   Balance reparte as linhas e o negrito tende a cair inteiro numa so. */
.prova__l2 li > span:last-child{text-wrap:balance}
/* ⚠️ o line-height do emoji tem que ser o do TEXTO, senao a caixa
   dele fica mais alta e empurra a linha inteira para baixo. */
.prova__l2 li > span:first-child{font-size:17px;line-height:1.65}
.prova__l2 b{color:var(--dia-50)}

/* ── tentativa riscada ─────────────────────────────── */
.tent{display:flex;gap:var(--s-2);align-items:flex-start;background:var(--noite-700);
      border:1px solid var(--noite-600);border-radius:var(--r-md);padding:var(--s-3);margin-bottom:var(--s-2)}
.tent__x{flex:0 0 22px;color:var(--nao);font-weight:700}

/* ── conta das 3h ──────────────────────────────────── */
/* 🔴 05/09 · o card das 3h era escuro dentro de uma ilha escura:
   ele não contrastava com nada. Virou um card de ALERTA, com a
   borda em --nao e um fundo levemente avermelhado. */
.conta{background:linear-gradient(180deg,rgba(168,90,90,.16),rgba(168,90,90,.06));
  border:1px solid var(--nao);border-left:5px solid var(--nao);
  border-radius:var(--r-md);padding:var(--s-4);text-align:center;margin:var(--s-4) 0}
.conta__h{font:700 var(--t-num)/1 var(--f-texto);color:#e8a0a0;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ── acordeao das 5 pecas / faq ────────────────────── */
details{border-bottom:1px solid var(--dia-300)}
summary{min-height:56px;display:flex;align-items:center;gap:var(--s-2);cursor:pointer;
        list-style:none;font-weight:700;color:var(--azul-700);padding:var(--s-2) 0}
summary::-webkit-details-marker{display:none}
summary::after{content:"▾";margin-left:auto;color:var(--azul-600);transition:transform var(--dur-h)}
details[open] summary::after{transform:rotate(180deg)}
details p{padding-bottom:var(--s-3);color:var(--noite-600)}

/* ── item entregavel ───────────────────────────────── */
/* ⚠️ align-items:center deixava a foto boiando no meio de um texto
   três vezes mais alto que ela. flex-start alinha a foto com o RÓTULO,
   que é onde o olho entra. */
.item{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--dia-50);
      border:1px solid var(--dia-300);border-radius:var(--r-md);padding:var(--s-3);
      box-shadow:var(--sombra-card);margin-bottom:var(--s-2)}
.item img{flex:0 0 104px;width:104px;border-radius:var(--r-sm);border:1px solid var(--dia-300)}
/* 🔴 no celular a foto de 104px comia 164 dos 350px do cartão, e o nome
   sobrava com 23 caracteres por linha. A 76px sobram 29, e o nome de
   duas linhas passa a caber em duas. */
@media (max-width:479.98px){
  .item{gap:var(--s-2);padding:var(--s-2)}
  .item img,.item__ico{flex:0 0 76px;width:76px;height:auto}
  .item b{font-size:1.0625rem}
}
.item__ico{flex:0 0 104px;height:104px;border-radius:var(--r-sm);background:var(--dia-200);
           display:flex;align-items:center;justify-content:center;font-size:34px}
/* ⭐ 05/09 · o RÓTULO e o NOME viraram dois níveis. Antes "Áudio 1 ·
   Por que voltou · 12 min" era uma linha só, e ela quebrava em três
   pedaços sem hierarquia: o formato competia com o nome. */
.item__k{display:block;font:700 var(--t-micro)/1.3 var(--f-texto);
  letter-spacing:.12em;text-transform:uppercase;color:var(--azul-600);
  margin-bottom:5px}
.sec--noite .item__k,.ilha__d .item__k{color:var(--caramelo-500)}
.item b{display:block;margin-bottom:5px;font-size:var(--t-lead);
  line-height:1.2;text-wrap:balance}
.item span{font-size:var(--t-small);color:var(--noite-600)}
.sec--noite .item{background:var(--noite-700);border-color:var(--noite-600);box-shadow:none;color:var(--dia-200)}
.sec--noite .item b{color:var(--dia-50)}
.sec--noite .item span{color:var(--dia-300)}
.sec--noite .item__ico{background:var(--noite-800)}

/* ── ancora dupla ──────────────────────────────────── */
.ancora{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr)}
.ancora__c{border-radius:var(--r-md);padding:var(--s-3);border:1px solid var(--dia-300);background:var(--dia-50)}
.ancora__c--eles{border-color:var(--nao)}
.ancora__c--nos{border-color:var(--caramelo-500);background:var(--caramelo-200)}
.ancora__t{font:700 var(--t-micro)/1.2 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;
           margin-bottom:var(--s-2)}
.ancora__c--eles .ancora__t{color:var(--nao)}
.ancora__c--nos .ancora__t{color:var(--caramelo-600)}
/* ⭐ 05/09 · era um flex sem divisória e não lia como TABELA.
   Agora tem linha, cabeçalho e zebra. */
.linha{display:flex;justify-content:space-between;gap:var(--s-2);padding:6px 0;font-size:var(--t-small)}
.tab{width:100%;border-collapse:collapse;background:var(--dia-50);
  border:1px solid var(--dia-300);border-radius:var(--r-md);overflow:hidden;
  font-size:var(--t-small);box-shadow:var(--sombra-card)}
.tab th{background:var(--azul-600);color:var(--dia-50);text-align:left;
  font:700 var(--t-micro)/1.2 var(--f-texto);letter-spacing:.1em;
  text-transform:uppercase;padding:var(--s-2) var(--s-3)}
.tab td{padding:var(--s-2) var(--s-3);border-top:1px solid var(--dia-300);vertical-align:top}
.tab tbody tr:nth-child(even){background:var(--dia-100)}
.tab td:first-child{font-weight:700;white-space:nowrap;width:1%}
.tab td:last-child{background:var(--caramelo-200)}
.ilha__d .tab{background:var(--noite-700);border-color:var(--noite-600);color:var(--dia-200)}
.ilha__d .tab td{border-color:var(--noite-600)}
.ilha__d .tab tbody tr:nth-child(even){background:var(--noite-800)}
.ilha__d .tab td:last-child{background:rgba(212,165,116,.14)}
.linha b{font-variant-numeric:tabular-nums;white-space:nowrap}
.soma{border-top:1px solid var(--dia-300);margin-top:var(--s-2);padding-top:var(--s-2);font-weight:700}

/* ── preco ─────────────────────────────────────────── */
.preco{background:var(--dia-50);border:2px solid var(--acao-400);border-radius:var(--r-lg);
       padding:var(--s-4);box-shadow:var(--sombra-alta);text-align:center}
.preco__de{color:var(--noite-600);text-decoration:line-through}
.preco__por{font:700 var(--t-preco)/1 var(--f-texto);font-variant-numeric:tabular-nums;color:var(--noite-900)}

/* ── garantia ──────────────────────────────────────── */
.g7{display:flex;gap:8px;justify-content:center;margin:var(--s-3) 0}
.g7 i{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--dia-300);display:block}
.g7 i.on{background:var(--ok);border-color:var(--ok)}

/* ── depoimento ────────────────────────────────────── */
.depo{background:var(--dia-50);border:1px solid var(--dia-300);border-radius:var(--r-md);
      padding:var(--s-3);box-shadow:var(--sombra-card);margin-bottom:var(--s-2)}
.depo__dor{font:700 var(--t-micro)/1.3 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;
           color:var(--caramelo-600);margin-bottom:var(--s-1)}
.depo__f{font-style:italic;color:var(--noite-900)}
.depo__a{font-size:var(--t-small);color:var(--noite-600);margin-top:var(--s-1)}
/* ⭐ 05/09 · o Cristian quer os depoimentos em IMAGEM, todos do mesmo
   tamanho. O slot e 4:5 (1080x1350), que serve tanto para print de
   conversa quanto para card. */
.slots{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr)}
/* ══ 📱 OS DEPOIMENTOS VIRAM CARROSSEL NO CELULAR ══════════
   🔴 05/09 · empilhados, três molduras 4:5 ocupam ~1.290px, que é uma
   tela e meia de VAZIO, e o bloco de cima fica logo no início da página.
   ⭐ Em carrossel os três cabem numa tela e ela desliza.
   ⚪ E é o que a página das Doutoras faz nesta mesma posição:
   "PRINTS de conversa, em CARROSSEL horizontal". */
@media (max-width:767.98px){
  .slots{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:78%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:6px}
  .slots::-webkit-scrollbar{display:none}
  .slot{scroll-snap-align:center}
}
/* 🔴 06/09 · O SLOT DEIXOU DE FORCAR 4:5, e o motivo veio da medicao.
   ⭐ Os 6 prints reais tem razao de 0,80 a 2,79. Com aspect-ratio:4/5 e
   object-fit:cover, o de 900x323 perderia 71% da largura e o texto ficaria
   sem comeco nem fim.
   ⭐⭐ E o corpus das Doutoras confirma que isso e' DE PROPOSITO: as 23
   pecas delas vao de 2,79 a 0,54 e nenhuma foi recortada.
   ⚪ Print recortado no mesmo quadrado parece MONTADO. Print torto parece PRINT. */
/* ⭐ 06/09, 2a volta · quem flutua no meio e' a IMAGEM, e o rotulo fica
   ANCORADO no rodape do card. Assim os rotulos dos tres cards do carrossel
   ficam na mesma linha, e so' o print sobe ou desce.
   ⚠️ Nao se faz isso com justify-content: margem `auto` num filho ANULA o
   justify-content daquele eixo. Quem resolve e' `margin-block:auto` na
   propria imagem, que divide a sobra em cima e embaixo dela. */
.slot{margin:0;background:var(--dia-50);border:1px solid var(--dia-300);
  border-radius:var(--r-md);padding:10px;box-shadow:var(--sombra-card);
  display:flex;flex-direction:column;gap:10px;height:100%}
.slot img{display:block;width:100%;height:auto;margin-block:auto;
  border-radius:var(--r-sm);border:1px solid var(--dia-300);object-fit:contain}
/* ⭐ O rotulo e' a DOR, nunca o elogio: e' por ela que a leitora acha o
   print que se parece com a noite dela. Regra tirada dos cards de video
   das Doutoras, que rotulam "Bebe que so' dormia no peito". */
.slot__n{padding-top:2px;text-align:center}
.slot__i{font-size:38px;opacity:.5}
.slot__n{font:700 var(--t-micro)/1.35 var(--f-texto);letter-spacing:.10em;
  text-transform:uppercase;color:var(--azul-600)}
/* 🔴 06/09 · REGRA REMOVIDA. Ela era do tempo do placeholder 4:5 e
   vencia a nova por ORDEM, nao por especificidade: as duas sao `.slot img`,
   e a de baixo ganha. ⚠️ Com `height:100%;object-fit:cover` o print de
   900x323 perdia comeco e fim da frase. Decima vez que isso morde aqui. */

/* ── vsl ───────────────────────────────────────────── */
/* 🔴 05/09 · o poster e escuro e a secao e escura: ele sumia.
   O palco resolve: uma moldura clara com halo quente, que separa o video
   do fundo sem mexer na arte do poster. */
/* ══ A DOBRA ═══════════════════════════════════════════
   🔴 05/09 · o video PRECISA caber inteiro na primeira dobra.
   Medido antes: o palco estourava nos QUATRO tamanhos (+239px no 320).

   ⚠️ svh e nao vh. No mobile o vh conta a barra do navegador que so
   some depois que a pessoa rola, entao vh corta o video no carregamento.

   ⭐ A CORRENTE DE ALTURA, e ela so funciona inteira:
     .dobra          height definida (100svh)
     .dobra__palco   flex:1 1 auto + min-height:0  →  altura definida
     .palco          height:100%                   →  altura definida
     .vsl            height:100% + width:auto      →  a ALTURA manda na largura
   🔴 Um elo com altura AUTO no meio quebra os de baixo, porque
   porcentagem contra altura automatica nao resolve: vira "none". */
/* ⚠️ .sec.dobra e nao .dobra: a partir de 768px o @media redefine
   .sec{padding:80px ...}, e com a mesma especificidade (0,1,0) a regra
   de baixo vencia. A dobra ganhava 160px de padding que a --reserva nao
   previa, e o palco transbordava PARA CIMA, por cima do texto. */
.sec.dobra{--sticky:0px;
  height:100svh;min-height:560px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--s-2);padding-top:var(--s-3);
  /* ⚠️ o padding-bottom TEM que reservar o sticky. Encolher só o palco
     não resolve: justify-content:center recentraliza o conteúdo menor
     e ele volta para debaixo da barra. */
  padding-bottom:calc(var(--s-3) + var(--sticky))}

/* ⭐ a partir de 1024px o sticky some (regra que já existia), então a
   dobra não reserva nada e o vídeo volta ao tamanho cheio. */


/* ══ 📏 TELA BAIXA ═════════════════════════════════════════
   ⭐ Em tela CURTA o cabeçalho aperta e o vídeo recupera o espaço.
   ⚠️ O chapéu FICA: ele é a segmentação, e é a primeira coisa que diz
   se a página é pra ela. */
/* ⭐ o bloco de CTA que abre o resto: ele encosta no degradê, então o
   respiro de baixo dele é menor que o de uma seção normal. */
/* ══ 🛒 O CTA DA VSL ═══════════════════════════════════════
   ⭐ Ele nasce com altura ZERO e abre quando a VSL fala da oferta.
   ⚠️ grid-template-rows de 0fr para 1fr, e não height:auto: é a única
   forma de animar a abertura sem saber a altura de antemão, e sem o
   salto que display:none causaria. */
/* 🔴 07/09 · .sec.ctavsl e nao .ctavsl, pelo MESMO motivo da .sec.dobra
   logo acima: a partir de 768px o @media redefine .sec{padding:80px},
   e com a mesma especificidade (0,1,0) a regra que vem DEPOIS ganha.
   ⚠️ O sintoma era feio e nao obvio: a linha do grid colapsava certo
   (rows 0px), mas sobravam 80px de padding em cima e 80 embaixo. Como a
   secao tambem esta em opacity:0, ela NAO pinta o proprio fundo escuro,
   e o body, que e CREME, aparecia por 160px entre duas secoes escuras.
   ⭐ Achado no ar, no print do Cristian. Nenhum dos 5 scripts pegava,
   porque nenhum deles olhava COR de faixa vazia. */
.sec.ctavsl{padding-top:0;padding-bottom:0;
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 420ms var(--ease),
             padding-bottom 420ms var(--ease),opacity 300ms var(--ease);
  opacity:0}
.ctavsl > *{overflow:hidden;min-height:0}
.sec.ctavsl[data-v="1"]{grid-template-rows:1fr;padding-bottom:var(--s-4);opacity:1}
@media (prefers-reduced-motion:reduce){.ctavsl{transition:none}}

@media (max-height:700px){
  .sec.dobra{padding-top:var(--s-2)}
  .dobra h1{font-size:clamp(1.55rem,5.6vw,2.1rem)}
  .dobra__sub{font-size:1rem;margin-top:6px}
  .dobra .chapeu{margin-bottom:4px}
  .sticky{padding:8px var(--s-3)}
  .sticky .btn{min-height:46px;font-size:1rem}
}
.dobra__topo{flex:0 0 auto}
.dobra__palco{flex:1 1 auto;min-height:0;display:flex;
  justify-content:center;align-items:center}
.dobra .chapeu{margin-bottom:var(--s-1)}
.dobra h1{margin:0}
.dobra__sub{font-size:var(--t-lead);color:var(--caramelo-500);
  margin:var(--s-2) auto 0}

/* 🔴 05/09 · TRES tentativas quebraram a proporcao pelo mesmo motivo:
   quando os DOIS limites (largura e altura) brigam, o eixo que fica
   DEFINIDO vence e a razao se perde, e o poster estica.

   ⭐ A saida e nao deixar os dois brigarem: a LARGURA e a unica coisa
   definida, e ela ja nasce descontando a altura disponivel. A razao
   entao age num eixo so, e nunca tem o que quebrar.

   --reserva = o que o cabecalho ocupa acima do palco, MEDIDO em cada
   faixa. ⚠️ Se ela ficar menor que o cabecalho real, o video volta a
   estourar: por isso cada valor tem folga sobre a medicao. */
/* ⚠️ a --reserva passou a incluir o STICKY, que agora aparece desde o
   primeiro segundo. Sem isso ele cobre o pe do video.
   📏 MEDIDO, nao chutado: 94px de barra mais 12 de folga. Eu tinha
   estimado 78 e sobrou 27px de sobreposicao. */
.palco{--reserva:calc(250px + var(--sticky, 106px));
  width:min(100%, 468px, calc((100svh - var(--reserva)) * 9 / 16));
  aspect-ratio:9/16;height:auto;max-height:100%;
  padding:10px;box-sizing:border-box;border-radius:calc(var(--r-lg) + 6px);
  background:linear-gradient(160deg,rgba(212,165,116,.32),rgba(91,139,168,.18));
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(212,165,116,.35) inset}
@media (min-width:360px){.palco{--reserva:calc(205px + var(--sticky))}}
@media (min-width:768px){.palco{--reserva:calc(270px + var(--sticky, 98px))}}
.vsl{position:relative;width:100%;height:100%;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vsl img{width:100%;height:100%;object-fit:cover}
/* o play precisa contrastar com o poster, que e escuro: circulo CLARO,
   triangulo escuro, e um anel para ele nao encostar no fundo */
.vsl__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(42% 26% at 50% 50%,rgba(18,26,36,.5) 0%,rgba(18,26,36,.06) 100%);
  border:0;cursor:pointer}
.vsl__play span{width:clamp(64px,17vh,102px);height:clamp(64px,17vh,102px);
  border-radius:var(--r-full);background:var(--dia-50);
  display:flex;align-items:center;justify-content:center;
  color:var(--noite-900);font-size:clamp(22px,6vh,34px);padding-left:6px;
  box-shadow:0 10px 34px rgba(0,0,0,.55),0 0 0 8px rgba(254,253,251,.22)}

/* ── sticky ────────────────────────────────────────── */
.sticky{position:fixed;inset:auto 0 0 0;z-index:40;background:rgba(254,253,251,.94);
        backdrop-filter:blur(12px);border-top:1px solid var(--dia-300);
        padding:var(--s-2) var(--s-3);transform:translateY(110%);
        transition:transform var(--dur) var(--ease)}
.sticky[data-v="1"]{transform:none}
.sticky .btn{margin-top:0;min-height:52px}

/* ── reveal ────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px)}
.reveal[data-visto="1"]{opacity:1;transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}

/* ⭐ 05/09 · A DOBRA APARECE SEM JAVASCRIPT.
   O .reveal nasce em opacity:0 e quem acende e o IntersectionObserver.
   Isso serve para o que esta ABAIXO da dobra; para o que esta ACIMA
   dela e risco puro: JS lento, bloqueado ou quebrado = tela vazia
   no unico lugar da pagina onde nao existe segunda chance.
   Aqui a entrada e CSS, e o conteudo ja nasce pintado. */
.dobra .reveal{opacity:1;transform:none;animation:none}

/* 🔴🔴 05/09 · E A DOBRA NAO TEM ANIMACAO DE ENTRADA NENHUMA, medido:
   com a entrada em fade, o Chrome NAO REPORTAVA LCP. Ele descarta como
   candidato o elemento que nasce em opacity:0, e nao volta atras quando
   a animacao termina. Medido nas duas versoes:

     com o fade   →  LCP nao existe (nenhuma entrada)
     sem o fade   →  LCP = o poster.webp, 44 ms

   ⚠️ Nao e so metrica: um fade de 400ms na primeira dobra e 400ms em
   que a mae olha para uma tela quase vazia depois de pagar o clique.

   > O que esta ACIMA da dobra aparece. O que esta ABAIXO dela entra. */

/* ⭐ 05/09 · A PAGINA TEM ~29.000px DE ALTURA depois do portao.
   O navegador calcula estilo e layout de TUDO, mesmo do que esta a
   vinte telas de distancia. content-visibility manda ele pular esse
   trabalho ate a secao se aproximar.
   ⚠️ contain-intrinsic-size e obrigatorio junto: sem ele a secao
   pulada vale ZERO de altura, a barra de rolagem encolhe e volta,
   e o CLS que hoje e 0,000 estraga. */
#resto > section{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* a que vem logo depois do portao nao pula nada: ela e a primeira que
   a mae ve quando a pagina abre, e pular ali custa um piscar. */
#resto > section:first-child{content-visibility:visible}

.disc{font-size:var(--t-micro);line-height:1.5;color:var(--noite-600);text-align:center;
      max-width:var(--medida);margin:var(--s-3) auto 0}


@media (min-width:768px){
  .btn{min-height:60px;width:auto;min-width:340px}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ancora{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (min-width:1024px){
  .sec{padding:var(--s-6) var(--s-4)}
  .sticky{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* ══ 🔒 O PORTÃO ════════════════════════════════════════════
   05/09 · decisao do Cristian: a pagina abre so com a primeira secao.
   O resto DESBLOQUEIA depois de ~15s de video rodando.
   ⚠️ E o desbloqueio e visivel: a pagina AVISA que liberou. */
#resto{max-height:0;overflow:hidden;opacity:0;
  transition:max-height 900ms var(--ease),opacity 700ms var(--ease)}
#resto[data-aberto="1"]{max-height:none;overflow:visible;opacity:1}
/* ⚠️ o vao antes do portao era de ~35% da tela: o portao e um aviso,
   nao uma secao, e ele fica perto do video que o dispara. */
/* 🔴 05/09 · entre o fim do texto e o relogio havia 96px de vazio:
   64 do padding-bottom da secao mais 32 do padding-top daqui. Dois
   respiros somados viram buraco, e buraco no meio de uma secao escura
   parece que a pagina acabou ali. */
.portao{text-align:center;padding:var(--s-3) var(--s-3) var(--s-4)}
/* a legenda que vem logo depois do video respira MENOS: ela e um
   bloco unico de tres frases, nao tres assuntos. */
#s03{padding-bottom:var(--s-4)}
#s03 p{margin-bottom:var(--s-3)}
#s03 p:last-child{margin-bottom:0}
/* 🔴🔴 05/09 · ELE ERA UM FLEX, E ERA ESSE O DEFEITO.
   Num container flex cada no de texto vira um ITEM proprio, e itens
   quebram entre si sem olhar o sentido: a linha terminava em "15" e a
   seguinte comecava em "s". Nao era falta de nowrap, era o texto ter
   deixado de ser texto.

   ⭐ Agora e inline-block com fluxo normal, e o numero mais o "s" vivem
   dentro do MESMO <b> nowrap. E text-wrap:balance reparte as duas
   linhas em tamanhos parecidos, em vez de deixar uma cheia e uma orfa. */
.portao__b{display:inline-block;margin:0;
  background:var(--noite-700);border:1px solid var(--noite-600);
  border-radius:var(--r-full);padding:var(--s-2) var(--s-4);
  color:var(--dia-300);font-size:var(--t-small);line-height:1.5;
  max-width:100%;text-align:center;text-wrap:balance}
.portao__n{white-space:nowrap;color:var(--caramelo-500);font-weight:700;
  font-variant-numeric:tabular-nums}
.portao__t{display:block;width:min(200px,60%);height:4px;border-radius:var(--r-full);
  background:var(--noite-600);margin:var(--s-3) auto 0;overflow:hidden}
.portao__t i{display:block;height:100%;width:0;background:var(--caramelo-500);
  transition:width 200ms linear}
/* ══ 🔓 O AVISO DE LIBERAÇÃO ═══════════════════════════════
   05/09 · refeito. O anterior era uma pílula PRETA sobre a dobra PRETA,
   com texto "A página inteira liberou": voz de sistema, e a cor de alerta
   de erro. ⚠️ Ela acabou de dar 15 segundos de atenção, então o aviso é
   uma RECOMPENSA, não uma notificação de máquina.
   ⭐ Pílula CLARA sobre a dobra escura: contraste alto, tom quente, e
   deixa de parecer erro. */
/* ⚠️ EMBAIXO, e não em cima: no topo ele tapava o H1 justamente no
   segundo em que a página abre. E embaixo ele cai onde o polegar está. */
.liberou{position:fixed;left:50%;bottom:18px;transform:translate(-50%,180%);
  z-index:50;display:flex;align-items:center;gap:9px;
  background:var(--dia-50);color:var(--noite-900);
  border:1px solid var(--caramelo-500);border-radius:var(--r-full);
  padding:10px var(--s-3) 10px 12px;
  font:400 var(--t-small)/1.25 var(--f-texto);
  max-width:calc(100vw - 28px);
  box-shadow:0 14px 40px rgba(18,26,36,.42),0 0 0 6px rgba(254,253,251,.10);
  transition:transform 520ms var(--ease),opacity 320ms var(--ease)}
.liberou b{font-weight:700}
/* ⭐ o cadeado ganha um disco caramelo: sem ele o emoji some no branco */
.liberou__i{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-full);
  background:var(--caramelo-200);display:flex;align-items:center;
  justify-content:center;font-size:14px}
.liberou[data-v="1"]{transform:translate(-50%,0)}
.liberou[data-v="0"]{opacity:0}
@media (prefers-reduced-motion:reduce){.liberou{transition:opacity 320ms}}

/* ══ 🌙 A ILHA ═════════════════════════════════════════════
   05/09 · decisao do Cristian: depois do desbloqueio a pagina JA
   comeca clara, e o escuro passa a ser ILHA, usado so onde precisa
   contraste. Duas ilhas: a DOR e os BONUS.

   ⭐ E ela e um BLOCO ARREDONDADO sobre o creme, e nao uma faixa de
   ponta a ponta: assim a transicao nao precisa de gradiente nenhum,
   e a ilha vira o mesmo gesto do cartao claro da identidade,
   invertido. */
.ilha{background:var(--dia-100);padding:var(--s-4) var(--s-2)}
.ilha__d{background:var(--noite-900);color:var(--dia-200);
  border-radius:var(--r-lg);max-width:var(--total);margin-inline:auto;
  overflow:hidden;box-shadow:0 22px 60px rgba(18,26,36,.22)}
.ilha__d .sec{background:transparent;border-top:0}
.ilha__d h1,.ilha__d h2,.ilha__d h3{color:var(--dia-50)}
.ilha__d .chapeu{color:var(--azul-400)}
.ilha__d .seguro{color:var(--dia-300)}
.ilha__d .card{background:var(--noite-700);border-color:var(--noite-600);box-shadow:none}
.ilha__d .item{background:var(--noite-700);border-color:var(--noite-600);box-shadow:none;color:var(--dia-200)}
.ilha__d .item b{color:var(--dia-50)}
.ilha__d .item span{color:var(--dia-300)}
.ilha__d .item__ico{background:var(--noite-800)}

/* a barra de prova agora vive sobre o CLARO: ela vira um cartao escuro */
.sec--dia .prova{box-shadow:var(--sombra-alta)}

/* ⭐ 06/09 · No desktop os depoimentos deixam de ser GRADE e viram
   COLUNAS. Grade obriga toda celula da linha a ter a mesma altura, e com
   prints de razao 0,80 a 2,79 isso significa recortar ou deixar buraco.
   ⚪ Coluna empacota por altura, cada print fica do tamanho que ele e',
   e o bloco fecha sem sobra. */
@media (min-width:768px){
  .slots{display:block;columns:2;column-gap:var(--s-3)}
  .slot{break-inside:avoid;margin-bottom:var(--s-3);height:auto}
  .ilha{padding:var(--s-5) var(--s-4)}
}


/* ══ 🃏 O CARD DE DESTAQUE ══════════════════════════════════
   05/09 · alguns cards carregam o argumento e precisam pesar mais
   que os outros. Este é o cartão claro com borda caramelo grossa
   à esquerda e sombra alta. */
.card--destaque{border:1px solid var(--caramelo-500);
  border-left:6px solid var(--caramelo-500);background:var(--caramelo-200);
  box-shadow:var(--sombra-alta)}
.card--destaque b{color:var(--noite-900)}

/* ══ ⭐ AS 5 PEÇAS, ABERTAS ═════════════════════════════════
   05/09 · o Cristian: "seria interessante os itens ficarem abertos
   por padrão. Na verdade nem ter essa opção de abrir e fechar."
   ⚠️ Peça fechada era curiosidade; mas ela também esconde o que a
   pessoa está comprando, e aqui a oferta É as cinco detalhes. */
.peca{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--dia-50);
  border:1px solid var(--dia-300);border-radius:var(--r-md);padding:var(--s-3);
  box-shadow:var(--sombra-card);margin-bottom:var(--s-2)}
.peca__n{flex:0 0 38px;height:38px;border-radius:var(--r-full);
  background:var(--azul-600);color:var(--dia-50);display:flex;
  align-items:center;justify-content:center;font:700 1rem/1 var(--f-texto)}
.peca b{display:block;margin-bottom:4px;color:var(--noite-900)}
.peca > div span{font-size:var(--t-small);color:var(--noite-600)}

/* ══ 💰 O PREÇO, com semântica de cor ══════════════════════ */
.preco__de{color:var(--nao);text-decoration:line-through;
  font:700 var(--t-lead)/1.2 var(--f-texto);font-variant-numeric:tabular-nums}
.preco__por{font:700 var(--t-preco)/1 var(--f-texto);
  font-variant-numeric:tabular-nums;color:var(--ok-txt)}
.preco__u{display:block;font:700 var(--t-lead)/1.2 var(--f-texto);
  color:var(--noite-900);margin-top:var(--s-1)}
.preco__lista{list-style:none;padding:0;margin:var(--s-3) 0 0;
  display:flex;flex-direction:column;gap:6px;text-align:left;
  font-size:var(--t-small);color:var(--noite-600)}
.preco__lista li{display:flex;gap:var(--s-1)}
.preco__lista b{color:var(--ok-txt)}

/* ══ 🛡️ A GARANTIA · a régua de 7 noites ═══════════════════
   05/09 · os 7 quadradinhos verdes não diziam nada: eram sete
   caixas anônimas. Virou uma RÉGUA com os dois trechos nomeados. */
/* ⚠️ com aspect-ratio:1 e sete colunas, a regua crescia junto com a
   coluna e no desktop cada noite virava um quadrado de 85px. Um limite
   de largura segura a escala sem quebrar a grade. */
.regua{margin:var(--s-4) auto;max-width:440px}

/* ── a tabela dentro da âncora dupla ───────────────────────── */
.tab--eles td:last-child,.tab--nos td:last-child{background:transparent;
  text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.tab--eles{border-color:rgba(168,90,90,.35)}
.tab--eles td{border-color:rgba(168,90,90,.22)}
.tab--eles td:last-child{color:var(--nao)}
.tab--nos{background:var(--dia-50);border-color:var(--caramelo-500)}
.tab--nos td{border-color:var(--caramelo-500);border-top-color:rgba(184,131,79,.28)}
.tab--nos tbody tr:nth-child(even){background:rgba(240,224,204,.5)}
.tab--eles tbody tr:nth-child(even){background:rgba(168,90,90,.05)}
.tab__soma td{border-top:2px solid var(--caramelo-500)!important;
  background:var(--caramelo-200)!important;font-weight:700}
.tab small{color:var(--noite-600);font-weight:400}

/* ══ 📱 AS TABELAS NO CELULAR ═══════════════════════════════
   05/09, 2ª volta · a 1ª empilhou TODA tabela, e quebrou as que
   estavam certas. O que a captura mostrou:

   🔴 tabela de DUAS colunas nao pode empilhar. Ela JA e um par
      "nome → valor": empilhar dobra a altura e joga o nome numa
      linha e o preco na outra, sem alinhamento nenhum.
   🔴 tabela de TRES colunas nao vira par nenhum. Empilhada, ela
      repetia "IDADE" em toda linha e alinhava os valores a direita
      em zigue-zague, com o ROTULO mais forte que o DADO.

   ⭐ A regra que fica:
      2 colunas  →  continua TABELA em qualquer largura
      3 colunas  →  vira CARTAO por linha abaixo de 560px

   > Empilhar nao e a solucao para tabela larga.
   > A solucao e a tabela deixar de ser tabela e virar CARTAO. */

/* ── 2 colunas: tabela sempre, so mais apertada no celular ── */
.tab--eles td,.tab--nos td{padding:var(--s-2)}
/* ⭐ o preco e nowrap e largo ("R$200 a R$400"), entao ele decide quanto
   sobra para o nome. A 17px o nome quebrava em duas e ate tres linhas.
   Um degrau de corpo devolve a linha unica sem tirar legibilidade. */
@media (max-width:559.98px){
  .tab--eles td,.tab--nos td{font-size:var(--t-small);line-height:1.35;
    padding:10px var(--s-1)}
  .tab--eles td small,.tab--nos td small{font-size:var(--t-micro)}
  /* ⭐ a moldura tambem come largura, e aqui ela custa 40px dos 280
     que existem no 320. 12px de cada lado devolve 16px ao nome.
     ⚠️ .ancora .ancora__c e nao .ancora__c: existe uma .ancora__c mais
     abaixo no arquivo, e media query nao desempata especificidade. */
  .ancora .ancora__c{padding:var(--s-2)}
}
.tab--eles td:first-child,.tab--nos td:first-child{
  font-weight:400;white-space:normal;width:auto}
/* ⭐ so o PRECO e indivisivel, e ele se protege sozinho com espaco duro
   no HTML. Travar a celula inteira travava tambem "voce paga de novo",
   que nao e preco, e ela sozinha empurrava o nome para tres linhas. */
.tab--eles td:last-child,.tab--nos td:last-child{
  /* ⚠️ white-space:normal EXPLICITO. Tirar a declaracao da minha regra
     nao desfaz o nowrap da regra de cima: omitir nao e sobrescrever. */
  white-space:normal;width:1%;text-align:right;background:transparent}
.tab--nos td:last-child{white-space:nowrap}

/* ── 3 colunas: CARTAO por linha ─────────────────────────── */
@media (max-width:559.98px){
  .tab--3,.tab--3 tbody,.tab--3 tr,.tab--3 td{display:block;width:100%}
  .tab--3 thead{display:none}
  .tab--3{background:transparent;border:0;box-shadow:none}
  .tab--3 tr{background:var(--dia-50);border:1px solid var(--dia-300);
    border-radius:var(--r-md);padding:var(--s-2) var(--s-3) var(--s-3);
    margin-bottom:var(--s-2)}
  .tab--3 tbody tr:nth-child(even){background:var(--dia-50)}
  .tab--3 td{border:0;padding:0;text-align:left}

  /* ⭐ a idade e o TITULO do cartao, nao um campo */
  .tab--3 .tab__id{font:700 var(--t-h3)/1.2 var(--f-titulo);
    color:var(--azul-600);margin-bottom:6px}

  /* ⭐ o rotulo fica ACIMA do dado e MENOR que ele.
     Ao lado e a direita, ele competia com o dado e vencia. */
  .tab--3 td:not(.tab__id){margin-top:10px}
  .tab--3 td:not(.tab__id)::before{content:attr(data-l);display:block;
    font:700 var(--t-micro)/1.3 var(--f-texto);letter-spacing:.08em;
    text-transform:uppercase;color:var(--noite-600);margin-bottom:2px}
  /* ⭐ a ultima coluna e o dado que a mae procura, entao ela vira FAIXA.
     Sem padding e raio proprios ela herdava o fundo da celula da tabela
     e encostava nas bordas do cartao, parecendo vazamento. */
  .tab--3 td:last-child{color:var(--noite-900);font-weight:600;
    background:var(--caramelo-200);border-radius:var(--r-sm);
    padding:6px var(--s-2);margin-top:var(--s-2)}
  .tab--3 td:last-child::before{color:#8f6120;margin-bottom:0}

  .ilha__d .tab--3 tr{background:var(--noite-700);border-color:var(--noite-600)}
  .ilha__d .tab--3 tbody tr:nth-child(even){background:var(--noite-700)}
  .ilha__d .tab--3 .tab__id{color:var(--azul-400)}
  .ilha__d .tab--3 td{color:var(--dia-200)}
  .ilha__d .tab--3 td:not(.tab__id)::before{color:var(--dia-300)}
  .ilha__d .tab--3 td:last-child{color:var(--dia-50)}
}

/* ══ 📏 O TEXTO PEQUENO tem medida PRÓPRIA ══════════════════
   05/09 · a linha de segurança e o disclaimer herdavam a medida de
   640px. A 13 e 15px isso dá de 85 a 98 caracteres por linha, e o
   confortável é de 65 a 75. Texto menor pede linha mais curta. */
.seguro,.disc,.mini{max-width:52ch}
.seguro,.disc{margin-inline:auto}
.mini{font-size:var(--t-small);color:var(--noite-600)}
.ancora__c{padding:var(--s-3);background:var(--dia-50)}
.ancora__c--nos{background:var(--dia-50)}

/* ── 🆕 06/09 · O "MESMO QUE" DA HEADLINE ─────────────────────────
   ⭐ Modelo da Fraga: a cláusula que desqualifica quem NAO e a persona
   mora DENTRO da headline, nao numa linha solta. Fica em corpo menor
   para nao roubar altura do palco na dobra. */
.h1__mq{display:block;margin-top:6px;
  font:600 clamp(.94rem,3.5vw,1.12rem)/1.25 var(--f-texto);
  letter-spacing:0;color:var(--azul-100);opacity:.92;text-wrap:balance}

/* ── 🆕 06/09 · O LIMIAR DE AUTOQUALIFICACAO ──────────────────────
   ⭐ "ao menos 2 itens acima" e o 2o negrito da pagina da Fraga.
   Transforma a lista de LEITURA em AUTODIAGNOSTICO, com uma barra
   baixa o bastante para ninguem reprovar. */
.limiar{margin-top:var(--s-3);padding:var(--s-2) var(--s-3);
  border:1px dashed var(--azul-400);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
  color:var(--dia-100);font-size:var(--t-lead);
  max-width:34ch;margin-inline:auto;text-wrap:balance}

/* ══ 🆕 06/09 · APRESENTACAO DE PRODUTO, modelo Liana ═══════════════
   🔴 O ACHADO: os mockups existem a 600x600 e a pagina mostrava 104px,
   ou seja 17%. E eles nao sao objeto falso: mostram o CONTEUDO. O da
   tabela tem "4 meses / rolar / rolar no chao, 5 min" escrito dentro.
   A 104px nada disso se le.
   ⭐ 4/3 e NAO 16/9: medi o conteudo dentro dos 8 arquivos. O corte
   16/9 guarda so y 168..432 e comeria o texto do guia e dos bonus.
   O 4/3 guarda y 75..525, e o conteudo de todos cabe ali dentro. */
.itens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-3);margin-top:var(--s-4)}
.itens--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:859.98px){.itens--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639.98px){.itens,.itens--3{grid-template-columns:1fr}}
.itens .item{display:block;margin-bottom:0;height:100%}
.itens .item img{flex:none;display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:var(--r-sm);border:1px solid var(--dia-300);
  margin:0 0 var(--s-3)}
.item--largo{grid-column:1/-1}

/* ⭐ O BONUS HEROI · a Liana elege UM dos quatro e da fundo creme e
   borda quente so a ele. O nosso e o Guia da Segunda Noite, porque e
   o de maior ancora e o que segura a desistencia na noite 2. */
.item--heroi{background:var(--caramelo-200);border-color:var(--caramelo-500);
  box-shadow:0 10px 30px rgba(184,131,79,.20)}
.item--heroi .item__k{color:var(--caramelo-600)}

/* ⭐ A linha em negrito nao descreve o item: diz QUANDO ele e usado.
   ⚠️ Precisa de .item .item__uso: `.item span` tem especificidade
   MAIOR que `.item__uso` sozinho e venceria. */
.item .item__uso{display:block;font:700 var(--t-small)/1.35 var(--f-texto);
  color:var(--noite-900);margin-bottom:6px}

/* ⭐ O preco DENTRO do card, e nao so na tabela do s17 */
.item .item__val{display:block;margin-top:var(--s-2);
  font:700 var(--t-small)/1.3 var(--f-texto);color:var(--ok-txt)}
.item__val s{color:var(--nao);font-weight:600;margin-right:6px;opacity:.85}

/* ══ 🆕 06/09 · O CHAPEU VIRA PILHA ════════════════════════════════
   ⭐ .eyebrow dela e inline-flex com fundo de 12% de opacidade. Texto
   solto espacado le como linha perdida; a pilha le como rotulo. */
/* 🔴 06/09 · era `inline-flex`, e por isso a pilha caia' onde o texto do
   PAI mandasse: 9 secoes com a pilha a' esquerda e 10 no centro.
   ⚠️ E `text-align` na propria pilha nao resolve: isso alinha o texto
   DENTRO dela. Quem centraliza um bloco que encolhe e' width:fit-content
   com margin-inline:auto. */
.chapeu{display:block;width:fit-content;margin-inline:auto;
  background:rgba(44,95,124,.10);padding:5px 12px;border-radius:999px}
.sec--noite .chapeu,.sec--dor .chapeu,.ilha__d .chapeu{background:rgba(219,232,239,.10)}
/* 🔴 06/09 · A DOBRA FICA DE FORA. A pilha somou 14px de altura no topo
   e a --reserva do palco e' um numero fixo: o video passou a ser cortado
   pela ALTURA em vez da largura, e a razao 9:16 quebrou em 6 das 10
   telas. ⚠️ Mesma familia de erro da cadeia de altura de 05/09.
   ⭐ E o chapeu da dobra e' qualificador, nao rotulo de secao: pilha ali
   brigaria com a headline. */
.dobra .chapeu{display:block;background:none;padding:0}

/* ══ 🆕 06/09 · O DUPLO FILTRO ═════════════════════════════════════
   ⭐ Dizer para quem NAO e torna crivel a lista de para quem E. */
.filtro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-3);margin-top:var(--s-4)}
@media (max-width:639.98px){.filtro{grid-template-columns:1fr}}
.filtro__c{background:var(--dia-50);border:1px solid var(--dia-300);
  border-radius:var(--r-md);padding:var(--s-3);box-shadow:var(--sombra-card)}
.filtro__c--sim{border-color:var(--ok)}
.filtro__c--nao{border-color:var(--nao)}
.filtro__t{display:block;font:700 var(--t-micro)/1.3 var(--f-texto);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-3)}
.filtro__c--sim .filtro__t{color:var(--ok-txt)}
.filtro__c--nao .filtro__t{color:var(--nao)}
.filtro ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.filtro li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:start;font-size:var(--t-small);color:var(--noite-600);
  text-wrap:pretty}
.filtro__c--sim li b{color:var(--ok)}
.filtro__c--nao li b{color:var(--nao)}

/* ══ 🆕 06/09 · A RECUSA DA ANCORA ═════════════════════════════════
   ⚪ "Mas voce nao vai investir R$1.229." A frase que NOMEIA a ancora
   e a RECUSA, em segunda pessoa, antes do preco aparecer. */
.preco__recusa{font-size:var(--t-lead);color:var(--noite-600);
  margin:0 0 var(--s-1);text-wrap:balance}
.preco__recusa s{color:var(--nao);text-decoration-thickness:2px}

/* ── 🔴 06/09 · O CARD CLARO DENTRO DA ILHA ESCURA ────────────────
   Os mockups dos bonus tem fundo NAVY. Com `.ilha__d .item` pintando o
   card de noite-700, ficou navy sobre navy sobre navy e o mockup sumiu.
   ⭐ A Liana poe card BRANCO. A ilha continua escura (e' a gramatica da
   pagina, usada tambem na dor), e o card e' que da o chao claro.
   ⚠️ `.ilha__d .item` tem especificidade 0,2,0 e vencia `.item--heroi`
   sozinho: por isso todas as regras abaixo sao 0,3,0. */
.ilha__d .itens .item{background:var(--dia-50);border-color:var(--dia-300);
  color:var(--noite-600);box-shadow:var(--sombra-card)}
.ilha__d .itens .item b{color:var(--noite-900)}
.ilha__d .itens .item span{color:var(--noite-600)}
.ilha__d .itens .item .item__k{color:var(--azul-600)}
.ilha__d .itens .item .item__uso{color:var(--noite-900)}
.ilha__d .itens .item--heroi{background:var(--caramelo-200);
  border-color:var(--caramelo-500);box-shadow:0 14px 40px rgba(212,165,116,.22)}
.ilha__d .itens .item--heroi .item__k{color:var(--caramelo-600)}

/* 🔴 06/09 · REGRA REMOVIDA, e o motivo fica registrado: eu tinha escrito
   um `.item--largo{display:grid}` para por o mockup do heroi AO LADO do
   texto, e ele NUNCA valeu, porque `.itens .item{display:block}` tem
   especificidade 0,2,0 contra 0,1,0. ⚠️ Nona vez que a especificidade
   morde nesta pagina. ⭐ E ao ver o render decidi que a versao que
   sobreviveu e' MELHOR: o mockup em cima, na largura toda, e' o unico
   lugar da pagina onde o produto se le por inteiro. */

/* ⭐ o PRECO como climax: a Liana faz dele o maior bloco da pagina */
.preco{padding:var(--s-5) var(--s-4)}
.preco .preco__por{font-size:clamp(3rem,13vw,4.4rem)}

/* ══ 🆕📺 06/09 · O MINI PLAYER ════════════════════════════════════
   ⭐ Modelo da Soy Esa Mama: depois que o video comeca, rolar a pagina
   nao pausa nada. O proprio PALCO sai da dobra e vira um retangulo fixo,
   e a VSL segue tocando ate' o fim da pagina.
   🔴 E' o ELEMENTO que se move, e nao uma copia: quando o <video> real
   existir, ele continua do segundo em que estava, sem recarregar e sem
   perder o relogio do portao.
   ⚠️ Quem e' observado e' o .dobra__palco, nao o .palco: se o palco sai
   para position:fixed, ele deixaria de disparar o proprio observador.
   ⭐ E o .dobra__palco tem flex:1 1 auto, entao o buraco nao colapsa e
   nao ha' CLS: a dobra continua com 100svh de altura. */
.palco.mini{
  position:fixed;z-index:60;
  right:12px;bottom:calc(12px + var(--sticky-alt, 0px));
  width:min(40vw, 150px);max-height:none;
  padding:6px;border-radius:14px;
  box-shadow:0 18px 44px rgba(18,26,36,.45);
  /* ⭐ 07/09 · o valor de --sticky-alt agora e fixo, entao isto so age ao
     GIRAR o celular. Existe para que nem essa troca seja um salto. */
  transition:bottom 220ms var(--ease);
  animation:mini-entra 240ms var(--ease) both}
@media (min-width:768px){.palco.mini{width:200px;right:20px;
  bottom:calc(20px + var(--sticky-alt, 0px))}}
@keyframes mini-entra{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to  {opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.palco.mini{animation:none}}

/* 🔴 06/09 · o "×" DIGITADO caia 1,75px abaixo do centro do botao, medido
   com a tinta do glifo em escala 6x. Nao e' erro de centralizacao: o
   U+00D7 senta no eixo MATEMATICO, e centralizar a linha de texto nao
   centraliza o desenho dentro dela.
   ⭐ Por isso ele passou a ser DESENHADO, com duas barras cruzadas. Fica
   exato por construcao e nao depende da fonte carregar.
   ⚠️ O texto "×" continua no HTML e some com font-size:0: quem anuncia o
   botao e' o aria-label. */
.palco__x{position:absolute;top:-9px;right:-9px;display:none;
  box-sizing:border-box;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--noite-600);background:var(--noite-900);
  font-size:0;color:transparent;
  cursor:pointer;padding:0;z-index:1}
.palco.mini .palco__x{display:block}
.palco__x::before,.palco__x::after{content:"";position:absolute;
  left:50%;top:50%;width:12px;height:2px;border-radius:2px;
  background:var(--dia-100)}
.palco__x::before{transform:translate(-50%,-50%) rotate(45deg)}
.palco__x::after {transform:translate(-50%,-50%) rotate(-45deg)}
.palco__x:hover{background:var(--noite-700)}
.palco__x:hover::before,.palco__x:hover::after{background:#fff}

/* ⭐ no mini, o botao de play encolhe junto. Com o <video> real ele
   nem existe, mas enquanto e' poster o circulo tomava 60% do quadro. */
/* ⚠️ o .vsl__play e' inset:0, entao quem carrega o tamanho e' o SPAN.
   Mexer no botao nao faria nada: ele ja cobre o quadro inteiro. */
.palco.mini .vsl__play span{width:40px;height:40px;font-size:14px}

/* ── 🆕🖼️ 06/09 · O PAR ANTES E DEPOIS ────────────────────────────
   ⚠️ Sao ILUSTRACOES geradas, nao foto de aluna. Por isso a legenda de
   honestidade fica colada nelas, e nao no rodape. */
/* 🔴 06/09 · a folga ABAIXO do par era ZERO: o .par so' tinha margem em
   cima e o paragrafo seguinte so' embaixo, entao os dois se encostavam.
   ⭐ E o par nao pede a folga PADRAO: ele e' um bloco visual dentro de uma
   secao de texto, e precisa respirar mais do que dois paragrafos entre si. */
.par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-3);margin:var(--s-4) auto var(--s-5);max-width:520px}
.par figure{margin:0}
.par img{display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid var(--dia-300);box-shadow:var(--sombra-card)}
.par__nota{margin:var(--s-2) auto 0;max-width:520px;text-align:center;
  font-size:var(--t-micro);color:var(--noite-600);opacity:.8}

/* ══ 🆕📐 06/09 · O PADRAO DE ALINHAMENTO ══════════════════════════
   ⚪ O Cristian: "as vezes o titulo centralizado e o subtitulo a'
   esquerda, outra vez o contrario. Vamos padronizar isso."
   ⭐ A regra saiu das duas referencias, e nao de gosto:
      Doutoras  .rotulo · .sec-title · .sec-sub  →  center
                .obj-card p                       →  esquerda
      Liana     eyebrow + h2 + deck               →  center (classe .center)
                corpo dos cards                   →  esquerda

   ┌──────────────────────────────────────────────────┐
   │ CABECALHO DE SECAO  chapeu · h2 · deck  → CENTRO │
   │ PROSA e CARD                            → ESQUERDA│
   └──────────────────────────────────────────────────┘

   ⚠️ Prosa centralizada nao se le': cada linha comeca num ponto
   diferente e o olho perde a margem de retorno. Por isso o padrao
   nao e' "centralizar tudo": e' centralizar o CABECALHO. */
.sec h2{text-align:center}
/* ⚠️ o :not(.deck) e' obrigatorio: `.sec h2 + p` tem especificidade 0,2,1
   e venceria `.deck` (0,1,0), jogando para a esquerda justamente a linha
   que o padrao manda centralizar. Decima primeira vez nesta pagina. */
.sec h2 + p:not(.seguro):not(.chapeu):not(.par__nota):not(.deck){text-align:left}
.deck{text-align:center;max-width:52ch;margin-inline:auto}

/* ══ 🆕📏 06/09 · A RÉGUA DA GARANTIA, refeita ═════════════════════
   ⚪ O Cristian: "temos que ajustar essa barra visualmente".
   🔴 Ela era DOIS retangulos chapados com "noite 1" e "noite 7"
   flutuando soltos embaixo, sem tique nenhum ligando um ao outro.
   ⭐ Agora e' uma linha de SETE noites CONTADAS, e o heroi do grafico e'
   a DIVISORIA na noite 3, porque e' ela que carrega o argumento:
   voce ja' sabe ali, e ainda sobram quatro para decidir. */
.regua{margin:var(--s-4) 0}
.regua__topo{display:grid;grid-template-columns:3fr 4fr;gap:10px;margin-bottom:8px}
.regua__t{font:700 var(--t-micro)/1.3 var(--f-texto);letter-spacing:.10em;
  text-transform:uppercase;text-align:center;padding:5px 8px;border-radius:999px;
  text-wrap:balance}
.regua__t--m{background:rgba(74,139,111,.16);color:var(--ok-txt)}
.regua__t--s{background:var(--dia-200);color:var(--noite-600)}

.regua__b{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;padding:0;margin:0}
.regua__b li{aspect-ratio:1;display:grid;place-items:center;
  border-radius:var(--r-sm);background:var(--dia-200);border:1px solid var(--dia-300);
  color:var(--noite-600);font:700 clamp(.82rem,3.4vw,1rem)/1 var(--f-texto);
  font-variant-numeric:tabular-nums}
.regua__b li.on{background:var(--ok);border-color:var(--ok);color:#fff}

/* ⭐ A DIVISORIA. O `gap` do grid separa as celulas; a marca caramelo
   fica no meio desse gap e sobe e desce alem da caixa, para ler como
   corte da linha do tempo e nao como borda de celula. */
.regua__b li.marco{position:relative;margin-right:5px}
.regua__b li.marco::after{content:"";position:absolute;
  right:-8px;top:-7px;bottom:-7px;width:3px;border-radius:3px;
  background:var(--caramelo-500)}

.regua__leg{margin:10px auto 0;max-width:44ch;text-align:center;
  font-size:var(--t-small);color:var(--noite-600);text-wrap:balance}
.regua__leg b{color:var(--ok-txt)}