/* ==========================================================================
   LÍRIA · MOVIMENTO (protótipo 10/09) — por cima da fusão aprovada
   1. herói em tela cheia, menu flutuando sobre o céu (a travessia com zoom saiu em 11/09)
   2. ato 01 guiado pela rolagem: a carteirinha assenta em 3D, as abas andam
   3. títulos revelados linha a linha, por máscara
   Movimento reduzido ou "Pausar movimento": tudo volta ao layout aprovado.
   ========================================================================== */

/* o menu flutua sobre o céu: o herói ocupa a tela desde o topo */
header.nav{position:absolute;top:0;left:0;right:0;z-index:30}

/* ---------- 1 · herói em tela cheia (sem travessia: "não quero zoom", 11/09) ---------- */
.hero-scene{min-height:calc(97svh - 20px);padding-top:calc(var(--nav-h,96px) + clamp(30px,5vh,70px))}

/* o título sobe de trás de uma máscara, linha por linha */
.scene-intro h1 .mascara{display:block;overflow:hidden;font-size:1em;font-weight:inherit;letter-spacing:inherit;
  line-height:inherit;color:inherit;margin:0;padding-bottom:.07em;margin-bottom:-.07em}
.scene-intro h1 .l1{display:block;font-size:1em;font-weight:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0}
@keyframes mv-sobe{from{transform:translateY(112%)}to{transform:none}}
@keyframes mv-surge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.scene-intro h1 .l1,.scene-intro h1 .l2{animation:mv-sobe 1.15s cubic-bezier(.2,.7,.1,1) both}
.scene-intro h1 .l1{animation-delay:.1s}
.scene-intro h1 .l2{animation-delay:.32s}
/* backwards: depois de entrar, quem manda na opacidade é a rolagem */
.scene-legenda{animation:mv-surge .9s cubic-bezier(.2,.7,.1,1) .75s backwards}
.scene-foot{animation:mv-surge .9s cubic-bezier(.2,.7,.1,1) .95s backwards}

@media(max-width:800px){.hero-scene{min-height:calc(96svh - 10px);padding-top:calc(var(--nav-h,90px) + 24px)}}

/* ---------- 2 · ato 01 guiado pela rolagem ---------- */
.care-section{overflow:clip}            /* hidden impediria o sticky */
.care-display{transform-origin:50% 100%;will-change:transform}
.care-nav [role="tab"]{position:relative}
.aba-progresso{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#f489af;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media(min-width:901px){
  .mv-pino .pino{height:calc(100svh + 170vh)}
  .mv-pino .pino>.care-stage{position:sticky;top:max(24px,calc(50svh - 290px))}
}

/* ---------- 3 · títulos linha a linha ---------- */
html :is(h2,p) span.mascara{display:block;overflow:hidden;color:inherit;padding-bottom:.08em;margin-bottom:-.08em}
html :is(h2,p) span.linha{display:block;color:inherit}
.mv-revela .linha{transform:translateY(112%)}
.mv-revela.visto .linha{transform:none;transition:transform 1.05s cubic-bezier(.2,.7,.1,1)}
.mv-revela.visto .mascara:nth-child(2) .linha{transition-delay:.13s}
.mv-revela.visto .mascara:nth-child(3) .linha{transition-delay:.26s}

/* ---------- sem movimento: o layout aprovado, parado ---------- */
@media (prefers-reduced-motion:reduce){
  .scene-intro h1 .l1,.scene-intro h1 .l2,.scene-legenda,.scene-foot{animation:none}
}
body.motion-paused .mv-revela .linha{transform:none;transition:none}

/* o menu mobile abre por cima do ceu, logo abaixo do menu flutuante */
.mobile-menu{position:absolute;top:var(--nav-h,90px);left:0;right:0;z-index:29;background:var(--paper)}

/* ---------- laboratório de herói (11/09): ?hero=fusao|letras|linha ----------
   Regra: mesma copy, mesmo nav, mesmas posições de texto nos três — só a atmosfera muda.
   O hero não explica; a seção da tese paga (o diagrama das consultas mora lá, não aqui). */

/* base dos modos com céu (fusao e letras): o ceu2 aprovado, coberto e centrado, lavado */
.hero-atmosphere{background:#efe9f3}
.hero-atmosphere img{opacity:.8;animation:none;object-position:50% 50%;transform:none;filter:saturate(.82)}
.ceu-vivo{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease;filter:saturate(.82)}
.ceu-vivo.pronto{opacity:.8}
.hero-atmosphere:after{z-index:1;background:linear-gradient(180deg,rgba(247,244,251,.80) 0%,rgba(247,244,251,.44) 14%,
  rgba(247,244,251,.12) 32%,rgba(247,244,251,.12) 64%,rgba(247,244,251,.5) 86%,rgba(247,244,251,.9) 100%)}
body.motion-paused .ceu-vivo{opacity:0}

/* a luz da Líria: elemento da marca por cima da foto, não pixel dela —
   o MESMO primitive reaparece depois (carteirinha, QR, fechamento); só respira, nunca anda */
.luz-liria{position:absolute;z-index:2;left:63%;top:64%;width:300px;height:200px;margin:-100px 0 0 -150px;
  pointer-events:none;border-radius:50%;filter:blur(2px);
  /* a luz por cima; embaixo, um bolso de névoa mais funda para ela ter contra o que brilhar */
  background:radial-gradient(closest-side,rgba(255,193,138,.75),rgba(255,183,143,.3) 50%,rgba(255,183,143,0) 72%) center/62% 62% no-repeat,
    radial-gradient(closest-side,rgba(96,86,120,.22),rgba(96,86,120,0) 78%);
  animation:luz-respira 9s ease-in-out infinite alternate}
.luz-liria:after{content:'';position:absolute;left:50%;top:50%;width:26px;height:18px;margin:-9px 0 0 -13px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,184,.8),rgba(255,226,184,0) 75%)}
@keyframes luz-respira{from{opacity:.68}to{opacity:1}}
body.motion-paused .luz-liria{animation:none;opacity:1}

/* a linha: no herói é quase subliminar (identificável só depois); a geometria não respira */
.linha-fio{position:absolute;z-index:2;left:0;right:0;top:64%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(84,69,99,0),rgba(84,69,99,.13) 22%,rgba(219,152,118,.28) 63%,rgba(84,69,99,.13) 78%,rgba(84,69,99,0))}

/* -------- ?hero=letras: ainda mais silencioso; a luz mora na tinta do "continua" -------- */
html[data-hero=letras] .hero-atmosphere img{opacity:.5}
html[data-hero=letras] .ceu-vivo.pronto{opacity:.5}
html[data-hero=letras] .luz-liria,html[data-hero=letras] .linha-fio{display:none}
html[data-hero=letras] .scene-intro h1 .l2{
  background:radial-gradient(46% 150% at 50% 50%,rgba(255,205,173,.9),rgba(255,205,173,0) 100%) no-repeat,
    linear-gradient(#a73d70,#a73d70);
  background-size:36% 100%,100% 100%;background-position:-40% 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:mv-sobe 1.15s cubic-bezier(.2,.7,.1,1) .32s both,luz-tinta 15s ease-in-out 1.6s infinite alternate}
@keyframes luz-tinta{from{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}}
html[data-hero=letras] body.motion-paused .scene-intro h1 .l2{animation-play-state:paused,paused}

/* -------- ?hero=linha: papel lilás, uma linha finíssima, nada mais -------- */
html[data-hero=linha] .hero-atmosphere{background:linear-gradient(180deg,#f4f0f7 0%,#f5efec 62%,#f1eae6 100%)}
html[data-hero=linha] .hero-atmosphere img,html[data-hero=linha] .ceu-vivo,
html[data-hero=linha] .hero-atmosphere:after,html[data-hero=linha] .luz-liria{display:none}
html[data-hero=linha] .linha-fio{top:62%;background:rgba(84,69,99,.24)}

@media(max-width:800px){
  .luz-liria{left:60%;top:60%;width:150px;height:104px;margin:-52px 0 0 -75px}
  .linha-fio{top:60%}
  html[data-hero=linha] .linha-fio{top:60%}
}

/* -------- ?hero=tipo (11/09, mudança de direção): a copy É o objeto monumental ----------
   Referência eric-cole.framer.website adaptada ao calor da Líria: tipografia gigante à
   esquerda, papel limpo, etiqueta editorial entre colchetes — nenhuma imagem, nenhum símbolo.
   A segunda linha entra deslocada: o tempo andou entre "acaba" e "continua". */
html:is([data-hero=tipo],[data-hero=tva],[data-hero=tvb]) .hero-atmosphere{background:#f4f0f7}
html:is([data-hero=tipo],[data-hero=tva],[data-hero=tvb]) .hero-atmosphere :is(img,.ceu-vivo,.luz-liria,.linha-fio){display:none}
html:is([data-hero=tipo],[data-hero=tva],[data-hero=tvb]) .hero-atmosphere:after{display:none}
html[data-hero=tipo] .scene-intro{text-align:left;padding-top:clamp(30px,9vh,110px)}
html[data-hero=tipo] .scene-intro h1{font-size:clamp(56px,9vw,142px);line-height:1;letter-spacing:-.045em;font-weight:800}
html[data-hero=tipo] .scene-intro h1 .mascara+.mascara{margin-left:clamp(40px,11vw,170px)}
html[data-hero=tipo] .scene-intro h1 .l2{font-size:1em;font-weight:800;margin-top:0;color:#e0447f}
html[data-hero=tipo] .scene-intro .scene-legenda{text-align:left;letter-spacing:.16em;margin-top:clamp(20px,3.4vh,40px)}
html[data-hero=tipo] .scene-legenda:before{content:'[ '}
html[data-hero=tipo] .scene-legenda:after{content:' ]'}
@media(max-width:800px){
  html[data-hero=tipo] .scene-intro h1{font-size:clamp(38px,11.5vw,52px)}
  html[data-hero=tipo] .scene-intro h1 .mascara+.mascara{margin-left:24px}
}
/* -------- ?hero=tva / ?hero=tvb: a campanha da SINTONIA (11/09) ----------
   Papel quase vazio, headline gigante e UMA televisão que sintoniza (chuvisco → imagem).
   tva: a TV é peça editorial à direita, invadindo a tipografia.
   tvb: a TV interrompe a frase — NA MESMA [tv] SINTONIA.
   O conteúdo da tela é o timelapse como STAND-IN do filme de campanha. */
html:is([data-hero=tva],[data-hero=tvb]) .scene-intro{text-align:left;padding-top:clamp(24px,7vh,90px)}
html:is([data-hero=tva],[data-hero=tvb]) .scene-intro h1{text-transform:uppercase;font-weight:800;line-height:.99;
  letter-spacing:-.035em;position:relative;z-index:2}
html:is([data-hero=tva],[data-hero=tvb]) .scene-intro h1 .l2{font-size:1em;font-weight:800;margin-top:0;color:var(--ink)}
html:is([data-hero=tva],[data-hero=tvb]) .scene-intro .scene-legenda{text-align:left;max-width:none;
  margin:clamp(22px,3.6vh,44px) auto 0 0;letter-spacing:.15em}
/* a televisão real (foto com alpha); o vídeo mora no retângulo do vidro, medido no asset */
.tv{display:block;position:relative;z-index:3;width:clamp(330px,33vw,473px);
  filter:drop-shadow(0 30px 30px rgba(15,16,53,.28));
  animation:mv-surge .9s cubic-bezier(.2,.7,.1,1) .6s backwards}
/* dentro do h1 (modo B), as regras legadas de "h1 span" tentam virar display/margem — reset */
.scene-intro h1 .tv{display:block}
.scene-intro h1 .tv :is(.tv-tela,.tv-brilho){margin:0}
.tv-foto{display:block;width:100%;height:auto}
.tv-tela{position:absolute;display:block;left:12.3%;top:21.9%;width:58.2%;height:57.5%;
  overflow:hidden;border-radius:7%/9%;background:#3a433e}
/* o cartão de ajuste: barras na paleta da Líria, no ar enquanto não há canais */
.tv-ajuste[hidden]{display:none}
.tv-ajuste{position:absolute;display:block;inset:0;
  background:linear-gradient(180deg,transparent 0 76%,#171420 76% 100%),
    linear-gradient(90deg,#c9c2dd 0 14.3%,#f2a9c6 14.3% 28.6%,#f7f4fb 28.6% 42.9%,#0f1035 42.9% 57.2%,#e0447f 57.2% 71.5%,#a99fc4 71.5% 85.8%,#5b5a78 85.8% 100%)}
.tv-canal,.tv-filme{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:saturate(.9) contrast(.97)}
.tv-canal.no-ar,.tv-filme.no-ar{opacity:1}
.tv-chuvisco{position:absolute;inset:0;width:100%;height:100%}
/* o botão físico da TV (área clicável sobre os botões de canal da foto) e a dica de repetir */
/* o par de botões redondos da foto: centros ~(1139,682) e ~(1280,682) em 1448×1086 */
.tv .tv-liga{position:absolute;left:74.5%;top:57%;width:18%;height:12.5%;margin:0;padding:0;
  border:0;background:none;border-radius:999px;cursor:pointer;display:block}
.tv .tv-liga:disabled{cursor:default;pointer-events:none}
.tv .tv-liga:focus-visible{outline:2px solid var(--action);outline-offset:3px}
/* os botões de canal (coluna numerada da foto), um por cena */
.tv .tv-canal-btn{position:absolute;left:79%;width:10.6%;height:4.3%;margin:0;padding:0;border:0;
  background:none;border-radius:6px;cursor:pointer;display:block;transition:background .15s}
.tv .tv-canal-btn:hover{background:rgba(255,255,255,.16)}
.tv .tv-canal-btn:focus-visible{outline:2px solid var(--action);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tv .tv-canal-btn{display:none}}
.tv .tv-repetir{position:absolute;display:block;left:0;right:0;top:calc(100% + 12px);margin:0;
  text-align:center;font-size:9px;font-weight:600;letter-spacing:.14em;color:#544563;
  opacity:0;transition:opacity .45s .2s;pointer-events:none}
.tv .tv-repetir.viva{opacity:1}
@media (prefers-reduced-motion:reduce){.tv .tv-liga,.tv .tv-repetir{display:none}}

/* o OSD: número do canal em fósforo verde, desenhado pela TV (abaixo das scanlines) */
.tv-tela{container-type:size}
.tv-osd{position:absolute;display:block;top:8cqh;right:7cqw;z-index:2;pointer-events:none;
  font-family:'Courier New',Consolas,monospace;font-weight:700;font-size:13cqh;line-height:1;
  letter-spacing:.06em;color:#8df79d;
  text-shadow:0 0 1.6cqh rgba(120,255,150,.9),0 0 5cqh rgba(80,255,120,.45),
    .05em 0 0 rgba(255,90,80,.28),-.05em 0 0 rgba(90,90,255,.25);
  opacity:0;transition:opacity .12s}
.tv-osd.viva{opacity:.92}
.tv-brilho{position:absolute;display:block;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 34px rgba(6,10,9,.5);
  background:radial-gradient(120% 90% at 28% 16%,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),
    repeating-linear-gradient(180deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}

/* Véu de sintonia do herói ao bento; o grão animado fica leve e localizado. */
.veu-linhas,.veu-sintonia{position:absolute;left:0;top:0;width:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%)}
.veu-linhas{z-index:10;background:repeating-linear-gradient(90deg,rgba(15,16,53,.03) 0 1px,transparent 1px 3px)}
.veu-sintonia{z-index:11;opacity:.045;mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){.veu-sintonia{display:none}}
/* as provas de mídia do bento ficam ACIMA do véu: a transmissão é da TV, a prova é nítida */
.bento-compara,.bento-video{position:relative;z-index:12}

/* ---------- ato 01: a fileira de celulares (12/09, ref. inspora) ----------
   aparelhos reais em pé, lado a lado; cada um roda UMA tela do app real replicado
   em HTML (ato1-app.html). O ativo fica no centro em tamanho cheio, os vizinhos
   aparecem cortados pelas bordas; as abas da seção deslizam a fileira. */
.care-display.palco-vivo{background:none;padding:0;border-radius:0;box-shadow:none;
  height:clamp(460px,58vh,580px)}
.care-display.palco-vivo :is(.demo-top,#care-panel,.demo-caption){display:none}
/* vitrine full-bleed (opção A, estrutura p/ aprovação): heading centrado, abas fora,
   fileira rompe a shell e é cortada pelas bordas da TELA.
   Palco = o CÉU da marca (ceu.jpg): a faixa de ar entre o bento e o produto é a própria seção. */
.care-section{position:relative;overflow:hidden}
/* o céu vivo da marca: foto + canvas (ceu-lab) + véu LAVADO por cima — o ar tranquilo de antes */
.care-ceu{position:absolute;inset:0}
.care-ceu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.care-ceu canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.care-ceu canvas.pronto{opacity:1}
/* SEM fade nas bordas (pedido 12/09): a banda termina limpa; fica só a lavagem uniforme */
.care-section::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(251,247,255,.44),rgba(251,247,255,.44))}
.care-section .shell,.care-section .pino{position:relative;z-index:2}
/* a vitrine cabe em UMA tela: seção = 100svh, headline compacta + fileira dimensionada pelo resto */
/* painel menor que a tela (ref. wishlabs/codeway): o papel do bento fecha acima,
   a tira de céu entra contida, e a próxima seção já aponta embaixo */
.care-section.section-pad{height:min(76svh,700px);min-height:520px;max-height:none;
  padding-block:clamp(18px,2.6vh,28px) clamp(8px,1.4vh,16px);
  display:flex;flex-direction:column;justify-content:center;
  margin-block:clamp(20px,3.5vh,44px)}
.care-section > .shell{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.care-section .section-heading{margin-bottom:clamp(12px,2vh,20px)}
/* tipo GRANDE e firme sobre o céu (ref. Retake): navy sólido, acento em rosa-escuro */
.care-section .section-heading .eyebrow{color:#b02360}
.care-section .section-heading h2{font:800 clamp(42px,7vh,68px)/1.02 'Figtree',sans-serif;
  letter-spacing:-.022em;color:#0f1035}
.care-section .section-heading h2 span{color:#b02360}
.care-section .section-heading p{margin-top:12px;font-size:15px;color:#3d3c5e}
/* a linha de apoio fecha o bloco da vitrine, junto dos pontinhos */
.vitrine .care-nuvem{margin:18px 0 0;font:600 16.5px/1.45 'Figtree',sans-serif;color:#3d3c5e}
.care-section .pino,.care-section .care-stage,.care-section .care-display.palco-vivo{width:100%}
.care-section .pino{flex:1;min-height:0;display:flex;flex-direction:column}
.care-section .care-stage{flex:1;min-height:0;display:flex;flex-direction:column}
.care-section .care-display.palco-vivo{flex:1;transform:none!important}
/* a pista de rolagem das abas antigas (mv-pino) não vale na vitrine de UMA tela */
html.mv-pino .care-section .pino{height:auto}
html.mv-pino .care-section .pino > .care-stage{position:static;top:auto}
/* headline no canto ESQUERDO: coluna editorial alinhada com o rotator abaixo */
.care-section .section-heading{display:block;text-align:left;max-width:none;margin:0 0 clamp(26px,4vh,44px)}
.care-section .section-heading p{margin:14px auto 0}
.care-nav{display:none}
.care-stage{display:block}
.care-foot{display:none}
.care-display.palco-vivo{width:auto;margin-left:0;height:auto;min-height:220px}
.fila-track{gap:clamp(26px,4vw,48px);padding-bottom:30px}
.fila-legenda{position:absolute;left:0;right:0;bottom:8px;text-align:center;z-index:3;
  font:700 11px 'Space Grotesk',sans-serif;letter-spacing:.22em;color:#8a7f9c}
@media(max-width:800px){.care-display.palco-vivo{width:auto;margin-left:0}}

/* palco-vitrine: o aparelho + o trilho "explore as funcionalidades" à direita */
.palco-cel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,4vw,64px);perspective:1200px}
/* o aparelho respira em 3D (sutil) e inclina seguindo o mouse */
.cel{transform-style:preserve-3d;transition:transform .35s ease;
  transform:rotateY(calc(var(--mx,0)*7deg)) rotateX(calc(var(--my,0)*-5deg))}
.cel-3d{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;
  animation:cel-flutua 10s ease-in-out infinite}
@keyframes cel-flutua{
  0%,100%{transform:rotateY(-4deg) rotateX(1.5deg) translateY(0)}
  50%{transform:rotateY(4deg) rotateX(-1.5deg) translateY(-9px)}
}
@media (prefers-reduced-motion:reduce){
  .cel{transform:none;transition:none}
  .cel-3d{animation:none}
}
body.motion-paused .cel-3d{animation-play-state:paused}
.vitrine{display:flex;flex-direction:column;gap:6px;width:min(560px,44vw)}
/* a headline dentro da coluna: menor que o monumento do centro, mas colada no bloco */
.vitrine .section-heading{margin:0 0 clamp(16px,2.6vh,26px)}
.vitrine .section-heading h2{font-size:clamp(42px,5.6vh,58px)}
.vitrine-titulo{font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.24em;
  text-transform:uppercase;color:#4c4565;margin-bottom:10px}
/* sem caixinha: o tipo fala direto com o céu, no peso da página (ref. Voodoo) */
.vitrine-cartao{min-height:198px;color:#0f1035;font-family:'Figtree',sans-serif}
.vitrine-cartao b{display:block;font-size:clamp(30px,3vw,43px);font-weight:800;
  line-height:1.02;letter-spacing:-.022em;margin-bottom:14px;
  transition:opacity .26s,transform .26s}
.vitrine-cartao small{display:block;font-size:17.5px;font-weight:600;line-height:1.55;
  color:#333252;max-width:42ch;transition:opacity .26s,transform .26s}
.vitrine-cartao.trocando b,.vitrine-cartao.trocando small{opacity:0;transform:translateY(6px)}
/* o glint da LíRIA Intelligence: um facho PRATA atravessa o nome UMA vez e assenta */
.vitrine-cartao b.brilha{
  background:linear-gradient(108deg,#0f1035 40%,#8b93b8 47%,#e8edf7 50%,#8b93b8 53%,#0f1035 60%);
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brilho-passa 2.2s ease .35s 1 both}
/* -30% e 100% caem AMBOS em zona 100% navy do gradiente: começa e termina sólido,
   mesmo se o JS de limpeza não rodar. Invertido: o facho corre da ESQUERDA p/ direita */
@keyframes brilho-passa{from{background-position:100% 0}to{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){
  .vitrine-cartao b.brilha{animation:none;background:none;color:#0f1035}
}
body.motion-paused .vitrine-cartao b.brilha{animation-play-state:paused}
.vitrine-pontos{display:flex;gap:8px;justify-content:flex-start;margin-top:18px}
.vitrine-pontos button{width:8px;height:8px;border-radius:4px;border:0;cursor:pointer;
  padding:0;background:rgba(15,16,53,.24);transition:width .3s,background .3s}
.vitrine-pontos button.ativa{width:24px;background:#0f1035}
@media (prefers-reduced-motion:reduce){
  .vitrine-cartao b,.vitrine-cartao small{transition:none}
}
@media(max-width:800px){
  .palco-cel{flex-direction:column-reverse;gap:14px}   /* headline+rotator ACIMA do aparelho */
  .vitrine{width:auto;max-width:94vw}
  .vitrine-item small{display:none}
}
/* a seção seguinte volta ao fundo CLARO (o rosinha ficava pesado depois do céu) */
html[data-hero=tva] .liria-section,html[data-hero=tvb] .liria-section{background:#fbf7ff}
/* e o título dela segue a régua do hero das nuvens: 800, tracking justo, rosa-ESCURO
   (o :not poupa os spans .mascara/.linha do revelador — só o span do autor é o acento) */
html:is([data-hero=tva],[data-hero=tvb]) .liria-section .eyebrow{color:#b02360}
html:is([data-hero=tva],[data-hero=tvb]) .liria-section h2{
  font-weight:800;letter-spacing:-.022em;color:#0f1035}
html:is([data-hero=tva],[data-hero=tvb]) .liria-section h2 span:not(.mascara):not(.linha){color:var(--rosa-copy,#c42e68)}
/* ---------- ato 03: como funciona na prática (12/09) ----------
   os passos absorvem a copy de confiança; a grade de controle antiga sai de cena */
.passos-fluxo{list-style:none;margin:26px 0 22px;padding:0;display:grid;gap:18px}
.passos-fluxo li{display:flex;gap:14px;align-items:flex-start}
.passo-n{flex:none;font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.08em;
  color:#f489af;padding-top:3px}
.passos-fluxo h4{margin:0;font:600 16px/1.3 'Figtree',sans-serif;color:#fff}
.passos-fluxo p{margin:3px 0 0;font:400 14px/1.55 'DM Sans',sans-serif;color:#b9c0e8}
.link-painel{color:#f489af;text-decoration:none;white-space:nowrap}
.link-painel:hover{text-decoration:underline}
.nota-diagnostico{margin-top:14px;font:400 12px/1.5 'DM Sans',sans-serif;color:#8b93c9}
html:is([data-hero=tva],[data-hero=tvb]) .controle{display:none}
/* o título do 03 na mesma régua do 02: 800, tracking justo; sobre navy o acento é o rosa
   cheio da marca (o rosa-escuro afundaria no fundo) */
html:is([data-hero=tva],[data-hero=tvb]) .professional-section h2{
  font-weight:800;letter-spacing:-.022em}
html:is([data-hero=tva],[data-hero=tvb]) .professional-section h2 span:not(.mascara):not(.linha){color:var(--rosa-copy-escuro,#f489af)}

/* ---------- ato 04: para você, profissional (12/09) ---------- */
.pro-section{background:#f4f0f7}
.pro-section .section-heading{display:block;text-align:center;max-width:680px;margin:0 auto 30px}
.pro-section h2{font-weight:800;letter-spacing:-.022em;color:#0f1035}
.pro-section h2 span{color:#b02360}
.pro-section .section-heading p{margin:16px auto 0;max-width:52ch;
  font:400 17px/1.6 'DM Sans',sans-serif;color:#4c4b6e}
.pro-acoes{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.pro-nota{font:400 13px 'DM Sans',sans-serif;color:#6a6989}
/* o palco do vídeo do painel: moldura de navegador, 16:9; placeholder até o arquivo existir */
.pro-video{max-width:1000px;margin:46px auto 0;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 70px rgba(15,16,53,.16);background:#fff}
.pro-video-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#f4f1f8;
  border-bottom:1px solid #e7e3f3}
.pro-video-bar span{display:flex;gap:5px}
.pro-video-bar i{width:9px;height:9px;border-radius:5px;background:#ddd6e8}
.pro-video-bar b{flex:1;text-align:center;font:700 10.5px 'Space Grotesk',sans-serif;
  letter-spacing:.18em;color:#6a6989}
.pro-video-bar svg{width:14px;height:14px;color:#9a99b4}
.pro-video-tela{position:relative;aspect-ratio:16/9;background:
  radial-gradient(120% 130% at 50% 0%,#1d1e52 0%,#0f1035 70%)}
.pro-video-tela video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:none}
.pro-video.tem-video video{display:block}
.pro-video.tem-video .pro-video-espera{display:none}
.pro-video-espera{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 13px 'Space Grotesk',sans-serif;letter-spacing:.06em;color:#8b93c9;text-align:center;padding:0 20px}

/* o parágrafo em DUAS linhas (uma frase por linha) onde a grade tem vão p/ isso;
   em janelas apertadas volta a quebrar normal, sem invadir o card */
.liria-copy .liria-duas-linhas{max-width:none}
@media(min-width:1100px){.liria-copy .liria-duas-linhas{width:max-content}}

.palco-fila{position:absolute;inset:0;overflow:hidden}
.fila-track{position:relative;display:flex;gap:26px;align-items:center;height:100%;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform}
.cel{flex:none;position:relative;height:92%;aspect-ratio:1086/1448;margin:0;cursor:pointer;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s}
.cel:not(.centro){transform:scale(.88);filter:brightness(.8) saturate(.9)}
.cel.centro{cursor:default}
.cel-corpo{display:block;width:100%;height:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.42))}
/* o vidro, medido no asset (aparelho 210–875 × 58–1377 em 1086×1448) */
.cel-tela{position:absolute;left:21.4%;top:5.5%;width:57.2%;height:88.1%;overflow:hidden;
  border-radius:11%/5.3%;background:#f4f0f7}
.cel-app{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#f4f0f7}
.cel:not(.centro) .cel-app{pointer-events:none}
.cel-camera{position:absolute;left:50%;top:6.8%;width:13.7%;height:1.85%;margin-left:-6.85%;
  border-radius:999px;background:#08080c;pointer-events:none;z-index:2}
@media(max-width:800px){
  .care-display.palco-vivo{margin-right:0}
  .fila-track{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .fila-track,.cel{transition:none!important}
}

/* a costura herói→bento: a metáfora FECHA aqui e sai de cena (não repetir TV dali em diante) */
.bento-kicker{display:block;text-align:center;font-size:10px;font-weight:700;letter-spacing:.22em;
  color:#8a7f9c;margin:0 auto clamp(14px,2vh,22px)}
/* o silêncio antes da demonstração: a tese termina, há ar, e só então começam os cards
   (o primeiro pode nascer abaixo da dobra) */
html[data-hero=tva] .bento-tese,html[data-hero=tvb] .bento-tese{
  margin-bottom:clamp(150px,17vh,210px)}
/* contaminação gradual: no fim do bento o papel aquece e uma névoa quase invisível
   anuncia o céu da seção seguinte */
.bento{position:relative}
.bento::after{content:'';position:absolute;left:0;right:0;bottom:0;z-index:11;
  height:clamp(220px,30vh,360px);pointer-events:none;
  background:linear-gradient(180deg,rgba(243,230,236,0) 0%,rgba(243,229,236,.3) 62%,rgba(240,229,236,.5) 100%)}
/* sem folga em NENHUMA costura: névoa→céu e céu→papel claro, nenhuma faixa órfã */
html[data-hero=tva] .care-section.section-pad,html[data-hero=tvb] .care-section.section-pad{
  margin-block:0}
html:not([data-hero=tva]):not([data-hero=tvb]) .bento-kicker{display:none}
@media(max-width:800px){.bento-kicker{font-size:9px;letter-spacing:.16em}}
/* A composição publicada não depende de uma animação de entrada para aparecer. */
html:not([data-hero=tva]) .scene-intro > .tv{display:none}
html[data-hero=tva] .scene-intro h1 .l1,
html[data-hero=tva] .scene-intro h1 .l2,
html[data-hero=tva] .scene-legenda,
html[data-hero=tva] .scene-foot,
html[data-hero=tva] .tv{animation:none}

/* composição A: título e TV em colunas próprias, sem encobrir a frase */
@media (min-width:801px){
  html[data-hero=tva] .scene-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36%);
    column-gap:clamp(20px,3vw,56px);align-items:center}
  html[data-hero=tva] .scene-intro h1{grid-column:1;grid-row:1;font-size:clamp(56px,8.6vw,132px);min-width:0}
  html[data-hero=tva] .scene-intro > .tv{position:relative;left:auto;top:auto;
    grid-column:2;grid-row:1 / span 2;width:100%;max-width:473px;justify-self:end}
  html[data-hero=tva] .scene-intro .scene-legenda{grid-column:1;grid-row:2;max-width:100%;margin-left:0}
}
@media (min-width:801px) and (max-width:1100px){
  html[data-hero=tva] .scene-intro h1{font-size:clamp(44px,5.8vw,62px)}
}
/* composição B: a TV é uma "palavra" da frase, deslocada como a segunda linha do tempo */
html[data-hero=tvb] .scene-intro h1{font-size:clamp(46px,7.4vw,112px)}
html[data-hero=tvb] .tv{width:clamp(270px,25vw,360px);margin:clamp(16px,2.4vh,28px) 0 clamp(16px,2.4vh,28px) clamp(50px,12vw,190px)}

@media(max-width:800px){
  html:is([data-hero=tva],[data-hero=tvb]) .scene-intro h1{font-size:clamp(36px,11vw,48px)}
  html[data-hero=tva] .tv{position:static;margin:22px 0 0;width:min(86vw,360px)}
  html[data-hero=tvb] .tv{width:min(76vw,320px);margin:14px 0 14px 22px}
}

@media (prefers-reduced-motion:reduce){
  .luz-liria{animation:none}
  .tv{animation:none}
  html[data-hero=letras] .scene-intro h1 .l2{background:none;-webkit-background-clip:border-box;background-clip:border-box;
    color:#a73d70;-webkit-text-fill-color:#a73d70;animation:none}
}

/* ---------- ajustes do Mestre dos Dados (11/09) ----------
   legenda mais perto do titulo e com menos espacamento: ela e a prova da promessa
   ("o cuidado continua" -> por quanto tempo? -> do teste positivo ao pos-parto) */
.scene-intro .scene-legenda{letter-spacing:.13em;margin-top:clamp(12px,1.6vh,18px)}
@media(max-width:800px){.scene-intro .scene-legenda{letter-spacing:.1em;margin-top:12px}}
/* o texto da direita do rodape parecia comando e nao era: agora e link de verdade.
   Seletor com dois niveis para nao herdar o circulo de ".scene-foot a" (a seta do meio) */
.scene-foot .scene-foot-link{flex:1;display:block;width:auto;height:auto;border:0;border-radius:0;
  text-align:right;background:none;transition:color .2s}
.scene-foot .scene-foot-link:hover{background:none;color:var(--ink)}
/* a seta é o MESMO svg do botão do meio, deitado para a direita (o glifo → de fonte
   cortava a 9px); o seletor de dois níveis vence o ".scene-foot a svg" que a giraria */
.scene-foot .scene-foot-link svg{transform:none;width:12px;height:12px;vertical-align:-2px;
  margin-left:6px;transition:transform .25s}
.scene-foot .scene-foot-link:hover svg{transform:translateX(3px)}
@media(max-width:800px){.scene-foot .scene-foot-link{display:none}}


/* Apresentação do mock: carcaça com profundidade; navegação independente. */
@media(min-width:801px){
  .care-section.section-pad{height:min(76svh,700px);min-height:520px}
  .care-section .section-heading{margin-bottom:clamp(16px,2vh,26px)}
  .care-section .palco-cel{gap:clamp(12px,2vw,32px);perspective:1600px}
  .care-section .palco-cel .cel{transform:none!important}
  .care-section .cel-3d{animation:none;transform:rotateY(-12deg) rotateX(3deg) rotateZ(-2deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .care-section .cel:hover .cel-3d,.care-section .cel:focus-within .cel-3d{transform:rotateY(0) rotateX(0) rotateZ(0)}
}
.care-section .cel-3d::before{content:'';position:absolute;left:20.2%;top:4.4%;width:59.6%;height:90.3%;border-radius:15%/7%;pointer-events:none;
  background:linear-gradient(100deg,#373943 0%,#a5a4ac 8%,#f1ebee 18%,#64616e 80%,#252432 100%);
  transform:translateZ(-9px) translateX(8px);box-shadow:1px 0 0 #dbd7df,3px 0 0 #777480,5px 0 0 #34323f,7px 0 0 #605b6d,16px 25px 35px #24203930,28px 48px 70px #24203922}
.care-section .cel-3d::after{content:'';position:absolute;left:80%;top:27%;width:4px;height:10%;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,#403d4d,#c5bfcd,#56505f);transform:translateZ(-3px);box-shadow:-1px 0 1px #24212d}
.care-section .cel-corpo{transform:translateZ(0);filter:drop-shadow(0 9px 8px #19152930)}
.care-section .cel-tela{transform:translateZ(1px)}
.care-section .cel-camera{transform:translateZ(2px)}
.care-section .cel-tela::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff32}
body.motion-paused .care-section .cel-3d{animation:none;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.care-section .cel-3d{animation:none;transform:none;transition:none}}

/* Celular à direita, texto à esquerda — ajuste solicitado.
   space-between: o rotator alinha no canto esquerdo com a headline, o aparelho no direito */
@media(min-width:801px){
  .care-section .palco-cel{flex-direction:row-reverse;justify-content:space-between}
  .care-section .cel{margin-right:clamp(24px,5vw,96px)}   /* o aparelho sai do canto, um passo p/ a esquerda */
}

/* ---------- ato 02: o chat REAL (réplica do sheet de produção, 12/09) ----------
   valores do app @8f915b7: sheet r24, alça 36×4, avatar 36 r18 rosa c/ símbolo,
   bolhas r18 canto vivo 4, chips blush, input fundoMarca "Pergunte à LíRIA" */
.conversation.chatui{background:none;border:0;box-shadow:none;padding:0;transform:none}
.chatui-sheet{background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:0 18px 44px rgba(15,16,53,.12);display:flex;flex-direction:column}
.chatui-alca{display:block;width:36px;height:4px;border-radius:2px;background:#e3e1ef;
  margin:10px auto 6px}
.chatui-cab{display:flex;align-items:center;gap:11px;padding:6px 18px 13px;
  background:#fff;border-bottom:1px solid #efeef6}
.chatui-avatar{width:36px;height:36px;border-radius:18px;background:#e0447f;flex:none;
  display:flex;align-items:center;justify-content:center}
/* o símbolo dentro do círculo é BRANCO (regra global de svg tentava pintá-lo) */
.chatui-avatar svg,.chatui-avatar svg path{fill:#fff!important;stroke:none!important}
.chatui-quem{flex:1;min-width:0}
.chatui-quem b{display:block;font:700 17px 'Baloo 2',sans-serif;color:#0f1035;line-height:1.15}
.chatui-quem small{display:block;font:400 11.5px 'DM Sans',sans-serif;color:#6a6989}
.chatui-x{font-size:22px;color:#9a99b4;line-height:1}
.chatui-rolagem{padding:16px 18px;display:flex;flex-direction:column;gap:10px;
  /* altura FIXA: o sheet não cresce enquanto a LíRIA digita — a conversa rola
     por dentro, como no app (crescer junto era o "efeito esquisito") */
  height:min(46vh,420px);overflow-y:auto;scrollbar-width:none}
.chatui-rolagem::-webkit-scrollbar{display:none}
.chatui-bolha{max-width:85%;border-radius:18px;padding:10px 14px;
  font:400 15px/1.6 'DM Sans',sans-serif;white-space:pre-wrap}
.chatui-bolha.dela{align-self:flex-start;border-bottom-left-radius:4px;
  background:#efeef6;color:#232347}
.chatui-bolha.minha{align-self:flex-end;border-bottom-right-radius:4px;
  background:#e0447f;color:#fff}
.chatui-chips{display:flex;flex-wrap:wrap;gap:8px}
.chatui-chips button{border:0;cursor:pointer;background:#fbe7f0;border-radius:999px;
  padding:8px 13px;font:500 12.5px 'DM Sans',sans-serif;color:#b02360;
  transition:background .2s,transform .15s}
.chatui-chips button:hover{background:#f7d2e1}
.chatui-chips button:active{transform:scale(.96)}
.chatui-chips button.escolhido{background:#0f1035;color:#fff}
.chatui-etiqueta{align-self:flex-start;font:500 10.5px 'DM Sans',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:#8a7f9c;margin:2px 0 -4px 6px}
.chatui-bolha.digitando{display:flex;gap:5px;align-items:center;min-height:38px}
.chatui-bolha.digitando i{width:6px;height:6px;border-radius:3px;background:#9a99b4;
  animation:chatui-pulsa 1.1s ease-in-out infinite}
.chatui-bolha.digitando i:nth-child(2){animation-delay:.18s}
.chatui-bolha.digitando i:nth-child(3){animation-delay:.36s}
@keyframes chatui-pulsa{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chatui-envio{display:flex;gap:10px;align-items:center;padding:12px 14px;
  background:#fff;border-top:1px solid #efeef6}
.chatui-envio input{flex:1;min-width:0;background:#fbf7ff;border:1px solid #e7e3f3;
  border-radius:22px;padding:10px 16px;font:400 14px 'DM Sans',sans-serif;color:#232347;
  outline:none;pointer-events:none}
.chatui-envio input::placeholder{color:#9a99b4}
.chatui-enviar{width:42px;height:42px;border-radius:22px;background:#e3e1ef;color:#9a99b4;
  flex:none;display:flex;align-items:center;justify-content:center;
  transition:background .25s,color .25s}
.chatui-enviar.vivo{background:#e0447f;color:#fff}
.chatui .example-note{margin-top:12px;text-align:center}
@media (prefers-reduced-motion:reduce){.chatui-bolha.digitando i{animation:none;opacity:.6}}
body.motion-paused .chatui-bolha.digitando i{animation-play-state:paused}

/* Na interação, a espessura recolhe junto com a rotação da tela. */
.care-section .cel-3d::before{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s,box-shadow .7s}
.care-section .cel-3d::after{transition:opacity .45s}
@media(min-width:801px){
 .care-section .cel:is(:hover,:focus-within) .cel-3d{transform:none!important}
 .care-section .cel:is(:hover,:focus-within) .cel-3d::before{transform:translateZ(-9px) translateX(0);opacity:0;box-shadow:none}
 .care-section .cel:is(:hover,:focus-within) .cel-3d::after{opacity:0}
}
@media(prefers-reduced-motion:reduce){.care-section .cel-3d::before,.care-section .cel-3d::after{transition:none}}
body.motion-paused .care-section .cel-3d::before,body.motion-paused .care-section .cel-3d::after{transition:none}

/* ─── 03 · "TECNOLOGIA QUE CUIDA" — garrafal 70s, amarelo sobre o navy (13/09).
   A vinheta da TV desce pra página: Shrikhand groovy, sombra empilhada rosa→
   escuro, leve inclinação de cartela. As linhas SOBEM de trás de uma máscara
   (revelador), e o card do painel APARECE na sequência. O estado escondido só
   existe sob html.tec-anima (JS ligado e sem reduced-motion): sem JS, tudo
   visível. O pop do card usa translate/scale (propriedades independentes) para
   não brigar com o rotate(-1.4deg) que o card já tem no transform. */
/* modo WARHOL (13/09, ref warhol-arts.webflow.io): Anton condensada pesada,
   amarelo CHAPADO sobre o navy, cada linha preenchendo 100% da largura via
   textLength — as letras encostam nas bordas em qualquer viewport. A versão
   Shrikhand groovy + "que" script + nuvem de palavras foi REPROVADA ("Não uma"). */
.tec-cuida{width:100%;padding:0 1.5vw clamp(38px,7vh,84px)}
.tec-linha{display:block;overflow:hidden;padding:2px 0}
.tec-linha svg{display:block;width:100%;height:auto}
/* stroke:none: a regra global de ícones (svg{stroke:currentColor}) contornava
   as letras com o lavanda da seção — o halo pálido era isso */
.tec-linha svg,.tec-linha text{stroke:none}
.tec-linha text{font:400 148px 'Anton',sans-serif;fill:#f2c94c;letter-spacing:2px}
.tec-linha+.tec-linha{margin-top:.6vw}
html.tec-anima .tec-linha svg{transform:translateY(112%);
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
html.tec-anima .tec-linha:nth-child(2) svg{transition-delay:.15s}
html.tec-anima .tec-cuida.viva .tec-linha svg{transform:none}
/* sem o card-mock (removido 13/09), a coluna de copy vira o corpo da seção:
   uma coluna só, centrada, com os 4 passos respirando */
html:is([data-hero=tva],[data-hero=tvb]) .professional-grid{grid-template-columns:1fr;
  max-width:820px;margin-inline:auto;gap:0}

/* ─── página /profissionais (ex-ato 04, agora aba própria) ─────────────────── */
.pagina-pro .section-heading{margin-bottom:34px}
.pro-pontos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  max-width:1000px;margin:56px auto 0;padding:0}
.pro-pontos li{display:flex;gap:12px;align-items:flex-start;text-align:left}
.pro-pontos svg{width:18px;height:18px;color:#b02360;flex:none;margin-top:3px}
.pro-pontos b{display:block;font:600 15px 'Figtree',sans-serif;color:#0f1035;margin-bottom:4px}
.pro-pontos p{margin:0;font:400 14px/1.55 'DM Sans',sans-serif;color:#5a5878}
@media(max-width:900px){.pro-pontos{grid-template-columns:1fr;gap:20px;max-width:520px}}

/* o coração rosa do rodapé — glifo, não emoji: rosa da marca em qualquer sistema.
   Maior que o texto de propósito ("quase não se vê" foi vetado). */
.coracao-br{color:#e0447f;font-weight:400;font-style:normal;
  font-size:1.6em;line-height:0;vertical-align:-.1em;display:inline-block;padding:0 1px}

/* ─── 03 · TÚNEL WARHOL (13/09, ref section_3d-fold do warhol-arts + protótipo
   do mestre): corredor 3D de serigrafias — paredes, teto e chão de cards em
   fitas infinitas (marquee CSS puro, conteúdo duplicado, translate -50% =
   emenda invisível), garrafais no centro. Zero canvas, zero libs.
   Placeholders: azulejos de símbolo + cards com copy JÁ APROVADA; as artes
   finais (ursinhos/meias/luas do mestre) entram trocando as cartas no JS. */
.professional-section{position:relative}
/* a banda É a seção inteira (13/09): viewport cheio, sem padding em volta */
html:is([data-hero=tva],[data-hero=tvb]) .professional-section.section-pad{padding-block:0}
/* fundo PRETO (13/09) — o breu do warhol, não o navy da página */
.tunel-banda{position:relative;height:100svh;display:grid;place-items:center;
  overflow:hidden;margin-bottom:0;background:#050510}
/* geometria v2 (13/09, feedback do fundador): NADA de teto/chão — uma parede
   única de colunas no FUNDO, curvada como o interior de um cilindro (o
   anfiteatro do warhol): cada coluna gira var(--a) em torno do centro e recua
   translateZ(-R); as das bordas viram para dentro, as do meio afundam. As
   colunas SANGRAM acima e abaixo da banda — sem linha superior nem inferior. */
/* v4 (13/09): o movimento é LATERAL, um lado só — o TAMBOR inteiro gira
   devagar (carrossel visto de dentro); as colunas não sobem nem descem.
   backface-visibility esconde as colunas quando viram a costa, então elas
   somem numa borda e renascem na outra. A curvatura de TV é a do cilindro. */
.tunel{position:absolute;inset:0;perspective:1000px;overflow:hidden}
.cilindro{position:absolute;left:50%;top:50%;width:16vw;height:170%;
  translate:-50% -50%;transform-style:preserve-3d;
  animation:tambor-gira var(--giro,240s) linear infinite}
@keyframes tambor-gira{to{transform:rotateY(-360deg)}}
/* raio 55vw: as colunas da frente alcançam as BORDAS da tela — o tambor vai
   de parede a parede da seção */
.faixa{position:absolute;inset:0;transform:rotateY(var(--a,0deg)) translateZ(-55vw);
  backface-visibility:hidden}
.fita{display:flex;flex-direction:column;translate:0 var(--dy,0)}
/* v7 (13/09): além do giro do tambor, cada coluna tem vida própria — 1/3
   sobe contínuo, 1/3 desce, 1/3 parada. As que andam têm conteúdo DUPLICADO
   e loopam em -50% (emenda invisível), partindo do offset --dy. */
@keyframes fita-vai{from{translate:0 var(--dy,0)}to{translate:0 calc(var(--dy,0) - 50%)}}
.fita.sobe{animation:fita-vai var(--vsub,100s) linear infinite}
.fita.desce{animation:fita-vai var(--vsub,100s) linear infinite reverse}
/* cards espaçados: respiro escuro entre um e outro, como na referência */
.fita>*{margin-bottom:6.5vw;flex:none}
/* véu de profundidade: escurece bordas e dá ar atrás das letras */
.tunel-veu{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 52% at center,rgba(5,5,16,.45) 0%,rgba(5,5,16,.1) 48%,rgba(5,5,16,0) 62%),
  radial-gradient(ellipse at center,rgba(5,5,16,0) 40%,rgba(5,5,16,.85) 88%)}
/* grão de filme (13/09, receita do warhol-arts): 1:1, POR CIMA de tudo na
   banda — cartão inclusive —, sutileza vem do alfa por pixel (~4%) */
.tunel-grao{position:absolute;inset:0;width:100%;height:100%;z-index:5;
  pointer-events:none}
/* cartas de serigrafia */
.azulejo{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(5,5,26,.4)}
/* cor do símbolo por HERANÇA: <use> clona pra shadow DOM, seletor de path não entra */
.azulejo svg{width:62%;height:auto;stroke:none!important}
.t-amarelo{background:#f2c94c}.t-amarelo svg{fill:#b02360}
.t-rosa{background:#f489af}.t-rosa svg{fill:#0f1035}
.t-vinho{background:#b02360}.t-vinho svg{fill:#f2c94c}
.t-lavanda{background:#b9c0e8}.t-lavanda svg{fill:#b02360}
.t-navy{background:#23235c}.t-navy svg{fill:#f489af}
.t-texto{padding:10%;text-align:center;font:900 clamp(9px,.82vw,14px)/1.4 'Nunito',sans-serif;
  letter-spacing:.14em}
.tx-navy{background:#23235c;color:#f2eefc}
.tx-vinho{background:#b02360;color:#ffe9f2}
.tx-rosa{background:#f489af;color:#0f1035}
/* v5 (13/09): as garrafais moram num CARTÃO GIGANTE central — o retrato do
   Andy da referência. Serigrafia amarela, letras navy, levemente torto,
   sombra pesada de peça colada por cima do tambor. */
/* v11 (13/09): o RETRATO É o cartão — serigrafia da brasileira preenchendo a
   peça (a moldura preta orgânica já vem impressa na arte); borda navy e
   misprint rosa REMOVIDOS a pedido. Vidro 3D segue: inclina com o ponteiro,
   reflexo varre, placa translúcida atrás. */
.tunel-banda .tec-cuida{position:relative;z-index:3;width:min(24%,340px);
  aspect-ratio:4/5;padding:0;border-radius:16px;background:#0f1035;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  display:grid;place-items:center;
  transform:perspective(900px) rotateX(calc(var(--ty,0)*-8deg)) rotateY(calc(var(--tx,0)*10deg));
  transform-style:preserve-3d;transition:transform .25s ease-out}
.tec-retrato{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;transform:translateZ(18px);transition:opacity .3s ease}
/* o ZAP (13/09): o retrato novo entra em FATIAS com jitter e flash de
   contraste — troca de canal de TV, não slideshow */
.tec-retrato.zap{animation:retrato-zap .38s linear both}
@keyframes retrato-zap{
  0%{clip-path:inset(0 0 82% 0);translate:7px 0;filter:contrast(1.5) saturate(1.7)}
  22%{clip-path:inset(12% 0 52% 0);translate:-6px 0;filter:none}
  44%{clip-path:inset(42% 0 28% 0);translate:5px 0;filter:contrast(1.4)}
  66%{clip-path:inset(68% 0 6% 0);translate:-4px 0;filter:none}
  84%{clip-path:inset(26% 0 34% 0);translate:3px 0;filter:contrast(1.3) saturate(1.5)}
  100%{clip-path:inset(0 0 0 0);translate:0 0;filter:none}}
/* a TRANSPARÊNCIA por trás (ref warhol): placa de vidro escuro maior que o
   cartão, borrando o tambor atrás, afundada na camada 3D */
.tunel-banda .tec-cuida::before{content:'';position:absolute;inset:-11%;
  border-radius:22px;background:rgba(10,10,26,.34);
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  border:1px solid rgba(242,238,252,.14);transform:translateZ(-46px)}
.tunel-banda .tec-linha{transform:translateZ(34px)}
/* v8 (13/09): só a BORBOLETINHA no cartão; as garrafais viraram o LETREIRO
   DE FUNDO — camada mais profunda da banda, atrás do tambor, seção inteira */
html.tec-anima .tunel-banda .tec-retrato{opacity:0;scale:.9;
  transition:opacity .6s ease .3s,scale .7s cubic-bezier(.34,1.56,.64,1) .3s}
html.tec-anima .professional-section.viva .tec-retrato{opacity:1;scale:1}
/* v10 (13/09, ref SEE/YOU): as palavras moram DENTRO do tambor — ficam ACIMA
   dos cards com mix-blend-mode:difference: no breu são creme; quando um card
   cruza, elas se invertem contra a cor dele — o card passa ATRAVÉS, e a
   palavra vira vidro glitch. */
/* o blend vai no CONTAINER: z-index cria stacking context e um blend nos
   filhos só via o fundo transparente do próprio container — nunca os cards */
.tec-fundo{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  mix-blend-mode:difference}
.tec-fundo span{position:absolute;top:50%;translate:0 -50%;white-space:nowrap;
  font:400 clamp(40px,5.4vw,104px)/1 'Anton',sans-serif;color:#f2eefc;
  letter-spacing:.02em}
.tec-fundo .fe{left:11%}
.tec-fundo .fd{right:11%}
/* o vidro: reflexo diagonal que desliza com a inclinação */
.tunel-banda .tec-cuida::after{content:'';position:absolute;inset:0;border-radius:10px;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 46%,rgba(255,255,255,.1) 56%,transparent 70%);
  background-size:230% 230%;
  background-position:calc(50% + var(--tx,0)*44%) calc(50% + var(--ty,0)*44%);
  transition:background-position .25s ease-out}
.tunel-banda .tec-linha text{fill:#0f1035}
.tunel-etq{position:absolute;z-index:3;font:900 11px 'Nunito',sans-serif;
  letter-spacing:.24em;color:rgba(242,238,252,.85)}
/* senta NA onda clara do topo, como o EXPLORE na de baixo */
.etq-indice{top:20px;left:28px;z-index:7;color:#3a395c}
/* o EXPLORE senta NA onda clara que invade o breu */
.etq-explore{bottom:20px;right:28px;z-index:7;color:#3a395c}

/* ─── onda de transição (13/09, ref warhol): o chão da próxima seção invade o
   breu num contorno orgânico que DESLIZA. O path tem 2 períodos idênticos e
   inclinação igual nas pontas — transladar -50% (1 período) emenda perfeito. */
.tunel-onda{position:absolute;left:0;bottom:-2px;width:200%;height:clamp(70px,10vh,130px);
  z-index:6;pointer-events:none;animation:onda-anda 22s linear infinite}
.tunel-onda svg{display:block;width:100%;height:100%}
/* a onda de CIMA: o chão da seção anterior (02, #fbf7ff) escorrendo pro breu,
   espelhada e derivando no sentido contrário */
.tunel-onda.topo{top:-2px;bottom:auto;animation-direction:reverse}
.tunel-onda.topo svg{transform:scaleY(-1)}
@keyframes onda-anda{to{translate:-50% 0}}
/* entrada: o túnel acorda em fade junto com as letras */
html.tec-anima .tunel,html.tec-anima .tunel-etq{opacity:0;transition:opacity 1.1s ease .2s}
html.tec-anima .professional-section.viva :is(.tunel,.tunel-etq){opacity:1}
/* movimento respeita pausa e reduced */
body.motion-paused :is(.cilindro,.fita,.tunel-onda){animation-play-state:paused}
@media(prefers-reduced-motion:reduce){:is(.cilindro,.fita,.tunel-onda){animation:none}}
@media(max-width:900px){
  .tunel-banda{height:auto;min-height:46svh;padding:64px 0}
  .cilindro{display:none}
  .tunel-banda .tec-cuida{width:92%}
}

/* ─── rodapé (13/09): o banner navy sobe com os ombros arredondados, MERGULHADO
   na seção rosa — o rodapé sobe 32px por cima dela, então o que aparece nos
   cantos arredondados é o rosa, nunca o branco do body */
footer{border-radius:28px 28px 0 0;margin-top:-32px;position:relative}

/* ─── 02 · a explicação ganha PESO (13/09): o corpo estava lavado (400 cinza
   claro) e destoava das outras seções — sobe pra DM Sans 500 com tinta navy
   mais funda; o aside continua secundário, mas legível */
html:is([data-hero=tva],[data-hero=tvb]) .liria-copy .liria-duas-linhas{
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:18px;
  line-height:1.6;color:#2f2e52}
html:is([data-hero=tva],[data-hero=tvb]) .liria-copy .aside-copy{
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:14.5px;color:#5a5878}

/* ─── FAQ · tipografia na régua aprovada (13/09): mesmo sistema das 02/03 —
   Figtree 800 no título (span rosa via :not, o revelador embrulha), Figtree
   600 nas perguntas, DM Sans no corpo, eyebrow Nunito vinho. Vale também pro
   FAQ da página /profissionais (mesma classe, mesmo data-hero). */
html:is([data-hero=tva],[data-hero=tvb]) .faq-section h2{
  font-family:'Figtree',sans-serif;font-weight:800;letter-spacing:-.022em;color:#0f1035}
html:is([data-hero=tva],[data-hero=tvb]) .faq-section h2 span:not(.mascara):not(.linha){color:var(--rosa-copy,#c42e68)}
html:is([data-hero=tva],[data-hero=tvb]) .faq-section .eyebrow{
  font-family:'Nunito',sans-serif;color:var(--rosa-copy,#c42e68)}
html:is([data-hero=tva],[data-hero=tvb]) .faq-list summary{
  font-family:'Figtree',sans-serif;font-weight:600;color:#0f1035}
html:is([data-hero=tva],[data-hero=tvb]) .faq-list details p{
  font-family:'DM Sans',sans-serif;font-weight:400;color:#5a5878;line-height:1.65}
/* espelho (13/09): perguntas à ESQUERDA, "Antes de começar." à DIREITA —
   colunas invertidas via order + template flipado (a lista fica com a coluna
   larga); no mobile o grid já é 1 coluna e a ordem natural volta */
@media(min-width:901px){
  html:is([data-hero=tva],[data-hero=tvb]) .faq-grid{grid-template-columns:1.15fr .85fr}
  html:is([data-hero=tva],[data-hero=tvb]) .faq-grid>div:first-child{order:2;text-align:right}
  html:is([data-hero=tva],[data-hero=tvb]) .faq-grid>.faq-list{order:1}
}

/* ─── PLANOS · seção expansível pós-FAQ (13/09): recolhida por padrão — uma
   linha + botão "Ver planos"; o corpo desliza aberto (grid-rows 0fr→1fr).
   Régua da casa: Figtree 800 + span rosa; DM Sans no corpo; EM BREVE como
   etiqueta (linguagem do rodapé). Nada de claim: só o que existe.
   Transição com o FAQ (13/09): MESMO fundo do FAQ (#f7f4fb, emenda some) e,
   no lugar do eyebrow, a "quinta pergunta" que todo FAQ tem — "E quanto
   custa?" na tipografia das perguntas de cima; a headline é a resposta. */
.planos-section{background:#f4f0f7}
.planos-pergunta{display:block;font:600 17px 'Figtree',sans-serif;color:#0f1035}
.planos-topo{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
html:is([data-hero=tva],[data-hero=tvb]) .planos-section h2{
  font-family:'Figtree',sans-serif;font-weight:800;letter-spacing:-.022em;
  color:#0f1035;margin:10px 0 0}
html:is([data-hero=tva],[data-hero=tvb]) .planos-section h2 span:not(.mascara):not(.linha){color:var(--rosa-copy,#c42e68)}
html:is([data-hero=tva],[data-hero=tvb]) .planos-section .eyebrow{
  font-family:'Nunito',sans-serif;color:#b02360}
.planos-abrir{display:flex;align-items:center;gap:9px;font:600 15px 'Figtree',sans-serif;
  color:#0f1035;background:#fff;border:1px solid #ded4e7;border-radius:999px;
  padding:13px 22px;cursor:pointer}
.planos-abrir:hover{border-color:#b02360}
.planos-abrir svg{width:15px;height:15px;transition:rotate .3s ease}
.planos-abrir[aria-expanded=true] svg{rotate:45deg}
.planos-corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
.planos-corpo.aberto{grid-template-rows:1fr}
.planos-corpo-miolo{overflow:hidden;min-height:0}
@media(prefers-reduced-motion:reduce){.planos-corpo{transition:none}}
.planos-sub{margin:26px 0 26px;font:400 16px 'DM Sans',sans-serif;color:#5a5878;max-width:52ch}
.planos-grade{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;padding-bottom:6px}
.plano{background:#fff;border:1px solid #e5dfed;border-radius:20px;padding:30px 30px 26px}
.plano-etq{display:inline-block;font:700 10px 'Nunito',sans-serif;letter-spacing:.2em;
  color:#b02360;background:#fbe7f0;border-radius:999px;padding:6px 12px}
.plano h3{margin:14px 0 16px;font:800 24px 'Figtree',sans-serif;color:#0f1035}
.plano ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.plano li{display:flex;gap:10px;align-items:flex-start;font:400 15px/1.5 'DM Sans',sans-serif;color:#3a395c}
.plano li svg{width:16px;height:16px;color:#b02360;flex:none;margin-top:2px}
.plano-premium{background:#0f1035;border-color:#0f1035;color:#f2eefc}
.plano-premium .plano-etq{color:#f2c94c;background:rgba(242,201,76,.14)}
.plano-premium h3{color:#f2eefc}
.plano-premium p{font:400 15px/1.6 'DM Sans',sans-serif;color:#b9c0e8;margin:0 0 14px}
.plano-premium .plano-nota{font-weight:600;color:#f2eefc}
.faq-link{color:#b02360;font-weight:600;text-decoration:none}
@media(max-width:900px){.planos-grade{grid-template-columns:1fr}}

/* ─── fechamento rosa · tipografia na régua aprovada (13/09): Figtree 800,
   tracking -.022em, navy — o span do autor vira branco sobre o rosa
   (:not(.mascara):not(.linha) porque o revelador embrulha) */
html:is([data-hero=tva],[data-hero=tvb]) .closing h2{
  font-family:'Figtree',sans-serif;font-weight:800;letter-spacing:-.022em;color:#0f1035}
html:is([data-hero=tva],[data-hero=tvb]) .closing h2 span:not(.mascara):not(.linha){color:#fff}
html:is([data-hero=tva],[data-hero=tvb]) .closing .eyebrow{
  font-family:'Nunito',sans-serif;color:#0f1035;opacity:.75}

/* ─── rodapé · legal (13/09) — LISTA vertical sob o link "Cuidado e privacidade",
   discreta, nas cores do navy */
.footer-top nav{align-items:flex-start}
.footer-col{display:flex;flex-direction:column;gap:7px}
.footer-col>a{margin-bottom:3px}
.footer-col span{font:400 10.8px 'DM Sans',sans-serif;color:rgba(242,238,252,.5)}
.footer-col i{font:700 7.2px 'Nunito',sans-serif;font-style:normal;letter-spacing:.16em;
  color:rgba(242,238,252,.32);margin-left:5px}

/* tese do bento em Grift (25/09, licença Envato; escolhida no comparativo preview/fontes-tese):
   a primeira linha leve e recuada, a segunda pesada e grande — o contraste de peso
   carrega a virada da frase */
@font-face{font-family:'Grift';src:url('/fonts/grift-vf.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:swap}
.bento .bento-tese{font-family:'Grift','Figtree',sans-serif;max-width:17ch;
  font-size:clamp(32px,4.32vw,66px);line-height:1.02;letter-spacing:-.02em;font-weight:800}
.bento .bento-tese .bento-abertura{font-size:max(.4em,16px);line-height:1.2;letter-spacing:.005em;
  font-weight:400;color:#5f5680;margin-bottom:.45em}
.bento .bento-tese b{font-weight:800;color:var(--ink)}
/* os títulos grandes das seções seguem a tese: Grift 800 (tamanhos e cores de cada seção mantidos) */
#principal h2{font-family:'Grift','Figtree',sans-serif}
/* TESTE "tudo em Grift" (25/09): a página inteira na Grift, menos a conversa de exemplo
   da Líria, que é réplica da tela do app e mantém as fontes dele */
body,body *:not(.conversation,.conversation *){font-family:'Grift','Figtree',sans-serif !important}

/* === herói com a caixa de conversa (26/09, referência melius.com) ===
   duas colunas: à esquerda o título, o texto curto e a caixinha da Líria como CTA
   (as perguntas se digitam em hero-chat.js); à direita o iPhone com a tela real
   do app (réplica ato1-app.html), inclinado em perspectiva — acompanha o mouse e
   flutua devagar. Pontilhado de papel quadriculado que some para baixo. */
.hero-chat{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;
  padding:calc(var(--nav-h,96px) + clamp(8px,2vh,28px)) 0 clamp(28px,5vh,56px);overflow:hidden}
.hero-chat::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(15,16,53,.15) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.hc-miolo{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
  gap:clamp(24px,4vw,72px)}
.hc-coluna{display:flex;flex-direction:column;align-items:flex-start}
.hc-titulo{margin:0;max-width:17ch;font-size:clamp(34px,4.3vw,68px);font-weight:700;line-height:1.04;
  letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.hc-base{margin-top:clamp(28px,5vh,56px);display:flex;flex-direction:column;align-items:flex-start}
.hc-texto{max-width:44ch;margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:#4b4468}
.hc-texto b{display:block;font-weight:600;color:var(--ink)}
.hc-caixa{margin-top:clamp(18px,2.6vh,26px);width:min(350px,100%);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;text-align:left;
  background:var(--ink);color:#d9d4ea;
  box-shadow:0 18px 36px -16px rgba(15,16,53,.55);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hc-caixa:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(15,16,53,.6)}
.hc-caixa:focus-visible{outline:3px solid var(--action);outline-offset:4px}
.hc-simbolo{width:26px;height:auto}
.hc-campo{display:flex;align-items:center;min-height:2.9em;font-size:13.5px;line-height:1.4}
.hc-cursor{display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:#f2a9c6;
  animation:hc-pisca 1s steps(1) infinite}
.hc-caixa.digitando .hc-cursor{animation:none}
@keyframes hc-pisca{50%{opacity:0}}
.hc-enviar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;transition:background .3s}
.hc-caixa:hover .hc-enviar{background:var(--action)}
.hc-enviar svg{width:17px;height:17px;stroke-width:2;transition:transform .35s var(--ease)}
.hc-caixa:hover .hc-enviar svg{transform:rotate(-35deg)}

/* o celular: de frente, plano (26/09 — a perspectiva 3D foi recusada); só flutua devagar,
   com a sombra no chão acompanhando */
.hc-celular{margin:0;justify-self:center;position:relative;
  height:min(78svh,720px);aspect-ratio:658/1356}
.hc-celular::after{content:'';position:absolute;left:14%;right:14%;bottom:-3%;height:7%;z-index:-1;
  border-radius:50%;background:radial-gradient(closest-side,rgba(15,16,53,.28),transparent);filter:blur(6px);
  animation:hc-sombra 7s ease-in-out infinite}
.hc-celular img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 30px 36px rgba(15,16,53,.2)) drop-shadow(0 8px 10px rgba(15,16,53,.1));
  animation:hc-flutua 7s ease-in-out infinite}
@keyframes hc-flutua{50%{translate:0 -12px}}
@keyframes hc-sombra{50%{scale:.9;opacity:.75}}

/* entrada: título e texto sobem; o celular chega logo depois */
.hc-titulo,.hc-base{animation:hc-entra .9s var(--ease) both}
.hc-base{animation-delay:.2s}
.hc-celular{animation:hc-chega 1.2s var(--ease) .15s both}
@keyframes hc-entra{from{opacity:0;transform:translateY(16px)}}
@keyframes hc-chega{from{opacity:0;transform:translateY(40px)}}
@media(prefers-reduced-motion:reduce){
  .hc-titulo,.hc-base,.hc-celular,.hc-celular img,.hc-celular::after,.hc-cursor{animation:none}
}
body.motion-paused .hc-cursor,body.motion-paused .hc-celular img,body.motion-paused .hc-celular::after{animation:none}

@media(max-width:800px){
  .hc-miolo{grid-template-columns:1fr;gap:28px;align-content:start}
  .hc-coluna{align-items:center;text-align:center}
  .hc-base{align-items:center;margin-top:22px}
  .hc-texto{text-wrap:balance}
  .hero-chat{padding-bottom:56px}
  .hc-celular{height:auto;width:min(62vw,260px)}
}

/* LABORATÓRIO (26/09) · "Da concepção até o parto" — módulo do bento, largura inteira.
   Esquerda: gametas (lab-gametas.js, WebGL) que seguem o cursor e voltam ao óvulo.
   Direita: a barriga que responde à mão e chuta no clique (lab-barriga.js, canvas 2D). */
.bento-jornada{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;padding:0;gap:0;
  min-height:clamp(300px,30vw,400px);overflow:hidden}
.bj-metade{position:relative;isolation:isolate;display:grid;place-items:center;min-height:inherit;overflow:hidden}
.bj-parto{border-left:1px solid rgba(255,255,255,.08)}
.bj-metade>.bento-etq{position:absolute;z-index:2;top:19px;left:19px}
.bento-card .lj-dica{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;margin:0;max-width:none;
  font-size:12.5px;line-height:1.4;text-align:center;color:#b3ade0;pointer-events:none}
.lj-chutes{display:block;margin-top:4px;font-weight:700;color:#f489af;min-height:1.2em}
.lab-gametas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.lj-ovulo{position:relative;z-index:0;width:clamp(72px,7.5vw,108px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,#fffafc 0 20%,#fde9f1 46%,#f7c6da 80%,#f2a9c6 100%);
  box-shadow:0 0 0 6px rgba(255,255,255,.14),0 0 0 7.5px rgba(242,169,198,.45),
    0 0 0 18px rgba(242,169,198,.08),0 0 60px 6px rgba(224,68,127,.35);
  animation:lj-ovulo 6s ease-in-out infinite}
.lj-ovulo::after{content:'';position:absolute;left:38%;top:36%;width:24%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(224,68,127,.22),rgba(224,68,127,.06) 70%,transparent)}
@keyframes lj-ovulo{50%{scale:1.035}}
.lj-barriga{width:min(92%,320px);aspect-ratio:1;display:block;cursor:pointer;touch-action:manipulation}
@media(prefers-reduced-motion:reduce){.lj-ovulo{animation:none}}
body.motion-paused .lj-ovulo{animation:none}
@media(max-width:800px){
  .bento-jornada{grid-template-columns:1fr;min-height:0}
  .bj-metade{min-height:300px}
  .bj-parto{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
}
/* a névoa do rodapé do bento (.bento::after, z 11) passa por trás dos cartões, não por cima */
.bento .bento-grade{position:relative;z-index:12}

/* transição em ondas (26/09, ref. nomu.store) — da seção clara da Líria para o escuro do tambor.
   Fundo = cor da seção de cima; a última camada termina na cor do tambor (#050510). A onda
   fixa que ficava no topo do tambor sai: agora a emenda é feita pelas camadas. */
.onda-transicao{position:relative;height:clamp(300px,58vh,620px);background:#fbf7ff;margin-bottom:-1px}
.onda-transicao svg{position:absolute;inset:0;width:100%;height:100%;display:block;stroke:none}
.onda-transicao path{stroke:none}

@media(max-width:800px){.onda-transicao{height:clamp(220px,42vh,380px)}}


/* TESTE (26/09) · hero "funky": fundo rosa forte, título em Andelo, caixa alta e grande
   (a fonte pede caixa alta, como no specimen). Sem o celular, que foi para a seção da carteirinha.
   Para voltar, apagar este bloco. */
@font-face{font-family:'Andelo';src:url('/fonts/andelo.woff2') format('woff2');font-display:swap}
.hero-chat{background:#ec4a8c}
.hero-chat::before{background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.5px)}
.hero-chat .hc-miolo{grid-template-columns:1fr}
.hero-chat .hc-titulo{font-family:'Andelo','Grift',sans-serif!important;font-weight:400;text-transform:uppercase;
  max-width:none;font-size:clamp(52px,7.6vw,148px);line-height:.92;letter-spacing:0;color:#fff4dc;text-wrap:balance}
.hero-chat .hc-texto{color:#ffe3ee}
.hero-chat .hc-texto b{color:#fff}
.nav .nav-middle a,.nav .nav-dropdown-trigger,.nav .login{color:var(--ink)}

/* iPhone 17 lilás na seção da carteirinha (26/09): moldura com o vidro transparente, por cima
   da réplica viva do app — a Dynamic Island da moldura fica sobre a tela, como no aparelho */
.cel{aspect-ratio:1316/2712}
.cel-corpo{position:relative;z-index:2;pointer-events:none}
.cel-tela{left:4.179%;top:1.622%;width:91.641%;height:96.681%;border-radius:13.6%/6.3%;z-index:1}
.cel-camera{display:none}
.care-section .cel-3d::before,.care-section .cel-3d::after{display:none}
.care-section .cel-corpo{transform:translateZ(2px)}
/* copy em hierarquia (26/09): chamada pequena em Grift + título curto em Andelo; sem ligaturas
   contextuais (a Andelo punha um acento solto sobre o O de PROFISSIONAL) */
.hero-chat .hc-titulo{font-feature-settings:"liga" 0,"calt" 0,"clig" 0,"dlig" 0;font-variant-ligatures:none}
.hero-chat .hc-chamada{display:block;margin-bottom:.9em;font-family:'Grift',sans-serif!important;font-weight:700;
  font-size:clamp(13px,1.1vw,16px);letter-spacing:.16em;line-height:1.3;color:#fff4dc}
.hero-chat .hc-grande{display:block;max-width:14ch;font-family:'Andelo','Grift',sans-serif!important}
.hero-chat .hc-base{margin-top:clamp(22px,4vh,40px)}
.hero-chat .hc-texto{max-width:40ch;font-size:clamp(16px,1.25vw,19px)}
/* CTA (a caixa da Líria) no meio da página (26/09) */
.hero-chat .hc-base{width:100%}
.hero-chat .hc-caixa{align-self:center;width:min(420px,100%)}
/* copy 26/09 (2): título + linha de posicionamento abaixo; o texto de apoio sobe para cima do CTA, os dois no meio */
.hero-chat .hc-sub{margin:clamp(14px,2.2vh,24px) 0 0;max-width:46ch;font-size:clamp(17px,1.45vw,22px);line-height:1.4;
  font-weight:600;color:#fff4dc}
.hero-chat .hc-base{align-items:center;text-align:center}
.hero-chat .hc-base .hc-texto{max-width:44ch}
/* título longo (#1 App…) — Andelo menor para caber em 3–4 linhas */
.hero-chat .hc-grande{max-width:22ch;font-size:clamp(38px,4.7vw,88px);line-height:1.1}
/* navbar sobre o rosa (TESTE 26/09): links e ícones em creme, como o wordmark monocromático */
header.nav{color:#fff4dc}
header.nav .nav-middle a,header.nav .nav-dropdown-trigger,header.nav .login{color:#fff4dc!important}
header.nav .nav-dropdown-trigger:hover,header.nav .nav-dropdown-trigger[aria-expanded=true]{color:#fff!important}
header.nav .nav-dropdown-menu a{color:var(--ink)!important}
/* copy 26/09 (3): "Seu pré-natal, agora com IA." — título curto, a Andelo volta a crescer */
.hero-chat .hc-grande{max-width:13ch;font-size:clamp(52px,7.4vw,144px);line-height:1.02}
.hero-chat .hc-chamada{margin-bottom:1.9em}   /* o acento do É não encosta na chamada */
/* transição hero → bento (26/09): começa no rosa do hero e assenta no papel do bento */
.onda-transicao.onda-heroi{background:#ec4a8c}
/* funcionalidades reais em etiquetas, em cima do CTA (26/09) */
.hero-chat .hc-recursos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px}
.hero-chat .hc-recursos li{padding:7px 14px;border:1.5px solid rgba(255,244,220,.55);border-radius:999px;
  font-size:13.5px;font-weight:600;line-height:1.2;color:#fff4dc;white-space:nowrap}
.hero-chat .hc-recursos li:last-child{background:#fff4dc;color:#b02360;border-color:#fff4dc}
@media(max-width:800px){.hero-chat .hc-recursos li{font-size:12.5px;padding:6px 11px}}
/* as funcionalidades viram letreiro (26/09): duas cópias da lista num trilho que corre da esquerda para a
   direita em loop; bordas esmaecidas; pausa no hover; parado com movimento reduzido / "Pausar movimento" */
.hero-chat .hc-letreiro{width:min(860px,100%);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero-chat .hc-trilho{display:flex;width:max-content;animation:hc-letreiro 55s linear infinite}
.hero-chat .hc-letreiro:hover .hc-trilho{animation-play-state:paused}
.hero-chat .hc-letreiro .hc-recursos{flex-wrap:nowrap;max-width:none;padding-right:8px}
.hero-chat .hc-recursos li:last-child{background:none;color:#fff4dc;border-color:rgba(255,244,220,.55)}
.hero-chat .hc-recursos li:first-child{background:#fff4dc;color:#b02360;border-color:#fff4dc}
@keyframes hc-letreiro{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.hero-chat .hc-trilho{animation:none}}
body.motion-paused .hero-chat .hc-trilho{animation-play-state:paused}
/* o trilho do letreiro (max-content) não pode alargar a coluna do hero */
.hero-chat .hc-miolo{grid-template-columns:minmax(0,1fr)}
.hero-chat .hc-coluna,.hero-chat .hc-base{min-width:0;max-width:100%}

/* LABORATÓRIO (26/09) · versões do hero (lab-heroi.js): cada linha do título com a sua escala */
.hero-chat .hc-l{display:block;font-family:'Andelo','Grift',sans-serif!important;max-width:none}
/* Escada: SEU pequeno · PRÉ-NATAL, gigante · AGORA COM IA. médio */
.hero-chat[data-variante=escada] .hc-l-a{font-size:clamp(34px,3.6vw,64px);line-height:1}
.hero-chat[data-variante=escada] .hc-l-b{font-size:clamp(76px,13.5vw,250px);line-height:.9;margin:.02em 0 .04em -.03em}
.hero-chat[data-variante=escada] .hc-l-c{font-size:clamp(40px,5.2vw,98px);line-height:1}
/* 40 · 24: duas linhas gigantes, a segunda deslocada e em navy */
.hero-chat[data-variante=semanas] .hc-l-a,.hero-chat[data-variante=semanas] .hc-l-b{font-size:clamp(70px,11.2vw,208px);line-height:.95}
.hero-chat[data-variante=semanas] .hc-l-b{margin-left:clamp(40px,14vw,260px);color:#0f1035}
/* Entre: médio · E OUTRA, gigante · A LÍRIA. médio em navy */
.hero-chat[data-variante=entre] .hc-l-a{font-size:clamp(34px,4.4vw,84px);line-height:1}
.hero-chat[data-variante=entre] .hc-l-b{font-size:clamp(84px,15vw,280px);line-height:.88;margin:.02em 0 0 -.03em}
.hero-chat[data-variante=entre] .hc-l-c{font-size:clamp(40px,5.4vw,104px);line-height:1;color:#0f1035;margin-left:clamp(20px,22vw,420px)}
/* o seletor do laboratório: pílula fixa no canto */
.lab-seletor{position:fixed;left:16px;bottom:16px;z-index:100;display:flex;align-items:center;gap:4px;padding:5px;
  border-radius:999px;background:rgba(15,16,53,.88);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(15,16,53,.3);
  font:600 12px/1 'Grift',sans-serif}
.lab-seletor span{padding:0 8px 0 6px;color:#b9b2d4;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.lab-seletor button{border:0;border-radius:999px;padding:8px 12px;background:none;color:#fff4dc;cursor:pointer;font:inherit}
.lab-seletor button[aria-pressed=true]{background:#ec4a8c;color:#fff}
/* hero centralizado (26/09): tudo num eixo só; os deslocamentos das versões somem no centro */
.hero-chat[data-alinha=centro] .hc-coluna{align-items:center;text-align:center}
.hero-chat[data-alinha=centro] .hc-titulo{margin-inline:auto}
.hero-chat[data-alinha=centro] .hc-grande{margin-inline:auto}
.hero-chat[data-alinha=centro] .hc-l{margin-left:0!important;margin-right:0!important}
.hero-chat[data-alinha=centro] .hc-sub{margin-inline:auto}
.lab-seletor i{width:1px;height:18px;background:rgba(255,255,255,.2);margin:0 4px}
.hero-chat .hc-sub{text-wrap:balance}
/* hero Escada APROVADO (26/09): subtítulo numa linha só no desktop */
.hero-chat .hc-sub{max-width:none}
@media(min-width:900px){.hero-chat .hc-sub{white-space:nowrap}}

/* mockup que se afasta com a rolagem (26/09): a seção é alta; o palco fica preso e a rolagem
   comanda o vídeo. Fundo = a cor sobre a qual o vídeo foi gravado (sem emenda). */
.mockup-rolagem{position:relative;height:260vh;background:#f4f0f7}
.mr-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.mr-video{width:100%;height:100%;object-fit:cover;display:block;background:#f4f0f7}
@media(max-width:800px){.mockup-rolagem{height:200vh}}

/* hero Escada (26/09, ajuste): kicker no canto superior esquerdo + a escada vira um bloco fechado —
   SEU à esquerda (sobre o P), PRÉ-NATAL gigante, AGORA COM IA. à direita (sob a vírgula) */
.hero-chat .hc-kicker{position:absolute;z-index:2;top:calc(var(--nav-h,96px) + 8px);left:clamp(20px,4vw,64px);margin:0;
  font-size:clamp(12px,.95vw,14px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff4dc}
.hero-chat .hc-kicker span{margin:0 .5em;opacity:.6}
.hero-chat[data-variante=escada] .hc-titulo{width:max-content;max-width:100%;text-align:left}
.hero-chat[data-variante=escada] .hc-l-a{padding-left:.06em}
.hero-chat[data-variante=escada] .hc-l-c{text-align:right;padding-right:.35em}
@media(max-width:800px){
  .hero-chat .hc-kicker{position:static;margin:0 auto 18px;text-align:center;font-size:11px;letter-spacing:.12em}
}

.hero-chat[data-variante=escada] .hc-l-a{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0}
.hero-chat[data-variante=escada] .hc-l-b{position:relative}
@media(max-width:800px){.hero-chat[data-variante=escada] .hc-l-b{font-size:clamp(58px,18vw,76px)}}



/* LABORATÓRIO (26/09) · granulado no rosa (hero + começo da onda), abaixo do conteúdo */
.hero-chat::after,.onda-heroi::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--grao);background-size:240px 240px;mix-blend-mode:overlay;opacity:.6}
:root{--grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.hero-chat::after{z-index:-1}
.onda-heroi::before{z-index:0}
.onda-heroi svg{z-index:1}

/* LABORATÓRIO (26/09) · título ~22% menor */
.hero-chat[data-variante=escada] .hc-l-b{font-size:clamp(64px,10.5vw,196px)}
.hero-chat[data-variante=escada] .hc-l-c{font-size:clamp(34px,4.1vw,78px)}
@media(max-width:800px){.hero-chat[data-variante=escada] .hc-l-b{font-size:clamp(56px,16.5vw,70px)}
  .hero-chat .hc-miolo{align-content:center}}


/* LABORATÓRIO (26/09) · hero marinho no topo (mais clínico); o rosa virou o fechamento (#comecar) */
.hero-marinho{position:relative;isolation:isolate;min-height:92svh;display:flex;align-items:center;background:#0f1035;color:#fff4dc;
  padding:calc(var(--nav-h,96px) + clamp(16px,4vh,48px)) 0 clamp(48px,8vh,96px)}
.hero-marinho::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,244,220,.10) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 40%,transparent 100%)}
.hm-miolo{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-marinho .hm-titulo{margin:0;max-width:17ch;font-size:clamp(40px,5.4vw,90px);font-weight:700;line-height:1.02;letter-spacing:-.035em;color:#fff4dc;text-wrap:balance}
.hero-marinho .hm-titulo span{color:#f385b1}
.hero-marinho .hm-sub{max-width:50ch;margin:clamp(18px,3vh,28px) auto 0;font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:rgba(255,244,220,.74);text-wrap:balance}
.hm-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:clamp(26px,4.4vh,40px)}
.hero-marinho .hm-principal{background:#ec4a8c;color:#fff}
.hero-marinho .hm-principal .button-icon{background:rgba(255,255,255,.2);color:#fff}
.hm-secundario{color:#fff4dc;font-weight:600;font-size:15px;padding-bottom:2px;border-bottom:1.5px solid rgba(255,244,220,.4);transition:border-color .25s}
.hm-secundario:hover{border-color:#f385b1}
.hm-fatos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:clamp(28px,5vh,48px) 0 0;padding:0;font-size:13.5px;color:rgba(255,244,220,.66)}
.hm-fatos li{display:flex;align-items:center;gap:8px}
.hm-fatos li::before{content:'';width:6px;height:6px;border-radius:50%;background:#f385b1;flex:none}
.onda-transicao.onda-marinho{background:#0f1035}
.onda-transicao.onda-fim{background:#f4f0f7}
@media(max-width:800px){.hero-marinho{min-height:auto}.hm-fatos{flex-direction:column;align-items:center;gap:8px}}

/* o rosa como fechamento: só o título Andelo, a frase e o QR + botão originais */
.hero-chat.hero-chat--fim{min-height:auto;padding:clamp(72px,11vh,130px) 0 clamp(80px,12vh,140px)}
.hero-chat--fim .hc-titulo .hc-l{color:#fff4dc}
.hero-chat--fim .baixar{margin-top:clamp(28px,4.4vh,44px)}

/* letreiro + chat no hero marinho */
.hero-chat.hero-marinho{background:#0f1035;min-height:100svh}
.hero-chat.hero-marinho::after{opacity:.35}
.hero-marinho .hc-base{margin-top:clamp(26px,4.4vh,44px)}
.hero-marinho .hc-caixa{background:#fff4dc;color:#3b3566;box-shadow:0 22px 44px -18px rgba(0,0,0,.6)}
.hero-marinho .hc-enviar{background:#ec4a8c;color:#fff}
.hero-marinho .hc-caixa:hover .hc-enviar{background:#b02360}
.hero-marinho .hc-cursor{background:#ec4a8c}
.hero-marinho .hm-fatos{margin-top:clamp(22px,3.6vh,36px)}
@media(max-width:900px){.hero-chat--fim .baixar{margin-top:6px}}
/* fechamento: "Leve suas perguntas. / E a LÍRIA também." em Andelo, centralizado, LÍRIA maior e em marinho */
.hero-chat--fim[data-variante=escada] .hc-titulo{text-align:center;width:auto}
.hero-chat--fim[data-variante=escada] .hc-l-b{font-size:clamp(30px,4.6vw,84px);line-height:1.1}
.hero-chat--fim[data-variante=escada] .hc-l-c{font-size:clamp(30px,4.6vw,84px);line-height:1.1;text-align:center;padding-right:0;margin-top:.26em}
.hero-chat--fim .hc-titulo .hc-liria{font-family:'Andelo','Grift',sans-serif!important;display:inline-block;font-size:1.9em;line-height:1;
  vertical-align:-.14em;margin:0 .06em;color:#0f1035!important}
@media(max-width:800px){.hero-chat--fim[data-variante=escada] .hc-l-b,.hero-chat--fim[data-variante=escada] .hc-l-c{font-size:clamp(26px,8.2vw,40px)}}

/* LABORATÓRIO (26/09, ref. vibebevvy.com) · faixa das funcionalidades acima da nav */
:root{--faixa-h:36px}
.faixa-topo{position:absolute;top:0;left:0;right:0;z-index:31;height:var(--faixa-h);overflow:hidden;background:#ec4a8c;color:#0f1035;
  display:flex;align-items:center}
.ft-trilho{display:flex;width:max-content;animation:hc-letreiro 70s linear infinite reverse}   /* da direita para a esquerda */
.faixa-topo:hover .ft-trilho{animation-play-state:paused}
.faixa-topo ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.faixa-topo li{display:flex;align-items:center;gap:14px;padding-right:14px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.faixa-topo li::before{content:'';width:15px;height:12px;flex:none;background:#0f1035;
  -webkit-mask:url(/symbol.svg) center/contain no-repeat;mask:url(/symbol.svg) center/contain no-repeat}
@media(prefers-reduced-motion:reduce){.ft-trilho{animation:none}}
body.motion-paused .ft-trilho{animation-play-state:paused}
header.nav{top:var(--faixa-h)}
.mobile-menu{top:calc(var(--nav-h,90px) + var(--faixa-h))}
.hero-chat.hero-marinho{padding-top:calc(var(--faixa-h) + var(--nav-h,96px) + clamp(16px,4vh,48px))}
@media(max-width:800px){:root{--faixa-h:32px}.faixa-topo li{font-size:12px}}
/* fechamento em duas colunas no desktop: título à esquerda, QR + botão à direita */
@media(min-width:900px){
  .hero-chat--fim .hc-coluna{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,110px);text-align:left}
  .hero-chat--fim[data-variante=escada] .hc-titulo{margin:0;text-align:left}
  .hero-chat--fim[data-variante=escada] .hc-l-c{text-align:left}
  .hero-chat--fim .hc-base{margin:0}
  .hero-chat--fim .baixar{margin-top:0}
  .hero-chat--fim .qr-card{width:232px}
  .hero-chat--fim .qr-card p{font-size:12px;white-space:nowrap}
  .hero-chat--fim[data-variante=escada] .hc-l-b,.hero-chat--fim[data-variante=escada] .hc-l-c{font-size:clamp(34px,5.4vw,100px)}
  .hero-chat--fim.hero-chat{padding-block:clamp(64px,9vh,110px)}
}
.onda-transicao.onda-fim::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grao);background-size:240px 240px;mix-blend-mode:overlay;opacity:.6}   /* sem emenda com o granulado do fechamento */

/* fechamento: texto mais alto, logo abaixo da onda */
.hero-chat.hero-chat--fim{padding:clamp(24px,5vh,64px) 0 clamp(72px,12vh,140px)}


/* LABORATÓRIO (27/09) · a tese atrás do celular, no fim do vídeo (mockup-rolagem.js recorta o celular do texto) */
.mockup-rolagem{height:320vh}
.mr-tese{position:absolute;inset:0;z-index:1;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3em;
  padding:0 clamp(20px,4vw,64px);text-align:center;pointer-events:none;opacity:var(--mr-tese,0);
  font-family:'Grift','Figtree',sans-serif!important;color:#0f1035;text-wrap:balance}
.mr-tese .mr-abertura{font-family:'Grift','Figtree',sans-serif!important;font-size:clamp(16px,1.6vw,26px);font-weight:500;color:#5f5680;letter-spacing:.005em}
.mr-tese b{font-family:'Grift','Figtree',sans-serif!important;font-size:clamp(40px,8.2vw,150px);font-weight:800;line-height:.98;letter-spacing:-.035em;max-width:13ch}
@media(max-width:800px){
  .mr-tese{justify-content:space-between;padding:calc(var(--faixa-h,32px) + 70px) 20px 28px;clip-path:none!important}
  .mr-tese b{font-size:clamp(26px,7.4vw,34px);max-width:16ch}
}
/* a abertura da tese sobe para cima do celular (topo final do celular = centro − 337 px do quadro 1920×1080, em cover) */
@media(min-width:801px){
  .mockup-rolagem{--mr-e:max(100vw / 1920, 100svh / 1080)}
  .mr-tese .mr-abertura{position:absolute;left:0;right:0;bottom:calc(50% + 337 * var(--mr-e) + 18px)}
}

/* fechamento (27/09): de volta à Figtree, como na produção; LÍRIA em destaque só pela cor */
.hero-chat--fim .hc-titulo,.hero-chat--fim .hc-titulo .hc-l,.hero-chat--fim .hc-titulo .hc-liria{font-family:'Figtree',sans-serif!important;
  text-transform:none;font-feature-settings:normal;font-variant-ligatures:normal}
.hero-chat--fim[data-variante=escada] .hc-l-b,.hero-chat--fim[data-variante=escada] .hc-l-c{font-size:clamp(40px,5.6vw,92px)!important;
  line-height:1.05;font-weight:700;letter-spacing:-.055em}
.hero-chat--fim[data-variante=escada] .hc-l-c{margin-top:0}
.hero-chat--fim .hc-titulo .hc-l-b{color:#0f1035!important}
.hero-chat--fim .hc-titulo .hc-l-c{color:#fff4dc!important}
.hero-chat--fim .hc-titulo .hc-liria{font-size:1em;vertical-align:baseline;margin:0;display:inline;color:#0f1035!important}
@media(max-width:800px){.hero-chat--fim[data-variante=escada] .hc-l-b,.hero-chat--fim[data-variante=escada] .hc-l-c{font-size:clamp(34px,10vw,44px)!important}}
/* a tese ao lado do celular, não atrás (27/09): "oito consultas" à esquerda, "280 dias" à direita — o celular no meio separa as duas */
@media(min-width:801px){
  .mr-tese{display:grid;grid-template-columns:minmax(0,1fr) calc(330 * var(--mr-e) + clamp(48px,6vw,110px)) minmax(0,1fr);
    align-items:center;justify-content:stretch;padding:0 clamp(24px,4vw,72px);text-align:left;clip-path:none!important}
  .mr-tese .mr-abertura{position:static;grid-column:1;justify-self:end;text-align:right;max-width:12ch;
    font-size:clamp(26px,3.2vw,58px);font-weight:600;line-height:1.08;letter-spacing:-.03em;color:#5f5680}
  .mr-tese b{grid-column:3;justify-self:start;max-width:11ch;font-size:clamp(30px,3.8vw,70px);line-height:1.02}
}

/* LABORATÓRIO (27/09) · Líria Intelligence — eco tipográfico + 4 momentos com o celular preso (li-intelligence.js) */
.li-secao{position:relative;background:#f4f0f7;padding:clamp(56px,9vh,110px) 0 clamp(60px,10vh,120px)}
.li-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.li-eco{overflow:hidden;padding:0 clamp(16px,2.5vw,40px);font-size:var(--eco-fs,96px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
.li-linha{margin:0;display:flex;justify-content:space-between;gap:.28em;white-space:nowrap;
  font-family:'Grift','Figtree',sans-serif!important;font-weight:800;font-size:1em;line-height:1.04;letter-spacing:-.02em;
  translate:calc(var(--li-deriva,0px) * var(--li-lado,1)) 0}
.li-linha span{font-family:'Grift','Figtree',sans-serif!important}
.li-linha:nth-child(even){--li-lado:-1}
.li-vazada{color:transparent;-webkit-text-stroke:1.5px #cfc6e6}
.li-cheia{color:#0f1035}
/* condensada (27/09, ref. Cifra Club): celular à esquerda, título + 4 itens à direita; o item ativo abre a descrição */
.li-corpo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(36px,6vw,110px);margin-top:clamp(28px,5vh,56px)}
.li-palco{display:flex;flex-direction:column;align-items:center}
.li-cel{position:relative;margin:0;height:min(76vh,640px);aspect-ratio:790/1627}
.li-moldura{position:relative;z-index:2;display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 26px 34px rgba(15,16,53,.22))}
.li-tela{position:absolute;z-index:1;left:4.179%;top:1.622%;width:91.641%;height:96.681%;border-radius:13.6%/6.3%;overflow:hidden;background:#f4f0f7}
.li-app{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#f4f0f7}
.li-nota{margin:10px 0 0;font-size:12px;color:#8a83a6}
.li-titulo{margin:0 0 clamp(22px,3.4vh,36px);max-width:15ch;font-size:clamp(34px,3.7vw,60px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:#0f1035}
.li-titulo span:not(.li-sr){color:#e0447f}
.li-itens{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:36rem}
.li-item{display:block;width:100%;text-align:left;padding:14px 22px;border:0;border-left:2px solid #e3dcef;border-radius:0 14px 14px 0;
  background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .3s,border-color .3s}
.li-item:hover{background:rgba(224,68,127,.04)}
.li-item:focus-visible{outline:3px solid #e0447f;outline-offset:2px}
.li-item[aria-pressed=true]{border-left-color:#e0447f;background:linear-gradient(90deg,rgba(224,68,127,.09),rgba(224,68,127,0))}
.li-num{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b02360}
.li-item b{display:block;margin-top:4px;font-size:clamp(17px,1.35vw,21px);font-weight:700;letter-spacing:-.01em;color:#8a83a6;transition:color .3s}
.li-item[aria-pressed=true] b{color:#0f1035}
.li-desc{display:block;overflow:hidden;font-size:15px;line-height:1.5;color:#4b4468;max-height:0;opacity:0;transition:max-height .35s ease,opacity .35s ease,margin .35s ease}
.li-item[aria-pressed=true] .li-desc{max-height:6em;opacity:1;margin-top:6px}
@media(prefers-reduced-motion:reduce){.li-item,.li-desc,.li-item b{transition:none}}
@media(max-width:800px){
  .li-corpo{grid-template-columns:1fr;gap:28px}
  .li-cel{height:min(62svh,560px)}
  .li-titulo{text-align:center;margin-inline:auto}
  .li-linha{flex-direction:column;align-items:center;gap:0}
}
/* o bloco centrado (não colado à esquerda); no celular: título → aparelho → itens, para a tela ficar perto de quem toca */
.li-corpo{grid-template-columns:auto minmax(0,38rem);justify-content:center}
@media(max-width:800px){
  .li-corpo{grid-template-columns:1fr;justify-content:stretch;gap:22px}
  .li-lado{display:contents}
  .li-titulo{order:-2;margin-bottom:0}
  .li-palco{order:-1}
  .li-cel{height:min(56svh,500px)}
}
/* 27/09: o bento agora encosta no tambor, não no céu da carteirinha (saiu): sem névoa, e a onda do tambor no papel do bento */
.bento::after{display:none}
.tunel-onda.topo path{fill:#f4f0f7}
/* 27/09 · "Como funciona": kicker + 4 passos de uso; abaixo, os 5 capítulos do app */
.li-kicker{display:block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#b02360}
.li-junto{margin-top:clamp(56px,9vh,110px)}
.li-junto-titulo{margin:0 0 22px;font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.02em;color:#0f1035}
.li-grupos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.li-grupos li{padding:22px 20px;border:1px solid #e7e3f3;border-radius:18px;background:#fff}
.li-grupos b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:#0f1035}
.li-grupos p{margin:10px 0 0;font-size:14px;line-height:1.55;color:#5f5680}
.li-grupos .li-grupo-destaque{background:#0f1035;border-color:#0f1035}
.li-grupo-destaque b{color:#fff4dc}
.li-grupo-destaque p{color:rgba(255,244,220,.72)}
@media(max-width:1100px){.li-grupos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.li-grupos{grid-template-columns:1fr}.li-kicker{text-align:center;order:-3}.li-junto-titulo{text-align:center}}
/* 27/09: título e subtítulo do hero marinho menores (pedido do usuário) */
.hero-marinho .hm-titulo{font-size:clamp(32px,3.9vw,64px);max-width:20ch}
.hero-marinho .hm-sub{font-size:clamp(15px,1.1vw,18px)}
.hero-marinho .hm-titulo span{display:block}   /* a segunda frase sempre na própria linha */
/* 27/09: a definição do produto vai para a pílula (ref. Agenta); o título carrega a ideia */
.hm-pilula{display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,3vh,28px);font-size:13px;font-weight:600;color:rgba(255,244,220,.82)}
.hm-pilula::before,.hm-pilula::after{content:'';width:clamp(28px,6vw,90px);height:1px;background:linear-gradient(90deg,rgba(255,244,220,0),rgba(255,244,220,.28))}
.hm-pilula::after{transform:scaleX(-1)}
.hm-pilula span{padding:6px 14px;border:1px solid rgba(255,244,220,.22);border-radius:999px;background:rgba(255,244,220,.05)}

/* LABORATÓRIO (28/09) · hero com foto: texto à esquerda, foto à direita com granulado (não espelhar: a borboleta inverteria) */
.hero-foto .hc-miolo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;align-items:center;gap:clamp(28px,4vw,64px)}
.hero-foto .hc-coluna{align-items:flex-start;text-align:left}
.hero-foto .hm-titulo,.hero-foto .hm-sub{margin-inline:0}
.hero-foto .hm-pilula{justify-content:flex-start}
.hero-foto .hm-pilula::before{display:none}
.hero-foto .hc-base{align-items:flex-start;width:100%}
.hero-foto .hc-caixa{align-self:flex-start}
.hero-foto .hm-fatos{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:8px}
.hm-foto{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:1672/941;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.7)}
.hm-foto img{display:block;width:100%;height:100%;object-fit:cover}
.hm-foto::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--grao);background-size:200px 200px;mix-blend-mode:overlay;opacity:.55}
@media(max-width:900px){
  .hero-foto .hc-miolo{grid-template-columns:1fr!important}
  .hm-foto{order:-1;border-radius:20px}
  .hero-foto .hc-coluna{align-items:center;text-align:center}
  .hero-foto .hm-pilula,.hero-foto .hm-fatos{justify-content:center;align-items:center}
  .hero-foto .hc-base,.hero-foto .hc-caixa{align-items:center;align-self:center}
}
@media(max-width:900px){.hero-foto .hm-pilula::before{display:block}}   /* centralizada: fio dos dois lados */

/* LABORATÓRIO (28/09) · foto em largura total: vira o fundo do hero; texto no pé, à esquerda, sobre um véu marinho */
.hero-foto-cheia{min-height:100svh;align-items:flex-end}
.hero-foto-cheia .hc-miolo{grid-template-columns:minmax(0,1fr)!important;position:static}
.hero-foto-cheia .hm-foto{position:absolute;inset:0;z-index:-1;border-radius:0;aspect-ratio:auto;box-shadow:none}
.hero-foto-cheia .hm-foto img{object-position:40% 30%}
.hero-foto-cheia .hm-foto::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,16,53,.55) 0,rgba(15,16,53,0) 22%),
             linear-gradient(0deg,rgba(15,16,53,.94) 0,rgba(15,16,53,.72) 30%,rgba(15,16,53,0) 62%),
             linear-gradient(90deg,rgba(15,16,53,.55) 0,rgba(15,16,53,0) 45%)}
.hero-foto-cheia .hm-foto::after{z-index:2}
.hero-foto-cheia::before{display:none}
.hero-foto-cheia .hc-coluna{max-width:620px;padding-bottom:clamp(8px,3vh,32px)}
.hero-foto-cheia .hm-pilula::after{display:none}
.hero-foto-cheia .hm-fatos{flex-direction:row;flex-wrap:wrap;gap:6px 22px}
@media(max-width:900px){
  .hero-foto-cheia{min-height:auto;align-items:stretch}
  .hero-foto-cheia .hm-foto{position:relative;inset:auto;z-index:0;order:-1;aspect-ratio:4/3.4;margin:0 -20px;border-radius:0}
  .hero-foto-cheia .hm-foto::before{background:linear-gradient(0deg,#0f1035 0,rgba(15,16,53,0) 38%),linear-gradient(180deg,rgba(15,16,53,.6) 0,rgba(15,16,53,0) 30%)}
  .hero-foto-cheia .hm-foto img{object-position:38% 40%}
  .hero-chat.hero-foto-cheia{padding-top:calc(var(--faixa-h) + var(--nav-h,90px))}
  .hero-foto-cheia .hc-coluna{margin-top:-40px;position:relative;max-width:none}
  .hero-foto-cheia .hm-pilula::before{display:none}
  .hero-foto-cheia .hm-fatos{flex-direction:column;align-items:center}
}
/* texto à direita (o rosto e o cartão ficam à esquerda da foto) */
@media(min-width:901px){
  .hero-foto-cheia .hc-miolo{justify-items:end}
  .hero-foto-cheia .hc-coluna{max-width:540px}
  .hero-foto-cheia .hm-foto img{object-position:0% 30%}
  .hero-foto-cheia .hm-foto::before{
    background:linear-gradient(180deg,rgba(15,16,53,.55) 0,rgba(15,16,53,0) 22%),
               linear-gradient(270deg,rgba(15,16,53,.95) 0,rgba(15,16,53,.85) 30%,rgba(15,16,53,.35) 50%,rgba(15,16,53,0) 62%),
               linear-gradient(0deg,rgba(15,16,53,.5) 0,rgba(15,16,53,0) 30%)}
}
/* 28/09 · "mais longe": no desktop o hero segue a proporção da foto (1672×941) em vez de 100svh — a foto aparece inteira, sem o corte que aproximava */
@media(min-width:901px){
  .hero-chat.hero-foto-cheia{min-height:0;height:calc(100vw * 9 / 16);max-height:none}
  .hero-foto-cheia .hm-foto img{object-position:50% 50%}
}
/* 28/09 · foto expandida 21:9 (ela no terço esquerdo, direita calma para o texto) */
@media(min-width:901px){
  .hero-chat.hero-foto-cheia{height:auto;min-height:max(calc(100vw * 1536 / 3584), 700px)}
  .hero-foto-cheia .hm-foto img{object-position:22% 50%}
}
@media(max-width:900px){.hero-foto-cheia .hm-foto img{object-position:18% 50%}}
@media(min-width:901px){   /* pé da foto derrete no marinho da onda seguinte (sem corte seco) */
  .hero-foto-cheia .hm-foto::before{
    background:linear-gradient(180deg,rgba(15,16,53,.55) 0,rgba(15,16,53,0) 20%),
               linear-gradient(270deg,rgba(15,16,53,.95) 0,rgba(15,16,53,.85) 30%,rgba(15,16,53,.35) 50%,rgba(15,16,53,0) 62%),
               linear-gradient(0deg,#0f1035 0,rgba(15,16,53,.6) 14%,rgba(15,16,53,0) 34%)}
}
@media(min-width:901px){.hero-chat.hero-foto-cheia{min-height:100svh}}   /* a foto cobre a primeira tela inteira */

/* ======================= LABORATÓRIO (28/09) · hero limpo + selos + faixa-ponte + CTAs ======================= */
/* a faixa saiu de cima da nav: nada mais desce --faixa-h */
:root{--faixa-h:0px}
@media(max-width:800px){:root{--faixa-h:0px}}

/* hero limpo, marinho liso, com holofote que segue o cursor (hero-holofote.js escreve --lx/--ly em px) */
.hero-limpo{--lx:50%;--ly:42%;--lr:460px}
.hero-limpo .hl-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(var(--lr) circle at var(--lx) var(--ly),rgba(236,74,140,.30),rgba(150,110,220,.14) 42%,rgba(15,16,53,0) 72%);
  transition:opacity .6s ease}
.hero-limpo.hl-perto .hl-luz{--lr:320px}
/* o pontilhado aparece em volta da luz */
.hero-limpo::before{background-image:radial-gradient(rgba(255,244,220,.26) 1px,transparent 1.5px)!important;
  -webkit-mask-image:radial-gradient(calc(var(--lr) * .9) circle at var(--lx) var(--ly),#000,transparent 75%)!important;
  mask-image:radial-gradient(calc(var(--lr) * .9) circle at var(--lx) var(--ly),#000,transparent 75%)!important}
.hero-limpo .hc-coluna{align-items:center;text-align:center}
.hero-limpo .hm-titulo{margin-inline:auto;font-size:clamp(38px,5vw,82px)}
.hero-limpo .hm-sub{margin-inline:auto;max-width:44ch}
.hero-limpo .hm-fatos{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:6px 22px}
.hero-limpo .hm-principal{box-shadow:0 16px 36px -14px rgba(236,74,140,.7);transition:box-shadow .35s ease,transform .35s var(--ease)}
.hero-limpo.hl-perto .hm-principal{box-shadow:0 0 0 6px rgba(236,74,140,.18),0 20px 44px -12px rgba(236,74,140,.85)}
@media(hover:none){.hero-limpo .hl-luz{animation:hl-respira 3.2s ease-in-out 3 alternate}}
@keyframes hl-respira{from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-limpo .hl-luz{animation:none;transition:none}}
body.motion-paused .hero-limpo .hl-luz{animation:none}
@media(max-width:800px){.hero-limpo .hm-fatos{flex-direction:column;align-items:center}.hero-limpo{--lr:300px}}

/* a caixa de chat vira o CTA do Como funciona */
.li-cta{margin-top:26px;padding-left:24px}
.li-cta p{margin:0;font-size:14px;font-weight:700;color:#b02360}
.li-cta .hc-caixa{width:min(420px,100%);margin-top:10px}
@media(max-width:800px){.li-cta{padding-left:0;text-align:center}.li-cta .hc-caixa{margin-inline:auto}}

/* prova e confiança */
.selos{background:#f4f0f7;padding:clamp(40px,7vh,80px) 0 clamp(56px,9vh,100px)}
.selos-titulo{margin:0 0 clamp(24px,4vh,40px);text-align:center;font-size:clamp(28px,2.8vw,44px);font-weight:800;letter-spacing:-.03em;color:#0f1035}
.selos-titulo span{color:#e0447f}
.selos-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.selos-grade li{padding:26px 24px;border-radius:20px;background:#fff;border:1px solid #e7e3f3}
.selo-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fbe7f0;color:#b02360;margin-bottom:16px}
.selo-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9}
.selos-grade b{display:block;font-size:18px;font-weight:800;letter-spacing:-.015em;color:#0f1035}
.selos-grade p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#5f5680}
.selos-grade a{color:#b02360;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.selos-grade{grid-template-columns:1fr}}

/* CTA no fim do bento */
.bento-cta{display:flex;justify-content:center;margin-top:clamp(28px,5vh,48px)}

/* faixa-ponte: bento → tambor, duas linhas em sentidos opostos */
.faixa-ponte{background:#f4f0f7;padding:clamp(20px,4vh,40px) 0 clamp(40px,7vh,72px);overflow:hidden;display:grid;gap:12px}
.fp-linha{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.faixa-ponte .ft-trilho{display:flex;width:max-content;animation:hc-letreiro 90s linear infinite reverse}
.faixa-ponte .fp-volta .ft-trilho{animation-direction:normal;animation-duration:110s}
.faixa-ponte ul{list-style:none;margin:0;padding:0 12px 0 0;display:flex;gap:12px}
.faixa-ponte li{padding:12px 20px;border-radius:999px;background:#fff;border:1px solid #e7e3f3;font-size:clamp(14px,1.1vw,17px);font-weight:700;color:#0f1035;white-space:nowrap}
.faixa-ponte .fp-linha:first-child li:first-child{background:#0f1035;border-color:#0f1035;color:#fff4dc}
.faixa-ponte .fp-volta li{background:transparent;color:#5f5680}
.faixa-ponte:hover .ft-trilho{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.faixa-ponte .ft-trilho{animation:none}}
body.motion-paused .faixa-ponte .ft-trilho{animation-play-state:paused}

/* CTA na nav */
header.nav .nav-cta{background:#ec4a8c;color:#fff!important;margin-left:6px}
header.nav .nav-cta:hover{background:#b02360}
@media(max-width:800px){header.nav .nav-cta{display:none}}

/* CTA fixo no celular: aparece depois do hero, some no fechamento (cta-fixo.js) */
.cta-fixo{display:none}
@media(max-width:800px){
  .cta-fixo{display:flex;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;
    justify-content:center;align-items:center;min-height:54px;border-radius:999px;background:#ec4a8c;color:#fff;font-weight:700;font-size:15px;
    box-shadow:0 14px 30px -10px rgba(236,74,140,.7);transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .cta-fixo.visivel{transform:none}
}

/* LABORATÓRIO (28/09) · feto em wireframe revelado pelo halo (hero-holofote.js põe o repouso do halo no centro do vídeo).
   O vídeo é preto no fundo: mix-blend screen faz o preto sumir no marinho; a máscara radial mostra só onde a luz está. */
.com-bebe .hl-bebe{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(var(--lr) circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.75) 30%,transparent 68%);
  mask-image:radial-gradient(var(--lr) circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.75) 30%,transparent 68%)}
.com-bebe .hl-bebe video{position:absolute;right:clamp(0px,3vw,60px);top:50%;height:min(86%,760px);aspect-ratio:1000/900;width:auto;
  transform:translateY(-46%);mix-blend-mode:screen;opacity:.92;
  filter:sepia(.35) saturate(1.6) hue-rotate(285deg) brightness(1.08)}
.com-bebe{--lr:520px}
.com-bebe .hc-miolo{justify-items:start}
.com-bebe .hc-coluna{align-items:flex-start;text-align:left;max-width:640px}
.com-bebe .hm-titulo,.com-bebe .hm-sub{margin-inline:0}
.com-bebe .hm-pilula{justify-content:flex-start}
.com-bebe .hm-pilula::before{display:none}
.com-bebe .hm-acoes,.com-bebe .hm-fatos{justify-content:flex-start}
.com-bebe .hm-fatos{flex-direction:column;align-items:flex-start;gap:8px}
@media(max-width:900px){
  .com-bebe{--lr:300px}
  .com-bebe .hl-bebe video{right:50%;top:calc(var(--nav-h,90px) - 10px);height:auto;width:min(92vw,420px);transform:translateX(50%)}
  .hero-chat.com-bebe{padding-top:calc(var(--nav-h,90px) + min(78vw,360px))}
  .com-bebe .hc-coluna{align-items:center;text-align:center;max-width:none}
  .com-bebe .hm-pilula,.com-bebe .hm-acoes{justify-content:center}
  .com-bebe .hm-pilula::before{display:block}
  .com-bebe .hm-fatos{align-items:center}
}
/* a mistura "screen" vai na camada mascarada inteira (dentro da máscara ela não enxerga o marinho) e o vídeo ganha bordas esfumadas */
.com-bebe .hl-bebe{mix-blend-mode:screen}
.com-bebe .hl-bebe video{mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
/* 28/09 · teste "sem o halo": o feto aparece inteiro o tempo todo; sem luz seguindo o cursor */
.sem-halo .hl-bebe{-webkit-mask-image:none;mask-image:none}
.sem-halo .hl-luz{display:none}

/* ===== LABORATÓRIO (28/09) · versão FUNDO CLARO do hero com o feto (classe .hero-claro) + nav de volta ao ink/wordmark original =====
   o vídeo é branco sobre preto: invertido vira traço escuro sobre branco, e "multiply" faz o branco sumir no papel */
.hero-chat.hero-claro{background:#f4f0f7;color:#0f1035}
.hero-claro::after{opacity:.18}                                   /* granulado mais leve no claro */
.hero-claro::before{background-image:radial-gradient(rgba(15,16,53,.12) 1px,transparent 1.5px)!important;
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 50%,transparent 100%)!important}
.hero-claro .hl-bebe{mix-blend-mode:multiply}
.hero-claro .hl-bebe video{filter:invert(1) sepia(.5) saturate(2.4) hue-rotate(275deg) brightness(1.02) contrast(1.05);opacity:.95}
.hero-claro .hm-titulo{color:#0f1035}
.hero-claro .hm-titulo span{color:#e0447f}
.hero-claro .hm-sub{color:#4b4468}
.hero-claro .hm-pilula{color:#3b3566}
.hero-claro .hm-pilula span{border-color:rgba(15,16,53,.16);background:rgba(255,255,255,.6)}
.hero-claro .hm-pilula::before,.hero-claro .hm-pilula::after{background:linear-gradient(90deg,rgba(15,16,53,0),rgba(15,16,53,.2))}
.hero-claro .hm-secundario{color:#0f1035;border-bottom-color:rgba(15,16,53,.3)}
.hero-claro .hm-fatos{color:#5f5680}
.hero-claro ~ .onda-marinho{display:none}                         /* sem o marinho, a onda marinho→papel não tem o que desfazer */
/* nav sobre o claro: links em ink, como no original */
header.nav{color:var(--ink)}
header.nav .nav-middle a,header.nav .nav-dropdown-trigger,header.nav .login{color:var(--ink)!important}
header.nav .nav-dropdown-trigger:hover,header.nav .nav-dropdown-trigger[aria-expanded=true]{color:#b02360!important}
/* claro, ajuste: traço lilás-marinho delicado em vez de massa escura */
.hero-claro .hl-bebe video{filter:invert(1) grayscale(1) brightness(1.18) contrast(1.15) sepia(.7) hue-rotate(205deg) saturate(2.2);opacity:.62}
/* 28/09 · título do hero ~22% menor e em 2 linhas ("O futuro do pré-natal / chegou antes do bebê.") */
.hero-limpo .hm-titulo{font-size:clamp(34px,3.9vw,64px);max-width:none}
.hero-limpo .hm-sub{font-size:clamp(15px,1.05vw,17px)}
@media(max-width:900px){.hero-limpo .hm-titulo{font-size:clamp(30px,8.4vw,40px)}}
/* 28/09 · textura de papel no hero claro: grão em "multiply" (no claro o "overlay" some) + fibras largas bem suaves */
:root{--papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.hero-claro::after{background-image:var(--grao),var(--papel)!important;background-size:240px 240px,420px 420px!important;
  mix-blend-mode:multiply!important;opacity:.16!important}
/* 28/09 · textura mais transparente e sumindo no pé do hero: o papel continua liso na segunda dobra, sem emenda */
.hero-claro::after{opacity:.08!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%)}
.hero-claro::after{display:none!important}   /* 28/09: textura retirada a pedido — o papel liso continua direto na segunda dobra */
/* comparativo ?hero=escuro (hero-holofote.js): nav creme sobre o marinho */
.nav-escura header.nav{color:#fff4dc}
.nav-escura header.nav .nav-middle a,.nav-escura header.nav .nav-dropdown-trigger,.nav-escura header.nav .login{color:#fff4dc!important}

/* 28/09 · hero da gestante no sofá é o escolhido: nav creme sobre a foto escurecida; CTA/fatos alinhados à esquerda da coluna de texto */
.hero-gestante ~ * header.nav,header.nav{color:#fff4dc}
header.nav .nav-middle a,header.nav .nav-dropdown-trigger,header.nav .login{color:#fff4dc!important}
header.nav .nav-dropdown-trigger:hover,header.nav .nav-dropdown-trigger[aria-expanded=true]{color:#fff!important}
.hero-gestante .hm-acoes{justify-content:flex-start}
.hero-gestante .hm-principal{box-shadow:0 16px 36px -14px rgba(236,74,140,.7)}
.hero-gestante .hm-titulo{font-size:clamp(34px,3.9vw,64px);max-width:none}
@media(max-width:900px){.hero-gestante .hm-acoes{justify-content:center}.hero-gestante .hm-titulo{font-size:clamp(30px,8.4vw,40px)}}

/* ===== LABORATÓRIO (28/09) · entrada animada do título: cada linha sobe de trás de uma máscara; depois o resto aparece ===== */
.hero-gestante .hm-titulo .ht-l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;color:#fff4dc}
.hero-gestante .hm-titulo .ht-l.ht-rosa{color:#f385b1}
.hero-gestante .hm-titulo .ht-l>span{display:block;color:inherit;animation:ht-sobe 1s cubic-bezier(.2,.8,.2,1) both}
.hero-gestante .hm-titulo .ht-rosa>span{animation-delay:.14s}
.hero-gestante :is(.hm-pilula,.hm-sub,.hm-acoes,.hm-fatos){animation:ht-aparece .8s ease both}
.hero-gestante .hm-pilula{animation-delay:.05s}
.hero-gestante .hm-sub{animation-delay:.5s}
.hero-gestante .hm-acoes{animation-delay:.65s}
.hero-gestante .hm-fatos{animation-delay:.8s}
@keyframes ht-sobe{from{transform:translateY(108%)}to{transform:none}}
@keyframes ht-aparece{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-gestante .hm-titulo .ht-l>span,.hero-gestante :is(.hm-pilula,.hm-sub,.hm-acoes,.hm-fatos){animation:none}}
body.motion-paused .hero-gestante .hm-titulo .ht-l>span,body.motion-paused .hero-gestante :is(.hm-pilula,.hm-sub,.hm-acoes,.hm-fatos){animation:none}

/* 28/09 · CTA do hero = "vidro" (escolhido entre 4 formatos): pílula translúcida com borda creme, seta num círculo rosa; no hover enche de rosa */
.hero-gestante .hm-principal{background:rgba(255,244,220,.1);color:#fff4dc;border:1.5px solid rgba(255,244,220,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-height:54px;padding:0 10px 0 24px;gap:16px;box-shadow:none;transition:background .3s,border-color .3s}
.hero-gestante .hm-principal .button-icon{width:36px;height:36px;background:#ec4a8c;color:#fff}
.hero-gestante .hm-principal:hover{background:#ec4a8c;border-color:#ec4a8c}

/* 28/09 · CORREÇÃO: a nav creme vazava para as outras páginas (profissionais.html etc. também usam este CSS)
   e para o menu suspenso (fundo branco). Padrão = ink; creme só na home, com o hero escuro; menu suspenso sempre ink. */
header.nav .nav-middle a,header.nav .nav-dropdown-trigger,header.nav .login{color:var(--ink)!important}
body:has(.hero-marinho) header.nav .nav-middle a,body:has(.hero-marinho) header.nav .nav-dropdown-trigger,body:has(.hero-marinho) header.nav .login{color:#fff4dc!important}
body:has(.hero-marinho) header.nav .nav-dropdown-trigger:hover,body:has(.hero-marinho) header.nav .nav-dropdown-trigger[aria-expanded=true]{color:#fff!important}
header.nav .nav-middle .nav-dropdown-menu a,body:has(.hero-marinho) header.nav .nav-middle .nav-dropdown-menu a{color:var(--ink)!important}
header.nav .nav-cta{color:#fff!important}

/* ======================= 28/09 · UNIFICAÇÃO: um mundo só, o da foto (quente) ======================= */
/* papel creme quente na home (a cor exata do fundo do vídeo do celular, recolorido); as outras páginas seguem com o papel antigo */
body:has(.hero-marinho){--paper:#f4f0f7;background:#f4f0f7}
/* a onda roxa saiu: esmaecimento curto do pé escuro da foto para o creme */
.hero-esmaece{height:clamp(90px,14vh,160px);margin-top:-1px;background:linear-gradient(180deg,#0f1035 0,#3a2a45 22%,#b89a9c 62%,#f4f0f7 100%)}
/* "Líria Intelligence" virou a etiqueta do Como funciona */
.li-kicker .li-marca{color:#0f1035}
.li-secao{padding-top:clamp(64px,10vh,120px)}
.li-corpo{margin-top:0}
/* tambor: frase de entrada no topo da banda, sobre o escuro */
.tunel-frase{position:absolute;top:clamp(84px,13vh,140px);left:0;right:0;z-index:6;margin:0;padding:0 20px;text-align:center;pointer-events:none;
  font-size:clamp(28px,3.4vw,54px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:#fff4dc;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.tunel-frase span{display:block;color:#f2a9c6}
.tunel-banda::before{content:'';position:absolute;left:0;right:0;top:0;height:40%;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,24,.85),rgba(8,8,24,0))}
/* fechamento: rosa menos saturado, o mesmo do cartão da borboleta na foto */
.hero-chat.hero-chat--fim{background:#dd6192}
.hero-esmaece{height:clamp(140px,20vh,220px);background:linear-gradient(180deg,#0f1035 0%,#2a2b52 18%,#6c6a88 45%,#b9b3c0 72%,#e9e3e2 90%,#f4f0f7 100%)}
/* 28/09 · TESTE: padrão de borboletas (Envato) tom sobre tom no fechamento rosa */
.hero-chat--fim{background-image:url(/site-assets/borboletas-rosa.svg)!important;background-size:560px 560px!important;background-repeat:repeat!important}
/* padrão numa camada própria: mais suave e surgindo aos poucos no topo (sem borda seca com a onda) */
.hero-chat--fim{background-image:none!important}
.hero-chat--fim::before{background-image:url(/site-assets/borboletas-rosa.svg)!important;background-size:560px 560px!important;opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%)!important}
.hero-chat--fim::before{opacity:.28}
.hero-chat.hero-chat--fim{margin-top:-2px}   /* sem fio entre a onda e o fechamento */
.onda-transicao.onda-fim svg{height:calc(100% + 4px)}   /* a borda de baixo do SVG não deixa o creme vazar num fio */
.hero-chat.hero-chat--fim{margin-top:0}   /* a sobreposição de 2px somava os dois granulados num fio claro */

/* ======================= 28/09 · HERO DA GESTANTE NO LADO CLARO (.hero-luz) =======================
   o véu da foto passa de marinho para o creme da página: texto em marinho/rosa, nav em ink com o wordmark original,
   e o pé da foto já termina no creme (o esmaecimento marinho→creme sai). Tirar .hero-luz volta ao marinho. */
.hero-chat.hero-luz{background:#f4f0f7;color:#0f1035}
.hero-luz .hm-foto::before{
  background:linear-gradient(180deg,rgba(248,243,240,.75) 0,rgba(248,243,240,0) 20%),
             linear-gradient(270deg,rgba(248,243,240,.97) 0,rgba(248,243,240,.9) 30%,rgba(248,243,240,.45) 50%,rgba(248,243,240,0) 64%),
             linear-gradient(0deg,#f4f0f7 0,rgba(248,243,240,.7) 14%,rgba(248,243,240,0) 34%)!important}
.hero-luz .hm-foto::after{mix-blend-mode:multiply;opacity:.12}
.hero-luz ~ .hero-esmaece{display:none}
.hero-luz .hm-titulo .ht-l{color:#0f1035}
.hero-luz .hm-titulo .ht-l.ht-rosa{color:#e0447f}
.hero-luz .hm-sub{color:#4b4468}
.hero-luz .hm-pilula{color:#3b3566}
.hero-luz .hm-pilula span{border-color:rgba(15,16,53,.16);background:rgba(255,255,255,.55)}
.hero-luz .hm-pilula::before,.hero-luz .hm-pilula::after{background:linear-gradient(90deg,rgba(15,16,53,0),rgba(15,16,53,.22))}
.hero-luz .hm-secundario{color:#0f1035;border-bottom-color:rgba(15,16,53,.3)}
.hero-luz .hm-fatos{color:#5f5680}
/* o CTA de vidro, versão clara */
.hero-luz .hm-principal{background:rgba(255,255,255,.55)!important;color:#0f1035!important;border-color:rgba(15,16,53,.2)!important}
.hero-luz .hm-principal:hover{background:#e0447f!important;border-color:#e0447f!important;color:#fff!important}
/* nav em ink sobre o hero claro (vence o creme de body:has(.hero-marinho)) */
body:has(.hero-luz) header.nav .nav-middle a,body:has(.hero-luz) header.nav .nav-dropdown-trigger,body:has(.hero-luz) header.nav .login{color:var(--ink)!important}
body:has(.hero-luz) header.nav .nav-dropdown-trigger:hover,body:has(.hero-luz) header.nav .nav-dropdown-trigger[aria-expanded=true]{color:#b02360!important}
body:has(.hero-luz) header.nav .nav-middle .nav-dropdown-menu a{color:var(--ink)!important}
body:has(.hero-luz) .menu-toggle span{background:var(--ink)}
@media(max-width:900px){
  .hero-luz .hm-foto::before{background:linear-gradient(0deg,#f4f0f7 0,rgba(248,243,240,0) 38%),linear-gradient(180deg,rgba(248,243,240,.7) 0,rgba(248,243,240,0) 30%)!important}
}
.hero-luz .hm-foto::after{display:none}   /* no véu claro o granulado escurecia o pé da foto e marcava a emenda com o vídeo */


/* 28/09 · transição hero → vídeo: a foto dissolve inteira no creme (esmaecimento mais longo, pé sólido)
   e o topo do palco do vídeo também desbota no creme — o celular "sobe" de dentro do papel, sem linha */
.hero-luz .hm-foto::before{
  background:linear-gradient(180deg,rgba(248,243,240,.75) 0,rgba(248,243,240,0) 20%),
             linear-gradient(270deg,rgba(248,243,240,.97) 0,rgba(248,243,240,.9) 30%,rgba(248,243,240,.45) 50%,rgba(248,243,240,0) 64%),
             linear-gradient(0deg,#f4f0f7 0,#f4f0f7 6%,rgba(248,243,240,.88) 16%,rgba(248,243,240,.5) 30%,rgba(248,243,240,.15) 42%,rgba(248,243,240,0) 52%)!important}
.mr-palco::before{content:'';position:absolute;left:0;right:0;top:0;height:22%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#f4f0f7 0,rgba(248,243,240,.85) 30%,rgba(248,243,240,0) 100%)}
.mr-palco{position:sticky}
/* o celular desce e o esmaecimento encurta: no 1º quadro o celular começa a 10% do topo do vídeo;
   com o vídeo ancorado no topo + 4vh abaixo, ele fica fora da faixa desbotada (o fundo do vídeo é o próprio creme) */
.mr-video{object-position:50% 0;transform:translateY(4vh)}
.mr-palco::before{height:8%;background:linear-gradient(180deg,#f4f0f7 0,rgba(248,243,240,0) 100%)}
@media(min-width:801px){.mr-tese{top:9vh;bottom:0}}   /* acompanha o vídeo, que desceu 4vh e ancorou no topo: as frases ficam na altura do celular */
/* a borda de cima do vídeo some por máscara (não por cor por cima): o fundo decodificado do vídeo varia de navegador
   para navegador (sai um pouco mais cinza que o #f4f0f7) e a borda reta virava uma faixa cinza */
.mr-palco::before{display:none}
.mr-video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%);mask-image:linear-gradient(180deg,transparent 0,#000 11%)}

/* 28/09 · a tese entra palavra por palavra, subindo de trás de uma máscara (mesma linguagem do título do hero):
   primeiro "Uma gestação não cabe em oito consultas.", depois a frase grande; rolando de volta, desce */
.mr-tese{opacity:1!important}
.mr-tese .mr-p{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.mr-tese .mr-p>span{display:inline-block;transform:translateY(112%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--b) * 320ms + var(--i) * 55ms)}
.mr-tese.aparece .mr-p>span{transform:none}
@media(prefers-reduced-motion:reduce){.mr-tese .mr-p>span{transition:none}}
body.motion-paused .mr-tese .mr-p>span{transition:none}

/* 28/09 · fita das funcionalidades dando a volta no celular do Como funciona (li-volta.js); os chips soltos saíram */
.li-cel{overflow:visible}
.li-cel svg.li-volta{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);z-index:0;
  overflow:visible;pointer-events:none;fill:none;stroke:none}
.li-cel svg.li-volta path{stroke:none;fill:none}
.li-cel svg.li-volta text,.li-cel svg.li-volta textPath,.li-cel svg.li-volta tspan{font-family:'Grift','Figtree',sans-serif!important;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;stroke:none}
.li-cel svg.li-volta .lv-item{fill:#5f5680}
.li-cel svg.li-volta .lv-sep{fill:#e0447f}
.li-palco .li-nota{margin-top:40px}
.bento-cta{margin-bottom:clamp(40px,7vh,72px)}
@media(max-width:800px){.li-cel svg.li-volta text,.li-cel svg.li-volta textPath,.li-cel svg.li-volta tspan{font-size:11px}}
/* fita em caixa normal (a lista inteira cabe numa volta e a emenda fecha certo) */
.li-cel svg.li-volta text,.li-cel svg.li-volta textPath,.li-cel svg.li-volta tspan{text-transform:none;letter-spacing:.01em;font-size:14px}
@media(max-width:800px){
  .li-cel svg.li-volta text,.li-cel svg.li-volta textPath,.li-cel svg.li-volta tspan{font-size:12px}
  .li-palco{margin-top:34px}
}

/* 28/09 · a fita saiu do Como funciona e foi para o celular da segunda dobra (li-volta.js): entra com o celular parado */
.mr-palco svg.mr-volta{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;fill:none;stroke:none;
  opacity:0;transition:opacity .8s ease}
.mr-tese.volta ~ svg.mr-volta{opacity:1}
.mr-palco svg.mr-volta path{stroke:none;fill:none}
.mr-palco svg.mr-volta text,.mr-palco svg.mr-volta textPath,.mr-palco svg.mr-volta tspan{font-family:'Grift','Figtree',sans-serif!important;
  font-size:14px;font-weight:700;letter-spacing:.01em;stroke:none}
.mr-palco svg.mr-volta .lv-item{fill:#5f5680}
.mr-palco svg.mr-volta .lv-sep{fill:#e0447f}
/* as frases da tese se afastam para dar lugar à fita */
@media(min-width:801px){.mr-tese{grid-template-columns:minmax(0,1fr) calc(330 * var(--mr-e) + clamp(150px,14vw,230px)) minmax(0,1fr)}}
@media(max-width:800px){.mr-palco svg.mr-volta text,.mr-palco svg.mr-volta textPath,.mr-palco svg.mr-volta tspan{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.mr-palco svg.mr-volta{transition:none}}
.mr-palco svg.mr-volta .mr-fecho circle{fill:#f4f0f7;stroke:#e0447f;stroke-width:1.5}
@media(max-width:800px){
  .mr-palco svg.mr-volta text,.mr-palco svg.mr-volta textPath,.mr-palco svg.mr-volta tspan{font-size:10px}
  .mr-tese b{font-size:clamp(22px,6.4vw,28px)!important}
  .mr-tese{padding-bottom:18px!important}
}

/* 28/09 · o vídeo do celular se ajusta SEMPRE pela altura (antes: "cover"): em janelas mais largas que 16:9 o pé do
   celular e a fita saíam por baixo. Em telas estreitas as laterais do vídeo ficam fora (como antes); em telas largas
   sobra creme dos lados e as bordas do vídeo esmaecem (o fundo dele é o próprio creme) */
.mockup-rolagem{--mr-e:calc(100svh / 1080)}
.mr-video{position:absolute;left:50%;top:0;height:100%;width:calc(100svh * 16 / 9);max-width:none;object-fit:fill;
  transform:translate(-50%,4vh);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 11%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect}
.mr-video{transform:translate(-50%,4vh) scale(var(--mr-z,1));transform-origin:50% 0}   /* --mr-z: mockup-rolagem.js (largura → altura) */
.mr-video{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%),linear-gradient(90deg,transparent 0,#000 var(--mr-lado,7%),#000 calc(100% - var(--mr-lado,7%)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 11%),linear-gradient(90deg,transparent 0,#000 var(--mr-lado,7%),#000 calc(100% - var(--mr-lado,7%)),transparent 100%)}

/* ======================= 28/09 · Como funciona em DEGRADÊ + cartões grandes (ref. melius.com) =======================
   sai do creme da dobra anterior, passa por pêssego → rosa → lilás → azul-claro e volta ao creme no fim da seção */
.li-secao{background:
  linear-gradient(180deg,#f4f0f7 0,rgba(248,243,240,0) 16%,rgba(248,243,240,0) 78%,#f4f0f7 100%),
  linear-gradient(115deg,#f9c7a4 0%,#f39aa8 26%,#e27bb0 44%,#b99be3 68%,#9dbcf2 100%)}
.li-secao .li-corpo{grid-template-columns:auto minmax(0,1fr);justify-content:stretch;align-items:start;gap:clamp(32px,4.5vw,72px)}
.li-secao .li-palco{position:sticky;top:calc(50vh - min(38vh,340px));align-self:start}
.li-secao .li-titulo{max-width:none;color:#0f1035}
.li-secao .li-titulo span:not(.li-sr){color:#fff}
.li-kicker{color:#0f1035}
.li-kicker .li-marca{color:#0f1035}
/* os quatro passos: cartões grandes de vidro, sempre abertos; o ativo fica marinho e troca a tela do celular */
.li-secao .li-itens{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:none}
.li-secao .li-item{height:100%;display:flex;flex-direction:column;gap:10px;padding:26px 26px 28px;border:1px solid rgba(255,255,255,.7);
  border-radius:22px;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -26px rgba(15,16,53,.45);transition:background .35s,color .35s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.li-secao .li-item:hover{transform:translateY(-3px)}
.li-secao .li-item[aria-pressed=true]{background:#0f1035;border-color:#0f1035;box-shadow:0 24px 50px -24px rgba(15,16,53,.7)}
.li-secao .li-item .li-num{color:#b02360}
.li-secao .li-item[aria-pressed=true] .li-num{color:#f2a9c6}
.li-secao .li-item b{margin:0;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.02em;color:#0f1035}
.li-secao .li-item[aria-pressed=true] b{color:#fff4dc}
.li-secao .li-desc{max-height:none!important;opacity:1!important;margin:0!important;font-size:15px;line-height:1.55;color:#3b3566}
.li-secao .li-item[aria-pressed=true] .li-desc{color:rgba(255,244,220,.78)}
.li-secao .li-nota{color:#3b3566}
.li-secao .li-cta{padding-left:0;margin-top:22px}
.li-secao .li-cta p{color:#0f1035}
/* "Tudo o que vem junto" sobre o fim do degradê */
.li-secao .li-grupos li:not(.li-grupo-destaque){background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.8)}
@media(max-width:1000px){.li-secao .li-itens{grid-template-columns:1fr}}
@media(max-width:800px){.li-secao .li-palco{position:static}.li-secao .li-item{padding:20px}}
@media(prefers-reduced-motion:reduce){.li-secao .li-item{transition:none}}
.li-secao .li-titulo span:not(.li-sr){color:#a3215c}   /* o branco sumia no lilás claro do degradê */
@media(max-width:800px){.li-secao .li-corpo{grid-template-columns:1fr;gap:22px}.li-secao .li-palco{position:static;justify-self:center}}   /* celular: uma coluna (a regra do degradê vencia a do celular) */
/* 28/09 · degradê do Como funciona na horizontal (igual às camadas da onda que o antecede) e sem o esmaecimento de cima */
.onda-transicao.onda-degrade{background:#f4f0f7;height:clamp(240px,40vh,440px)}
.li-secao{background:
  linear-gradient(180deg,rgba(248,243,240,0) 0,rgba(248,243,240,0) 80%,#f4f0f7 100%),
  linear-gradient(90deg,#f9c7a4 0%,#f39aa8 26%,#e27bb0 44%,#b99be3 68%,#9dbcf2 100%);margin-top:-1px}
/* 28/09 · CTA da conversa centralizado, caixa branca sobre o degradê */
.li-cta-centro{display:flex;justify-content:center;margin-top:clamp(36px,6vh,64px)}
.li-cta-centro .li-cta{margin:0;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.li-cta-centro .li-cta p{color:#0f1035;font-size:15px}
.li-cta-centro .hc-caixa{width:min(520px,calc(100vw - 40px));margin:12px auto 0;background:#fff;color:#3b3566;
  box-shadow:0 22px 50px -22px rgba(15,16,53,.45)}
.li-cta-centro .hc-enviar{background:#e0447f;color:#fff}
.li-cta-centro .hc-caixa:hover .hc-enviar{background:#b02360}
.li-cta-centro .hc-cursor{background:#e0447f}
/* 28/09 · onda do degradê mais sutil: faixa baixa e menos espaço antes do título */
.onda-transicao.onda-degrade{height:clamp(110px,15vh,170px)}
.li-secao{padding-top:clamp(28px,5vh,56px)}
/* 28/09 · fechamento: onda sutil (como a do degradê) e copy toda em creme */
.onda-transicao.onda-fim{height:clamp(110px,15vh,170px)}
.hero-chat.hero-chat--fim{padding-top:clamp(40px,7vh,80px)}
.hero-chat--fim .hc-titulo .hc-l-b,.hero-chat--fim .hc-titulo .hc-l-c,.hero-chat--fim .hc-titulo .hc-liria{color:#fff4dc!important}
.onda-transicao.onda-fim::after{display:none}   /* o granulado da onda e o do fechamento se sobrepunham num fio claro */
.hero-chat.hero-chat--fim::after{display:none}   /* sem granulado no fechamento: o grão clareava o rosa e marcava a emenda com a onda */

/* ======================= 28/09 · "TUDO O QUE VEM JUNTO" COMO CARROSSEL (li-junto.js) =======================
   cartões altos com lugar de mídia 4:5 em cima (placeholder até chegarem os assets em /site-assets/junto/),
   trilho com scroll-snap que sangra até a borda da tela, setas e pontos. Substitui a grade de 5 colunas. */
.li-junto .lj-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.li-junto .li-junto-titulo{margin:0}
.lj-setas{display:flex;gap:8px}
.lj-seta{width:44px;height:44px;border-radius:50%;border:1px solid rgba(15,16,53,.18);background:rgba(255,255,255,.7);color:#0f1035;display:grid;place-items:center;transition:background .2s,opacity .2s}
.lj-seta svg{width:18px;height:18px}
.lj-seta[data-dir="-1"] svg{transform:rotate(180deg)}
.lj-seta:hover{background:#0f1035;color:#fff4dc}
.lj-seta:disabled{opacity:.3;cursor:default;background:rgba(255,255,255,.7);color:#0f1035}
/* o trilho sangra para fora da .shell dos dois lados e volta com padding, para o último cartão encostar na borda */
.li-junto .li-grupos.lj-trilho{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 660px));
  scroll-padding-inline:max(20px,calc(50vw - 660px));padding-block:6px 10px}
.lj-trilho::-webkit-scrollbar{display:none}
.li-junto .li-grupos.lj-trilho li{flex:0 0 clamp(250px,26vw,320px);scroll-snap-align:start;display:flex;flex-direction:column;padding:0;overflow:hidden;
  border-radius:22px;transition:transform .4s var(--ease)}
.lj-midia{position:relative;aspect-ratio:4/5;background:#efe9f0;overflow:hidden}
.lj-midia>img,.lj-midia>video{width:100%;height:100%;object-fit:cover;display:block}
.li-grupo-destaque .lj-midia{background:#1b1c4a}
/* placeholder até chegar o asset: nome do arquivo previsto, tom sobre tom */
.lj-vazio{position:absolute;inset:0;display:grid;place-items:center;background:
  repeating-linear-gradient(135deg,rgba(15,16,53,.05) 0 10px,rgba(15,16,53,0) 10px 22px)}
.lj-vazio span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(15,16,53,.35);padding:6px 10px;border:1px dashed rgba(15,16,53,.25);border-radius:999px}
.li-grupo-destaque .lj-vazio{background:repeating-linear-gradient(135deg,rgba(255,244,220,.06) 0 10px,rgba(255,244,220,0) 10px 22px)}
.li-grupo-destaque .lj-vazio span{color:rgba(255,244,220,.5);border-color:rgba(255,244,220,.3)}
.lj-txt{padding:20px 20px 24px}
.li-junto .li-grupos.lj-trilho b{font-size:17px}
.lj-pontos{display:flex;justify-content:center;gap:8px;margin-top:18px}
.lj-pontos button{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(15,16,53,.18);transition:width .25s,background .25s}
.lj-pontos button[aria-selected=true]{width:24px;border-radius:999px;background:#0f1035}
@media(max-width:800px){
  .li-junto .lj-topo{flex-direction:column;align-items:center;gap:14px}
  .li-junto .li-grupos.lj-trilho{grid-template-columns:none}
  .li-junto .li-grupos.lj-trilho li{flex-basis:78vw;max-width:340px}
  .lj-setas{display:none}
}
@media(prefers-reduced-motion:reduce){.lj-trilho{scroll-behavior:auto}}

/* ======================= 28/09 · COMO FUNCIONA: PASSOS COMO CARROSSEL (um por vez, li-intelligence.js) =======================
   substitui a grade 2×2: o passo ativo ocupa a coluna inteira e é sempre o cartão marinho; os outros ficam empilhados
   atrás, invisíveis. Setas + pontos + barra de 6 s embaixo. O 5º passo é o inventário ("E tudo isso vem junto"). */
.li-secao .li-itens{display:grid;grid-template-columns:1fr;gap:0;max-width:none;touch-action:pan-y}
.li-secao .li-itens>li{grid-area:1/1;min-width:0}
.li-secao .li-item{opacity:0;transform:translateX(28px);pointer-events:none;visibility:hidden;
  padding:clamp(28px,3vw,44px) clamp(26px,3vw,44px) clamp(30px,3vw,46px);gap:14px;cursor:default;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .5s}
.li-secao .li-item[aria-pressed=true]{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.li-secao .li-item:hover{transform:none}
.li-secao .li-item b{font-size:clamp(24px,2.3vw,36px);max-width:18ch}
.li-secao .li-desc{font-size:clamp(15px,1.15vw,17px);max-width:52ch}
/* controles */
.li-controle{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:18px}
.li-seta{width:44px;height:44px;border-radius:50%;border:1px solid rgba(15,16,53,.18);background:rgba(255,255,255,.7);color:#0f1035;display:grid;place-items:center;transition:background .2s,color .2s}
.li-seta svg{width:18px;height:18px}
.li-seta[data-dir="-1"] svg{transform:rotate(180deg)}
.li-seta:hover{background:#0f1035;color:#fff4dc}
.li-pontos{display:flex;justify-content:center;gap:8px}
.li-pontos button{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(15,16,53,.22);transition:width .25s,background .25s}
.li-pontos button[aria-selected=true]{width:24px;border-radius:999px;background:#0f1035}
.li-barra{grid-column:1/-1;height:3px;border-radius:999px;background:rgba(15,16,53,.12);overflow:hidden;opacity:0;transition:opacity .3s}
.li-barra i{display:block;height:100%;width:0;background:#0f1035}
.li-barra.enche{opacity:1}
.li-barra.enche i{animation:li-enche 6s linear forwards}
.li-barra.pausa i{animation-play-state:paused}
@keyframes li-enche{to{width:100%}}
/* passo 5: os cinco cartões pequenos numa fileira (rola de lado se faltar espaço) */
.li-minis{display:flex;gap:10px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.li-minis::-webkit-scrollbar{display:none}
.li-mini{flex:0 0 clamp(88px,8.5vw,120px);display:flex;flex-direction:column;gap:6px}
.li-mini .lj-midia{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:rgba(255,244,220,.12);position:relative}
.li-mini .lj-midia>img,.li-mini .lj-midia>video{width:100%;height:100%;object-fit:cover;display:block}
.li-mini .lj-vazio{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,244,220,.07) 0 8px,rgba(255,244,220,0) 8px 18px)}
.li-mini .lj-vazio span{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,244,220,.5);padding:4px 7px;border:1px dashed rgba(255,244,220,.3);border-radius:999px}
.li-mini-nome{font-size:11.5px;font-weight:700;line-height:1.25;color:#fff4dc}
@media(max-width:800px){
  .li-secao .li-item{padding:22px 20px 26px}
  .li-controle{margin-top:14px}
  .li-mini{flex-basis:96px}
}
@media(prefers-reduced-motion:reduce){.li-secao .li-item{transition:none}.li-barra.enche i{animation:none;width:100%}}

/* 28/09 · o degradê do Como funciona estava pesado: lavado com creme (fica 28% da cor). A onda que o antecede
   recebe a mesma lavagem, para a emenda continuar invisível. Para mais leve, baixar os dois números juntos. */
.li-secao{background:
  linear-gradient(180deg,rgba(248,243,240,0) 0,rgba(248,243,240,0) 80%,#f4f0f7 100%),
  linear-gradient(180deg,rgba(248,243,240,.72),rgba(248,243,240,.72)),
  linear-gradient(90deg,#f9c7a4 0%,#f39aa8 26%,#e27bb0 44%,#b99be3 68%,#9dbcf2 100%)}
.onda-transicao.onda-degrade svg{opacity:.28}

/* ======================= 28/09 · COMO FUNCIONA: GRADE EDITORIAL GUIADA POR MÍDIA (ref. waverunmedia.com) =======================
   creme limpo, sem cartão/vidro/degradê. Bloco 1 em 16:9 na largura toda (o celular deitado sobre um rosa pálido),
   2 e 3 em 4:3 lado a lado, 4 em 4:3 deslocado à direita. Texto embaixo da mídia. Hover: zoom de 3,5% em 700 ms.
   Revelação por recorte (.visto, como-funciona.js). Raio pequeno (14px) para não brigar com o resto do site. */
.cf-secao{position:relative;background:#f4f0f7;color:#0f1035;padding:clamp(72px,11vh,140px) 0 clamp(56px,9vh,110px)}
.cf-topo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px;margin-bottom:clamp(40px,6vh,72px)}
.cf-titulo{margin:0;max-width:14ch;font-size:clamp(40px,5.4vw,88px);font-weight:800;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.cf-titulo span{color:#e0447f}
.cf-sub{margin:0 0 .35em;max-width:30ch;font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:#5f5680;text-wrap:balance}
.cf-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(56px,8vh,104px) 24px}
.cf-bloco{min-width:0}
.cf-b1{grid-column:1/-1}
.cf-b2{grid-column:1/7}
.cf-b3{grid-column:7/-1}
.cf-b4{grid-column:5/-1}
.cf-midia{position:relative;margin:0;overflow:hidden;border-radius:14px;background:#efe7ee;aspect-ratio:4/3}
.cf-b1 .cf-midia{aspect-ratio:16/9}
.cf-midia>img,.cf-midia>video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform .85s cubic-bezier(.22,1,.36,1)}
.cf-bloco.visto .cf-midia>img,.cf-bloco.visto .cf-midia>video{transform:scale(1)}
.cf-bloco:hover .cf-midia>img,.cf-bloco:hover .cf-midia>video{transform:scale(1.035);transition-duration:.7s}
/* revelação por recorte, de baixo para cima */
.cf-bloco .cf-midia{clip-path:inset(12% 0 0 0 round 14px);transition:clip-path .9s cubic-bezier(.22,1,.36,1)}
.cf-bloco.visto .cf-midia{clip-path:inset(0 0 0 0 round 14px)}
.cf-txt{opacity:0;transform:translateY(14px);transition:opacity .6s ease .25s,transform .7s cubic-bezier(.22,1,.36,1) .25s}
.cf-bloco.visto .cf-txt{opacity:1;transform:none}
/* bloco 1: o celular deitado sobre um rosa pálido, cortado embaixo */
.cf-midia-cel{background:linear-gradient(135deg,#fbe7f0,#f6dbe8 60%,#efd6ea)}
.cf-midia-cel .li-cel{position:absolute;left:50%;top:9%;height:118%;aspect-ratio:790/1627;transform:translateX(-50%) rotate(-6deg);transform-origin:50% 0;margin:0}
.cf-midia-cel .li-cel .li-moldura{filter:drop-shadow(0 30px 40px rgba(15,16,53,.25))}
.cf-midia-cel .li-nota{position:absolute;right:18px;bottom:14px;margin:0;font-size:11.5px;color:#7a6f8f}
.cf-txt{margin-top:18px;display:grid;gap:8px}
.cf-num{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b02360}
.cf-txt h3{margin:0;font-size:clamp(22px,2.1vw,32px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#0f1035;text-wrap:balance}
.cf-txt p{margin:0;max-width:44ch;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:#4b4468}
.cf-b1 .cf-txt{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:32px}
.cf-b1 .cf-num{grid-column:1/-1}
.cf-b1 .cf-txt h3{font-size:clamp(26px,2.8vw,44px);max-width:12ch}
.cf-junto{margin:clamp(48px,7vh,88px) 0 0;padding-top:20px;border-top:1px solid rgba(15,16,53,.14);font-size:14px;line-height:1.7;color:#5f5680;max-width:80ch}
.cf-junto b{color:#0f1035;font-weight:700}
.cf-secao .li-cta-centro{margin-top:clamp(48px,7vh,80px)}
@media(max-width:900px){
  .cf-topo{grid-template-columns:1fr}
  .cf-b2,.cf-b3,.cf-b4{grid-column:1/-1}
  .cf-grade{gap:48px 16px}
  .cf-b1 .cf-midia{aspect-ratio:4/5}
  .cf-midia-cel .li-cel{top:8%;height:112%;transform:translateX(-50%) rotate(-4deg)}
  .cf-b1 .cf-txt{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cf-bloco .cf-midia,.cf-txt,.cf-midia>img,.cf-midia>video{transition:none;clip-path:none;opacity:1;transform:none}}
body.motion-paused .cf-bloco .cf-midia{clip-path:inset(0 0 0 0 round 14px)}
body.motion-paused .cf-txt{opacity:1;transform:none}
/* bloco 5 · a lista completa, sem mídia: título à esquerda, cinco colunas editoriais à direita com fio no topo */
.cf-b5{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 48px;align-items:start;padding-top:clamp(28px,4vh,44px);border-top:1px solid rgba(15,16,53,.14)}
.cf-b5 .cf-txt{margin-top:0}
.cf-b5 .cf-txt h3{font-size:clamp(26px,2.8vw,44px);max-width:12ch}
.cf-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.cf-grupo h4{margin:0 0 10px;padding-top:12px;border-top:1px solid rgba(15,16,53,.35);font-size:13px;font-weight:700;letter-spacing:.04em;color:#0f1035}
.cf-grupo ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cf-grupo li{font-size:14.5px;line-height:1.4;color:#4b4468}
.cf-grupo:nth-child(4) h4{color:#b02360;border-top-color:#e0447f}
@media(max-width:1100px){.cf-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.cf-b5{grid-template-columns:1fr;gap:24px}}
@media(max-width:520px){.cf-lista{grid-template-columns:1fr;gap:20px}}
/* bloco 4 · a mídia é a caixa de conversa, centrada sobre um creme mais escuro */
.cf-midia-chat{display:grid;place-items:center;align-content:center;gap:14px;padding:24px;background:linear-gradient(160deg,#f1e8ec,#ead9e3)}
.cf-chat-etq{font-size:14px;font-weight:700;color:#0f1035}
.cf-midia-chat .hc-caixa{margin:0;width:min(440px,100%);background:#fff;color:#3b3566;box-shadow:0 22px 50px -22px rgba(15,16,53,.45)}
.cf-midia-chat .hc-enviar{background:#e0447f;color:#fff}
.cf-midia-chat .hc-caixa:hover .hc-enviar{background:#b02360}
.cf-midia-chat .hc-cursor{background:#e0447f}
.cf-b4:hover .cf-midia-chat{transform:none}
/* bloco 4 · o texto ocupa o vão à esquerda do cartão (antes ficava embaixo, com o vão vazio) */
.cf-b4{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 48px;align-items:end}
.cf-b4 .cf-txt{order:-1;margin-top:0;padding-bottom:8px}
.cf-b4 .cf-txt h3{font-size:clamp(26px,2.8vw,44px);max-width:12ch}
@media(max-width:900px){.cf-b4{grid-template-columns:1fr;gap:18px}.cf-b4 .cf-txt{order:1}}
.cf-b4{align-items:center}   /* texto centrado na altura do cartão, não colado na base */

/* ======================= 28/09 · PASSOS 2–5 EM FILEIRA QUE ABRE COM O MOUSE (ref. waverunmedia) =======================
   quatro painéis lado a lado; o que está sob o cursor (ou aberto por toque, .aberto) cresce e mostra o parágrafo,
   os outros encolhem. Altura fixa da mídia. No celular (≤900px) viram uma pilha, tudo visível. */
.cf-fila-li{grid-column:1/-1}
.cf-fila{display:flex;gap:16px;align-items:flex-start}
.cf-painel{flex:1 1 0;min-width:0;transition:flex .75s cubic-bezier(.22,1,.36,1)}
.cf-fila:has(.cf-painel:hover,.cf-painel.aberto,.cf-painel:focus-within) .cf-painel{flex-grow:.72}
.cf-painel:hover,.cf-painel.aberto,.cf-painel:focus-within{flex-grow:2.6!important}
.cf-painel .cf-midia{aspect-ratio:auto;height:clamp(380px,56vh,620px)}
.cf-painel .cf-midia>img{transform:scale(1.04)}
.cf-painel:hover .cf-midia>img,.cf-painel.aberto .cf-midia>img{transform:scale(1)}
.cf-painel .cf-txt{margin-top:16px}
.cf-painel .cf-txt h3{font-size:clamp(20px,1.8vw,28px);max-width:none}
.cf-painel .cf-txt p{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.cf-painel:hover .cf-txt p,.cf-painel.aberto .cf-txt p,.cf-painel:focus-within .cf-txt p{max-height:12em;opacity:1;transition-delay:.15s}
/* painel 4: a caixa de conversa encolhe junto (só o símbolo e a seta quando fechado) */
.cf-painel .cf-midia-chat{padding:18px}
.cf-painel .cf-midia-chat .hc-caixa{width:min(440px,100%)}
.cf-painel .cf-chat-etq{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* painel 5: a lista sobre marinho; fechado mostra só os cinco títulos, aberto mostra os itens em duas colunas */
.cf-midia-lista{background:#0f1035;color:#fff4dc;padding:clamp(18px,2vw,28px);display:block;overflow:auto;scrollbar-width:none}
.cf-midia-lista::-webkit-scrollbar{display:none}
.cf-midia-lista .cf-lista{grid-template-columns:1fr;gap:14px}
.cf-painel:hover .cf-midia-lista .cf-lista,.cf-painel.aberto .cf-midia-lista .cf-lista,.cf-painel:focus-within .cf-midia-lista .cf-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.cf-midia-lista .cf-grupo h4{color:#fff4dc;border-top-color:rgba(255,244,220,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-midia-lista .cf-grupo:nth-child(4) h4{color:#f2a9c6;border-top-color:#e0447f}
.cf-midia-lista .cf-grupo li{color:rgba(255,244,220,.78);font-size:13.5px}
.cf-midia-lista .cf-grupo ul{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.cf-painel:hover .cf-midia-lista .cf-grupo ul,.cf-painel.aberto .cf-midia-lista .cf-grupo ul,.cf-painel:focus-within .cf-midia-lista .cf-grupo ul{max-height:16em;opacity:1;transition-delay:.15s}
@media(max-width:900px){
  .cf-fila{flex-direction:column;gap:40px}
  .cf-painel,.cf-fila:has(.cf-painel:hover) .cf-painel{flex:none!important;width:100%}
  .cf-painel .cf-midia{height:auto;aspect-ratio:4/3}
  .cf-painel .cf-txt p,.cf-midia-lista .cf-grupo ul{max-height:none;opacity:1}
  .cf-midia-lista .cf-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.cf-midia-lista .cf-lista{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cf-painel,.cf-painel .cf-txt p,.cf-midia-lista .cf-grupo ul{transition:none}}
/* cinco painéis na fileira: o aberto cresce um pouco menos, para os fechados não virarem fios */
.cf-painel:hover,.cf-painel.aberto,.cf-painel:focus-within{flex-grow:2.3!important}
.cf-fila:has(.cf-painel:hover,.cf-painel.aberto,.cf-painel:focus-within) .cf-painel{flex-grow:.8}

/* ======================= 28/09 · CONVERSÃO: itens 4, 5 e 6 ======================= */
/* 4 · selos + controle numa seção só: quatro cartões */
.selos-grade{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.selos-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.selos-grade{grid-template-columns:1fr}}
/* 5 · fechamento: botão primeiro; QR só no desktop */
.hero-chat--fim .baixar-btn{margin-top:0;margin-bottom:22px}
@media(max-width:900px){.hero-chat--fim .qr-card{display:none}.hero-chat--fim .baixar-btn{margin-bottom:0}}
/* 6 · planos sempre abertos, um cartão só */
.planos-corpo{grid-template-rows:1fr;transition:none}
.planos-grade{grid-template-columns:minmax(0,720px)}
/* o celular deitado é só demonstração: sem roda/toque, senão a roda do mouse rola a lista de dentro e o cartão fica "costurado" na borda */
.cf-midia-cel .li-app{pointer-events:none}
/* 28/09 · a fileira sangra até as bordas da tela (como no waverun) e os painéis ficam mais altos */
.cf-fila{margin-inline:calc(50% - 50vw);padding-inline:clamp(20px,2.5vw,40px);gap:14px}
.cf-painel .cf-midia{height:clamp(480px,74vh,780px)}
.cf-painel .cf-txt h3{font-size:clamp(22px,2vw,32px)}
.cf-painel .cf-txt{padding-right:12px}
@media(max-width:900px){.cf-fila{margin-inline:0;padding-inline:0}.cf-painel .cf-midia{height:auto}}
/* planos: o cartão do profissional ao lado do plano gratuito */
.planos-grade{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.plano-prof{background:#fbe7f0;border-color:#f2d2dc;display:flex;flex-direction:column}
.plano-prof .plano-etq{color:#b02360;background:rgba(176,35,96,.1)}
.plano-prof p{font:400 15px/1.6 'DM Sans',sans-serif;color:#4b4468;margin:0 0 22px}
.plano-prof .button{margin-top:auto}
@media(max-width:900px){.planos-grade{grid-template-columns:1fr}}
/* 28/09 · tambor: a frase de entrada comia o topo do retrato; o retrato desce e a frase sobe um pouco */
.tunel-frase{top:clamp(56px,9vh,110px)}
.tunel-banda .tec-cuida{margin-top:clamp(140px,24vh,300px)}   /* centrado pela grade: desce metade disso */
@media(max-width:900px){.tunel-banda .tec-cuida{margin-top:120px}}
/* 28/09 · fechamento sem onda: o rosa sobe como o último cartão da página, com cantos superiores grandes sobre o creme */
.hero-chat.hero-chat--fim{border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;margin-top:clamp(24px,4vh,48px)}
/* 28/09 · rosa do fechamento lavado (era #dd6192, "choque"); com o fundo mais claro, o título volta ao marinho para manter contraste */
.hero-chat.hero-chat--fim{background:#e48aa6}
.hero-chat--fim .hc-titulo .hc-l-b,.hero-chat--fim .hc-titulo .hc-l-c,.hero-chat--fim .hc-titulo .hc-liria{color:#0f1035!important}
.hero-chat--fim::before{opacity:.3}

/* ======================= 28/09 · HERO CLEAN (healthtech): creme limpo, tudo centrado, sem foto ======================= */
.hero-chat.hero-clean{min-height:0;padding:calc(var(--nav-h,116px) + clamp(48px,9vh,110px)) 0 clamp(56px,9vh,100px);background:#f4f0f7;align-items:stretch}
.hero-clean .hc-miolo{grid-template-columns:1fr!important;justify-items:center;position:static}
.hero-clean .hc-coluna{max-width:760px;align-items:center;text-align:center;padding:0;margin:0}
.hero-clean .hm-pilula{justify-content:center}
.hero-clean .hm-pilula::before,.hero-clean .hm-pilula::after{display:none}
.hero-clean .hm-pilula span{background:#fff;border:1px solid rgba(15,16,53,.12);box-shadow:0 8px 24px -16px rgba(15,16,53,.35)}
.hero-clean .hm-titulo{max-width:none;font-size:clamp(38px,5.4vw,84px);line-height:1;letter-spacing:-.045em}
.hero-clean .hm-sub{margin-inline:auto;max-width:44ch;font-size:clamp(16px,1.3vw,20px);color:#4b4468}
.hero-clean .hm-acoes{justify-content:center}
.hero-clean .hm-principal{background:#0f1035!important;color:#fff!important;border-color:#0f1035!important;box-shadow:0 18px 40px -18px rgba(15,16,53,.5)}
.hero-clean .hm-principal .button-icon{background:#e0447f}
.hero-clean .hm-principal:hover{background:#e0447f!important;border-color:#e0447f!important}
.hero-clean .hm-fatos{justify-content:center;flex-direction:row;flex-wrap:wrap;gap:8px 22px;color:#5f5680}
@media(max-width:900px){
  .hero-chat.hero-clean{padding-top:calc(var(--nav-h,90px) + 24px)}
  .hero-clean .hm-titulo{font-size:clamp(32px,9vw,44px)}
  .hero-clean .hm-fatos{flex-direction:column;gap:6px}
}
/* 28/09 · hero clean: fonte ~15% menor e os pontinhos de fundo de volta (esmaecem para o pé, onde o celular sobe) */
.hero-clean .hm-titulo{font-size:clamp(34px,4.6vw,72px)}
.hero-clean .hm-sub{font-size:clamp(15px,1.15vw,18px)}
.hero-chat.hero-clean::before{display:block;content:'';background-image:radial-gradient(rgba(15,16,53,.16) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 30%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 80% at 50% 30%,#000 30%,transparent 100%)}
@media(max-width:900px){.hero-clean .hm-titulo{font-size:clamp(30px,8vw,40px)}}
/* 05/10 · hero clean, desktop: respiro só no miolo (selo→título 32 · título→subtítulo 38 · subtítulo→CTA 32 · CTA→fatos 30, medidos no olho)
   e o subtítulo em 2 linhas, quebrando depois de "tempo real," (o <br> tem espaço antes e some no celular) */
@media(min-width:801px){
  .hero-clean .hm-pilula{margin-bottom:36px}
  .hero-clean .hm-sub{max-width:44em;margin-top:41px}
  .hero-clean .hm-acoes{margin-top:29px}
  .hero-clean .hm-fatos{margin-top:30px}
}
@media(max-width:800px){.hero-clean .hm-sub br{display:none}}

/* ======================= 28/09 · MOBILE ======================= */
/* painéis do Como funciona revelam um a um */
.cf-painel.visto .cf-txt{opacity:1;transform:none}
.cf-painel.visto .cf-midia{clip-path:inset(0 0 0 0 round 14px)}
.cf-painel.visto .cf-midia>img{transform:scale(1)}
/* rodapé: Instagram */
.footer-ig{display:inline-flex;align-items:center;gap:8px}
.footer-ig svg{width:18px;height:18px}
.mr-estatico{display:none}
@media(max-width:800px){
  /* vídeo com rolagem sai; celular estático com a tese em cima */
  .mockup-rolagem{height:auto!important;padding:8px 0 40px}
  .mr-palco{position:static!important;height:auto!important;overflow:visible;display:grid;gap:22px;justify-items:center}
  .mr-video,.mr-palco svg.mr-volta,.mr-palco::before{display:none!important}
  .mr-tese{position:static!important;inset:auto;padding:0 20px!important;clip-path:none!important;opacity:1!important;transform:none!important;justify-content:center;text-align:center}
  .mr-tese .mr-abertura,.mr-tese b{opacity:1!important;transform:none!important;clip-path:none!important}
  .mr-estatico{display:block;width:min(66%,280px);height:auto;filter:drop-shadow(0 24px 34px rgba(15,16,53,.22))}
  /* hero: menos pé, o celular já aparece na primeira tela */
  .hero-chat.hero-clean{padding-bottom:28px}
}
/* rodapé: só o ícone do Instagram, ao lado do nome, no canto esquerdo */
.footer-marca{display:inline-flex;align-items:center;gap:14px}
.footer-ig{color:#f2eefc;opacity:.85;transition:opacity .2s}
.footer-ig:hover{opacity:1}
.footer-ig svg{width:18px;height:18px}
/* rodapé: ícone do Instagram maior, em cima do nome */
.footer-marca{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-ig svg{width:30px;height:30px;stroke-width:1.5}
/* 28/09 · a nota "Demonstração com dados fictícios" cobria o celular no mobile: fica na vertical, encostada na borda direita (desktop e celular) */
.cf-midia-cel .li-nota{writing-mode:vertical-rl;transform:rotate(180deg);right:12px;top:16px;bottom:auto;font-size:10.5px;letter-spacing:.04em;white-space:nowrap}
/* 28/09 · recorte da tela do celular girado sem serrilhado/folga (Safari e Chrome no Windows) */
.cf-midia-cel .li-tela{-webkit-mask-image:-webkit-radial-gradient(#fff,#000);isolation:isolate;transform:translateZ(0);background:#0f1035}
.cf-midia-cel .li-cel{backface-visibility:hidden;will-change:transform}

/* 28/09 · FUNCIONALIDADES numa faixa própria, logo abaixo da jornada (saiu do painel 6, que virou o desfecho com o bebê).
   Reaproveita .cf-lista/.cf-grupo (versão clara). Cinco grupos = cinco colunas no desktop; 3, 2 e 1 conforme a largura. */
.func-faixa{margin-top:clamp(56px,9vh,110px);padding-top:clamp(28px,4vh,44px);border-top:1px solid rgba(15,16,53,.14)}
.func-topo{display:grid;gap:8px;margin-bottom:clamp(24px,3.5vh,40px)}
.func-topo h3{margin:0;font-size:clamp(26px,2.8vw,44px);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:#0f1035}
.func-topo p{margin:0;max-width:44ch;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:#4b4468}
.func-lista{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 28px}
@media(max-width:1100px){.func-lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.func-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}}
@media(max-width:520px){.func-lista{grid-template-columns:1fr;gap:18px}}

/* 28/09 · FUNCIONALIDADES em seis cartões (3×2): ícone, nome do grupo e os itens em uma frase.
   Mesmos 24 itens de ato1-cel.js GRUPOS; "Acompanhamento clínico" e "O dia a dia" foram redistribuídos em
   "Consultas e exames", "Registros em casa" e "Rotina" só para fechar a grade. Etiquetas e colunas foram rejeitadas. */
.func-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.func-cards li{background:#fff;border:1px solid rgba(15,16,53,.08);border-radius:20px;padding:clamp(20px,2vw,28px);display:grid;gap:10px;align-content:start;
  box-shadow:0 1px 2px rgba(15,16,53,.04);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.func-cards li:hover{transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(15,16,53,.28)}
.func-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fbe4ec;color:#c2296a;margin-bottom:4px}
.func-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.func-cards h4{margin:0;font-size:clamp(17px,1.35vw,20px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#0f1035}
.func-cards p{margin:0;font-size:14.5px;line-height:1.55;color:#4b4468}
.func-cards .func-li{background:#0f1035;border-color:#0f1035;color:#fff4dc}
.func-cards .func-li h4{color:#fff4dc}
.func-cards .func-li p{color:rgba(255,244,220,.78)}
.func-cards .func-li .func-ic{background:rgba(224,68,127,.22);color:#f2a9c6}
@media(max-width:900px){.func-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:560px){.func-cards{grid-template-columns:1fr}.func-cards li{padding:18px 18px 20px}}

/* 28/09 · CONSTELAÇÃO das funcionalidades: núcleo (Líria Intelligence) no centro, cinco satélites em pentágono,
   fios pontilhados desenhados por como-funciona.js (posições --x/--y em % do palco). Substitui a grade 3×2. */
.func-orbita{position:relative;height:clamp(620px,74vh,780px);margin-top:8px;margin-bottom:clamp(24px,4vh,48px)}
.func-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.func-fios line{stroke:rgba(224,68,127,.6);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;animation:func-fluxo 2.2s linear infinite}
@keyframes func-fluxo{to{stroke-dashoffset:-18}}
.func-nucleo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(300px,34vw);padding:26px 26px 28px;border-radius:26px;
  background:#0f1035;color:#fff4dc;display:grid;gap:10px;justify-items:center;text-align:center;box-shadow:0 30px 60px -30px rgba(15,16,53,.55)}
.func-nucleo::before,.func-nucleo::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px dashed rgba(224,68,127,.35)}
.func-nucleo::before{width:150%;height:150%;animation:func-gira 60s linear infinite}
.func-nucleo::after{width:118%;height:118%;border-style:solid;border-color:rgba(224,68,127,.16)}
@keyframes func-gira{to{transform:translate(-50%,-50%) rotate(360deg)}}
.func-nucleo .func-borboleta{width:38px;height:30px;display:block;overflow:visible}
.func-nucleo h4{margin:0;font-size:clamp(19px,1.6vw,24px);font-weight:800;letter-spacing:-.02em;color:#fff4dc}
.func-nucleo p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,244,220,.78);max-width:28ch}
.func-sat{list-style:none;margin:0;padding:0}
.func-sat li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:min(250px,24vw);padding:18px 18px 20px;border-radius:18px;
  background:#fff;border:1px solid rgba(15,16,53,.08);box-shadow:0 1px 2px rgba(15,16,53,.04);display:grid;gap:8px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.func-sat li:hover{transform:translate(-50%,-50%) translateY(-3px);box-shadow:0 14px 34px -18px rgba(15,16,53,.28)}
.func-sat .func-ic{width:36px;height:36px;border-radius:10px}
.func-sat .func-ic svg{width:18px;height:18px}
.func-sat h4{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#0f1035}
.func-sat p{margin:0;font-size:13.5px;line-height:1.5;color:#4b4468}
/* 29/09 · CELULAR: a constelação continua constelação (a pilha foi rejeitada). Palco mais alto e estreito, satélites menores em pentágono,
   feixes desenhados por como-funciona.js em qualquer largura. */
@media(max-width:1000px){
  .func-orbita{height:clamp(680px,185vw,820px);margin-inline:calc(50% - 50vw);padding-inline:6px}
  .func-nucleo{width:min(46vw,190px);padding:18px 14px 20px;border-radius:20px}
  .func-nucleo h4{font-size:17px}
  .func-nucleo .func-borboleta{width:30px;height:24px}
  .func-nucleo::before{width:140%;height:140%}
  .func-sat li{width:min(42vw,175px);padding:11px 11px 12px;border-radius:14px;gap:4px}
  .func-sat h4{font-size:13px}
  .func-sat p{font-size:11.5px;line-height:1.38}
  .func-sat li:nth-child(1){left:50%;top:8%}
  .func-sat li:nth-child(2){left:76%;top:31%}
  .func-sat li:nth-child(3){left:74%;top:81%}
  .func-sat li:nth-child(4){left:26%;top:81%}
  .func-sat li:nth-child(5){left:24%;top:31%}
}
}
@media(max-width:560px){.func-sat{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.func-fios line,.func-nucleo::before{animation:none}}

/* 28/09 · CELULAR: os passos 2–6 viram um carrossel com swipe lateral (scroll-snap), um painel por vez com a beirada do próximo aparecendo.
   Sobrepõe a pilha vertical de cima (≤900px). Mídia 3:4 (os vídeos são 3:4). */
@media(max-width:900px){
  .cf-fila{flex-direction:row;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(50% - 50vw);padding:4px 16px 12px;scrollbar-width:none}
  .cf-fila::-webkit-scrollbar{display:none}
  .cf-painel,.cf-fila:has(.cf-painel:hover) .cf-painel{flex:0 0 82vw!important;max-width:380px;width:auto;scroll-snap-align:center;scroll-snap-stop:always}
  .cf-painel .cf-midia{aspect-ratio:3/4;height:auto}
  .cf-painel .cf-txt{padding-right:0}
  .cf-painel .cf-txt p{max-height:none;opacity:1}
  /* revelação por recorte não faz sentido deslizando de lado: entra pronto */
  .cf-painel .cf-midia{clip-path:none!important}
  .cf-painel .cf-txt{opacity:1!important;transform:none!important}
}

/* 28/09 · CELULAR: o "afastar" volta, com o celular estático no lugar do vídeo (mockup-rolagem.js comanda --mr-s pela rolagem).
   Palco preso na tela por 200vh; o iPhone começa colado (2.4×) e termina inteiro, com a tese em cima e embaixo. */
@media(max-width:800px){
  .mockup-rolagem{height:200vh!important;padding:0!important}
  .mr-palco{position:sticky!important;top:0;height:100svh!important;overflow:hidden!important;display:block!important;background:#f4f0f7}
  .mr-estatico{position:absolute;left:50%;top:50%;width:min(58%,240px);margin:0;opacity:0;transform:translate(-50%,-50%) scale(var(--mr-s,2.4));transform-origin:50% 34%;will-change:transform,opacity}
  .mr-tese{position:absolute!important;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;
    padding:calc(var(--faixa-h,0px) + 22px) 20px 26px!important;z-index:0;pointer-events:none}
  .mr-tese .mr-abertura{font-size:15px;max-width:26ch}
  .mr-tese b{font-size:clamp(22px,6.2vw,28px)!important;max-width:16ch;line-height:1.05}
  .mr-estatico{z-index:1}
  @media(prefers-reduced-motion:reduce){.mr-estatico{transform:translate(-50%,-50%) scale(1)!important}}
}

/* 29/09 · ANTES × DEPOIS: o que sobrou do bento. Texto à esquerda, comparador à direita; pilha no celular. */
.antes-depois{background:#f4f0f7;padding:clamp(40px,7vh,88px) 0 clamp(56px,9vh,110px)}
.ad-grade{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:28px clamp(24px,3.5vw,56px);align-items:center}
.ad-txt{display:grid;gap:12px;justify-items:start}
.ad-txt .bento-etq{color:var(--rosa-copy,#c42e68)}
.ad-txt h2{margin:0;font-size:clamp(28px,3.2vw,48px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:#0f1035;text-wrap:balance}
.ad-txt p{margin:0;color:#5f5680;font-size:15px}
.antes-depois .compare-stage{margin-right:22px}
@media(max-width:900px){.ad-grade{grid-template-columns:1fr;gap:22px}.antes-depois .compare-stage{margin-right:12px;transform:none}}

/* 29/09 · MOVIMENTO EXTRA · antes × depois: texto sobe em escada, o comparador entra de um leve giro, o botão pulsa até o primeiro arrasto */
.antes-depois .ad-txt>*{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.antes-depois .ad-txt>*:nth-child(2){transition-delay:.08s}
.antes-depois .ad-txt>*:nth-child(3){transition-delay:.16s}
.antes-depois.visto .ad-txt>*{opacity:1;transform:none}
.antes-depois .compare-stage{opacity:0;transform:rotate(-3.5deg) scale(.96);transition:opacity .7s ease .1s,transform 1s cubic-bezier(.22,1,.36,1) .1s}
.antes-depois.visto .compare-stage{opacity:1;transform:rotate(-1deg)}
.antes-depois .compare-tag{opacity:0;transition:opacity .5s ease .7s}
.antes-depois.visto .compare-tag{opacity:1}
.compare-handle::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #e0447f;opacity:0;pointer-events:none}
.antes-depois.visto .compare-stage:not(.assumiu) .compare-handle::after{animation:cmp-pulso 2.2s ease-out .9s infinite}
@keyframes cmp-pulso{0%{opacity:.7;transform:scale(1)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
@media(max-width:900px){.antes-depois.visto .compare-stage{transform:none}}

/* 29/09 · MOVIMENTO EXTRA · constelação: núcleo entra crescendo, satélites aparecem em sequência, fios acendem depois;
   satélites flutuam devagar (cada um no seu tempo); passar o mouse num satélite acende o fio dele e o anel do núcleo. */
@property --fl{syntax:'<length>';inherits:false;initial-value:0px}
.func-orbita .func-nucleo{opacity:0;scale:.82;transition:opacity .6s ease,scale .9s cubic-bezier(.22,1,.36,1)}
.func-orbita.visto .func-nucleo{opacity:1;scale:1}
.func-orbita .func-sat li{opacity:0;scale:.9;transition:opacity .5s ease,scale .7s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.func-orbita.visto .func-sat li{opacity:1;scale:1}
.func-orbita.visto .func-sat li:nth-child(1){transition-delay:.25s}
.func-orbita.visto .func-sat li:nth-child(2){transition-delay:.37s}
.func-orbita.visto .func-sat li:nth-child(3){transition-delay:.49s}
.func-orbita.visto .func-sat li:nth-child(4){transition-delay:.61s}
.func-orbita.visto .func-sat li:nth-child(5){transition-delay:.73s}
.func-orbita .func-fios line{opacity:0;transition:opacity .6s ease .95s,stroke .3s,stroke-width .3s}
.func-orbita.visto .func-fios line{opacity:1}
/* 29/09 · satélites parados (a flutuação foi rejeitada); só a borboleta do núcleo bate as asas de vez em quando (regra mais abaixo) */
.func-orbita:has(.func-sat li:nth-child(1):hover) .func-fios line:nth-child(1),
.func-orbita:has(.func-sat li:nth-child(2):hover) .func-fios line:nth-child(2),
.func-orbita:has(.func-sat li:nth-child(3):hover) .func-fios line:nth-child(3),
.func-orbita:has(.func-sat li:nth-child(4):hover) .func-fios line:nth-child(4),
.func-orbita:has(.func-sat li:nth-child(5):hover) .func-fios line:nth-child(5){stroke:#e0447f;stroke-width:2.6;animation-duration:.8s}
.func-orbita:has(.func-sat li:hover) .func-nucleo{box-shadow:0 30px 60px -30px rgba(15,16,53,.55),0 0 0 8px rgba(224,68,127,.14)}
.func-orbita:has(.func-sat li:hover) .func-nucleo::after{border-color:rgba(224,68,127,.45)}
@media(prefers-reduced-motion:reduce){
  .antes-depois .ad-txt>*,.antes-depois .compare-stage,.antes-depois .compare-tag,.func-orbita .func-nucleo,.func-orbita .func-sat li,.func-orbita .func-fios line{opacity:1;transform:none;scale:1;transition:none}
  .antes-depois .compare-stage{transform:rotate(-1deg)}
  .compare-handle::after,.func-asa{animation:none}
}
body.motion-paused .compare-handle::after,body.motion-paused .func-asa{animation:none}

/* 29/09 · a borboleta do núcleo bate as asas de vez em quando: duas batidas rápidas (as asas dobram para o corpo) e uns 6 s parada.
   Dobra em 2D (scaleX com a dobradiça no corpo), que todo navegador desenha bem dentro de SVG. */
.func-asa{transform-box:fill-box;transform-origin:right center}
.func-asa-d{transform-origin:left center}
.func-orbita.visto .func-asa{animation:func-bate 9s ease-in-out 2s infinite}
/* 29/09 · bem sutil: as asas fecham só um pouco (scaleX .78) em duas batidas suaves e descansam ~8 s */
@keyframes func-bate{0%,12%,100%{transform:scaleX(1)}3%{transform:scaleX(.78)}6%{transform:scaleX(1)}9%{transform:scaleX(.84)}}
@media(prefers-reduced-motion:reduce){.func-asa{animation:none!important}}
.func-borboleta path{stroke:none}   /* o svg global tem stroke:currentColor; a borboleta é só preenchimento */
/* 29/09 · teste a pedido: satélites sem os ícones */
.func-sat .func-ic{display:none}

/* 29/09 · nitidez do comparador: sem o giro de -1° (reamostrava a foto e borrava o texto da tela), foto do app sem padding nem sombra */
.antes-depois .compare-stage{transform:rotate(-2deg) scale(.96)}
.antes-depois.visto .compare-stage{transform:none}
.antes-depois .compare-side--app img{padding:0;filter:none;object-fit:cover}

}

/* 29/09 · FEIXES na constelação (ref. magicui AnimatedBeam): traço-base cinza fino + feixe rosa correndo por cima (gradiente animado em SMIL).
   Substitui os fios pontilhados. No hover do satélite, o traço-base dele escurece. */
.func-fios line{display:none}
.func-fios path{fill:none;stroke-linecap:round;opacity:0;transition:opacity .6s ease .95s,stroke .3s,stroke-width .3s}
.func-orbita.visto .func-fios path{opacity:1}
.func-fios .func-fb{stroke:rgba(15,16,53,.13);stroke-width:1.6}
.func-fios .func-fx{stroke-width:2.2}
.func-orbita:has(.func-sat li:nth-child(1):hover) .func-fios .func-fb[data-i="1"],
.func-orbita:has(.func-sat li:nth-child(2):hover) .func-fios .func-fb[data-i="2"],
.func-orbita:has(.func-sat li:nth-child(3):hover) .func-fios .func-fb[data-i="3"],
.func-orbita:has(.func-sat li:nth-child(4):hover) .func-fios .func-fb[data-i="4"],
.func-orbita:has(.func-sat li:nth-child(5):hover) .func-fios .func-fb[data-i="5"]{stroke:rgba(224,68,127,.55);stroke-width:2.2}
@media(prefers-reduced-motion:reduce){.func-fios .func-fx{display:none}.func-fios path{opacity:1;transition:none}}
body.motion-paused .func-fios .func-fx{display:none}
/* o botão do herói sem a seta (29/09): só o texto, centrado */
.hero-clean .hm-principal{justify-content:center}

/* 29/09 · SHINE BORDER no CTA do herói (ref. magicui ShineBorder): um brilho rosa-creme gira na borda do botão, 2 px, sem mexer no texto */
@property --hm-sh{syntax:'<angle>';inherits:false;initial-value:0deg}
.hero-clean .hm-principal{position:relative;isolation:isolate}
.hero-clean .hm-principal::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--hm-sh),transparent 0 52%,#f2a9c6 66%,#e0447f 76%,#fff4dc 84%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:hm-shine 4.5s linear infinite}
@keyframes hm-shine{to{--hm-sh:360deg}}
@media(prefers-reduced-motion:reduce){.hero-clean .hm-principal::before{animation:none}}
body.motion-paused .hero-clean .hm-principal::before{animation:none}

/* 29/09 · GLARE HOVER nos planos (ref. magicui GlareHover): um reflexo diagonal atravessa o cartão quando o mouse entra (600 ms) */
.plano{position:relative;overflow:hidden}
.plano::after{content:"";position:absolute;inset:-60%;pointer-events:none;
  background:linear-gradient(-60deg,transparent 44%,rgba(255,255,255,.6) 50%,transparent 56%);
  transform:translateX(-70%);transition:transform 1.8s cubic-bezier(.22,1,.36,1)}
.plano:hover::after{transform:translateX(70%)}
.plano-prof::after{background:linear-gradient(-60deg,transparent 44%,rgba(255,244,220,.28) 50%,transparent 56%)}
@media(prefers-reduced-motion:reduce){.plano::after{display:none}}

/* 29/09 · CELULAR: o herói ocupa a primeira dobra inteira, título mais largo, CTA de ponta a ponta, fatos numa linha que quebra */
@media(max-width:800px){
  .hero-chat.hero-clean{min-height:100svh;padding-top:calc(var(--nav-h,90px) + 8px);padding-bottom:28px;display:flex;flex-direction:column;justify-content:center}
  .hero-clean .hc-miolo{width:calc(100% - 32px)}
  .hero-clean .hc-coluna{max-width:none;width:100%}
  .hero-clean .hm-pilula{margin-bottom:14px}
  .hero-clean .hm-titulo{font-size:clamp(36px,10.6vw,48px);letter-spacing:-.04em}
  .hero-clean .hm-sub{font-size:16.5px;line-height:1.45;max-width:none;margin-top:14px}
  .hero-clean .hm-acoes{width:100%;margin-top:26px}
  .hero-clean .hm-principal{width:100%;padding:19px 20px;font-size:17px;border-radius:999px}
  .hero-clean .hm-fatos{margin-top:20px;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px}
}

/* 29/09 · tambor no desktop: a frase desce mais (estava colada na onda) e o retrato acompanha */
@media(min-width:901px){
  .tunel-frase{top:clamp(96px,14vh,150px)}
  /* cartão maior e proporcional à frase: largura 30% (até 430 px), limitada pela altura da tela para caber abaixo da frase */
  .tunel-banda .tec-cuida{width:min(30%,430px,46svh);margin-top:clamp(120px,19vh,220px)}
}

/* 29/09 · FECHAMENTO: rosa chapado, letras brancas e a marca "Líria" gigante pintada com as borboletas (background-clip: text) */
.hero-chat.hero-chat--fim{background:#e0447f!important;overflow:hidden;padding-bottom:0!important}
.hero-chat--fim::before{display:none!important}
.hero-chat--fim .hc-titulo .hc-l-b,.hero-chat--fim .hc-titulo .hc-l-c,.hero-chat--fim .hc-titulo .hc-liria{color:#fff!important}
.hero-chat--fim[data-variante=escada] .hc-l-b,.hero-chat--fim[data-variante=escada] .hc-l-c{font-size:clamp(30px,3.8vw,64px)!important}
.hero-chat--fim .qr-card{box-shadow:0 24px 50px -24px rgba(15,16,53,.5)}
.hc-marca{display:block;grid-column:1/-1;margin:clamp(28px,6vh,72px) 0 -.06em;font-family:'Andelo','Figtree',sans-serif;font-weight:800;font-size:clamp(120px,21.5vw,340px);line-height:.86;letter-spacing:-.03em;text-align:left;
  background:#fff url(/site-assets/borboletas-rosa.svg) center/clamp(300px,30vw,480px) repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;user-select:none}
@media(max-width:900px){.hc-marca{font-size:clamp(100px,32vw,150px);margin:32px 0 -.06em;text-align:center}}
/* 29/09 · fechamento, ajustes: título e botão/QR na primeira linha, a marca gigante embaixo ocupando a largura; padrão clareado dentro das letras */
.hero-chat--fim .hc-titulo{order:1}
.hero-chat--fim .hc-base{order:2}
.hc-marca{order:3;font-size:clamp(120px,27vw,400px);filter:brightness(1.55) saturate(.75)}
@media(max-width:900px){.hc-marca{font-size:clamp(100px,34vw,160px)}}

/* 29/09 · fechamento: frase maior; a marca fica mais larga e em duas camadas (branca embaixo, borboletas por cima),
   e as borboletas vão cobrindo a marca de baixo para cima conforme a rolagem, até a metade (--cobre, como-funciona.js) */
.hero-chat--fim[data-variante=escada] .hc-l-b,.hero-chat--fim[data-variante=escada] .hc-l-c{font-size:clamp(36px,5.2vw,90px)!important;line-height:1.04!important}
.hc-marca{position:relative;display:block;width:100%;font-size:clamp(140px,33vw,520px);letter-spacing:-.045em;line-height:.82;
  background:none;color:#fff;-webkit-text-fill-color:#fff;filter:none;margin-bottom:-.05em}
.hc-marca-base,.hc-marca-borbo{display:block}
.hc-marca-base{color:#fff;-webkit-text-fill-color:#fff}
.hc-marca-borbo{position:absolute;inset:0;color:transparent;-webkit-text-fill-color:transparent;
  background:#fff url(/site-assets/borboletas-rosa.svg) center/clamp(320px,32vw,520px) repeat;-webkit-background-clip:text;background-clip:text;
  filter:brightness(1.55) saturate(.75);clip-path:inset(var(--cobre,100%) 0 0 0);transition:clip-path .12s linear}
@media(max-width:900px){.hc-marca{font-size:clamp(110px,38vw,180px)}}
@media(prefers-reduced-motion:reduce){.hc-marca-borbo{clip-path:inset(50% 0 0 0);transition:none}}
/* 29/09 · a marca é toda pintada (sem parte branca) e afunda por baixo do rodapé com a rolagem (transform via como-funciona.js) */
.hc-marca{will-change:transform}
.hc-marca-base{visibility:hidden}
.hc-marca-borbo{clip-path:none!important;transition:none}
/* 29/09 · a caixa da marca tem metade da altura das letras: a seção (overflow hidden) já corta a metade de baixo, sem sobrar vazio acima */
.hc-marca{height:.52em;line-height:.8;margin:clamp(16px,3vh,40px) 0 0;overflow:visible}
/* 29/09 · marca inteira visível ao entrar; afunda até ficar com a metade de cima ao chegar no fim (translate 0 → 36% ≈ metade das letras) */
.hc-marca{height:auto;line-height:.74}
/* 29/09 · marca um pouco menor (82% da largura da coluna) e com folga em cima para o acento do "í" */
.hc-marca{line-height:.9;padding-top:.06em;margin-top:clamp(8px,2vh,24px)}
/* 29/09 · a marca gigante saiu do fechamento (decisão do dono do produto); volta o respiro embaixo */
.hero-chat.hero-chat--fim{padding-bottom:clamp(64px,10vh,120px)!important}

/* 29/09 · CELULAR: as duas frases da tese ancoradas no celular (a abertura logo acima, a frase forte logo abaixo), em vez de coladas nas bordas da tela */
@media(max-width:800px){
  .mr-palco{--cel-h:calc(min(58vw,240px) * 2.06)}   /* altura do iPhone estático (658×1356) */
  .mr-tese{display:block!important;padding:0 20px!important}
  .mr-tese .mr-abertura{position:absolute;left:20px;right:20px;bottom:calc(50% + var(--cel-h) / 2 + 16px);font-size:17px;line-height:1.35;max-width:none;text-align:center}
  .mr-tese b{position:absolute;left:20px;right:20px;top:calc(50% + var(--cel-h) / 2 + 16px);font-size:clamp(24px,7vw,30px)!important;line-height:1.08;max-width:none;text-align:center}
}

/* 29/09 · o título do passo 1 leva ao cadastro: mesma cor, seta discreta que aparece e rosa no hover */
.cf-txt h3 .cf-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.28em;transition:color .2s}
.cf-txt h3 .cf-link svg{width:.62em;height:.62em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.cf-txt h3 .cf-link:hover,.cf-txt h3 .cf-link:focus-visible{color:#e0447f}
.cf-txt h3 .cf-link:hover svg,.cf-txt h3 .cf-link:focus-visible svg{opacity:1;transform:none}
@media(hover:none){.cf-txt h3 .cf-link svg{opacity:1;transform:none;color:#e0447f}}

/* 29/09 · PLANOS na página do profissional: quatro cartões (gratuito em destaque rosado + três planos pagos) */
.pro-planos .section-heading p{margin:14px 0 0;max-width:52ch;font:400 16px/1.55 'DM Sans',sans-serif;color:#4b4468}
.pp-grade{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.pp-grade .plano{display:flex;flex-direction:column;padding:26px 24px 24px}
.pp-grade .plano h3{margin:12px 0 6px;font-size:22px}
.pp-grade .plano p{margin:0 0 14px;font:400 14.5px/1.55 'DM Sans',sans-serif;color:#4b4468}
.pp-grade .pp-preco{margin:0 0 12px}
.pp-grade .pp-preco b{font:800 34px/1 'Figtree',sans-serif;letter-spacing:-.03em;color:#0f1035}
.pp-grade .plano .button{margin-top:auto;align-self:flex-start}
.pp-grade .pp-gratis{background:#fbe7f0;border-color:#f2d2dc}
.pp-grade .pp-gratis .plano-etq{color:var(--rosa-copy,#c42e68);background:rgba(176,35,96,.1)}
.pp-mais{margin:22px 0 0;font:400 15px/1.5 'DM Sans',sans-serif;color:#4b4468}
.pp-mais a{color:#b02360;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(176,35,96,.35)}
.pp-mais a:hover{border-bottom-color:#b02360}
/* 12/10 · duas colunas já abaixo de 1280px (era 1000px): com CTA nos quatro cartões, quatro colunas entre
   1000 e 1280 deixavam ~180–210px úteis por cartão e os botões quebravam em duas linhas */
@media(max-width:1279px){.pp-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pp-grade{grid-template-columns:1fr;gap:12px}}
/* 12/10 · nova matriz: o que cada plano inclui vira lista com ✓ (o mesmo idioma dos planos da gestante na home),
   no corpo de texto dos cartões; o CTA fecha o cartão, alinhado na base pelos `margin-top:auto` acima */
.pp-grade .plano ul{margin:2px 0 18px;gap:9px}
.pp-grade .plano ul li{font-size:14.5px;line-height:1.5;color:#4b4468}
.pp-grade .plano .pp-inclui{margin:0 0 22px!important}
/* Essential, o "Mais escolhido": a borda rosa e a sombra do Premium da home, em dose menor, e uma pílula
   marinho ao lado do nome — o cartão se destaca sem mudar de tamanho nem de cor */
.pp-grade .pp-escolhido{border-color:rgba(224,68,127,.45);box-shadow:0 26px 50px -32px rgba(15,16,53,.38)}
.pp-selo{display:inline-block;vertical-align:4px;margin-left:8px;padding:5px 9px;border-radius:999px;background:#0f1035;color:#fff4dc;font:700 10px/1 'Nunito',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.pp-nota{margin:16px 0 0;font:400 13px/1.5 'DM Sans',sans-serif;color:#6a6585}
/* 29/09 · página do profissional: o rosa dos títulos é o mesmo do herói da home; "Entrar no painel" vira o botão de destaque da nav */
.pro-pagina .section-heading h2 span,.pro-planos .section-heading h2 span,.pro-faq h2 span{color:#e0447f}

/* 29/09 · PLANOS: alternador mensal/anual e preços (home e profissionais) */
.ciclo{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid rgba(15,16,53,.1);margin:18px 0 22px}
.ciclo-btn{border:0;background:transparent;border-radius:999px;padding:8px 16px;font:600 14px 'DM Sans',sans-serif;color:#4b4468;cursor:pointer;transition:background .2s,color .2s}
.ciclo-btn em{font-style:normal;font-size:12px;color:#b02360;margin-left:4px}
.ciclo-btn[aria-pressed=true]{background:#0f1035;color:#fff}
.ciclo-btn[aria-pressed=true] em{color:#f2a9c6}
[data-ciclo=mensal] .preco-anual,[data-ciclo=anual] .preco-mensal{display:none!important}
.preco{margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.preco s,.pp-preco s{font:600 15px 'DM Sans',sans-serif;opacity:.55}
.preco b{font:800 34px/1 'Figtree',sans-serif;letter-spacing:-.03em}
.preco-por{font:500 14px 'DM Sans',sans-serif;opacity:.75}
.preco small,.pp-preco small{flex-basis:100%;font:400 13px 'DM Sans',sans-serif;opacity:.7;margin-top:4px}
.pp-grade .pp-preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.pp-founders{display:inline-block;margin:0 0 12px;padding:6px 10px;border-radius:999px;background:rgba(242,201,76,.18);color:#7a5a00;font:700 11px 'Nunito',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.plano-premium .preco b{color:#fff}
.plano-premium .preco s,.plano-premium .preco-por,.plano-premium .preco small{color:#b9c0e8;opacity:1}
.plano-premium .button.dark{background:#e0447f;border-color:#e0447f}
.plano-premium{display:flex;flex-direction:column}
.plano-premium .button{margin-top:auto}
@media(min-width:1000px){.planos-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:999px){.planos-grade{grid-template-columns:minmax(0,720px)}}
.plano-premium ul{margin-bottom:18px}
.plano-premium li{color:#e6e3f5}
.plano-premium li svg{stroke:#f2a9c6}
.plano-premium .plano-nota{margin-bottom:18px}

/* 29/09 · planos da gestante: dois cartões (Premium maior e em destaque), um CTA só, o profissional numa faixa discreta */
@media(min-width:1000px){.planos-grade{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}}
.plano-premium{box-shadow:0 30px 70px -30px rgba(15,16,53,.6);border:1px solid rgba(224,68,127,.35)}
@media(min-width:1000px){.plano-premium{padding:38px 36px 34px;transform:translateY(-8px)}}
.plano-premium h3{font-size:26px}
.plano-premium .preco b{font-size:40px}
.planos-cta{display:flex;justify-content:center;margin:clamp(24px,4vh,36px) 0 0}
.planos-prof-faixa{margin:22px 0 0;padding:14px 18px;border-radius:14px;background:rgba(15,16,53,.05);text-align:center;font:400 14px/1.5 'DM Sans',sans-serif;color:#4b4468}
.planos-prof-faixa b{color:#0f1035}
.planos-prof-faixa a{color:#b02360;font-weight:600;text-decoration:none;white-space:nowrap}
.planos-prof-faixa a:hover{text-decoration:underline}

/* 29/09 · marca: só a borboleta no topo (todas as páginas); a wordmark completa vai para o rodapé, em creme sobre o marinho */
.brand img.brand-simbolo{width:32px;height:auto}
@media(max-width:800px){.brand img.brand-simbolo{width:28px}}
.footer-wordmark{display:block;width:132px;height:auto;margin-bottom:4px}
.footer-marca{gap:12px}
/* 29/09 · fechamento no desktop: só o QR (o botão era redundante com o CTA dos planos e o fixo); no celular o QR some e o botão fica */
@media(min-width:901px){.hero-chat--fim .baixar-btn{display:none}}

/* 29/09 · profissionais: personalização (planos pagos) — bloco com os quatro passos do painel */
.pp-inclui{margin:6px 0 0!important;font-weight:600!important;color:var(--rosa-copy,#c42e68)!important}
.pp-perso{margin:clamp(32px,5vh,56px) 0 0;padding:clamp(24px,3vw,36px);border-radius:22px;background:#0f1035;color:#fff4dc;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(28px,4vw,56px);align-items:center}
.pp-perso .eyebrow{color:#f2a9c6}
.pp-perso h3{margin:10px 0 12px;font:800 clamp(24px,2.4vw,34px)/1.05 'Figtree',sans-serif;letter-spacing:-.03em;color:#fff4dc}
.pp-perso-txt p{margin:0;font:400 15.5px/1.6 'DM Sans',sans-serif;color:rgba(255,244,220,.78)}
.pp-passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:passo}
.pp-passos li{counter-increment:passo;padding:16px 16px 16px 52px;border-radius:14px;background:rgba(255,244,220,.06);border:1px solid rgba(255,244,220,.1);position:relative;display:grid;gap:4px}
.pp-passos li::before{content:counter(passo);position:absolute;left:16px;top:16px;width:26px;height:26px;border-radius:50%;background:#e0447f;color:#fff;font:700 12px/26px 'Figtree',sans-serif;text-align:center}
.pp-passos b{font:700 15px 'Figtree',sans-serif;color:#fff4dc}
.pp-passos span{font:400 13.5px/1.45 'DM Sans',sans-serif;color:rgba(255,244,220,.72)}
@media(max-width:900px){.pp-perso{grid-template-columns:1fr}}
@media(max-width:560px){.pp-passos{grid-template-columns:1fr}}
/* 29/09 · rodapé: borboleta branca + "Carteira da Gestante" discreto (a wordmark completa saiu) */
.footer-wordmark{display:none}
.footer-assina{display:inline-flex;align-items:center;gap:9px;font:500 13px 'DM Sans',sans-serif;letter-spacing:.02em;color:rgba(255,244,220,.7)}
.footer-borboleta{width:22px;height:auto;filter:brightness(0) invert(1);opacity:.9}
.footer-marca{gap:14px}
/* 29/09 · rodapé: redes (Instagram + TikTok) em cima, borboleta + nome embaixo */
.footer-redes{display:inline-flex;align-items:center;gap:16px}
.footer-tt svg{fill:currentColor;stroke:none}
/* 01/10 · hero mais encorpado: Grift 800 (era 700), mesmo peso do título da página de profissionais;
   tracking um pouco mais aberto para o peso maior não colar as letras */
html body .hero-clean .hm-titulo{font-weight:800;letter-spacing:-.04em}
/* 01/10 · planos do profissional: título e texto alinhados à esquerda, na mesma borda do seletor e dos cartões
   (o bloco centralizado com o parágrafo em caixa deslocada deixava a última linha fora do eixo) */
html body .pro-planos .section-heading{text-align:left;max-width:none;margin:0 0 30px}
html body .pro-planos .section-heading p{margin:16px 0 0;max-width:56ch}
/* 01/10 · "Founders" numa linha própria, logo abaixo do texto dos planos */
html body .pro-planos .section-heading p.planos-founders{margin:8px 0 0;max-width:none;white-space:nowrap}
@media(max-width:560px){html body .pro-planos .section-heading p.planos-founders{white-space:normal}}