/* ==========================================================================
   LabGeral — Landing page Sexagem Fetal
   Conceito "bebê conversando com a mamãe": tons pastéis, rosa como cor
   principal e azul-bebê de apoio. Página única, sem dependências além das
   fontes do Google.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Pontuação dos títulos
   A Mali desenha vírgula, ponto e vírgula e dois-pontos VAZADOS (um "9" com
   furo no meio), em todos os pesos. No título, "Mamãe," ficava com a vírgula
   oca. Esta fonte contém só esses três sinais, recortados da Karla 700
   (896 bytes, licença OFL), e o unicode-range faz o navegador usá-la apenas
   para eles: o resto do texto continua na Mali, sem mexer no HTML.
   font-weight 100 900: vale para qualquer peso pedido, então o navegador
   não tenta engrossar a vírgula na marra.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Mali Pontuacao';
  src:url('/assets/fonts/karla-700-pontuacao.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+002C,U+003A-003B;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Superfícies pastéis — só fundo e decoração, nunca texto. */
  --cream:#FFF8F4;        /* fundo da página */
  --blush:#FCEBEE;        /* seções alternadas */
  --petal:#F7D3DA;        /* círculos de ícone, detalhes */
  --rose:#EFA9B8;         /* bordas de destaque, traço do coração */
  --sky:#D6E8F5;          /* azul-bebê de apoio */

  /* Cores que carregam texto. Os pastéis acima reprovam em contraste, então
     todo texto colorido usa uma destas versões escuras. */
  --rose-deep:#B84B6E;    /* fundo dos botões, com texto branco (4,9:1) */
  --rose-deep-hover:#A33F61;
  --rose-ink:#A33D60;     /* texto rosa sobre fundo claro (5,9:1) */
  --sky-ink:#3F6F94;      /* texto azul sobre fundo claro (5,1:1) */

  --ink:#4A2A37;          /* texto principal: ameixa escuro, mais quente que preto */
  --muted:#7A5766;        /* texto secundário (5,4:1 sobre --blush) */
  --line:#F1DDE2;
  --white:#FFFFFF;

  --radius:22px;
  --radius-lg:30px;
  --radius-sm:14px;

  --shadow:0 24px 50px -24px rgba(163,61,96,.30);
  --shadow-soft:0 14px 34px -18px rgba(163,61,96,.22);

  --container:1120px;
  --gutter:22px;

  /* Conceito "bilhete de criança":
     Mali nos títulos: arredondada, com cara de escrita à mão, mas firme.
     Karla no texto corrido: sem serifa legível, com um desenho próprio.
     Gochi Hand só em frases curtas, como bilhetes do bebê. Ela tem um
     único peso (400): pedir 600 faz o navegador engrossar a letra na
     marra e ela fica borrada. */
  --ff-display:'Mali Pontuacao','Mali','Segoe Print','Comic Sans MS',cursive;
  --ff-body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-hand:'Gochi Hand','Segoe Print','Bradley Hand',cursive;

  /* Curvas de movimento. Entradas e respostas a toque usam --ease-out:
     arranca rápido e desacelera, então o elemento parece já estar chegando
     quando aparece. 'ease' puro começa lento e parece atrasado. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  /* line-height 1.2, e não mais apertado: a Mali tem ascendentes altos e
     o til de "Mamãe" encostaria na linha de cima. Sem letter-spacing
     negativo, que embola letra de desenho manuscrito. */
  font-family:var(--ff-display);font-weight:600;line-height:1.2;
  /* Distribui as linhas por igual, sem palavra sozinha na última linha.
     Navegador sem suporte só ignora. */
  text-wrap:balance;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong,b{font-weight:700}

:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;left:16px;top:-100px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 12px;
  font-weight:700;font-size:.9rem;transition:top .18s var(--ease-out);
}
.skip-link:focus{top:0}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* Coração em SVG usado como ornamento. Emoji mudaria de cara entre
   iPhone, Android e Windows; o SVG sai igual em todos. */
.heart{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.12em;fill:currentColor}

/* Ordinal ("8ª"). A Karla desenha o "ª" igual a um "a" comum, do mesmo
   tamanho, e "8ª semana" aparecia como "8a semana". Ela também não tem o
   recurso OpenType de ordinais. Por isso todo "ª" do corpo vem dentro de
   <span class="ord">, e aqui ele vira um "a" pequeno e elevado. O caractere
   continua sendo "ª", então leitor de tela e o FAQ do JSON-LD não mudam.
   position/top em vez de vertical-align para não aumentar a altura da linha. */
.ord{font-size:.62em;position:relative;top:-.62em;margin-left:.04em;line-height:0}

/* --------------------------------------------------------------------------
   3. Tipografia utilitária
   -------------------------------------------------------------------------- */
/* Chamada manuscrita acima dos títulos: é a "voz" do bebê mais visível. */
.eyebrow{
  font-family:var(--ff-hand);font-weight:400;font-size:1.6rem;line-height:1.1;
  color:var(--rose-ink);display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
}
.eyebrow .heart{font-size:.8em}

/* Etiqueta em pílula — identifica o exame no topo do hero. */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;margin-bottom:18px;
  font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-ink);
}
.pill .heart{font-size:1.05em}

/* "menino" em azul e "menina" em rosa: a dúvida que a página vende. */
.menino{color:var(--sky-ink)}
.menina{color:var(--rose-ink)}

/* --------------------------------------------------------------------------
   4. Botões
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-body);font-weight:800;font-size:1rem;line-height:1.2;
  min-height:50px;padding:14px 28px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .14s var(--ease-out),box-shadow .2s var(--ease-out),
             background-color .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--rose-deep);color:#fff;box-shadow:0 14px 28px -14px rgba(184,75,110,.75)}
.btn-lg{min-height:58px;padding:17px 36px;font-size:1.06rem}
.btn-sm{min-height:44px;padding:10px 20px;font-size:.9rem}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* Hover só onde existe cursor de verdade: em tela de toque o :hover
   "gruda" depois do tap e o botão fica preso nesse estado. */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--rose-deep-hover);transform:translateY(-2px)}
}
/* Retorno tátil ao toque — o único que o celular recebe, já que lá não há
   hover. Vem depois do bloco acima para vencer durante o clique. */
.btn:active{transform:scale(.97)}

/* --------------------------------------------------------------------------
   5. Cabeçalho (só logo + CTA, sem navegação)
   -------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,248,244,.96);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(10px)){
  .site-header{background:rgba(255,248,244,.82);backdrop-filter:blur(12px)}
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;flex:none;padding:6px 0}
.brand img{height:34px;width:auto}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:56px 76px}
/* Duas manchas de luz, rosa e azul, atrás do conteúdo. */
.hero::before,.hero::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  width:560px;height:560px;
}
.hero::before{top:-200px;left:-180px;background:radial-gradient(circle,rgba(247,211,218,.95),rgba(247,211,218,0) 68%)}
/* bottom positivo: a mancha precisa terminar DENTRO do hero. Com bottom
   negativo ela vazava para baixo e o overflow:hidden a cortava numa linha
   reta visível, logo acima do divisor do coração. */
.hero::after{bottom:40px;right:-160px;background:radial-gradient(circle,rgba(214,232,245,.95),rgba(214,232,245,0) 68%)}

.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
/* A Mali é mais larga que uma serifa comum, daí o teto menor. */
.hero h1{font-size:clamp(2rem,4.8vw,3.2rem);color:var(--ink);margin-bottom:20px}
/* "Mamãe," em rosa, não em itálico: itálico em letra manuscrita parece
   inclinação por descuido, e a cor já destaca. */
.hero h1 em{font-style:normal;color:var(--rose-ink)}
.hero .lead{font-size:clamp(1.02rem,2.2vw,1.16rem);color:var(--muted);margin-bottom:30px;max-width:540px}
.hero .lead strong{color:var(--ink)}

/* Selos de confiança */
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.trust li{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px 8px 11px;font-weight:700;font-size:.84rem;color:var(--ink);
  box-shadow:0 6px 16px -12px rgba(163,61,96,.35);
}
.trust li svg{width:18px;height:18px;flex:none;color:var(--rose-ink)}

/* Entrada escalonada dos selos: leva o olho pelos três fatos que sustentam
   a decisão em vez de despejar os três juntos. Fica atrás de .js: sem
   JavaScript os selos nascem visíveis. */
.js .hero .trust li{opacity:0;transform:translateY(10px);animation:selo-entra .32s var(--ease-out) forwards}
.js .hero .trust li:nth-child(1){animation-delay:.20s}
.js .hero .trust li:nth-child(2){animation-delay:.27s}
.js .hero .trust li:nth-child(3){animation-delay:.34s}
@keyframes selo-entra{to{opacity:1;transform:none}}

/* Foto em moldura de arco. O texto nunca fica sobre a imagem, então o
   contraste não depende de véu nem de onde a foto é recortada. */
.hero-photo{position:relative;justify-self:center;width:min(100%,430px)}
/* A foto é um recorte com fundo transparente, então o fundo é da moldura:
   o mesmo degradê rosa → azul da seção final. */
.arch{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:999px 999px 34px 34px;border:8px solid var(--white);
  box-shadow:var(--shadow);
  background:linear-gradient(165deg,#FBDDE4 0%,#FFF1EC 55%,#DCEAF6 100%);
}
/* A gestante fica ancorada embaixo, com 94% da altura da moldura: sobra
   folga acima da cabeça, que assim não esbarra na curva do arco. Medida pela
   altura (e não object-fit) porque o recorte é mais estreito que a moldura
   e precisa ficar centralizado, com fundo aparecendo dos lados. */
.arch img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:94%;width:auto;max-width:none;
}
/* O recorte termina num corte reto na barra do vestido. Um esfumado curto
   na base disfarça essa linha dentro da moldura. */
.arch::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,235,238,0) 82%,rgba(252,235,238,.7) 100%);
}
/* Balão manuscrito do bebê, sobreposto à foto. */
.hello{
  position:absolute;left:-22px;bottom:40px;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border-radius:20px 20px 20px 6px;padding:8px 18px 10px;
  font-family:var(--ff-hand);font-weight:400;font-size:1.7rem;line-height:1.1;color:var(--rose-ink);
  box-shadow:var(--shadow-soft);
}
.hello .heart{font-size:.75em}

/* --------------------------------------------------------------------------
   7. Divisor de batimento cardíaco — o coraçãozinho do bebê
   -------------------------------------------------------------------------- */
.heartbeat{padding-block:0 40px}
.ecg{display:block;width:100%;height:40px;overflow:hidden;line-height:0}
.ecg svg{width:100%;height:100%;display:block}
.ecg .trace{
  fill:none;stroke:var(--rose);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(239,169,184,.65));
}
/* O path declara pathLength="1000": o traço é desenhado em unidades
   normalizadas, independente da largura da tela. O desenho só começa
   quando o divisor entra na tela (.is-in, aplicada pelo observer em
   main.js) — no load ele terminaria antes de alguém chegar nele. */
.js .ecg .trace-draw{stroke-dasharray:1000;stroke-dashoffset:1000}
.js .ecg.is-in .trace-draw{animation:ecg-draw 2.6s cubic-bezier(.33,0,.2,1) forwards}
@keyframes ecg-draw{to{stroke-dashoffset:0}}
/* Bloco com o coração inline, e não flex: em flex o texto quebrava dentro
   do próprio item e o coração ficava solto na lateral. */
.heartbeat-caption{
  margin-top:8px;padding-inline:var(--gutter);
  font-family:var(--ff-hand);font-weight:400;font-size:1.55rem;line-height:1.2;
  color:var(--rose-ink);text-align:center;text-wrap:balance;
}
.heartbeat-caption .heart{font-size:.8em;margin-left:4px}

/* --------------------------------------------------------------------------
   8. Seções
   -------------------------------------------------------------------------- */
.section{padding-block:80px}
.on-blush{background:var(--blush)}

.sec-head{max-width:680px;margin:0 auto 46px;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink)}
/* :not(.eyebrow) — sem ele, este seletor (0,1,1) vence .eyebrow (0,1,0)
   e a chamada manuscrita sai do tamanho e da cor de um parágrafo comum. */
.sec-head p:not(.eyebrow){color:var(--muted);margin-top:14px;font-size:1.06rem}

/* --------------------------------------------------------------------------
   9. Como funciona — 3 passos
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 28px 30px;box-shadow:var(--shadow-soft);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
}
.step .ico{
  width:60px;height:60px;border-radius:50%;background:var(--petal);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--rose-ink);
}
.step:nth-child(2) .ico{background:var(--sky);color:var(--sky-ink)}
.step .ico svg{width:28px;height:28px}
.step .num{
  font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose-ink);display:block;margin-bottom:6px;
}
.step:nth-child(2) .num{color:var(--sky-ink)}
.step h3{font-size:1.35rem;color:var(--ink);margin-bottom:8px}
.step p{font-size:.98rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   9b. Presente — a caixa em que o resultado é entregue
   -------------------------------------------------------------------------- */
.presente{overflow:hidden}
.presente-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}

.presente-foto{position:relative;justify-self:center;width:min(100%,440px)}
/* A inclinação fica na imagem, e não no <figure>: o <figure> tem .reveal,
   cuja animação termina com transform:none e apagaria a inclinação. */
.presente-foto img{
  width:100%;border-radius:var(--radius-lg);border:8px solid var(--white);
  box-shadow:var(--shadow);transform:rotate(-2deg);
}
/* Etiqueta manuscrita no canto da foto. Branco sobre --rose-deep: 4,9:1. */
.presente-selo{
  position:absolute;top:20px;right:-12px;transform:rotate(6deg);
  display:inline-flex;align-items:center;gap:6px;
  background:var(--rose-deep);color:#fff;border-radius:999px;padding:7px 16px 9px;
  font-family:var(--ff-hand);font-size:1.55rem;line-height:1;box-shadow:var(--shadow-soft);
}
.presente-selo .heart{font-size:.75em}

.presente-texto h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink);margin-bottom:14px}
.presente-lead{color:var(--muted);font-size:1.06rem;margin-bottom:20px}
.presente-itens{display:grid;gap:14px;margin-bottom:18px}
/* Cada item é flex com DOIS filhos (ícone + um único <span> de texto): com o
   texto solto, o <strong> e a frase virariam itens separados. */
.presente-itens li{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-soft);
}
.presente-ico{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--petal);color:var(--rose-ink);
}
.presente-itens li:nth-child(2) .presente-ico{background:var(--sky);color:var(--sky-ink)}
.presente-ico svg{width:23px;height:23px}
.presente-itens li > span:last-child{color:var(--muted);font-size:.97rem;line-height:1.5}
.presente-itens strong{
  display:block;margin-bottom:2px;
  font-family:var(--ff-display);font-weight:600;font-size:1.12rem;line-height:1.25;color:var(--ink);
}
/* Os dois jeitos de receber a caixa: com e sem chá revelação. */
.revelacao{margin:4px 0 18px}
.revelacao-titulo{font-family:var(--ff-display);font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--ink);margin-bottom:10px}
.revelacao-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.revelacao-opcao{background:var(--blush);border-radius:var(--radius);padding:14px 16px;text-align:left}
/* Rosa escuro sobre --blush: 5,4:1. */
.revelacao-opcao b{
  display:block;margin-bottom:4px;
  font-weight:800;font-size:.7rem;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-ink);
}
.revelacao-opcao p{font-size:.95rem;line-height:1.5;color:var(--ink)}
.presente-nota{font-family:var(--ff-hand);font-size:1.6rem;line-height:1.2;color:var(--rose-ink);margin-bottom:22px}
.js .presente-texto.reveal{transition-delay:.07s}

/* --------------------------------------------------------------------------
   10. Comparativo Sexagem × Ultrassom
   -------------------------------------------------------------------------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;max-width:940px;margin:0 auto}
.cmp{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 30px 30px;position:relative;
}
/* A Sexagem é o card destacado: borda rosa, sombra e selo. */
.cmp.is-featured{
  border:2px solid var(--rose);box-shadow:var(--shadow);
  background:linear-gradient(180deg,var(--blush),var(--white) 50%);
}
.cmp .badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--rose-deep);color:#fff;
  font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;
}
.cmp .badge .heart{font-size:1em}
.cmp h3{font-size:1.5rem;color:var(--ink);text-align:center;margin-bottom:4px}
.cmp .cmp-sub{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:22px}
.cmp dl > div{padding:14px 0;border-top:1px solid var(--line)}
.cmp dl > div:first-child{border-top:0;padding-top:0}
.cmp dt{
  font-weight:800;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.cmp dd{font-size:1.04rem;color:var(--ink);font-weight:600}
.cmp.is-featured dd{color:var(--rose-ink);font-weight:800}
.compare-note{
  max-width:620px;margin:30px auto 0;text-align:center;
  font-size:1rem;color:var(--muted);
}

/* --------------------------------------------------------------------------
   11. Acordeão (FAQ)
   -------------------------------------------------------------------------- */
.acc{max-width:780px;margin:0 auto;display:grid;gap:12px}
.acc-item{
  background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.acc-item[open]{border-color:var(--rose);box-shadow:var(--shadow-soft)}
.acc-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;
  font-weight:800;font-size:1.02rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.acc-item summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){
  .acc-item summary:hover{color:var(--rose-ink)}
}
.acc-item .plus{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--petal);
  display:flex;align-items:center;justify-content:center;color:var(--rose-ink);
  font-size:1.15rem;line-height:1;
  transition:transform .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out);
}
.acc-item[open] .plus{transform:rotate(45deg);background:var(--rose-deep);color:#fff}
.acc-body{padding:0 22px 22px;color:var(--muted);font-size:.99rem}
.acc-body > * + *{margin-top:10px}

/* Abertura animada do corpo. ::details-content e interpolate-size são
   recentes, então ficam atrás de @supports: onde não existem, o acordeão
   abre seco, sem regressão. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
}
@supports selector(::details-content){
  .acc-item::details-content{
    height:0;overflow:hidden;opacity:0;
    transition:height .24s var(--ease-out),opacity .18s var(--ease-out),
               content-visibility .24s allow-discrete;
    transition-behavior:allow-discrete;
  }
  .acc-item[open]::details-content{height:auto;opacity:1}
}

/* --------------------------------------------------------------------------
   12. CTA final
   -------------------------------------------------------------------------- */
/* Degradê do rosa ao azul: a mesma dúvida do H1, agora no fundo. */
.final-cta{background:linear-gradient(160deg,#FBDDE4 0%,#FFF4EF 52%,#DCEAF6 100%)}
.final-cta .inner{max-width:700px;margin:0 auto;text-align:center}
.final-cta .eyebrow{justify-content:center}
.final-cta h2{font-size:clamp(1.9rem,4.4vw,2.8rem);color:var(--ink);margin-bottom:14px}
/* Classe própria em vez de ".inner > p": esse seletor pegava também a
   chamada manuscrita, a nota final e a assinatura. */
.final-cta .cta-text{color:var(--ink);font-size:1.08rem;margin-bottom:30px}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:600px;margin:0 auto 32px}
/* flex em coluna centralizado: com o timer, o cartão do preço fica bem mais
   alto que o do prazo, e a grade estica os dois. Assim o conteúdo do cartão
   mais baixo fica no meio, e não grudado no topo com um vão embaixo. */
.fact{
  display:flex;flex-direction:column;justify-content:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;text-align:center;box-shadow:var(--shadow-soft);
}
.fact dt{
  font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose-ink);margin-bottom:6px;
}
.fact dd{font-family:var(--ff-display);font-weight:600;font-size:1.55rem;line-height:1.25;color:var(--ink)}
.fact dd small{display:block;font-family:var(--ff-body);font-weight:600;font-size:.8rem;color:var(--muted);margin-top:6px}

/* Preço promocional: "de R$ 300,00" riscado e pequeno, "por" em texto
   corrido, e o preço atual no tamanho de destaque. As palavras "de" e "por"
   ficam no texto, e não só no visual, porque leitor de tela não anuncia o
   risco do <s>: sem elas, "R$ 300,00 R$ 236,00" não faria sentido. */
.fact .preco-de{
  display:block;margin-bottom:2px;
  font-family:var(--ff-body);font-weight:600;font-size:.9rem;line-height:1.3;color:var(--muted);
}
.fact .preco-de s{text-decoration-thickness:.12em;text-decoration-color:var(--rose-ink)}
.fact .por{font-family:var(--ff-body);font-weight:700;font-size:.62em;color:var(--muted);vertical-align:.12em;margin-right:2px}

/* Timer da oferta (lógica em main.js). */
.timer{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.timer[hidden]{display:none}
.timer-rotulo{
  display:block;margin-bottom:8px;
  font-family:var(--ff-body);font-weight:800;font-size:.68rem;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink);
}
.timer-relogio{display:flex;align-items:flex-start;justify-content:center;gap:5px}
/* Largura fixa por unidade: os algarismos da Mali não têm largura igual, e
   sem isso o timer inteiro "treme" a cada segundo. */
.timer-unidade{
  display:flex;flex-direction:column;align-items:center;
  width:3.4rem;padding:7px 2px 6px;border-radius:12px;background:var(--blush);
}
.timer-unidade b{
  font-family:var(--ff-display);font-weight:600;font-size:1.45rem;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.timer-unidade i{
  font-style:normal;font-family:var(--ff-body);font-weight:700;font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px;
}
/* O ":" vem da Karla (face "Mali Pontuacao"): o da Mali é vazado. */
.timer-sep{font-family:var(--ff-display);font-weight:600;font-size:1.3rem;line-height:1.75;color:var(--rose-ink)}
.final-note{margin-top:20px;font-size:.92rem;color:var(--ink)}
.signature{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-family:var(--ff-hand);font-weight:400;font-size:2rem;line-height:1.1;color:var(--rose-ink);
}
.signature .heart{font-size:.7em}

/* --------------------------------------------------------------------------
   13. Rodapé
   -------------------------------------------------------------------------- */
.site-footer{background:#F9E4E9;color:var(--muted);padding-block:54px 32px;font-size:.93rem}
.foot-top{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:34px;align-items:start}
.foot-brand img{height:36px;width:auto;margin-bottom:14px}
.foot-brand p{max-width:300px}
.site-footer h3{
  font-family:var(--ff-body);font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose-ink);margin-bottom:12px;
}
.site-footer address{font-style:normal;line-height:1.65}
.site-footer address + address{margin-top:14px}
.site-footer address strong{display:block;color:var(--ink);margin-bottom:2px}
/* Etiqueta "Nova unidade". Rosa escuro sobre branco: 6,2:1. */
.foot-tag{
  display:inline-block;margin-bottom:5px;padding:2px 10px;border-radius:999px;background:var(--white);
  font-weight:800;font-size:.64rem;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-ink);
}
.foot-contact a{display:inline-flex;align-items:center;gap:8px;transition:color .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .foot-contact a:hover{color:var(--rose-ink);text-decoration:underline}
  .foot-bottom a:hover{color:var(--rose-ink);text-decoration:underline}
}
.foot-contact li + li{margin-top:9px}
.foot-contact svg{width:17px;height:17px;flex:none;color:var(--rose-ink)}
.foot-bottom{
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(163,61,96,.16);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.84rem;
}

/* --------------------------------------------------------------------------
   14. WhatsApp flutuante — só no mobile

   No desktop o CTA do cabeçalho já é sticky e acompanha o scroll. No
   mobile o cabeçalho fica só com a logo e a bolinha assume o papel.
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:70;
  width:60px;height:60px;border-radius:50%;background:var(--rose-deep);
  display:none;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(184,75,110,.7);
  transition:transform .14s var(--ease-out),box-shadow .2s var(--ease-out);
}
.wa-float:active{transform:scale(.94)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* --------------------------------------------------------------------------
   15. Reveal no scroll — só esconde quando o JS está ativo
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
/* Escalonamento dos passos. Não vale para o comparativo: ali a pessoa está
   lendo para decidir, e atrasar a segunda coluna atrasaria a comparação. */
.js .steps .step:nth-child(2){transition-delay:.07s}
.js .steps .step:nth-child(3){transition-delay:.14s}

/* --------------------------------------------------------------------------
   16. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .presente-grid{grid-template-columns:1fr;gap:40px}
  .presente-texto{text-align:center}
  .presente-texto .eyebrow{justify-content:center}
  .presente-itens,.revelacao{max-width:460px;margin-inline:auto}
  .presente-texto .btn-row{justify-content:center}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy{text-align:center}
  .hero .lead{margin-inline:auto}
  .hero .btn-row,.trust{justify-content:center}
  .steps{grid-template-columns:1fr;gap:16px}
  .compare{grid-template-columns:1fr;gap:32px}
  .foot-top{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  :root{--gutter:18px}
  body{font-size:16px}
  .section{padding-block:60px}
  .navbar{min-height:64px}
  .brand img{height:28px}
  /* No mobile o CTA sai do cabeçalho e a bolinha entra no lugar. O hero,
     logo abaixo, já traz o botão principal acima da dobra. */
  .header-cta{display:none}
  .wa-float{display:flex;width:56px;height:56px;bottom:16px;right:16px}
  .wa-float svg{width:28px;height:28px}

  .hero{padding-block:34px 56px}
  .hero::before,.hero::after{width:380px;height:380px}
  .btn-lg{min-height:56px;padding:15px 26px;font-size:1rem;width:100%}
  .trust{gap:8px}
  .trust li{font-size:.8rem;padding:7px 14px 7px 10px}
  .hero-photo{width:min(100%,300px)}
  .presente-foto{width:min(100%,320px)}
  .presente-selo{right:-4px;top:14px;font-size:1.35rem}
  .presente-nota{font-size:1.45rem}
  .revelacao-opcoes{grid-template-columns:1fr}
  .hello{left:-6px;bottom:28px;font-size:1.45rem}

  .heartbeat{padding-block:0 30px}
  .heartbeat-caption{font-size:1.4rem}

  .sec-head{margin-bottom:34px}
  .eyebrow{font-size:1.45rem}
  .step{padding:28px 22px 24px}
  .cmp{padding:34px 22px 26px}
  .acc-item summary{padding:16px 18px;font-size:.98rem}
  .acc-body{padding:0 18px 18px}
  .facts{grid-template-columns:1fr;max-width:340px}
  .signature{font-size:1.8rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* Quem zera durações precisa garantir o estado final de tudo que começa
     escondido, senão "sem movimento" vira "sem conteúdo". */
  .js .reveal{opacity:1;transform:none}
  .js .hero .trust li{opacity:1;transform:none;animation:none}
  .js .ecg .trace-draw{stroke-dashoffset:0}
  .acc-item::details-content{opacity:1}
}

@media print{
  .site-header,.wa-float,.heartbeat{display:none}
  body{background:#fff;color:#000}
}