/* Essence Clinic — LP depilação a laser.
   Carrega DEPOIS de tokens.css, que é a fonte canônica de site/tokens/tokens.css.
   Aqui vive só o que é desta página. Zero hex cru: tudo deriva das primitivas. */

:root {
  /* Superfície escura — Emenda 1.10.0. Declarado aqui também porque este :root não herda
     do _styles.css (o build só copia a partir do marcador de base). */
  --e-ground: #4C1B5A;             /* Amethyst + Midnight 30% — patch 1.10.1, restaurado pelo 1.10.3 */
  --e-ground-raised: #572964;
  --e-ground-rgb: 76, 27, 90;
  /* Overlay único aprovado para texto sobre imagem (§9.4) */
  --overlay-hero: color-mix(in srgb, var(--e-ground) 55%, transparent);
  /* Texto sobre vídeo — §9.4.1 do design system (Emenda 0.2.0, 2026-08-25).
     Chapado 55% é para foto. RECALIBRADO na Emenda 1.10.0 (2026-09-01), quando o chão escuro
     passou de Midnight a Amethyst: o Amethyst é MUITO mais claro (L .054 vs .007), então a
     mesma densidade protege menos. Dimensionado por PIOR CASO ANALÍTICO — pixel de vídeo
     branco puro sob o gradiente — e não por amostragem de quadros, o que torna o número
     independente do corte em vigor: no trecho onde o texto vive (até ~52% da largura no
     desktop), o alpha nunca cai abaixo de .846, o que dá 5.17:1 para corpo em Pale Cream e
     6.94:1 para título em White. No mobile o piso é .820 → 4.80:1 e 6.46:1.
     Trocar o CHÃO invalida isto; trocar o vídeo, não. Método em paginas/midia/hero-lp-laser.md */
  --overlay-hero-video: linear-gradient(to right,
    color-mix(in srgb, var(--e-ground) 88%, transparent) 0%,
    color-mix(in srgb, var(--e-ground) 78%, transparent) 78%,
    color-mix(in srgb, var(--e-ground) 45%, transparent) 90%,
    color-mix(in srgb, var(--e-ground) 15%, transparent) 100%);
  --overlay-hero-video-wide: linear-gradient(to right,
    color-mix(in srgb, var(--e-ground) 86%, transparent) 0%,
    color-mix(in srgb, var(--e-ground) 78%, transparent) 58%,
    color-mix(in srgb, var(--e-ground) 40%, transparent) 76%,
    color-mix(in srgb, var(--e-ground) 6%, transparent) 100%);
  --overlay-hero-video-sm: linear-gradient(to top,
    color-mix(in srgb, var(--e-ground) 90%, transparent) 0%,
    color-mix(in srgb, var(--e-ground) 78%, transparent) 86%,
    color-mix(in srgb, var(--e-ground) 20%, transparent) 100%);
  /* Hairlines sobre superfície escura (§6.2) */
  --hairline-cream: color-mix(in srgb, var(--e-pale-cream) 16%, transparent);
  --hairline-cream-strong: color-mix(in srgb, var(--e-pale-cream) 55%, transparent);

  /* Vidro do menu — §11.6.1 do design system (Emenda 0.3.0, 2026-08-25).
     72% é PISO, calculado sobre o pior fundo que a página tem (branco puro): dá 7.64:1 com
     White e 5.69:1 com Pale Cream. A 64% o cream cai para 4.25:1 e reprova corpo. O blur não
     escurece nada — quem sustenta contraste é a tinta, por isso ela não se remede a cada
     troca de mídia. Tabela completa no Apêndice B do design system. */
  --glass-tint: color-mix(in srgb, var(--e-ground) 72%, transparent);
  --glass-tint-fallback: color-mix(in srgb, var(--e-ground) 94%, transparent);
  --glass-blur: blur(18px) saturate(1.4);
  --glass-edge: linear-gradient(to bottom,
    color-mix(in srgb, var(--e-pale-cream) 20%, transparent),
    color-mix(in srgb, var(--e-pale-cream) 4%, transparent));

  /* Altura da barra da promoção. Zero quando ela não está no ar; quem escreve o valor é o
     _script.js, medindo a própria barra. O header é fixo e desce esse tanto. Declarado aqui
     também porque este :root não herda do _styles.css. */
  --promo-h: 0px;

  /* Quanto a barra está recolhida agora (0 = no ar, --promo-h = fora de tela). Só o header
     lê isto; o resto do layout continua reservando --promo-h. Mesmo motivo de estar aqui. */
  --promo-shift: 0px;

  /* A barra é fixa e não ocupa fluxo: --hdr-total é a altura que o hero e as âncoras devolvem */
  --hdr-h: 60px;
  --hdr-gap: var(--space-3);
  --hdr-total: calc(var(--hdr-h) + var(--hdr-gap) * 2);
}
@media (min-width: 900px) { :root { --hdr-h: 68px; --hdr-gap: var(--space-4); } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* o header flutua por cima: âncora e skip link param abaixo da barra, não atrás dela */
html{scroll-padding-top:calc(var(--promo-h,0px) + var(--hdr-total) + var(--space-4))}
[id]{scroll-margin-top:calc(var(--promo-h,0px) + var(--hdr-total) + var(--space-4))}
body{margin:0;background:var(--e-white);color:var(--e-midnight);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased}
h1,h2,h3,.u-display{font-family:var(--font-display);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);text-wrap:balance;margin:0}
h4,h5{font-family:var(--font-body);font-weight:var(--weight-semibold);line-height:var(--leading-snug);margin:0}
p,li{text-wrap:pretty;max-width:var(--container-prose);margin:0}
img{max-width:100%;display:block}
a{color:var(--color-link);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;transition:text-decoration-thickness var(--dur-fast) var(--ease-standard)}
a:hover{text-decoration-thickness:2px}
.u-tnum,time,.price,.phone,.cycle-math{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset);border-radius:var(--radius-sm)}
/* `hidden` tem de vencer QUALQUER display de classe. Sem isto o atributo não faz nada em
   .form, .err, .alert, .promo__expired e .promo__clockbox — todos declaram display, e
   classe empata com [hidden] na especificidade, então ganha quem vier depois no arquivo.
   Era por isso que a mensagem de prazo vencido aparecia junto com o formulário. */
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:60;background:var(--e-pale-cream);color:var(--e-midnight);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);font-weight:600;text-decoration:none;transition:top var(--dur-fast) var(--ease-standard)}
.skip:focus{top:calc(var(--promo-h,0px) + var(--hdr-total) + var(--space-2))}

.sec{background:var(--color-bg);color:var(--color-text);padding-block:var(--section-py);position:relative}
.wrap{max-width:var(--container-content);margin-inline:auto;padding-inline:var(--page-margin)}
.wrap--wide{max-width:var(--container-wide)}
.overline{font-family:var(--font-body);font-size:var(--text-overline);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-text-secondary);margin:0}
.lead{font-size:var(--text-body-lg);color:var(--color-text-secondary)}
.prose p + p{margin-top:var(--space-5)}
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.g2{gap:var(--space-2)}.g3{gap:var(--space-3)}.g4{gap:var(--space-4)}.g5{gap:var(--space-5)}
.g6{gap:var(--space-6)}.g8{gap:var(--space-8)}.g10{gap:var(--space-10)}.g12{gap:var(--space-12)}.g16{gap:var(--space-16)}

/* ---------- botão (pill, DM Sans 600) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--weight-semibold);border-radius:var(--radius-pill);border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.btn--md{height:48px;padding-inline:var(--space-6);font-size:16px}
.btn--lg{height:56px;padding-inline:var(--space-8);font-size:17px}
.btn--sm{height:40px;padding-inline:var(--space-4);font-size:15px;position:relative}
.btn--sm::after{content:"";position:absolute;inset:-2px -4px;min-height:44px}
.btn--primary{background:var(--color-action);color:var(--color-on-action)}
.btn--primary:hover{background:var(--color-action-hover)}
.btn--primary:active{background:var(--color-action-active)}
.btn--secondary{background:transparent;color:var(--color-action);border-color:var(--color-action)}
.btn--secondary:hover{background:color-mix(in oklab,var(--color-action) 8%,transparent)}
.btn--ghost{background:transparent;color:var(--color-text)}
.btn--ghost:hover{background:color-mix(in oklab,var(--color-text) 6%,transparent)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--e-neutral-100);color:var(--e-neutral-500);border-color:transparent;cursor:not-allowed}

/* ---------- header · container flutuante de vidro (§11.6.1) ----------
   Fixo, não sticky: a barra passa POR CIMA das seções e desfoca o que corre por baixo.
   O wrapper não intercepta clique (pointer-events:none) — só a barra recebe ponteiro,
   senão a faixa transparente ao lado do container comeria cliques da seção. */
.hdr{position:fixed;top:calc(var(--promo-h,0px) - var(--promo-shift,0px));transition:top var(--dur-base) var(--ease-standard);left:0;right:0;z-index:50;color:var(--e-white);background:transparent;border:0;padding:var(--hdr-gap) var(--page-margin);pointer-events:none}
.hdr__in{pointer-events:auto;display:flex;align-items:center;gap:var(--space-6);height:var(--hdr-h);max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--space-4);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid transparent;border-radius:var(--radius-pill);box-shadow:var(--elev-2);
  /* borda de luz: hairline chapado some sobre fundo claro; o gradiente na borda segura a silhueta */
  background:linear-gradient(var(--glass-tint),var(--glass-tint)) padding-box,var(--glass-edge) border-box}
@media (min-width:900px){.hdr__in{padding-inline:var(--space-6)}}
/* Sem backdrop-filter (Firefox antigo, WebView) o vidro vira opaco — nunca translúcido,
   porque translúcido sem blur é exatamente a "loteria" que o §11.6 proíbe. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr__in{background:linear-gradient(var(--glass-tint-fallback),var(--glass-tint-fallback)) padding-box,var(--glass-edge) border-box}
}
@media (prefers-reduced-transparency:reduce){
  .hdr__in{background:var(--e-ground);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--hairline-cream-strong)}
}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto}
.hdr__logo img{height:26px;width:auto}
@media (min-width:900px){.hdr__logo img{height:32px}}
.nav{display:none;gap:var(--space-5);margin-left:auto;align-items:center}
@media (min-width:1100px){.nav{display:flex}}
/* Regular, não medium, e sublinhado de 1px no hover: peso e traço é onde a barra engrossava.
   O item ATIVO continua com os 2px do §11.6 — indicador de estado não afina por estética. */
.nav a{color:var(--e-white);text-decoration:none;font-size:var(--text-body-sm);font-weight:var(--weight-regular);padding-block:var(--space-2);border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--hairline-cream-strong)}
.nav a[aria-current="true"]{border-bottom-width:2px}
.nav a[aria-current="true"]{border-bottom-color:var(--e-pale-cream)}
.hdr__side{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}
@media (min-width:1100px){.hdr__side{margin-left:0}}
.lang{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-body-sm);font-weight:var(--weight-semibold)}
.lang a{color:var(--e-neutral-400);text-decoration:none;padding:var(--space-2) var(--space-1);min-width:28px;text-align:center}
.lang a[aria-current="true"]{color:var(--e-pale-cream);text-decoration:underline;text-underline-offset:.28em}
.lang span{color:var(--hairline-cream-strong)}
/* Com TRÊS idiomas (Emenda 1.11.0) o seletor passou de ~70px para ~113px e, abaixo de
   ~340px de viewport, o conteúdo da pílula ficava 4px mais largo que ela. Medido em
   320/360/390/430/768: só 320 estourava. Aqui o alvo aperta para caber — é o seletor de
   idioma, não um controle de ação, e o alvo de toque do burger (44px) não é tocado. */
@media (max-width:380px){.lang{gap:0}.lang a{min-width:24px;padding-inline:0}}
.hdr__tel{display:none;color:var(--e-pale-cream);font-size:var(--text-body-sm);font-weight:var(--weight-regular);text-decoration:none;align-items:center;gap:var(--space-2)}
@media (min-width:760px){.hdr__tel{display:inline-flex}}
.hdr__tel:hover{text-decoration:underline;text-underline-offset:.18em}
.hdr__cta{display:none}
@media (min-width:900px){.hdr__cta{display:inline-flex}}
/* O círculo desenhado encolhe para 38px, mas o ALVO DE TOQUE continua 44px pelo ::after —
   afinar o desenho não pode encolher a área clicável (§16). */
.burger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-pill);background:transparent;border:1px solid var(--hairline-cream);color:var(--e-white);cursor:pointer}
.burger::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.burger:hover{border-color:var(--hairline-cream-strong)}
.drawer .burger{width:44px;height:44px}
@media (min-width:1100px){.hdr .burger{display:none}}   /* só o do header; o de fechar do drawer sempre existe */

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(var(--e-ground-rgb),.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:70;opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-standard)}
.scrim[data-open="true"]{opacity:1;pointer-events:auto}
/* mesmo vidro do header (§11.6.1), mesma folga: o menu é um painel solto, não uma parede
   colada na borda. Fecha translando para fora da folga, senão a quina fica aparecendo. */
.drawer{position:fixed;top:var(--hdr-gap);right:var(--hdr-gap);bottom:var(--hdr-gap);width:min(calc(100% - var(--hdr-gap) * 2),420px);
  color:var(--e-white);z-index:80;transform:translateX(calc(100% + var(--hdr-gap)));transition:transform var(--dur-slow) var(--ease-standard);
  display:flex;flex-direction:column;padding:var(--space-6) var(--space-6) var(--space-8);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid transparent;border-radius:var(--radius-xl);box-shadow:var(--elev-3);overflow-y:auto;
  background:linear-gradient(var(--glass-tint),var(--glass-tint)) padding-box,var(--glass-edge) border-box}
.drawer[data-open="true"]{transform:translateX(0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .drawer{background:linear-gradient(var(--glass-tint-fallback),var(--glass-tint-fallback)) padding-box,var(--glass-edge) border-box}
}
@media (prefers-reduced-transparency:reduce){
  .scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(var(--e-ground-rgb),.86)}
  .drawer{background:var(--e-ground);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--hairline-cream-strong)}
}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-8)}
.drawer nav{display:flex;flex-direction:column;gap:var(--space-2)}
.drawer nav a{color:var(--e-white);text-decoration:none;font-family:var(--font-display);font-size:var(--text-h3);padding-block:var(--space-3);border-bottom:1px solid var(--hairline-cream)}
.drawer__foot{margin-top:auto;padding-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--e-ground);color:var(--e-white);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__overlay{position:absolute;inset:0;background:var(--overlay-hero);z-index:-1}
/* FICHA 01 entregue em vídeo. Poster embaixo, vídeo em cima, overlay por último. */
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2}
.hero__overlay--video{background:var(--overlay-hero-video)}
/* >=1400px a coluna de texto termina em ~51% da largura (o container trava em 1320 e centra),
   entao o gradiente pode cair antes e devolver mais video. Abaixo disso ela chega a 76%. */
@media (min-width:1400px){.hero__overlay--video{background:var(--overlay-hero-video-wide)}}
@media (max-width:899px){
  /* o material é 16:9 e a figura vive à direita: em retrato o corte tira justamente ela.
     Enquanto não houver recorte vertical próprio (pendência da ficha), o texto senta embaixo
     e o gradiente vira vertical. */
  .hero__poster,.hero__video{object-position:66% 50%}
  .hero__overlay--video{background:var(--overlay-hero-video-sm)}
}
@media (prefers-reduced-motion:reduce){
  /* sem movimento sobra o poster, que já está embaixo — nada mais a fazer */
  .hero__video{display:none}
}
.hero__in{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--page-margin);padding-block:clamp(4rem,3rem + 8vw,9rem);position:relative}
/* a barra é fixa e não ocupa fluxo — o hero devolve a altura dela em respiro no topo */
.hero__in{padding-top:calc(clamp(4rem,3rem + 8vw,9rem) + var(--hdr-total) + var(--promo-h,0px))}
.hero__col{max-width:min(640px,100%)}
.hero h1{font-size:var(--text-display-2);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin-block:var(--space-5) var(--space-6)}
.hero h1 em{font-style:italic;font-weight:var(--weight-regular)}
.hero__sub{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-regular);font-style:italic;color:var(--e-pale-cream);margin-bottom:var(--space-6)}
.hero__body{color:var(--e-pale-cream);font-size:var(--text-body-lg);margin-bottom:var(--space-8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-8);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--hairline-cream)}
.hero__meta div{max-width:200px}
/* Pale Cream, não neutral-400: sobre o VÍDEO o rótulo media 3.10:1 em neutral-400 e reprova
   AA de corpo (§16). O token não é o culpado — sobre Midnight chapado ele dá 7.41:1 —, é a
   adjacência com o vídeo. Medido em 2026-08-25 pelo procedimento do §9.4.1, que a partir desta
   data mede CADA elemento contra a SUA cor. Em Pale Cream o mesmo rótulo dá 5.73:1.
   A hierarquia com o `dd` continua existindo: 12px vs 16px, caixa alta, tracking e semibold. */
.hero__meta dt{font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--e-pale-cream);font-weight:var(--weight-semibold)}
.hero__meta dd{margin:var(--space-2) 0 0;font-size:var(--text-body-sm);color:var(--e-pale-cream)}
/* ---------- selo de avaliacoes do Google · primeira dobra ----------
   Mesmo vidro do menu (§11.6.1): quem sustenta contraste e a TINTA, nao o blur, e por ser
   piso de pior caso ela NAO se remede a cada troca de video — diferente do §9.4.1, que
   calibra por material. O selo senta sobre o video do hero e nao depende de quadro nenhum.

   Texto em White, e nao em Pale Cream, de proposito. Medido em 2026-09-24 sobre o composto
   REAL da tinta (--e-ground #4C1B5A a 72% sobre branco puro, o pior fundo da pagina, que da
   rgb(126,91,136)): White 5.62:1, Pale Cream 4.18:1 — o segundo reprova AA de corpo. Os
   7.64:1/5.69:1 que o §11.6.1 registra foram medidos com Midnight #090D3F; o token da tinta
   usa --e-ground-rgb, que e mais claro. Vale para este selo; o header e o botao de WhatsApp
   ainda usam Pale Cream sobre a mesma tinta e a divergencia esta registrada, nao corrigida.

   NAO HA ESTRELAS NESTE SELO, e isso e regra, nao estilo. O guia de marca do Google para
   quem exibe as proprias avaliacoes diz, com todas as letras: "Don't add stars by the
   Google name or logos" e "Don't use any unofficial logos, badges, or lockups". Estrela ao
   lado do G era o unico item que o guia nomeia. O que ele PEDE esta aqui: um dos logos
   oficiais presente, a redaçao "on Google" em vez de "Google rating", e a data de
   conferencia ("as of") junto da nota e do volume.

   As estrelas continuam existindo no bloco de prova, la embaixo, onde nao ha logo nem nome
   do Google por perto — a regra do guia so existe na vizinhanca da marca.

   O G oficial fica sobre disco branco porque e a unica forma de usa-lo sem adulterar a cor
   da marca de terceiro; ele nao entra na paleta da Essence, ele se identifica. */
.grev{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-8);
  padding:var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  color:var(--e-white);text-decoration:none;
  border:1px solid transparent;border-radius:var(--radius-pill);box-shadow:var(--elev-3);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  background:linear-gradient(var(--glass-tint),var(--glass-tint)) padding-box,var(--glass-edge) border-box;
  transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.grev:hover{color:var(--e-white);text-decoration:none;transform:translateY(-2px);box-shadow:var(--elev-4,var(--elev-3))}
.grev:focus-visible{outline:2px solid var(--e-white);outline-offset:3px}
.grev__g{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--e-white)}
.grev__g svg{width:20px;height:20px;display:block}
.grev__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.grev__row{display:flex;align-items:center;gap:var(--space-2)}
.grev__score{font-family:var(--font-display);font-size:var(--text-h4);line-height:1;letter-spacing:var(--tracking-display)}
/* O volume sobe para a linha da nota: nota alta sobre volume que a pessoa nao ve e meia
   prova, e o clique mostra os dois de qualquer jeito. Peso, nunca opacidade — baixar a
   opacidade do White sobre o vidro derruba o 5.62:1 medido. */
.grev__vol{font-size:var(--text-body-sm);font-weight:var(--weight-regular);line-height:1.2}
.grev__cap{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);
  line-height:1.2;font-weight:var(--weight-semibold);white-space:nowrap}
.grev__cap svg{width:12px;height:12px;flex:none}
/* peso, nunca opacidade: baixar a opacidade do White sobre o vidro derruba o 5.62:1 medido */
.grev__more{font-weight:var(--weight-regular)}
@media (max-width:420px){.grev__more{display:none}}
/* Com o volume dentro da legenda o selo ficou mais largo, e o pt-BR e o mais longo dos tres
   ("250 avaliacoes no Google"). Abaixo de 360px o disco e os paddings apertam para a legenda
   nao precisar quebrar — quebrar seria pior, porque nota, volume e plataforma se leem de uma
   olhada ou nao se leem. Aperto raciocinado, NAO medido em navegador. */
@media (max-width:359px){
  .grev{gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2)}
  .grev__g{width:32px;height:32px}
  .grev__g svg{width:17px;height:17px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .grev{background:linear-gradient(var(--glass-tint-fallback),var(--glass-tint-fallback)) padding-box,var(--glass-edge) border-box}
}
@media (prefers-reduced-transparency:reduce){
  .grev{background:var(--e-ground);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--hairline-cream-strong)}
}
@media (prefers-reduced-motion:reduce){.grev,.grev:hover{transition:none;transform:none}}

/* ---------- placeholder de foto ---------- */
.ph{position:relative;overflow:hidden;background:
   repeating-linear-gradient(135deg,rgba(238,219,203,.07) 0 2px,transparent 2px 14px),
   linear-gradient(160deg,var(--e-deep-purple) 0%,var(--e-midnight) 62%,var(--e-neutral-900) 100%);
   display:flex;align-items:center;justify-content:center;color:var(--e-pale-cream)}
.ph--light{background:
   repeating-linear-gradient(135deg,rgba(9,13,63,.05) 0 2px,transparent 2px 14px),
   linear-gradient(160deg,var(--e-cream-200) 0%,var(--e-cream-300) 55%,var(--e-cream-400) 100%);
   color:var(--e-neutral-700)}
.ph--fill{position:absolute;inset:0}
.ph--fill .ph__brief{position:absolute;right:var(--space-8);bottom:var(--space-8);align-items:flex-end;text-align:right;max-width:30ch;background:rgba(9,13,63,.42);border:1px solid var(--hairline-cream);border-radius:var(--radius-lg)}
@media (max-width:899px){.ph--fill .ph__brief{display:none}}
.ph--16x9{aspect-ratio:16/9}
.ph--3x2{aspect-ratio:3/2}
.ph--4x5{aspect-ratio:4/5}
.ph--1x1{aspect-ratio:1/1}
.ph--band{height:clamp(200px,22vw,340px)}
.ph__brief{max-width:34ch;text-align:center;padding:var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.ph__tag{font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;font-weight:var(--weight-semibold);border:1px solid currentColor;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);opacity:.9}
.ph__txt{font-size:var(--text-caption);line-height:var(--leading-snug);opacity:.85;margin:0;max-width:100%}
.briefs-off .ph__brief{display:none}

/* ---------- foto de verdade no lugar do placeholder ----------
   O .ph carregava a proporcao na propria classe (.ph--3x2 etc). A foto traz width/height
   como atributo, e sem height:auto o atributo fixa a altura: a largura encolhe no container
   e a imagem estica. Estas duas linhas sao o par de .ph para conteudo real. */
picture{display:block}
picture img{width:100%;height:auto}

/* ---------- ciclo · anel fixado no scroll ----------
   Uma faixa alta (.cycle-track) com um painel grudado (.cycle-pin): enquanto ela passa,
   o anel gira 72° por etapa e a quinta se solta.

   Cor, toda de token da superfície white e em três estados, que é o que dá a leitura de
   PROGRESSO — o anel não é só decoração, ele mostra onde você está:
     · vencida  → creme (--e-cream-200), com o número em Midnight (12.4:1)
     · atual    → --color-action (Amethyst), número em --color-on-action (10.45:1)
     · por vir  → --color-bg-subtle com fio --color-border, número em -secondary (5.91:1)
   O marcador fixo é --color-accent (Roxo, 10.13:1): segunda cor da marca, e é ele que
   deixa claro que quem gira é o anel, não o ponteiro.

   NÃO fica dentro de .wrap de propósito: o reveal do §7.2 marca os filhos de .sec > .wrap
   com transform, e transform em ancestral quebra o position:sticky do painel. */
.cycle-track{--cycle-step:42vh;position:relative}
.cycle-pin{display:flex;align-items:center;padding-block:var(--space-8)}
/* A faixa alta e o painel grudado só existem quando o JS assume — senão sobraria um
   quilômetro de rolagem morta com o anel parado na etapa 01. */
.cycle-track.is-live{height:calc(100svh + 6 * var(--cycle-step))}
.cycle-track.is-live .cycle-pin{position:sticky;top:0;height:100svh;overflow:hidden;padding-block:0;padding-top:calc(var(--hdr-total) + var(--promo-h,0px))}
.cycle-frame{width:100%;max-width:var(--container-content);margin-inline:auto;padding-inline:var(--page-margin);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"ring head" "ring side";column-gap:var(--space-10);row-gap:var(--space-6);align-content:center}
.cycle-head{grid-area:head;align-self:end;display:flex;flex-direction:column;gap:var(--space-3)}
.cycle-headline{font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);max-width:16ch}
/* fio curto antes do overline — editorial, e ancora o bloco de texto na coluna */
.cycle-head .overline{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-secondary)}
.cycle-head .overline::before{content:"";width:28px;height:1px;background:var(--color-accent);flex:none}
.cycle-side{grid-area:side;align-self:start;min-width:0}

.cycle-ringwrap{grid-area:ring;justify-self:center;align-self:center;position:relative;width:100%;max-width:400px;aspect-ratio:415/385;container-type:inline-size}
.cycle-ring{display:block;width:100%;height:100%;overflow:visible}
.cycle-seg{fill:var(--color-bg-subtle);stroke:var(--color-border);stroke-width:1;stroke-linejoin:round;cursor:pointer;transition:fill var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard)}
.cycle-seg.is-past{fill:var(--e-cream-200);stroke:var(--e-cream-300)}
.cycle-seg.is-on{fill:var(--color-action);stroke:var(--color-action)}
.cycle-segnum{font-family:var(--font-body);font-size:12px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);fill:var(--color-text-secondary);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill var(--dur-base) var(--ease-standard)}
.cycle-segnum.is-past{fill:var(--color-text)}
.cycle-segnum.is-on{fill:var(--color-on-action)}
.cycle-hit{fill:transparent;stroke:none;cursor:pointer}
.cycle-tick{stroke:var(--color-accent);stroke-width:3;stroke-linecap:round}

/* centro do anel: o número que a própria seção já diz em palavras, e o CTA que aparece
   quando a última etapa se solta */
.cycle-hub{position:absolute;left:55.422%;top:51.429%;transform:translate(-50%,-50%);width:56%;text-align:center;pointer-events:none}
.cycle-count{display:flex;align-items:baseline;justify-content:center;gap:.06em;font-variant-numeric:tabular-nums}
.cycle-count-n{font-family:var(--font-display);font-weight:var(--weight-regular);font-size:19cqw;line-height:.85;letter-spacing:var(--tracking-display)}
.cycle-count-x{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:10cqw;line-height:1;color:var(--color-accent);transform:translateY(-.12em)}
.cycle-count-label{margin-top:var(--space-3);font-size:var(--text-overline);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-text-secondary)}
.cycle-hub-cta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}

/* lista: sem grade de caixas — fio de cabelo entre as linhas e pílula cheia na atual.
   O fio é ::before para poder sumir dos dois lados da pílula sem deixar costura. */
.cycle-rows{display:flex;flex-direction:column}
.cycle-row{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:var(--space-2);width:100%;min-height:54px;text-align:left;background:transparent;color:inherit;font:inherit;border:0;border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);cursor:pointer;transition:background-color var(--dur-base) var(--ease-standard),padding-left var(--dur-base) var(--ease-standard)}
.cycle-row + .cycle-row::before{content:"";position:absolute;inset-inline:var(--space-4);top:0;height:1px;background:var(--color-border)}
.cycle-row.is-on::before,.cycle-row.is-on + .cycle-row::before{background:transparent}
.cycle-row-num{font-size:var(--text-overline);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);color:var(--color-text-secondary);font-variant-numeric:tabular-nums;transition:color var(--dur-base) var(--ease-standard)}
.cycle-row-name{font-family:var(--font-display);font-size:clamp(1.25rem,1.05rem + .55vw,1.625rem);line-height:1.15;color:var(--color-text-secondary);transition:color var(--dur-base) var(--ease-standard)}
.cycle-row.is-past .cycle-row-num{color:var(--color-action)}
.cycle-row.is-past .cycle-row-name{color:var(--color-text)}
.cycle-row.is-on{background:var(--color-action);padding-left:var(--space-5)}
.cycle-row.is-on .cycle-row-num,.cycle-row.is-on .cycle-row-name{color:var(--color-on-action)}

/* A frase da etapa. min-height reserva as duas linhas do caso mais longo: sem isso a
   lista inteira sobe e desce a cada troca de etapa, e o anel ao lado parece tremer.
   É espelho visual (aria-hidden) — a frase acessível mora no .vh dentro de cada linha,
   que é também o que a página sem JS mostra. */
.cycle-detail{margin:var(--space-5) 0 0;padding-inline:var(--space-4);min-height:calc(2 * var(--leading-body) * 1em);max-width:44ch;font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--color-text-secondary)}
.cycle-detail.is-fresh,.cycle-stage-desc.is-fresh{animation:cycle-frase var(--dur-base) var(--ease-entrance) both}
@keyframes cycle-frase{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* painel + trilha de pontos: no estreito a lista de cinco linhas não cabe junto do anel */
.cycle-stage,.cycle-rail{display:none}
.cycle-stage{margin:0}
.cycle-stage-head{display:flex;align-items:baseline;gap:var(--space-3);margin:0}
.cycle-stage-desc{margin:var(--space-2) 0 0;font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--color-text-secondary)}
.cycle-stage-num{font-family:var(--font-body);font-size:var(--text-overline);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);color:var(--color-action);font-variant-numeric:tabular-nums}
.cycle-stage-name{font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--leading-heading)}
.cycle-rail{gap:var(--space-2);margin-top:var(--space-5)}
.cycle-pip{flex:1;min-height:44px;background:none;border:0;border-top:2px solid var(--color-border);padding:var(--space-3) 0 0;font-family:var(--font-body);font-size:var(--text-overline);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);color:var(--color-text-secondary);font-variant-numeric:tabular-nums;cursor:pointer;transition:color var(--dur-base) var(--ease-standard),border-top-color var(--dur-base) var(--ease-standard)}
.cycle-pip.is-past{border-top-color:var(--e-cream-300);color:var(--color-text)}
.cycle-pip.is-on{border-top-color:var(--color-action);color:var(--color-action)}

.cycle-hint{display:none;position:absolute;left:50%;bottom:var(--space-5);transform:translateX(-50%);align-items:center;gap:var(--space-3);margin:0;font-size:var(--text-overline);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-text-secondary)}
.is-live .cycle-hint{display:flex}
.cycle-hint::after{content:"";width:34px;height:1px;background:var(--color-border-strong)}

/* tela baixa e larga (notebook de 13"): o painel tem overflow:hidden, então é aqui que
   o conteúdo encolhe em vez de ser cortado por baixo */
@media (min-width:900px) and (max-height:780px){
  .cycle-headline{font-size:var(--text-h2)}
  .cycle-row{min-height:46px}
  .cycle-row-name{font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
  .cycle-detail{margin-top:var(--space-4);font-size:var(--text-caption)}
  .cycle-ringwrap{max-width:330px}
}

@media (max-width:899px){
  .cycle-track{--cycle-step:32vh}
  /* o botão flutuante de WhatsApp mora no canto inferior direito: sem esta folga ele
     cobre as duas últimas casas da trilha de etapas */
  .cycle-track.is-live .cycle-pin{padding-bottom:var(--space-16)}
  .cycle-frame{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "ring" "side";row-gap:var(--space-5)}
  .cycle-headline{font-size:var(--text-h3);line-height:var(--leading-display);max-width:24ch}
  .cycle-ringwrap{max-width:288px;margin-inline:auto}
  .cycle-segnum{font-size:14px}
  .cycle-hub{width:64%}
  .cycle-rows,.cycle-detail{display:none}
  .cycle-stage{display:block;min-height:118px}
  .cycle-rail{display:flex}
  .cycle-hint{bottom:var(--space-2)}
}

/* movimento reduzido: nada grudado, nada girando — o ciclo inteiro de uma vez, e a lista
   (ou o próprio anel) continua sendo o controle */
@media (prefers-reduced-motion:reduce){
  .cycle-track,.cycle-track.is-live{height:auto}
  .cycle-track.is-live .cycle-pin{position:static;height:auto;overflow:visible;padding-block:var(--space-8);padding-top:var(--space-8)}
  .cycle-hint,.is-live .cycle-hint{display:none}
}

/* ---------- grades ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);align-items:center}}
.split--media-first{}
/* Seção 7b (a fundadora): no desktop a foto abre a coluna da esquerda, que é onde o olho entra.
   Empilhado, a mesma ordem de DOM poria a foto de família ANTES do título — o leitor veria o
   retrato sem saber de quem é. Abaixo de 900px o texto vem primeiro e a foto fecha. */
@media (max-width:899px){#fundadora .split>figure,#founder .split>figure{order:2}}
.grid3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
@media (min-width:700px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gutter)}}
.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (min-width:900px){.grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gutter)}}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
@media (min-width:700px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gutter)}}

.card{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-raised);box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
[data-surface="cream"] .card,[data-surface="midnight"] .card{border:1px solid var(--color-border)}
.card:hover{transform:translateY(-2px)}
[data-surface="white"] .card:hover{box-shadow:var(--elev-2)}
.card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
@media (min-width:900px){.card__body{padding:var(--space-8)}}
.card h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);text-wrap:balance}
.card__pain{color:var(--color-text-muted);font-size:var(--text-body-sm)}
.card__gain{font-weight:var(--weight-semibold);font-size:var(--text-body);margin-top:auto;padding-top:var(--space-2)}
/* Serviço sem par dor→resultado declarado (Glass Skin, EV-042): descreve o protocolo.
   Deliberadamente FORA do slot semibold de .card__gain — o peso tipográfico daquele slot
   é o da promessa, e não há resultado declarado para sustentar. */
.card__desc{color:var(--color-text-muted);font-size:var(--text-body-sm)}
.card__note{color:var(--color-text-secondary);font-size:var(--text-body-sm);margin-top:auto;padding-top:var(--space-2)}

.media{border-radius:var(--radius-xl);overflow:hidden}
/* Paginas legais (Privacidade, Termos). Coluna de leitura estreita: prosa longa em
   largura de landing page cansa. Nada de novo em cor ou tipo — so ritmo vertical. */
.legal{max-width:68ch;margin-inline:auto}
.legal h1{font-size:var(--text-h1);letter-spacing:var(--tracking-display);margin-bottom:var(--space-2)}
.legal h2{font-size:var(--text-h3);margin-top:var(--space-10);margin-bottom:var(--space-3)}
.legal p{margin-bottom:var(--space-4)}
.legal__date{color:var(--color-text-muted);margin-bottom:var(--space-10)}
.legal a{color:var(--color-link)}
/* FICHA 02 — video retrato 9:16 dentro da caixa 4:5 do card. O recorte e do CSS,
   nao do arquivo: object-fit cover corta em cima e embaixo, object-position mantem
   o enquadramento no terco superior, onde a cena acontece. */
.media__video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
@media (prefers-reduced-motion:reduce){.media__video{display:none}}
.sectionhead{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-12)}
.sectionhead h2{font-size:var(--text-h1);letter-spacing:var(--tracking-display)}
.kicker{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-medium);margin-top:var(--space-10);max-width:34ch}

/* ---------- aritmética ---------- */
.math{border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);background:var(--color-bg-raised)}
@media (min-width:900px){.math{padding:var(--space-10)}}
.math__base{display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}
.math__line{display:flex;justify-content:space-between;gap:var(--space-6);align-items:baseline;max-width:none}
.math__line span:first-child{color:var(--color-text-secondary);font-size:var(--text-body-sm)}
.math__line span:last-child{font-family:var(--font-display);font-size:var(--text-h4);white-space:nowrap}
.math__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-top:var(--space-8)}
@media (min-width:700px){.math__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
.math__col{display:flex;flex-direction:column;gap:var(--space-3);border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--space-6)}
.math__col b{font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-text-muted);font-weight:var(--weight-semibold)}
/* o slot deixou de ser placeholder de largura fixa: agora recebe número formatado, e
   "US$ 198.000" (pt-BR) é bem mais largo que "[ $ ]". Quebrar não serve — parte o
   número no meio dos dígitos. Então o valor nunca quebra e o JS reduz o corpo até
   caber na coluna (ver "caber" em _script.js). */
.math__slot{font-family:var(--font-display);font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);line-height:1.05;color:var(--color-text);white-space:nowrap;min-width:0;display:block}
.math__hint{font-size:var(--text-caption);color:var(--color-text-muted)}
/* conta do ciclo — os controles que o leitor arrasta. O único número declarado pela
   clínica (12 sessões/ano, EV-004) fica no .math__base acima e não é arrastável. */
.math__inputs{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-6)}
.math__ctrl{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:var(--space-4);row-gap:var(--space-2)}
.math__ctrl label{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--color-text)}
.math__ctrl output{font-family:var(--font-display);font-size:var(--text-h4);line-height:1;color:var(--color-text);white-space:nowrap;justify-self:end;font-variant-numeric:tabular-nums}
.math__ctrl .hint{grid-column:1/-1;margin-top:calc(var(--space-2) * -1)}

/* Slider. --fill é a fração já percorrida, escrita pelo JS a cada movimento; sem JS o
   trilho fica todo na cor de repouso e o valor inicial continua legível no <output>. */
/* 44px de altura é alvo de toque, não estética: o trilho continua com 4px e o polegar
   com 24px, mas a área que responde ao dedo passa a ser a linha inteira. */
.math__ctrl input[type="range"]{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;padding:0;background:transparent;cursor:pointer;--fill:0%}
.math__ctrl input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--color-action) var(--fill),var(--color-border-strong) var(--fill))}
.math__ctrl input[type="range"]::-moz-range-track{height:4px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--color-action) var(--fill),var(--color-border-strong) var(--fill))}
.math__ctrl input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;border:0;border-radius:var(--radius-pill);background:var(--color-action);box-shadow:var(--elev-1)}
.math__ctrl input[type="range"]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:var(--radius-pill);background:var(--color-action);box-shadow:var(--elev-1)}
.math__ctrl input[type="range"]:active::-webkit-slider-thumb{background:var(--color-action-active)}
.math__ctrl input[type="range"]:active::-moz-range-thumb{background:var(--color-action-active)}

/* slot preenchido deixa de ser rascunho: o tracejado do .math__col vira sólido */
.math__col[data-filled="true"]{border-style:solid;border-color:var(--color-border-strong)}

/* ---------- oferta do mes · bloco estatico (§12.x) ----------
   A oferta tambem vive FORA do popup, porque o popup some quando a pessoa fecha, quando o
   mes vira ou quando ela ja enviou — e destino que promete oferta no anuncio e nao a
   entrega de forma encontravel reprova em Google Ads. Reusa a caixa da aritmetica. */
.offer{display:flex;flex-direction:column;gap:var(--space-5)}
.offer__deadline{font-family:var(--font-display);font-size:var(--text-h4);
  letter-spacing:var(--tracking-display)}
.offer__deadline time{font-style:italic}
/* Os MESMOS termos, curtos, dentro do popup. A pessoa decide ali; termos que so existem
   na secao estatica sao termos que quem converte pelo popup nunca leu. */
.promo__terms{font-size:var(--text-caption);color:var(--color-text-secondary);
  line-height:var(--leading-body);margin-top:var(--space-3)}
.promo__terms time{font-style:italic}
.offer__terms{font-size:var(--text-body-sm);color:var(--color-text-secondary);max-width:62ch}
.offer .btn{margin-top:var(--space-2)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
@media (min-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10)}}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2.5rem,1.6rem + 3vw,4rem);font-weight:var(--weight-semibold);line-height:1.05;letter-spacing:var(--tracking-display)}
.stat span{display:block;margin-top:var(--space-2);font-size:var(--text-body);color:var(--color-text-secondary)}
.stars{display:flex;gap:var(--space-1);margin-top:var(--space-3);color:var(--color-accent)}
.chiprow{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:var(--text-body-sm);font-weight:var(--weight-medium)}

/* A data de conferencia da nota, no bloco de prova. Mesmo numero do selo, mesma data:
   se um mudar sem o outro, a pagina se contradiz — e o build reclama (ver build-dist.mjs). */
.stat__asof{font-size:var(--text-caption);color:var(--color-text-secondary)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--color-border)}
.faq details{border-bottom:1px solid var(--color-border)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-5);align-items:center;justify-content:space-between;min-height:56px;padding-block:var(--space-5);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-h4);color:var(--color-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 auto;transition:transform var(--dur-base) var(--ease-standard)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq__body{padding-bottom:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--container-prose)}

/* ---------- antes e depois · o BeforeAfter do §12.2 ----------
   Dois quadros 1:1 lado a lado, gutter de 24px (--space-6), legenda abaixo. SEM slider
   arrastavel, e isso e regra do §12.2, nao preferencia: o slider FORCA a comparacao e sugere
   transformacao garantida; o par estatico deixa a pessoa comparar. Diferenca de honestidade.

   O par NAO empilha no mobile, de proposito. Comparar de uma olhada e o ato inteiro desta
   secao; empilhado, o leitor rola de um para o outro e perde a comparacao. Por isso as duas
   colunas valem em qualquer largura, e o recorte e fechado justamente para aguentar 140px.

   O rotulo mora sobre PILULA Midnight chapada, nao direto sobre a foto: 18.41:1 com White,
   fora do escopo do §9.4 (que rege texto sobre imagem). */
.ba-list{max-width:780px;display:flex;flex-direction:column;gap:var(--space-12)}
.ba{display:flex;flex-direction:column;gap:var(--space-4);margin:0}
.ba__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.ba__frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-raised)}
.ba__frame img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.ba__tag{position:absolute;top:var(--space-3);left:var(--space-3);
  background:var(--e-midnight);color:var(--e-white);border-radius:var(--radius-pill);
  padding:var(--space-1) var(--space-3);font-family:var(--font-body);
  font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:.06em;text-transform:uppercase}
/* text-secondary e nao text-muted: em superficie white o muted e neutral-500, 3.56:1 — vale
   para elemento grafico, reprova para corpo, e legenda e corpo. */
.ba__cap{font-size:var(--text-caption);color:var(--color-text-secondary);max-width:none}
.ba__note{color:var(--color-text-secondary)}
.ba__note--fecho{margin-top:var(--space-12)}
.ba__legal{margin-top:var(--space-6);padding-top:var(--space-6);
  border-top:1px solid var(--color-border);
  font-size:var(--text-caption);color:var(--color-text-secondary)}

/* ---------- depoimentos ---------- */
.quote{background:var(--color-bg-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6);height:100%}
.quote blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:var(--text-body);line-height:var(--leading-body)}
.quote figcaption{display:flex;align-items:center;gap:var(--space-4);margin-top:auto}
.quote figcaption b{font-weight:var(--weight-semibold);font-size:var(--text-body-sm)}
.quote figcaption small{display:block;color:var(--color-text-muted);font-size:var(--text-caption)}
.avatar{width:48px;height:48px;border-radius:var(--radius-pill);flex:0 0 auto}
/* Avatar de iniciais (§11.10) — o padrao enquanto nao houver consentimento de imagem
   assinado para os depoimentos. Solucao completa, nao remendo. */
.avatar--initials{display:grid;place-items:center;background:var(--e-deep-purple);
  color:var(--e-pale-cream);font-family:var(--font-body);font-weight:var(--weight-semibold);
  font-size:var(--text-body-sm);letter-spacing:.04em;user-select:none}

/* ---------- MapBlock (§11.10) ---------- */
.mapblock{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-6);padding:var(--space-8);border-radius:var(--radius-xl);
  border:1px solid var(--hairline-cream);background:var(--e-neutral-900)}
.mapblock__body{display:flex;flex-direction:column;gap:var(--space-2)}
.mapblock__addr{font-family:var(--font-display);font-size:var(--text-h3);
  line-height:var(--leading-snug);color:var(--e-white);margin:0}
.mapblock__area{font-size:var(--text-body-sm);color:var(--e-pale-cream);opacity:.82;margin:0}
.mapblock__cta{flex:0 0 auto;color:var(--e-white);border-color:var(--hairline-cream-strong)}
.mapblock__cta:hover{background:rgba(238,219,203,.1)}
@media (max-width:599px){.mapblock{padding:var(--space-6)}.mapblock__cta{width:100%}}

/* ---------- formulário ---------- */
.form{display:flex;flex-direction:column;gap:var(--space-5)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--color-text)}
.field label small{font-weight:var(--weight-regular);color:var(--color-text-muted)}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-4);transition:border-color var(--dur-fast) var(--ease-standard)}
.field input{height:48px}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--color-text-muted)}
.field input:focus,.field textarea:focus{border-color:var(--color-action)}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--color-error)}
.err{display:flex;align-items:flex-start;gap:var(--space-2);color:var(--color-error);font-size:var(--text-caption);font-weight:var(--weight-medium)}
.hint{font-size:var(--text-caption);color:var(--color-text-muted)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--color-action);flex:0 0 auto}
.check span{font-size:var(--text-caption);color:var(--color-text-secondary);line-height:var(--leading-snug)}
.alert{display:flex;gap:var(--space-3);border:1px solid var(--color-error);background:var(--color-error-bg);color:var(--color-error);border-radius:var(--radius-md);padding:var(--space-4);font-size:var(--text-body-sm)}
.alert ul{margin:var(--space-2) 0 0;padding-left:var(--space-5)}
.alert a{color:inherit}
.sent{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--space-8)}
.sent h3{font-size:var(--text-h3)}
@media (min-width:640px){.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}}

/* ---------- NAP / footer ---------- */
.nap{display:flex;flex-direction:column;gap:var(--space-5);font-style:normal}
.nap a{color:var(--color-link)}
.nap dt{font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-text-muted);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}
.nap dd{margin:0;font-size:var(--text-body)}
.sig{font-family:var(--font-display);font-style:italic;font-size:var(--text-h4);color:var(--color-accent)}
.foot{border-top:1px solid var(--hairline-cream);background:var(--e-ground);color:var(--e-white);padding-block:var(--space-10)}
.foot__in{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--page-margin);display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:space-between}
.foot img{height:44px;width:auto}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.foot__links a{color:var(--e-pale-cream);font-size:var(--text-caption)}
.foot__legal{color:var(--e-neutral-400);font-size:var(--text-caption);max-width:100%;margin-top:var(--space-6)}

/* ---------- sticky mobile CTA ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--e-ground);border-top:1px solid var(--hairline-cream);padding:var(--space-3) var(--page-margin) calc(var(--space-3) + env(safe-area-inset-bottom));display:flex;gap:var(--space-3);align-items:center;transform:translateY(120%);transition:transform var(--dur-slow) var(--ease-standard)}
.sticky[data-show="true"]{transform:translateY(0)}
.sticky .btn{flex:1}
@media (min-width:900px){.sticky{display:none}}

/* ---------- WhatsApp flutuante · mesmo vidro do menu (§11.6.1) ----------
   Canto inferior direito, abaixo do scrim (z-index 70) de propósito: com o menu aberto
   ele fica coberto, como todo o resto da página. */
.wa{--wa-lift:0px;position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:55;
  display:inline-flex;align-items:center;gap:var(--space-2);height:48px;padding-inline:var(--space-4);
  color:var(--e-pale-cream);text-decoration:none;
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);
  border:1px solid transparent;border-radius:var(--radius-pill);box-shadow:var(--elev-3);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  background:linear-gradient(var(--glass-tint),var(--glass-tint)) padding-box,var(--glass-edge) border-box;
  transform:translateY(var(--wa-lift));
  transition:transform var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.wa span{white-space:nowrap}
.wa:hover{color:var(--e-white);text-decoration:none;transform:translateY(calc(var(--wa-lift) - 2px))}
@media (min-width:900px){.wa{right:var(--space-6);bottom:var(--space-6)}}
/* O CTA fixo do §11.10 toma o rodapé no mobile: o botão sobe em vez de ficar por baixo.
   A altura é a do próprio .sticky — 48px de botão + var(--space-3) de padding em cima e
   embaixo — mais uma folga e a safe area do iPhone. */
.sticky[data-show="true"] ~ .wa{--wa-lift:calc(-72px - var(--space-3) - env(safe-area-inset-bottom, 0px))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wa{background:linear-gradient(var(--glass-tint-fallback),var(--glass-tint-fallback)) padding-box,var(--glass-edge) border-box}
}
@media (prefers-reduced-transparency:reduce){
  .wa{background:var(--e-ground);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--hairline-cream-strong)}
}

/* ---------- promoção com prazo · barra do topo + popup ----------
   A barra é a única coisa da página acima do header: ela fica em `top:0` e o header desce
   por --promo-h, que o _script.js escreve medindo esta barra. z-index 65 fica acima do CTA
   fixo (60) e ABAIXO do scrim do menu (70), de propósito — com o menu aberto a barra some
   sob o scrim, como todo o resto.

   O popup usa scrim próprio, em 80, acima de tudo: ele é modal de verdade (aria-modal,
   foco preso, Esc fecha), e o menu não deve aparecer por cima dele. */
.promobar{position:fixed;top:0;left:0;right:0;z-index:65;
  transition:transform var(--dur-base) var(--ease-standard);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-3) var(--space-5);padding:var(--space-3) var(--page-margin);
  background:var(--e-ground);color:var(--e-white);
  border-bottom:1px solid var(--hairline-cream);box-shadow:var(--elev-2);
  font-size:var(--text-body-sm)}
.promobar[data-show="false"]{display:none}
/* Recolhe ao rolar para baixo e volta ao rolar para cima. Quem move é a barra (transform),
   e o header acompanha por --promo-shift — de propósito NÃO mexendo em --promo-h: esse
   continua sendo a altura de LAYOUT (padding do hero, âncoras, scroll-padding). Zerar
   --promo-h aqui faria o conteúdo do hero pular 60px toda vez que a barra se escondesse. */
.promobar[data-hidden="true"]{transform:translateY(-100%)}
.promobar p{margin:0}
.promobar__txt strong{font-weight:var(--weight-semibold)}
.promobar__clock{display:inline-flex;align-items:center;gap:var(--space-2)}
.promobar__label{font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--e-pale-cream)}
.promobar__clock time{font-size:var(--text-body-lg);font-weight:var(--weight-semibold);color:var(--e-pale-cream);font-variant-numeric:tabular-nums}
/* O disabled global é desenhado para fundo claro (neutral-100 sobre neutral-500); aqui o
   fundo é o chão escuro, e o mesmo cinza vira uma mancha clara. Fica só a borda. */
.promobar .btn[disabled],.promobar .btn[aria-disabled="true"]{background:transparent;color:var(--e-neutral-300);border-color:var(--hairline-cream)}
@media (max-width:599px){
  .promobar{gap:var(--space-2) var(--space-4);padding-inline:var(--space-4)}
  .promobar__txt{flex:1 1 100%;text-align:center}
}

.promo-scrim{position:fixed;inset:0;z-index:80;background:rgba(var(--e-ground-rgb),.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-standard)}
.promo-scrim[data-open="true"]{opacity:1;pointer-events:auto}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .promo-scrim{background:rgba(var(--e-ground-rgb),.85)}
}
@media (prefers-reduced-transparency:reduce){
  .promo-scrim{background:var(--e-ground);-webkit-backdrop-filter:none;backdrop-filter:none}
}

.promo{position:fixed;z-index:81;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(calc(100% - var(--space-8)),560px);
  max-height:calc(100svh - var(--space-6));overflow-y:auto;
  background:var(--color-bg);color:var(--color-text);
  border-radius:var(--radius-xl);box-shadow:var(--elev-3);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-entrance),transform var(--dur-base) var(--ease-entrance)}
.promo[data-open="true"]{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
/* Uma coluna no celular; a partir de 760px a oferta vai para a esquerda e o formulário para
   a direita. A altura deixa de ser a SOMA dos dois e passa a ser o MAIOR deles — é o que tira
   o popup da barra de rolagem em tela de laptop, sem cortar campo nenhum. */
.promo__in{position:relative;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6)}
.promo__lede{display:flex;flex-direction:column;gap:var(--space-3)}
@media (min-width:760px){
  .promo{width:min(calc(100% - var(--space-8)),880px)}
  .promo__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    column-gap:var(--space-8);row-gap:var(--space-5);align-items:start;padding:var(--space-8)}
  .promo__lede{align-self:center}
  .promo__expired{grid-column:1 / -1}
}
.promo__close{position:absolute;top:var(--space-4);right:var(--space-4);
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--radius-pill);background:transparent;border:1px solid var(--color-border);
  color:var(--color-text);cursor:pointer}
.promo__close::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.promo__close:hover{border-color:var(--color-border-strong)}
.promo__badge{color:var(--color-accent);padding-right:56px}
/* Escala própria, menor que --text-h2 (42px): num popup o título divide a dobra com o
   formulário, e 42px sozinho comia 148px de altura. */
.promo__title{margin:0;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.12;letter-spacing:var(--tracking-display);text-wrap:balance}
.promo__title em{font-style:italic;font-weight:var(--weight-regular);color:var(--color-accent)}
.promo__sub{margin:0;color:var(--color-text-secondary)}
.promo__clockbox{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);background:var(--color-bg-raised)}
.promo__clocklabel{margin:0;font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--color-text-secondary);line-height:1.2;text-align:center}
/* No celular o relógio vira linha: rótulo e número lado a lado custam ~30px a menos que
   empilhados, e ali cada pixel de altura está disputado. */
@media (max-width:759px){
  .promo__clockbox{flex-direction:row;justify-content:center;gap:var(--space-3);padding:var(--space-2) var(--space-4)}
  .promo__clocklabel{max-width:10ch;text-align:right}
}
.promo__clock{margin:0;font-family:var(--font-display);font-size:clamp(1.75rem,1.5rem + .8vw,2.25rem);line-height:1;font-variant-numeric:tabular-nums}
.promo__expired{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.promo__expired h3{margin:0;font-size:var(--text-h3)}
.promo__expired p{margin:0;color:var(--color-text-secondary)}
/* O popup divide a dobra com a oferta: campo de texto alto aqui custa scroll. 64px ainda
   deixa duas linhas visíveis, e o campo é opcional. */
.form--promo{gap:var(--space-4)}
.form--promo .hint{font-size:var(--text-caption);color:var(--color-text-muted);margin:0}
.form--promo textarea{min-height:64px}
.form--promo .check span{font-size:var(--text-caption);line-height:1.35}
/* No celular o popup encosta no rodapé da tela: cartão inteiro centralizado sobra pouco
   espaço quando o teclado virtual abre. */
@media (max-width:759px){
  /* Nome e telefone lado a lado JÁ no celular — no formulário da página eles só pareiam a
     partir de 640px, mas ali a coluna é a página inteira. Aqui a altura é o recurso escasso,
     e empilhar os dois custa ~96px que o popup não tem. */
  .form--promo .form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .form--promo{gap:var(--space-3)}
  .promo{width:100%;top:auto;bottom:0;max-height:96svh;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    transform:translate(-50%,16px)}
  .promo[data-open="true"]{transform:translate(-50%,0)}
  .promo__in{padding:var(--space-5) var(--space-5) var(--space-6)}
  .promo__close{top:var(--space-3);right:var(--space-3)}
  /* Numa tela de celular a soma não cabe de jeito nenhum com os cinco campos. O que sai é o
     parágrafo de apoio — título e relógio já dizem o que é, e nenhum campo é perdido. */
  .promo__sub{display:none}
  .promo__title{font-size:1.375rem}
}
/* Tela baixa (iPhone SE e afins): o último aperto antes de aceitar rolagem. Some a dica de
   telefone — o mesmo número está no rodapé e no botão flutuante — e a caixa de mensagem cai
   para uma linha. Nenhum campo sai. */
@media (max-width:759px) and (max-height:700px){
  .promo__in{padding:var(--space-4) var(--space-5) var(--space-5);gap:var(--space-3)}
  .form--promo{gap:var(--space-2)}
  .promo__title{font-size:1.25rem}
  .form--promo textarea{min-height:48px}
  .form--promo > .hint{display:none}
  .promo__clockbox{padding:var(--space-2) var(--space-3)}
}
@media (prefers-reduced-motion:reduce){.promo,.promo-scrim{transition:none}}

/* ---------- gesto / onda ---------- */
.gesture{display:block;width:min(360px,60%);height:auto;color:var(--color-accent);opacity:.55}

/* ---------- movimento · reveal no scroll (§7.2) ----------
   O estado escondido mora no atributo, e quem põe o atributo é o _script.js. Página sem
   JS mostra tudo. O JS não marca nada acima da dobra (LCP) nem com movimento reduzido;
   o @media abaixo é cinto de segurança, não o mecanismo. O atributo some quando a
   entrada termina — senão este transition ficaria por cima do hover do card. */
[data-reveal]{transition:opacity var(--dur-reveal) var(--ease-gesture),transform var(--dur-reveal) var(--ease-gesture);transition-delay:var(--reveal-delay,0ms)}
[data-reveal="pending"]{opacity:0;transform:translateY(16px)}
[data-reveal="in"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}