/* ==========================================================================
   ANA CLAUDIA BRAGA — camada do cliente
   O motor (main.css) não é tocado além do bloco de marca. Tudo aqui em `em`.
   Exceções deliberadas: 44px de alvo de toque (constante ergonômica) e os
   valores de blur/grão, que são físicos e não escalam com a tipografia.
   ========================================================================== */

/* ---------- Cores da camada de luz (lidas pelo shader em js/luz.js) ------
   Precisam ser hex de 6 dígitos: o shader faz parse por posição. */
:root {
  --luz-1: #C47B6A;   /* terracota */
  --luz-2: #D8A49B;   /* blush */
  --luz-3: #8A9A86;   /* sálvia */
  --luz-4: #F5EBE6;   /* nude, só como véu de ruído */
}

/* ---------- Fontes: servidas daqui, sem Google Fonts -------------------
   O CSS do Google era a requisição que mais bloqueava a primeira pintura (dois
   domínios a mais no 4G). Arquivos latinos variáveis em fonts/, com a versão no
   nome (cache de 1 ano). Sem preload de propósito: no 4G eles disputariam banda
   com este CSS e atrasariam a primeira pintura.
   O texto pinta primeiro no fallback local, e os fallbacks abaixo são CALIBRADOS
   (size-adjust e métricas medidos no Chrome em 02/10, com o próprio texto do
   site): Times e Arial ocupam a mesma largura que Playfair e Inter, então a troca
   de fonte não empurra a página. Trocou de família? Meça de novo. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-v40-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-italic-v40-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-v20-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Fallback"; font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif");
  size-adjust: 111.12%; ascent-override: 97.19%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Times-Italic"), local("Liberation Serif Italic");
  size-adjust: 104.7%; ascent-override: 103.15%; descent-override: 23.88%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 100 350;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104.38%; ascent-override: 92.93%; descent-override: 22.99%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 351 900;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 106.11%; ascent-override: 91.41%; descent-override: 22.62%; line-gap-override: 0%; }
:root {
  --serif: "Playfair Display", "Playfair Fallback", "Times New Roman", serif;
  --sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Retune tipográfico (regra 3) ------------------------------- */
body { font-family: var(--sans); }
.lede { font-size: 1.28em; line-height: 1.5; }
.body-txt { font-size: 1em; line-height: 1.62; }
.kicker { font-size: .68em; letter-spacing: .2em; }
.footer__cols h3 { font-family: var(--sans); line-height: 1.4; }
.footer__cols { grid-template-columns: repeat(2, auto); }

/* ---------- Display: Playfair, não Cormorant --------------------------
   Medido, não escolhido por gosto: a Cormorant Garamond posiciona os acentos
   altíssimos e em display de 4em "você", "três" e "ô" leem como acento SOLTO.
   Este site é em português, com palavra acentuada em quase todo título.
   Trocar de família obriga a retunar tudo (regra 3): a Playfair 400 pesa mais
   que a Cormorant 300, então a escala cai ~12,5% e o line-height sobe. */
.display,
h1,
h2,
h3,
.nav__logo,
.footer__mark,
.passo h3,
.fase h3,
.overlay nav a {
  font-family: var(--serif);
  font-weight: 400;
}
.display, h1, h2, h3 { line-height: 1.02; letter-spacing: -.02em; }

.d1 { font-size: 6.2em; }
.d2 { font-size: 4.3em; }
.d3 { font-size: 2.8em; }
.d4 { font-size: 1.85em; }

.hero--tipo .hero__head .d1 { font-size: 7.4em; }
.nav__logo { font-size: 1.3em; }
.overlay nav a { font-size: 2.25em; line-height: 1.3; }
.footer__mark { font-size: 7em; letter-spacing: -.035em; }
.sint__painel h3 { font-size: 1.5em; }
.sobre .d2 { font-size: 3.6em; }
.faq summary::after { font-family: var(--sans); font-size: 1.35em; font-weight: 300; }

@media (max-width: 991px) {
  .d1 { font-size: 4.6em; } .d2 { font-size: 3.5em; }
  .d3 { font-size: 2.4em; } .d4 { font-size: 1.7em; }
  .hero--tipo .hero__head .d1 { font-size: 4.7em; }
  .footer__mark { font-size: 4.2em; }
  .sobre .d2 { font-size: 3em; }

}
@media (max-width: 767px) {
  .d1 { font-size: 3.05em; } .d2 { font-size: 2.9em; }
  .d3 { font-size: 2.1em; } .d4 { font-size: 1.55em; }
  .hero--tipo .hero__head .d1 { font-size: 3.05em; }
  .footer__mark { font-size: 2.9em; }
  .sobre .d2 { font-size: 2.5em; }
  .overlay nav a { font-size: 1.55em; line-height: 1.22; }

}

.nav__logo em, .footer__mark em, .script {
  font-family: var(--serif); font-style: italic; font-weight: 400;
}
.footer__mark em { color: var(--blush); }
.nav__logo { font-weight: 400; letter-spacing: 0; }

/* ---------- Botões: contraste ------------------------------------------
   O preenchimento do motor era `--gold`, que aqui é a terracota da marca —
   e terracota com grafite dá 3,25:1, reprova em texto de botão. Uso a
   terracota escurecida com creme: 5,65:1. */
.btn::after { background: var(--terra-text); }
.btn:hover, .btn:active { color: var(--cream-2); }
.btn--gold { --btn-bg: var(--terra-text); --btn-fg: var(--cream-2); }
.btn--gold::after { background: var(--ink); }
.btn--gold:hover, .btn--gold:active { color: var(--cream-2); }
.btn { min-height: 44px; }
.skip { background: var(--ink); color: var(--cream-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--terra-text); }
:focus-visible { outline: 2px solid var(--terra-text); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible, .footer :focus-visible { outline-color: var(--blush); }

/* ==========================================================================
   TRAVA DE SEGURANÇA
   O CSS esconde o que o JS vai revelar. Se o GSAP não subir (CDN fora do ar)
   ou o nível for estático, o JS remove `js-anim` e tudo reaparece na hora —
   texto invisível para sempre é muito pior que texto sem animação.
   ========================================================================== */
html.js-anim [data-sobe] { opacity: 0; }
html.js-anim .fase { opacity: 0; }

/* ==========================================================================
   PROGRESSO DE LEITURA + PONTEIRO INERCIAL
   ========================================================================== */
.prog {
  position: fixed; top: 0; left: 0; right: 0; z-index: 96;
  height: 2px; pointer-events: none;
}
.prog i { display: block; height: 100%; width: 0; background: var(--terra); opacity: .9; }

/* 13 linhas de JS, dispensa biblioteca. Só em ponteiro fino e tela larga. */
.ponteiro {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; display: none;
  will-change: transform;
}
.ponteiro i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid var(--blush); background: rgba(216,164,155,.14);
  transform: scale(.5); opacity: 0;
  transition: transform .4s var(--e-soft), opacity .3s var(--e-soft), background .4s var(--e-soft);
}
.ponteiro[data-on="1"] i { transform: scale(1); opacity: 1; }
.ponteiro[data-alvo="1"] i { transform: scale(1.9); background: rgba(216,164,155,.24); }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  html[data-nivel="completo"] .ponteiro { display: block; }

}

/* ==========================================================================
   ATMOSFERA — luz quente à deriva, grão e desfoque progressivo
   É o que substitui o shader WebGL: mesmo papel (dar profundidade e vida ao
   fundo), custo de três gradientes animados por transform.
   ========================================================================== */
.atmos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.atmos i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(60px); opacity: .55; will-change: transform;
}
.atmos i:nth-child(1) {
  width: 46em; height: 46em; left: -8em; top: -10em;
  background: radial-gradient(circle, rgba(196,123,106,.55), transparent 68%);
  animation: deriva1 26s ease-in-out infinite alternate;
}
.atmos i:nth-child(2) {
  width: 38em; height: 38em; right: -6em; top: 18%;
  background: radial-gradient(circle, rgba(216,164,155,.42), transparent 68%);
  animation: deriva2 32s ease-in-out infinite alternate;
}
.atmos i:nth-child(3) {
  width: 30em; height: 30em; left: 42%; bottom: -12em;
  background: radial-gradient(circle, rgba(138,154,134,.36), transparent 68%);
  animation: deriva3 38s ease-in-out infinite alternate;
}
.atmos--sutil i { opacity: .3; filter: blur(80px); }
@keyframes deriva1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6em,4em,0) scale(1.16); } }
@keyframes deriva2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-5em,6em,0) scale(.94); } }
@keyframes deriva3 { from { transform: translate3d(0,0,0) scale(.95); } to { transform: translate3d(4em,-5em,0) scale(1.2); } }
/* Em celular e aparelho fraco a deriva para e o blur sai: o radial já termina
   em transparente, e blur de 40px a DPR 3 custa raster na primeira pintura.
   O grão também sai (regra logo abaixo). A/B de 25/09, celular emulado:
   primeira pintura ~3,3 s com eles, ~2,5 s sem cada um. */
html[data-nivel="leve"] .atmos i { animation: none; filter: none; }
html[data-nivel="estatico"] .atmos { display: none; }

/* Grão de filme: tira o "digital liso" do gradiente. Uma imagem SVG inline. */
.grao {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
html[data-nivel="leve"] .grao, html[data-nivel="estatico"] .grao { display: none; }

/* Desfoque progressivo (técnica do LionStack): N camadas empilhadas, cada uma
   com o dobro do blur da anterior e uma máscara que cobre só a sua faixa,
   sobrepondo metade da vizinha. O conteúdo se DISSOLVE ao sair, não corta. */
.blur-prog { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.blur-prog--baixo { bottom: 0; height: 9em; }
.blur-prog i { position: absolute; inset: 0; display: block; }
html[data-nivel="leve"] .blur-prog,
html[data-nivel="estatico"] .blur-prog { display: none; }

/* ==========================================================================
   NAV — véu que dissolve o conteúdo por baixo
   ========================================================================== */
.nav__veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
  opacity: 0; transition: opacity .5s var(--e-move);
}
html[data-rolou="1"] .nav__veu { opacity: 1; }
html[data-nivel="leve"] .nav__veu, html[data-nivel="estatico"] .nav__veu { display: none; }

/* ==========================================================================
   CENA 1 · ABERTURA
   ========================================================================== */
.hero--tipo { background: var(--ink); }
.hero > .hero__content { z-index: 4; }

.respira { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.respira i {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: 34em; height: 34em; border-radius: 50%;
  border: 1px solid rgba(216,164,155,.24);
  animation: respira 7s cubic-bezier(.45,0,.35,1) infinite;
  will-change: transform;
}
.respira i:nth-child(2) { width: 48em; height: 48em; animation-delay: .5s; border-color: rgba(216,164,155,.15); }
.respira i:nth-child(3) { width: 62em; height: 62em; animation-delay: 1s; border-color: rgba(138,154,134,.13); }
@keyframes respira {
  0%, 100% { transform: scale(.94); opacity: .5; }
  42%      { transform: scale(1.06); opacity: 1; }
  62%      { transform: scale(1.04); opacity: .92; }
}
html[data-nivel="estatico"] .respira i { animation: none; }
/* Sem GPU, animação infinita é recomposição de tela em CPU a cada quadro. */
html[data-gpu="nao"] .respira i, html[data-gpu="nao"] .hero__cue i { animation: none; }

.hero__head .d1 em { font-style: italic; color: var(--blush); }

/* Seção 01: o aposto do título (pedido da Ana) desce para uma linha menor, em
   itálico, e a frase de apoio sai do h2. */
.sec-head__aposto { display: block; margin-top: .4em; font-size: .46em; line-height: 1.3; font-style: italic; color: var(--terra-text); letter-spacing: -.005em; }
.sec-head__sub { margin-top: 1.2em; font-size: 1.05em; line-height: 1.5; color: var(--fg-soft); }

/* Crédito da agência no rodapé (padrão de todos os sites desde 09/10): o @ em
   minúsculas e sublinhado, para ler como link para o Instagram. */
.footer__credito a {
  text-transform: none; letter-spacing: .02em; color: var(--cream-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  transition: color .3s var(--e-move);
}
.footer__credito a:hover, .footer__credito a:focus-visible { color: var(--blush); }
.footer__bottom a[href="/privacidade"], .footer__cookies {
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: underline; text-underline-offset: .3em;
}
.footer__cookies { margin-left: .8em; }
.footer__cookies[hidden] { display: none; }

/* Aviso de cookies (LGPD): só aparece com o Analytics configurado. Fica acima do
   botão do WhatsApp e do painel da mensagem. */
.cookies {
  position: fixed; z-index: 92; left: 1.5em; bottom: 1.5em; width: 30em; max-width: calc(100% - 3em);
  padding: 1.5em; border-radius: var(--radius); background: var(--cream-2); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 1.2em 3em rgba(62,62,62,.2);
  font-size: .95em; line-height: 1.5;
}
.cookies[hidden] { display: none; }
.cookies a { text-decoration: underline; text-underline-offset: .2em; }
.cookies__acoes { display: flex; gap: .7em; margin-top: 1.1em; flex-wrap: wrap; }
@media (max-width: 767px) {
  .cookies { left: var(--gutter, 16px); right: var(--gutter, 16px); bottom: 1em; width: auto; max-width: none; }
}

/* ---------- Entrada da abertura: CSS puro -----------------------------------
   Roda na primeira pintura, sem preloader e sem esperar JS nem fonte: o texto
   do herói é o LCP (escondido até o GSAP chegar, custava 2,2 s no PageSpeed).
   O mesmo descasamento de antes: deslocamento longo, opacidade curta. Sem JS
   também anima; com movimento reduzido, aparece pronto (bloco do fim). */
@keyframes entra-sobe { from { translate: 0 1.6em; } }
/* 1% e não 0: o Chrome não conta como LCP texto que nasce invisível por animação,
   e o LCP do celular caía na foto do arco (2,2 s). Ao olho é a mesma coisa. */
@keyframes entra-acende { from { opacity: .01; } }
@keyframes entra-traco { from { transform: scaleX(0); } }
@keyframes entra-arco { from { clip-path: inset(100% 0 0 0); } }
@keyframes entra-zoom { from { scale: 1.22; } }
.hero [data-entra] {
  animation: entra-sobe 1.6s var(--e-out) var(--atraso, 0s) both,
             entra-acende .5s linear var(--atraso, 0s) both;
}
.hero [data-entra="1"] { --atraso: .08s; }
.hero [data-entra="2"] { --atraso: .16s; }
.hero [data-entra="3"] { --atraso: .26s; }
.hero [data-entra="4"] { --atraso: .4s; }
.hero__kicker::before { animation: entra-traco 1.1s var(--e-out) .25s both; }
.hero__arco { animation: entra-arco 1.5s cubic-bezier(.87,0,.13,1) .3s both; }
.hero__arco img { animation: entra-zoom 2.2s var(--e-out) .45s both; }
.hero__acoes { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 2.4em; }
/* o traço do kicker cresce em vez de aparecer pronto */
.kicker::before { transform: scaleX(var(--traco, 1)); transform-origin: left; }

/* ---------- Assinatura com retrato ---------------------------------------
   Herói tipográfico com rosto: arco pequeno + nome logo abaixo dos botões. O mesmo
   arco, grande, é a foto do "quem sou". Desde 02/10 a foto é o original de estúdio
   (2773×4160, em _fontes/): dois tamanhos em srcset, a imagem cobre o arco inteiro e
   o object-position segura a cabeça abaixo da cúpula. */
.arco-foto {
  position: relative; overflow: hidden;
  background: #d6cecb;   /* fundo do estúdio da foto, medido: segura o arco enquanto a imagem carrega */
}
.arco-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
/* Na linha dos botões, separada por um fio: numa linha própria ela empurrava
   os números do rodapé do herói para baixo da dobra em 1440×820. */
.hero__acoes { align-items: center; }
/* No grafite o contorno padrão do ghost (--line escuro) some; aqui ele tem que aparecer
   para os dois secundários lerem como botão ao lado do "Agendar". */
.hero .btn--ghost { border-color: rgba(250,250,250,.3); }
.hero__retrato {
  display: flex; align-items: center; gap: 1em; margin: 0 0 0 1em;
  padding-left: 1.8em; border-left: 1px solid rgba(250,250,250,.16);
}
.hero__arco {
  flex: none; width: 4.2em; aspect-ratio: 24 / 33; border-radius: 999em 999em .7em .7em;
  box-shadow: 0 0 0 1px rgba(216,164,155,.28), 0 .8em 1.8em rgba(0,0,0,.3);
}
.hero__arco img { transform-origin: 50% 100%; }
.hero__assina { display: grid; gap: .3em; }
.hero__assina b { font-family: var(--serif); font-weight: 400; font-size: 1.2em; line-height: 1.1; color: var(--cream-2); }
.hero__assina span { font-size: .64em; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--grey-2); }
/* CREFITO pequeno, logo abaixo da função (pedido da Ana: "subir e ficar pequenininho") */
.hero__assina small { font-size: .58em; letter-spacing: .12em; line-height: 1.4; color: var(--grey-2); }  /* sem opacidade: com .8 dava 4,3:1 e reprovava */
@media (max-width: 767px) {
  .hero__retrato { flex-basis: 100%; margin: 1em 0 0; padding-left: 0; border-left: 0; }
  .hero__arco { width: 4em; }
  .hero__assina b { font-size: 1.1em; }
  .hero__assina span { font-size: .6em; letter-spacing: .1em; }
  .hero__assina small { font-size: .56em; letter-spacing: .1em; }

}

/* Formações: gatilho discreto no rodapé do herói + <dialog>. No celular o
   cartão vira folha que sobe da base; no desktop, cartão central. */
.hero__formacoes {
  display: inline-flex; align-items: center; gap: .8em; min-height: 44px; text-align: left;
  font-size: .7em; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-2);
}
.hero__formacoes i { font-style: normal; font-size: 1.6em; line-height: 1; color: var(--blush); transition: transform .4s var(--e-move); }
.hero__formacoes:hover i, .hero__formacoes:focus-visible i { transform: rotate(90deg); }

.formacoes {
  width: min(40em, 100% - 2 * var(--gutter)); max-width: none; max-height: min(46em, 100% - 3em);
  margin: auto; padding: 0; border: 0; border-radius: 1.4em;
  background: var(--ink-2); overscroll-behavior: contain;
  box-shadow: 0 2em 5em rgba(0,0,0,.45), 0 0 0 1px rgba(216,164,155,.18);
  opacity: 0; translate: 0 1.5em;
  transition: opacity .4s var(--e-out), translate .6s var(--e-out), overlay .6s allow-discrete, display .6s allow-discrete;
}
.formacoes[open] { opacity: 1; translate: 0 0; }
.formacoes::backdrop {
  background: rgba(24,21,20,.64); opacity: 0;
  transition: opacity .4s, overlay .4s allow-discrete, display .4s allow-discrete;
}
.formacoes[open]::backdrop { opacity: 1; }
@starting-style {
  .formacoes[open] { opacity: 0; translate: 0 1.5em; }
  .formacoes[open]::backdrop { opacity: 0; }
}
html:has(.formacoes[open]) { overflow: hidden; }

.formacoes__topo {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end;
  padding: 1em 1.4em .4em; background: linear-gradient(var(--ink-2) 65%, transparent);
}
.formacoes__fechar {
  display: inline-flex; align-items: center; gap: .6em; min-height: 44px;
  font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-2);
}
.formacoes__fechar i { font-style: normal; font-size: 1.7em; line-height: 1; color: var(--blush); }
.formacoes__corpo { padding: 0 2.6em 2.6em; }
.formacoes__corpo .d4 { margin: .5em 0 1.2em; }
.formacoes__lista > li {
  position: relative; padding: .95em 0 .95em 1.6em; border-top: 1px solid var(--line);
  font-size: .98em; line-height: 1.55;
}
.formacoes__lista > li::before {
  content: ""; position: absolute; left: 0; top: 1.55em; width: .5em; height: .5em;
  border-radius: 50%; border: 1px solid var(--blush);
}
.formacoes__lista ul { margin-top: .6em; display: grid; gap: .45em; color: var(--grey-2); font-size: .94em; }
.formacoes__lista ul li { padding-left: 1.1em; position: relative; }
.formacoes__lista ul li::before { content: ""; position: absolute; left: .1em; top: .72em; width: .32em; height: .32em; border-radius: 50%; background: var(--blush); }

@media (max-width: 767px) {
  .formacoes {
    width: 100%; max-height: 88svh; margin: auto 0 0;
    border-radius: 1.4em 1.4em 0 0; translate: 0 100%;
  }
  .formacoes[open] { translate: 0 0; }
  @starting-style { .formacoes[open] { translate: 0 100%; } }
  .formacoes__topo { padding-inline: var(--gutter); }
  .formacoes__corpo { padding: 0 var(--gutter) calc(2em + env(safe-area-inset-bottom)); }

}

@media (max-width: 767px) {
  .respira i { width: 22em; height: 22em; }
  .respira i:nth-child(2) { width: 31em; height: 31em; }
  .respira i:nth-child(3) { width: 40em; height: 40em; }
  .hero__acoes { margin-top: 1.8em; }
  .hero__acoes .btn { width: 100%; justify-content: center; }
  .hero__foot { margin-top: 2.2em; }
  .blur-prog--baixo { height: 6em; }

}

/* ==========================================================================
   CENA 2 · RECONHECIMENTO — "a conversa que se monta"
   O alvo (asktia) dedica o maior bloco do documento a "Symptoms we treat —
   tap to find related services". Portei o PAPEL e o elevei a mecânica: marcar
   um sintoma escreve, ao vivo, a mensagem que a pessoa vai mandar.
   ========================================================================== */
/* Opções recolhidas atrás do botão (05/10). Aberto, o botão vira "Recolher opções". */
.sint__abre { display: inline-flex; list-style: none; cursor: pointer; outline: none; }
.sint__abre::-webkit-details-marker { display: none; }
.sint__abre:focus-visible > * { outline: 2px solid var(--terra-text); outline-offset: 3px; }
.sint__recolhe {
  display: none; align-items: center; min-height: 44px;
  font-size: .78em; color: var(--fg-soft); text-decoration: underline; text-underline-offset: .25em;
}
.sint__caixa[open] .sint__abre .btn { display: none; }
.sint__caixa[open] .sint__recolhe { display: inline-flex; }
.sint__caixa[open] .sint__abre { margin-bottom: 1.4em; }
.sint__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.4em; align-items: start; }
.sint__lista { display: grid; gap: .5em; }
.sint__item { border-bottom: 1px solid var(--line); position: relative; }
/* hairline que se desenha quando o item entra */
.sint__item::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--terra); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--e-soft);
}
.sint__item.is-vis::after { transform: scaleX(1); }
.sint__chip {
  display: grid; grid-template-columns: 1.5em 1fr; gap: .9em; align-items: start;
  padding: 1em 0; cursor: pointer; min-height: 44px;
  transition: color .35s var(--e-move);
}
.sint__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.sint__box {
  width: 1.5em; height: 1.5em; border-radius: 50%; margin-top: .1em;
  border: 1px solid var(--line); flex: none; position: relative;
  transition: border-color .3s var(--e-move), box-shadow .45s var(--e-soft);
}
.sint__box::after {
  content: ""; position: absolute; inset: .38em; border-radius: 50%;
  background: var(--terra-text); transform: scale(0);
  transition: transform .34s var(--e-soft);
}
.sint__item:has(input:checked) .sint__box { border-color: var(--terra-text); box-shadow: 0 0 0 .28em rgba(196,123,106,.14); }
.sint__item:has(input:checked) .sint__box::after { transform: scale(1); }
.sint__chip input:focus-visible + .sint__box { outline: 2px solid var(--terra-text); outline-offset: 3px; }
.sint__txt { font-size: 1.06em; line-height: 1.4; }
.sint__item:has(input:checked) .sint__txt { color: var(--terra-text); }

.sint__eco { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e-soft); }
.sint__item:has(input:checked) .sint__eco { grid-template-rows: 1fr; }
.sint__eco > span {
  overflow: hidden; display: block;
  font-size: .92em; line-height: 1.55; color: var(--fg-soft);
  padding-left: 2.4em; max-width: 32em;
}
.sint__item:has(input:checked) .sint__eco > span { padding-bottom: 1.1em; }

.sint__painel {
  position: sticky; top: 7em;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream-2); padding: 1.9em;
  transition: box-shadow .6s var(--e-soft);
}
.sint__painel.is-pulso { box-shadow: 0 0 0 .35em rgba(196,123,106,.12), 0 1.2em 3em rgba(62,62,62,.1); }
.sint__painel h3 { margin-bottom: .5em; }
.sint__dica { font-size: .86em; color: var(--fg-soft); line-height: 1.55; }
.sint__msg {
  margin: 1.4em 0; padding: 1.2em 1.3em; border-radius: var(--radius);
  background: var(--cream); border: 1px solid var(--line);
  font-size: .94em; line-height: 1.6; white-space: pre-wrap;
  min-height: 8em; color: var(--fg);
}
.sint__msg em { font-style: normal; color: var(--fg-soft); }
.sint__painel .btn { width: 100%; justify-content: center; }
.sint__puxador {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 44px; gap: 1em; margin-bottom: .4em;
}
.sint__puxador i { display: none; }
.sint__conta { font-size: .72em; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-soft); }
.sint__limpar { font-size: .78em; color: var(--fg-soft); text-decoration: underline; text-underline-offset: .25em; margin-top: .9em; display: inline-block; min-height: 44px; }
/* o display acima vencia o [hidden] do HTML: o link aparecia sem nada marcado */
.sint__limpar[hidden] { display: none; }
.sint__priv { display: flex; gap: .7em; align-items: flex-start; margin-top: 1.4em; font-size: .8em; line-height: 1.5; color: var(--fg-soft); }
.sint__priv svg { width: 1.1em; height: 1.1em; flex: none; margin-top: .2em; color: var(--sage-text); }

@media (max-width: 991px) {
  .sint__grid { grid-template-columns: 1fr; gap: 2em; }
  .sint__painel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 85;
    border-radius: 1em 1em 0 0; border-width: 1px 0 0;
    padding: 1.2em 1.25em calc(1.2em + env(safe-area-inset-bottom));
    box-shadow: 0 -.6em 2em rgba(62,62,62,.18);
    transform: translateY(102%); transition: transform .5s var(--e-soft);
    max-height: 74svh; overflow-y: auto;
  }
  .sint__painel.is-on { transform: translateY(0); }
  .sint__painel h3 { font-size: 1.35em; }
  .sint__msg { min-height: 0; max-height: 9em; overflow-y: auto; font-size: .9em; }
  body.sint-aberto .wa-float { transform: scale(0); }

  /* Barra compacta: no iPhone SE o painel aberto comia 70% da tela. Contagem e
     CTA ficam sempre visíveis; a mensagem abre no puxador. */
  .sint__puxador i {
    display: block; width: .62em; height: .62em; flex: none;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(-135deg); transition: transform .4s var(--e-move);
    color: var(--fg-soft); margin-bottom: .2em;
  }
  .sint__painel.is-aberto .sint__puxador i { transform: rotate(45deg); margin: .2em 0 0; }
  .sint__corpo {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height .45s var(--e-soft), opacity .3s var(--e-move);
  }
  .sint__painel.is-aberto .sint__corpo { max-height: 30em; opacity: 1; }
  .sint__priv { display: none; }
  .sint__painel.is-aberto .sint__priv { display: flex; }

}

/* Telas baixas (iPhone SE e afins): o painel aberto chegava a 73% da altura.
   Em vez de não abrir — o que esconderia justamente a mensagem que a mecânica
   escreve — ele abre enxuto: o puxador já diz o que é, então o título e a dica
   saem e a prévia ganha rolagem própria. */
@media (max-width: 991px) and (max-height: 720px) {
  .sint__painel.is-aberto .sint__corpo { max-height: 15em; }
  .sint__painel h3, .sint__dica { display: none; }
  .sint__msg { max-height: 6.4em; margin: .8em 0; }
  .sint__priv { font-size: .74em; margin-top: .9em; }
  .sint__painel { padding-top: .9em; }

}

/* ---------- Respiro ---------------------------------------------------- */
.respiro { text-align: center; position: relative; overflow: hidden; }
.respiro > .wrap { position: relative; z-index: 2; }
.respiro .d2 { max-width: 13em; margin-inline: auto; }
.respiro .d2 em { font-style: italic; color: var(--blush); }
.respiro p { margin-top: 1.6em; max-width: 30em; margin-inline: auto; color: var(--fg-soft); }

/* ==========================================================================
   CENA 3 · FASES DA VIDA — rio horizontal preso à rolagem
   `sticky` (e não `pin`): o PAI precisa de altura própria, senão o filho não
   cria distância de rolagem e o scrub não roda (regra 19a).
   ========================================================================== */
.cena { position: relative; }
.cena--fases { background: var(--ink); color: var(--cream-2);
  --fg: var(--cream-2); --fg-soft: var(--grey-2); --line: rgba(250,250,250,.18);
  --gold-text: var(--blush); --terra-text: var(--blush); }
/* 200svh = palco grudada por 1 tela. Com 4 fases (a masculina saiu em 29/09) o rio
   anda ~24% da largura; com os 300svh de antes ele se arrastava por 2 telas e a
   cena parecia travada. Mudou o número de cartões? Reveja esta altura junto. */
.cena--fases .driver { height: 200svh; position: relative; }
.cena--fases .palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* `flex-start` + trilho em `flex: 1`: os cartões ESTICAM para preencher a
     altura que sobra. Com `center` eles ficavam baixinhos no meio e a cena
     lia como uma fileira de caixas flutuando, com 30% de tela morta embaixo.
     O padding-top abre espaço para a nav, que passa por cima. */
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2.4em;
  padding: 7.5em 0 3.5em;
  /* cortina de cor ESCOPADA à seção (regra 19e): no <html> a seção seguinte
     mudaria de cor no meio da tela. */
  background:
    radial-gradient(70% 60% at var(--fase-x, 20%) 30%, rgba(196,123,106,.30), transparent 66%),
    radial-gradient(50% 50% at calc(100% - var(--fase-x, 20%)) 88%, rgba(138,154,134,.20), transparent 70%),
    var(--ink);
}
.palco__cabeca { position: relative; z-index: 2; }
.palco__cabeca .d3 { margin-top: .5em; max-width: 14em; }
.fases__prog { margin-top: 1.6em; height: 2px; background: rgba(250,250,250,.16); max-width: 22em; }
.fases__prog i { display: block; height: 100%; width: 0; background: var(--blush); }

/* Lua: contorno fino e parte acesa em blush. Uma por cartão (fase 1 a 5 =
   crescente a cheia) e uma grande no cabeçalho, que cresce com o rio. */
.fase__lua, .fases__lua { display: block; overflow: visible; }
.fase__lua circle, .fases__lua circle { fill: none; stroke: rgba(216,164,155,.42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fase__lua path, .fases__lua path { fill: var(--blush); }
.fases__lua {
  position: absolute; right: var(--gutter); bottom: 0; width: 7.4em; height: 7.4em;
  filter: drop-shadow(0 0 1.6em rgba(216,164,155,.32));
}

/* O trilho começa alinhado com o texto do cabeçalho (a mesma coluna de 82em)
   e termina alinhado com a margem direita dele. */
.fases__trilho {
  display: flex; gap: 1.6em; flex: 1; min-height: 0; will-change: transform;
  padding-inline: max(var(--gutter), calc((100% - 82em) / 2));
}
.fase {
  position: relative; flex: 0 0 25em; padding: 2.2em; border-radius: calc(var(--radius) * 1.6);
  border: 1px solid rgba(250,250,250,.16);
  background: linear-gradient(165deg, rgba(250,250,250,.075), rgba(250,250,250,.02));
  backdrop-filter: blur(6px);
  /* lua no alto, título e texto encostados na base: cartão editorial que
     aguenta esticar sem virar um bloco de texto boiando no meio. */
  display: flex; flex-direction: column;
}
.fase__lua { width: 4.4em; height: 4.4em; margin-bottom: auto; filter: drop-shadow(0 0 1em rgba(216,164,155,.28)); }
.fase__n { position: absolute; top: 3.05em; right: 3.05em; font-size: .72em; letter-spacing: .18em; color: var(--blush); }
.fase h3 { font-size: 2em; margin: 1.4em 0 .5em; }
.fase p { font-size: .95em; line-height: 1.6; color: var(--grey-2); }
html[data-nivel="leve"] .fase, html[data-nivel="estatico"] .fase { backdrop-filter: none; }
html[data-nivel="leve"] .fase__lua, html[data-nivel="leve"] .fases__lua { filter: none; }

/* Celular e tablet: o rio horizontal vira PILHA. Ler texto que desliza de lado
   sob o dedo é ruim mesmo sem bug. Cada cartão gruda logo abaixo da nav e o
   seguinte sobe por cima dele — rolagem nativa, nada de sequestrar o scroll. */
@media (max-width: 991px) {
  .cena--fases .driver { height: auto; }
  .cena--fases .palco { position: relative; height: auto; overflow: visible; display: block; padding: 6em 0 5em; }
  .fases__lua, .fases__prog { display: none; }
  .fases__trilho { display: grid; gap: 1.1em; margin-top: 2.4em; padding-inline: var(--gutter); will-change: auto; }
  .fase {
    position: sticky; top: calc(5.6em + var(--i, 0) * .8em);
    padding: 1.7em 1.6em 1.8em; transform-origin: 50% 0;
    background: linear-gradient(165deg, #4d4949, #3c3939); backdrop-filter: none;
    box-shadow: 0 -.8em 2.2em rgba(0,0,0,.22);
  }
  .fase:nth-child(2) { --i: 1; } .fase:nth-child(3) { --i: 2; }
  .fase:nth-child(4) { --i: 3; }
  /* véu que escurece o cartão coberto; o JS anima --vela de 0 a 1 */
  .fase::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: #1c1a1a; opacity: calc(var(--vela, 0) * .55);
  }
  .fase__lua { width: 3.4em; height: 3.4em; }
  .fase__n { top: 2.5em; right: 2.3em; }
  .fase h3 { font-size: 1.65em; margin-top: 1.1em; }

}
@media (max-width: 767px) {
  .palco__cabeca .d3 { max-width: none; }

}

/* ==========================================================================
   CENA 4 · PRIMEIRA CONSULTA — título fixo, passos com linha que se desenha
   ========================================================================== */
.consulta__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4.5em; align-items: start; }
.consulta__fixo { position: sticky; top: 8em; }
.consulta__fixo .body-txt { margin-top: 1.4em; }
.passos { position: relative; display: grid; gap: 0; list-style: none; padding: 0; }
.passo {
  display: grid; grid-template-columns: 3.4em 1fr; gap: 1.6em;
  padding: 1.9em 0; position: relative;
}
.passo b {
  width: 2.4em; height: 2.4em; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: .8em; background: var(--bg); position: relative; z-index: 2;
  color: var(--fg-soft);
  transition: color .5s var(--e-move), border-color .5s var(--e-move), background .5s var(--e-move);
}
.passo.is-vis b { color: var(--cream-2); border-color: var(--terra-text); background: var(--terra-text); }
.passo h3 { font-size: 1.65em; margin-bottom: .35em; }
.passo p { font-size: .95em; line-height: 1.6; color: var(--fg-soft); }
/* A linha é da LISTA, do centro do 1º círculo ao do último (posições medidas no
   JS, em --linha-*). Antes ela vivia dentro do 1º passo e só ia do 01 ao 02. O
   trecho aceso cresce por scaleY, e os círculos (z-index 2) ficam por cima. */
.passos::before, .passos::after {
  content: ""; position: absolute; z-index: 0; width: 1px;
  left: var(--linha-x, .96em); top: var(--linha-ini, 2.86em); height: var(--linha-alt, calc(100% - 8em));
  transform-origin: top;
}
.passos::before { background: var(--line); }
.passos::after { background: var(--terra-text); transform: scaleY(var(--progresso, 0)); }
.nao__titulo { margin-top: 3.5em; }
.nao__titulo em { color: var(--terra-text); }
.nao { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 3em; margin-top: 1.8em; }
.nao li { display: grid; grid-template-columns: 1.4em 1fr; gap: .8em; align-items: start; padding: .75em 0; font-size: .98em; line-height: 1.5; border-top: 1px solid var(--line); }
.nao li svg { width: 1.4em; height: 1.4em; color: var(--sage-text); margin-top: .1em; }
.dark .nao li svg { color: var(--serene); }
@media (max-width: 991px) {
  .consulta__grid { grid-template-columns: 1fr; gap: 2.4em; }
  .consulta__fixo { position: static; }

}
@media (max-width: 767px) { .nao { grid-template-columns: 1fr; gap: 0; }  }

/* ==========================================================================
   SOBRE — retrato em arco, revelado ao rolar
   A moldura abre por clip-path e a foto assenta com zoom de origem no TOPO.
   Sem parallax vertical: a foto antiga (4:5 em `scale(1.14)`, andando ±6%)
   cortava justamente a cabeça. O arco vem de `.arco-foto`, no bloco do herói.
   ========================================================================== */
.sobre-sec { background: var(--cream-2); }
.sobre { display: grid; grid-template-columns: .74fr 1.26fr; gap: 4.5em; align-items: center; }
.sobre__foto { margin: 0; width: 100%; max-width: 25em; aspect-ratio: 24 / 32; border-radius: 999em 999em 1em 1em; }
.sobre__foto img { transform-origin: 50% 0%; }
.sobre__selo {
  position: absolute; right: 1em; bottom: 1em; z-index: 2;
  background: var(--cream-2); color: var(--ink);
  border-radius: var(--radius); padding: .9em 1.1em;
  box-shadow: 0 .8em 2em rgba(62,62,62,.22); max-width: 11em;
}
.sobre__selo b { display: block; font-size: .7em; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-text); margin-bottom: .25em; }
.sobre__selo span { font-size: .84em; line-height: 1.35; display: block; }
.sobre__lista { margin-top: 2em; display: grid; gap: .8em; }
.sobre__lista li { display: grid; grid-template-columns: 1.2em 1fr; gap: .9em; font-size: .98em; line-height: 1.5; }
.sobre__lista li svg { width: 1.2em; height: 1.2em; color: var(--terra-text); margin-top: .2em; }
.sobre .body-txt + .body-txt { margin-top: .9em; }
.sobre .body-txt:first-of-type { margin-top: 1.2em; }
@media (max-width: 991px) {
  .sobre { grid-template-columns: 1fr; gap: 2.4em; }
  .sobre__foto { max-width: 21em; }

}
/* 330px de origem: no celular, largura de coluna e não de tela inteira */
@media (max-width: 767px) { .sobre__foto { max-width: 17em; }  }

/* ==========================================================================
   FAQ · LOCAL · AVISO · DEPOIMENTOS
   ========================================================================== */
.faq { max-width: 46em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid; grid-template-columns: 1fr 1.6em; gap: 1em; align-items: center;
  padding: 1.15em 0; cursor: pointer; list-style: none; min-height: 44px;
  font-size: 1.1em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--terra-text); justify-self: end; transition: transform .4s var(--e-move); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.5em; max-width: 40em; color: var(--fg-soft); font-size: .98em; line-height: 1.62; }
.faq details > div p + p { margin-top: .9em; }

.contato-sec { background: var(--cream-2); }
.local { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; margin-top: 3em; }
.local div b { display: block; font-size: .68em; letter-spacing: .18em; text-transform: uppercase; color: var(--terra-text); margin-bottom: .5em; }
.local div p { font-size: .98em; line-height: 1.55; }
@media (max-width: 767px) { .local { grid-template-columns: 1fr; gap: 1.4em; }  }

.aviso {
  margin-top: 3.5em; padding-top: 1.4em; border-top: 1px solid var(--line);
  font-size: .78em; line-height: 1.55; color: var(--fg-soft); max-width: 46em;
}

.footer { position: relative; overflow: hidden; }
.footer > *:not(.atmos) { position: relative; z-index: 2; }

/* ==========================================================================
   CAMADA DE LUZ — canvas WebGL fixo, mix-blend-mode: screen
   Só acende sobre seção escura: em `screen`, sobre fundo claro ela estouraria a
   página inteira. O atributo vem de um ScrollTrigger por seção.
   ========================================================================== */
.lens {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: 0;
  transition: opacity .9s var(--e-move);
}
.lens canvas { width: 100%; height: 100%; max-width: 100%; display: block; }

/* Cinto de segurança contra estouro horizontal: `clip` e não `hidden`, porque
   `overflow: hidden` no body quebra `position: sticky` — e a cena das fases
   inteira depende dele. */
body { overflow-x: clip; }
html[data-fundo="escuro"] .lens { opacity: 1; }
html[data-nivel="estatico"] .lens, html[data-luz="css"] .lens { display: none; }
/* Conteúdo de seção escura precisa ficar ACIMA da lente, senão o texto é
   lavado pelo blend. O herói já está em z-index 4.
   A palco NÃO entra aqui: ela já é `sticky` (posicionada), só o z-index basta.
   Um `position: relative` neste seletor, mais abaixo no arquivo, vencia o
   `sticky` em silêncio e a cena inteira rolava junto com a página — era o "anda
   de lado e desce junto" do celular, e acontecia no desktop também (regra 14). */
.dark > .wrap { position: relative; z-index: 2; }
.cena--fases .palco { z-index: 2; }

/* ==========================================================================
   GUTTER LATERAL — um token só
   O motor não põe padding lateral em `.section`/`.wrap` (a `.pad-x` existe mas
   nunca entrou no HTML). Abaixo de ~1100px o `.wrap` ocupa 100% da tela e o
   texto encostava na borda: 74 blocos a 0px no celular, medido.
   ========================================================================== */
:root { --gutter: 2.5em; }
@media (max-width: 991px) { :root { --gutter: 2.2em; }  }
@media (max-width: 767px) { :root { --gutter: 1.6em; }  }
.section > .wrap, .palco__cabeca { padding-inline: var(--gutter); max-width: calc(82em + var(--gutter) * 2); }
.hero, .nav, .footer, .overlay { padding-inline: var(--gutter); }
.overlay__close { right: var(--gutter); }
@media (max-width: 991px) { .sint__painel { padding-inline: var(--gutter); }  }

/* ==========================================================================
   NAV NO CELULAR — fundo sólido ao rolar
   O véu com blur só existe no nível completo (blur custa caro no toque). Sem
   ele o logo passava por cima do texto das seções e as duas coisas se liam uma
   sobre a outra. Fundo opaco na cor da seção de baixo: custo zero.
   ========================================================================== */
@media (max-width: 991px) {
  .nav::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: rgba(46,44,43,.94); opacity: 0;
    transition: opacity .45s var(--e-move), background-color .45s var(--e-move);
  }
  .nav.is-dark::before { background: rgba(245,235,230,.95); }
  html[data-rolou="1"] .nav::before { opacity: 1; }

}

/* ==========================================================================
   FOLHAS — cada troca de cor desliza por cima da seção anterior
   Canto arredondado + margem negativa: a seção de baixo aparece nos cantos e a
   página ganha profundidade sem JS. As claras sobem de camada (a palco fixada
   das fases não pode pintar por cima delas); as escuras ficam na camada normal
   para a lente WebGL continuar acendendo por cima.
   ========================================================================== */
/* Escuras (respiro, relatos): arredondam SEM sobrepor — o canto mostra o
   fundo do body, que é o nude da seção clara anterior. Claras (consulta,
   dúvidas): sobem por cima da escura anterior e sobem de camada, e o canto delas
   mostra o grafite. Se uma clara com z-index cobrisse a escura seguinte, o canto
   da escura sumiria embaixo dela (foi o primeiro erro desta regra). */
.respiro, section:has(> .wrap > .baralho),
#consulta, #duvidas { border-radius: 2.6em 2.6em 0 0; }
/* Fundo PRÓPRIO é obrigatório nas que sobem: sem ele a faixa sobreposta fica
   transparente e o grafite de baixo aparece na largura inteira, não só no canto.
   O "quem sou" vem logo depois da primeira consulta (clara, desde 02/10, quando a
   seção de recursos saiu): não sobe nem arredonda, mas fica no mesmo nude, para emendar
   sem degrau na consulta e para o canto dos relatos, logo abaixo, casar. */
#consulta, #duvidas { margin-top: -2.6em; z-index: 2; background: var(--cream); }
#sobre { background: var(--cream); }
@media (max-width: 767px) {
  .respiro, section:has(> .wrap > .baralho),
  #consulta, #duvidas { border-radius: 1.5em 1.5em 0 0; }
  #consulta, #duvidas { margin-top: -1.5em; }

}

/* ---------- Dúvidas: abre com altura animada (Chrome 131+; nos outros abre seco) */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .55s var(--e-soft), content-visibility .55s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
/* Com a lente viva, a atmosfera em CSS do herói sai de cena — as duas juntas
   viram sopa. Ela volta sozinha no fallback. */
html[data-luz="gl"] .hero .atmos { display: none; }

/* ==========================================================================
   BARALHO DE RELATOS — pilha de cartas em profundidade
   ========================================================================== */
.baralho { position: relative; z-index: 2; max-width: 46em; }
/* As cartas dividem a mesma célula do grid: a pilha fica com a altura da maior. */
.baralho__pilha { position: relative; display: grid; perspective: 1100px; }
.baralho__item {
  position: relative; grid-area: 1 / 1;
  border: 1px solid rgba(250,250,250,.16); border-radius: calc(var(--radius) * 1.6);
  /* Opaco de propósito: translúcido, o texto das cartas de trás aparecia através
     da carta da frente e lia-se duplicado no celular, onde não há blur. */
  background: linear-gradient(165deg, #4b4848, #413e3e);
  padding: 2.4em 2.6em;
  display: flex; flex-direction: column; justify-content: center;
  transform-origin: 50% 120%; will-change: transform, opacity;
}
.baralho__aspa {
  font-family: var(--serif); font-size: 4.4em; line-height: .5;
  color: var(--blush); opacity: .5; display: block; margin-bottom: .18em;
}
.baralho__item blockquote {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.3em; line-height: 1.42; letter-spacing: -.01em;
}
.baralho__by { margin-top: 1.4em; font-size: .74em; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-2); }
.baralho__nav { display: flex; align-items: center; gap: 1.2em; margin-top: 2.2em; }
.baralho__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  transition: background .4s var(--e-move), color .4s var(--e-move), border-color .4s var(--e-move);
}
.baralho__nav button:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.baralho__nav svg { width: 1.1em; height: 1.1em; }
.baralho__conta { font-size: .76em; letter-spacing: .16em; color: var(--fg-soft); }
html[data-nivel="leve"] .baralho__item, html[data-nivel="estatico"] .baralho__item { backdrop-filter: none; }
@media (max-width: 767px) {
  .baralho__item { padding: 1.8em; }
  .baralho__item blockquote { font-size: 1.06em; }
  .baralho__aspa { font-size: 3.4em; }

}
/* Sem JS as cartas empilhariam invisíveis: a primeira fica legível. */
html:not(.js-anim) .baralho__item:not(:first-child) { display: none; }

/* ==========================================================================
   ALVOS DE TOQUE (regra 24d: 44px em px MESMO)
   ========================================================================== */
.skip { min-height: 44px; display: inline-flex; align-items: center; }
/* `gap` é obrigatório: num container flex o espaço entre o texto e o <em> vira
   separador de itens e é descartado — sem ele sai "ClaudiaBraga". */
.nav__logo { display: inline-flex; align-items: center; gap: .24em; min-height: 44px; }
.field input, .field select, .field textarea { min-height: 44px; }
.overlay__close { min-height: 44px; display: inline-flex; align-items: center; }

/* Menu: cada item é uma linha tocável, com divisória e seta (pedido de 02/10: as
   frases pareciam um texto só e não pareciam clicáveis). Rola se não couber. */
.overlay { overflow-y: auto; justify-content: safe center; padding-block: 5em 2.5em; }
.overlay nav { border-top: 1px solid rgba(250,250,250,.14); }
.overlay nav a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1em;
  padding: .66em 0; border-bottom: 1px solid rgba(250,250,250,.14);
  transition: color .3s var(--e-move), padding-left .4s var(--e-move);
}
.overlay nav a::after {
  content: ""; width: .5em; height: .5em; margin-right: .15em;
  border-top: 1px solid var(--blush); border-right: 1px solid var(--blush); rotate: 45deg;
}
.overlay nav a:hover, .overlay nav a:active, .overlay nav a:focus-visible { color: var(--blush); padding-left: .3em; }
@media (hover: none) {
  .footer__cols li a, .cta__aside a, .local a, .sint__limpar {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer__cols li + li { margin-top: 0; }

}

/* ==========================================================================
   MOVIMENTO REDUZIDO — some tudo que se move; nada fica escondido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ponteiro, .grao, .blur-prog { display: none !important; }
  .atmos i, .respira i { animation: none !important; }
  .hero [data-entra], .hero__kicker::before, .hero__arco, .hero__arco img { animation: none !important; }
  .lens { display: none !important; }
  .cena--fases .driver { height: auto; }
  .cena--fases .palco { position: static; height: auto; padding-block: 4.5em; }
  .fases__trilho { flex-wrap: wrap; transform: none !important; }
  .fase { flex-basis: 100%; opacity: 1 !important; }
  /* o baralho vira lista: nenhuma carta pode ficar escondida atrás da pilha */
  .baralho__pilha { gap: 1em; }
  .baralho__item { grid-area: auto; opacity: 1 !important; transform: none !important; }
  .baralho__nav { display: none; }
  html.js-anim [data-sobe] { opacity: 1; }

}