/* ============================================================
YOVA — Women's Health Clinic
Landing page de conversao (trafego pago Meta > quiz > WhatsApp)
Fuzion · Base: yova-design-system.html
============================================================ */
/* ---------- 1. TOKENS ---------- */
:root{
/* ---- Dark Constellation - base do site ---- */
--cosmos: #06050A; /* fundo principal */
--deep-space: #0A0910; /* superficies e secoes alternadas */
--gold-star: #B8935A; /* cor heroica - 7,1:1 sobre Cosmos */
--solar-gold: #E8C87A; /* destaques e foco - 12,7:1 */
--stardust: #EDE5DA; /* texto principal - 16,3:1 */
--nebula: #8C7865; /* texto secundario - 4,8:1 */
/* ---- Solar Light - fora de uso na LP, mantida para pecas claras ---- */
--ivory: #FBF6EE;
--warm-sand: #EEE5D8;
--obsidian: #1A1714;
/* ---- Acento / CTA ---- */
--terracota: #E8734A;
--terracota-dk: #D65F35;
/* ---- Semanticos ---- */
--bg: var(--cosmos);
--bg-alt: var(--deep-space);
--surface: var(--deep-space);
--text: var(--stardust);
/* Nebula puro (4,8:1) deixa a copy apagada. Corpo usa Stardust
rebaixado (8,4:1); Nebula fica no que e mesmo terciario. */
--text-muted: rgba(237,229,218,.72);
--line: rgba(237,229,218,.12);
--line-strong: rgba(237,229,218,.24);
--serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
--sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
--ease: cubic-bezier(.4,0,.2,1);
--radius: 2px;
--gut: clamp(20px, 5vw, 40px);
--header-h: 94px;
--sec: clamp(72px, 11vw, 148px); /* respiro vertical de secao */
}
/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
-webkit-text-size-adjust:100%; scroll-behavior:smooth;
/* Faz os controles nativos (checkbox, scrollbar, autofill) nascerem
escuros. Sem isto o checkbox do LGPD vira um quadrado branco. */
color-scheme: dark;
}
body{
margin:0; background:var(--bg); color:var(--text);
font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.7;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img,svg{max-width:100%; height:auto; display:block}
/* Sem isto, qualquer regra de autor com `display` vence o atributo `hidden`
e o elemento continua visivel. Foi o que aconteceu com .quiz__nav. */
[hidden]{display:none !important}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
ul{list-style:none; margin:0; padding:0}
h1,h2,h3,h4{font-family:var(--serif); font-weight:300; margin:0; letter-spacing:.005em}
p{margin:0}
::selection{background:var(--solar-gold); color:var(--cosmos)}
/* Foco visivel — nunca remover sem substituto (WCAG 2.4.7) */
:focus-visible{
outline:2px solid var(--solar-gold);
outline-offset:3px;
border-radius:1px;
}
/* Focus Not Obscured (WCAG 2.2) — header sticky nao pode cobrir o foco */
[id]{scroll-margin-top:96px}
.skip-link{
position:absolute; left:-9999px; top:0; z-index:200;
background:var(--cosmos); color:var(--stardust);
padding:14px 22px; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{left:12px; top:12px}
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
/* ---------- 3. TIPOGRAFIA / UTILITARIOS ---------- */
.eyebrow{
font-family:var(--sans); font-size:11px; font-weight:500;
letter-spacing:.22em; text-transform:uppercase; color:var(--gold-star);
display:flex; align-items:center; gap:12px; margin:0 0 18px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold-star); flex:none}
.eyebrow--center{justify-content:center}
/* A frase-conceito da marca e bem mais longa que um eyebrow de secao. Com
.22em ela estourava a coluna no celular; .13em segura em uma linha e
mantem o ar de caixa alta. */
.eyebrow--marca{letter-spacing:.13em}
/* text-wrap:balance evita "orfao" (uma palavra sozinha na linha, tipo "mais."
perto do
) quando a frase quase cabe numa linha so mas nao cabe de
todo — o navegador reparte as linhas de forma mais uniforme em vez de
empurrar so a ultima palavra pra baixo. Pedido do cliente (04/09), com
captura de tela mostrando exatamente esse problema na largura dele.
Degrada bem: navegador sem suporte so ignora a propriedade. */
.h-display{font-size:clamp(37px,6vw,70px); line-height:1.04; font-weight:300; text-wrap:balance}
/* Segunda linha em italico + dourado — pedido do cliente (04/09, sexta
rodada), com exemplo visual: a resposta da marca (2a linha) se destaca
da queixa da propria paciente (1a linha, sem cor especial). So .h-display
(o H1 do hero) usa hoje, entao o escopo aqui e seguro. */
.h-display em{font-style:italic; font-weight:300; color:var(--solar-gold)}
.h2{font-size:clamp(29px,4.6vw,52px); line-height:1.14; font-style:italic; font-weight:300}
.h3{font-size:clamp(20px,2.5vw,27px); line-height:1.3; font-weight:400}
.lead{font-size:clamp(16.5px,1.9vw,19.5px); line-height:1.72; color:var(--text-muted); max-width:60ch}
.muted{color:var(--text-muted)}
.rule{height:1px; background:var(--line); border:0; margin:0}
section{padding:var(--sec) 0}
/* Marcador de conteudo pendente de aprovacao do cliente/medico */
.ph{
font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.14em;
text-transform:uppercase; color:var(--terracota);
border:1px dashed rgba(232,115,74,.45); border-radius:2px;
padding:2px 7px; display:inline-block; vertical-align:middle;
white-space:nowrap;
}
/* Animacao de entrada — so quando o JS estiver ativo */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
/* ---------- 4. BOTOES ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--sans); font-size:13px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
padding:19px 38px; min-height:56px; border-radius:var(--radius);
border:1px solid transparent; text-align:center;
transition:background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
/* Texto branco sobre Terracota por decisao de design (Wellerson, 28/08).
Contraste 2,99:1 — abaixo dos 4,5:1 da WCAG. Ver README. */
.btn--primary{background:var(--terracota); color:#FFFFFF}
.btn--primary:hover{background:var(--terracota-dk); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--stardust); color:var(--cosmos); border-color:var(--stardust)}
.btn--gold{background:transparent; color:var(--gold-star); border-color:var(--gold-star)}
.btn--gold:hover{background:var(--gold-star); color:var(--cosmos)}
/* Ouro solido — CTA de dentro do quiz, e so de la. O dourado passa a
significar "voce esta no fluxo de conversao"; o Terracota segue sendo a
acao do resto da pagina.
De quebra resolve contraste: Cosmos sobre Gold Star da 7,12:1, contra os
3,01:1 de branco sobre Terracota (reprova a 4,5:1 exigido num texto de
13px, ver .btn--primary acima). */
.btn--ouro{background:var(--gold-star); color:var(--cosmos); border-color:var(--gold-star)}
.btn--ouro:hover{background:var(--solar-gold); border-color:var(--solar-gold); transform:translateY(-1px)}
.btn--sm{padding:13px 24px; min-height:44px; font-size:11.5px; letter-spacing:.14em}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}
/* O "Continuar" passa metade do quiz desabilitado, entao o estado inativo e
tao visivel quanto o ativo. Com opacity .4 a superficie ficava a 1,92:1 do
card e o botao sumia. Aqui o estado muda de SOLIDO para VAZADO — diferenca
de forma, nao so de opacidade — com borda a 3,04:1 e texto a 5,22:1. */
.btn--ouro[disabled]{
opacity:1; background:transparent;
color:rgba(237,229,218,.55); border-color:rgba(237,229,218,.38);
}
.cta-note{font-size:12.5px; letter-spacing:.06em; color:var(--nebula); margin-top:16px}
/* Secundario do hero. Era .btn--ghost: dois botoes de peso parecido no hero
disputavam o olho e nenhum vencia. Como link, a hierarquia fica obvia. */
.link-seta{
display:inline-flex; align-items:center; gap:9px; min-height:56px;
font-family:var(--sans); font-size:13px; font-weight:500;
letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
border-bottom:1px solid transparent; transition:color .28s var(--ease), border-color .28s var(--ease);
}
.link-seta::after{content:"→"; font-size:15px; transition:transform .28s var(--ease)}
.link-seta:hover{color:var(--stardust); border-bottom-color:var(--line-strong)}
.link-seta:hover::after{transform:translateX(4px)}
/* ---------- 4b. FUNDO DE ROLAGEM + GRAO ----------
Camada fixa atras do conteudo. z-index -1 pinta acima do fundo do body
e abaixo do conteudo, sem precisar mexer no empilhamento de nada.
As secoes com --bg-alt sao opacas e cobrem esta camada; as demais deixam
passar. E isso que da o ritmo de profundidade ao rolar. */
/* A camada e mais alta que a janela para ter curso de deslocamento sem
abrir buraco nas bordas: 136vh de altura, 18vh acima do topo, e o
deslocamento fica dentro dos 36vh de folga. */
.fundo{
position:fixed; left:0; right:0; top:-18vh; height:136vh;
z-index:-1; pointer-events:none;
background-size:cover; background-position:center;
/* Fallback em WebP para quem nao le image-set(); a declaracao seguinte
sobrescreve onde ha suporte, e e descartada onde nao ha. */
background:
url("../img/fundo-rolagem.webp"),
radial-gradient(ellipse 55% 38% at 82% 6%, rgba(232,200,122,.10), transparent 62%),
radial-gradient(ellipse 60% 40% at 70% 88%, rgba(232,200,122,.05), transparent 62%);
background:
image-set(url("../img/fundo-rolagem.avif") type("image/avif"),
url("../img/fundo-rolagem.webp") type("image/webp")),
radial-gradient(ellipse 55% 38% at 82% 6%, rgba(232,200,122,.10), transparent 62%),
radial-gradient(ellipse 60% 40% at 70% 88%, rgba(232,200,122,.05), transparent 62%);
background-size:cover; background-position:center;
}
/* Grao. Fica NA CAMADA DE FUNDO, nao por cima do texto: da a textura
analogica nas areas vazias sem tirar um ponto de contraste da leitura.
Peso: ~200 bytes de SVG embutido, nenhuma requisicao. */
.fundo::after{
content:""; position:absolute; inset:0; opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
/* Deriva ao rolar, sem uma linha de JS. Onde o navegador nao suporta
animacao por rolagem, a camada simplesmente fica parada. */
@supports (animation-timeline: scroll()){
.js .fundo{
animation:derivar linear both;
animation-timeline:scroll(root block);
will-change:transform;
}
}
@keyframes derivar{
from{transform:translate3d(0,0,0) scale(1.02)}
to{transform:translate3d(0,-30vh,0) scale(1.08)}
}
/* Divisor de secao — filamento dourado. Gradiente puro: peso zero,
nitido em qualquer densidade de tela. Nao gerar imagem para isto. */
.divisor{
height:1px; border:0; margin:0;
background:linear-gradient(90deg,
transparent, rgba(184,147,90,.3) 28%, rgba(232,200,122,.55) 50%,
rgba(184,147,90,.3) 72%, transparent);
}
/* ---------- 5. HEADER (Dark Constellation) ---------- */
/* Barra escura com a variante invertida do logo — "versao invertida em
branco", variante aprovada no guia de marca. Stardust sobre Cosmos: 16,3:1. */
.site-header{
position:fixed; inset:0 0 auto; z-index:80;
background:transparent;
backdrop-filter:none; -webkit-backdrop-filter:none;
border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:transparent;
color:var(--stardust);
transition:background-color .28s var(--ease), border-bottom-color .28s var(--ease),
box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.site-header.is-scrolled{
background:rgba(6,5,10,.92);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom-color:rgba(237,229,218,.14);
box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.site-header__inner{
max-width:1180px; margin:0 auto; padding:18px var(--gut);
display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
/* Lockup a 42px => simbolo a 37px, acima do minimo de 32px do guia de marca. */
.brand img{height:42px; width:auto}
/* Alinha a assinatura sob o wordmark: o simbolo ocupa 112/327 da largura
do lockup (137px), ou seja 47px. */
.brand__sig{
padding-left:47px; font-size:8.5px; font-weight:500; letter-spacing:.26em;
text-transform:uppercase; color:var(--gold-star); line-height:1; white-space:nowrap;
}
.site-header .btn{white-space:nowrap}
.site-header .btn--ghost{color:var(--stardust); border-color:rgba(237,229,218,.3)}
.site-header .btn--ghost:hover{background:var(--stardust); color:var(--cosmos); border-color:var(--stardust)}
/* ---------- 6. HERO ---------- */
.hero{
position:relative; overflow:hidden;
padding:calc(var(--header-h) + clamp(56px,9vw,104px)) 0 clamp(64px,9vw,112px);
/* Luz arquitetonica abstrata: o interesse fica a direita e o veu
preserva a metade esquerda como campo de leitura. */
background-color:var(--cosmos);
background-image:
linear-gradient(100deg, rgba(6,5,10,.94) 0%, rgba(6,5,10,.76) 42%, rgba(6,5,10,.14) 72%, rgba(6,5,10,.04) 100%),
url("../img/hero-luz-yova-v2.webp");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
.hero__grid{
display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{margin-bottom:26px}
.hero h1 em{color:var(--gold-star)}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.hero__trust{
display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:40px;
padding-top:26px; border-top:1px solid var(--line);
}
.hero__trust li{
display:flex; align-items:center; gap:9px;
font-size:12.5px; letter-spacing:.05em; color:var(--text-muted);
}
.hero__trust li::before{
content:""; width:5px; height:5px; border-radius:50%;
background:var(--gold-star); flex:none;
}
/* ---------- Constelacao animada ----------
A entrada desenha o traco; depois a constelacao orbita devagar em volta
do sol, que fica parado no centro. Tudo em transform/opacity, sem
biblioteca e sem custo de carregamento. Sem JS, a arte aparece pronta. */
/* O novo fundo abstrato assume sozinho o campo visual. A arte vetorial
anterior permanece escondida no markup como referencia de marca. */
.hero__art{display:none}
.hero__art .constel{display:none}
.hero__art svg{width:min(100%,460px); height:auto; overflow:visible}
/* Parallax do ponteiro — as variaveis sao escritas pelo app.js */
.constel{
translate:var(--px,0) var(--py,0);
transition:translate .6s var(--ease);
}
.js .constel__orbita{
transform-box:fill-box; transform-origin:center;
animation:orbitar 220s linear infinite;
}
/* --- entrada: os aneis surgem --- */
.js .constel__aneis{
transform-box:fill-box; transform-origin:center;
animation:surgir 1.5s var(--ease) both;
}
/* --- entrada: o traco se desenha --- */
.js .constel__hept{
stroke-dasharray:730; stroke-dashoffset:730;
animation:tracar 1.7s var(--ease) .25s both;
}
.js .constel__raios path{
stroke-dasharray:122; stroke-dashoffset:122;
animation:tracar 1s var(--ease) both;
}
.js .constel__cordas path{
stroke-dasharray:190; stroke-dashoffset:190;
animation:tracar 1.3s var(--ease) both;
}
.js .constel__raios path:nth-child(1){animation-delay:.75s}
.js .constel__raios path:nth-child(2){animation-delay:.85s}
.js .constel__raios path:nth-child(3){animation-delay:.95s}
.js .constel__raios path:nth-child(4){animation-delay:1.05s}
.js .constel__raios path:nth-child(5){animation-delay:1.15s}
.js .constel__raios path:nth-child(6){animation-delay:1.25s}
.js .constel__raios path:nth-child(7){animation-delay:1.35s}
.js .constel__cordas path:nth-child(1){animation-delay:1.3s}
.js .constel__cordas path:nth-child(2){animation-delay:1.42s}
.js .constel__cordas path:nth-child(3){animation-delay:1.54s}
.js .constel__cordas path:nth-child(4){animation-delay:1.66s}
.js .constel__cordas path:nth-child(5){animation-delay:1.78s}
.js .constel__cordas path:nth-child(6){animation-delay:1.9s}
.js .constel__cordas path:nth-child(7){animation-delay:2.02s}
/* --- entrada + cintilar dos vertices --- */
.js .constel__nos circle{
animation:surgir .6s var(--ease) both, cintilar 6s var(--ease) infinite;
}
.js .constel__nos circle:nth-child(1){animation-delay:1.5s, 3.2s}
.js .constel__nos circle:nth-child(2){animation-delay:1.62s, 3.9s}
.js .constel__nos circle:nth-child(3){animation-delay:1.74s, 4.6s}
.js .constel__nos circle:nth-child(4){animation-delay:1.86s, 5.3s}
.js .constel__nos circle:nth-child(5){animation-delay:1.98s, 6s}
.js .constel__nos circle:nth-child(6){animation-delay:2.1s, 6.7s}
.js .constel__nos circle:nth-child(7){animation-delay:2.22s, 7.4s}
/* --- o sol: entra por ultimo e fica respirando --- */
.js .constel__sol{
transform-box:fill-box; transform-origin:center;
animation:acender 1.4s var(--ease) .55s both;
}
.js .constel__brilho{
transform-box:fill-box; transform-origin:center;
animation:respirar 7s var(--ease) 2s infinite;
}
.js .constel__feixes{animation:pulsar 6s var(--ease) 2s infinite}
/* Congela os lacos infinitos quando o hero sai da tela (ver app.js) */
.constel.is-parado *{animation-play-state:paused}
@keyframes orbitar{to{transform:rotate(360deg)}}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes surgir{from{opacity:0} to{opacity:1}}
@keyframes acender{from{opacity:0; transform:scale(.72)} to{opacity:1; transform:none}}
@keyframes respirar{0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.14)}}
@keyframes pulsar{0%,100%{opacity:.55} 50%{opacity:1}}
/* ---------- 6b. O QUE E CLIMATERIO ----------
Secao pedida pelo cliente (03/09): antes dos 6 sinais especificos, situa
o climaterio como conceito guarda-chuva (pre-menopausa/perimenopausa,
menopausa, pos-menopausa), com uma faixa etaria 35-75 e a extensao real
de sinais catalogados. Cabecalho e fecho reaproveitam .symptoms__head e
.symptoms__close — mesmo tratamento visual, sem duplicar CSS. */
.climaterio{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* Paleta extra — SO para os 2 graficos do climaterio (anel + curva hormonal).
Adaptados do material que o cliente enviou como referencia (03/09): rosa e
azul distinguem estradiol/testosterona e as fases perimenopausa/pos-menopausa,
coisa que o dourado monocromatico do resto da pagina nao resolve sozinho.
Ficam como token para nao espalhar hex solto pelas regras abaixo. */
:root{
--clima-brown: #B58A35; /* transicao inicial / progesterona */
--clima-pink: #CF5C93; /* perimenopausa / estradiol */
--clima-blue: #3E93C7; /* pos-menopausa / testosterona */
}
/* Anel do climaterio — SVG com as coordenadas do material de referencia,
texto trocado para bater com o resto da pagina (faixa "48 a 51", nao
numero unico atribuido a fonte nao confirmada — ver README). */
.ring-wrap{display:grid; gap:clamp(32px,4.5vw,56px); align-items:center; margin-top:clamp(40px,6vw,60px)}
@media (min-width:960px){.ring-wrap{grid-template-columns:1.05fr .95fr}}
.ring-box{max-width:520px; margin:0 auto; width:100%}
.ring-box svg{width:100%; height:auto; overflow:visible}
.ring-side h3{margin-bottom:16px}
.ring-side h3 em{font-style:italic; color:var(--solar-gold)}
.ring-side > p{font-size:15px; line-height:1.72; color:var(--text-muted); margin-bottom:24px}
.ring-legend{display:grid; gap:14px}
.ring-legend div{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.55; color:var(--text-muted)}
.ring-legend i{width:12px; height:12px; flex:none; margin-top:4px; border-radius:2px}
.ring-legend b{display:block; color:var(--stardust); font-weight:500; font-size:14.5px; margin-bottom:2px}
/* Animacao de entrada do anel — o diagrama se desenha na ordem cronologica
(35 -> 45 -> 49 -> 75) em vez de aparecer pronto, porque a ordem E o
argumento da secao: o climaterio comeca antes e nao termina na menopausa.
O gatilho e o mesmo .is-in que o IntersectionObserver ja poe no .reveal
(app.js, 6a) — zero JS novo.
Tudo esta sob ".js .ring-wrap": sem JS o SVG aparece completo e estatico,
e o bloco de prefers-reduced-motion (secao 18) zera duracao e delay, o que
com animation-fill-mode:forwards entrega o estado final de imediato. */
.js .ring-wrap .ring-guide,
.js .ring-wrap .ring-arc,
.js .ring-wrap .ring-mark__line,
.js .ring-wrap .ring-center__rule{stroke-dasharray:1; stroke-dashoffset:1}
.js .ring-wrap .ring-dot,
.js .ring-wrap .ring-axis,
.js .ring-wrap .ring-center,
.js .ring-wrap .ring-mark__dot,
.js .ring-wrap .ring-mark__label,
.js .ring-wrap .ring-pulse{opacity:0}
.js .ring-wrap .ring-mark__dot,
.js .ring-wrap .ring-pulse{transform-box:fill-box; transform-origin:center}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes ringFade{from{opacity:0}to{opacity:1}}
@keyframes ringDot{from{opacity:0; transform:scale(.2)}to{opacity:1; transform:scale(1)}}
/* Pulso do marcador: 2 voltas e para. Nao e chamariz — e o que distingue
visualmente uma data unica (menopausa) dos periodos ao redor dela. */
@keyframes ringPulse{
0%{opacity:.85; transform:scale(1)}
70%{opacity:0; transform:scale(3.4)}
100%{opacity:0; transform:scale(3.4)}
}
@keyframes ringCenter{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:scale(1)}}
@keyframes ringLegend{from{opacity:0; transform:translateX(-10px)}to{opacity:1; transform:none}}
.js .ring-wrap.is-in .ring-guide {animation:ringDraw 1s var(--ease) forwards}
.js .ring-wrap.is-in .ring-dot {animation:ringFade .8s var(--ease) .7s forwards}
.js .ring-wrap.is-in .ring-arc--1 {animation:ringDraw .7s var(--ease) .45s forwards}
.js .ring-wrap.is-in .ring-arc--2 {animation:ringDraw .3s var(--ease) 1.1s forwards}
.js .ring-wrap.is-in .ring-arc--3 {animation:ringDraw .85s var(--ease) 1.35s forwards}
.js .ring-wrap.is-in .ring-axis {animation:ringFade .8s var(--ease) .9s forwards}
.js .ring-wrap.is-in .ring-mark__line{animation:ringDraw .35s var(--ease) 1.45s forwards}
.js .ring-wrap.is-in .ring-mark__dot {animation:ringDot .45s var(--ease) 1.45s forwards}
.js .ring-wrap.is-in .ring-mark__label{animation:ringFade .6s var(--ease) 1.7s forwards}
.js .ring-wrap.is-in .ring-pulse {animation:ringPulse 1.5s var(--ease) 1.7s 2}
.js .ring-wrap.is-in .ring-center {animation:ringCenter .9s var(--ease) 1.9s forwards;
transform-box:fill-box; transform-origin:center}
.js .ring-wrap.is-in .ring-center__rule{animation:ringDraw .5s var(--ease) 2.2s forwards}
/* A legenda acende no mesmo instante do arco que descreve — e o que
transforma quatro linhas de texto na leitura do desenho. */
.js .ring-wrap .ring-legend div{opacity:0}
.js .ring-wrap.is-in .ring-legend div{opacity:1; animation:ringLegend .6s var(--ease) backwards}
.js .ring-wrap.is-in .ring-legend div:nth-child(1){animation-delay:.6s}
.js .ring-wrap.is-in .ring-legend div:nth-child(2){animation-delay:1.25s}
.js .ring-wrap.is-in .ring-legend div:nth-child(3){animation-delay:1.6s}
.js .ring-wrap.is-in .ring-legend div:nth-child(4){animation-delay:1.85s}
/* Foco cruzado legenda <-> arco. So CSS (:has): passar o mouse em qualquer
um dos dois lados apaga o resto do anel. Onde :has nao existe, nada muda
e o grafico continua igual — por isso nao ha fallback em JS. */
@supports selector(:has(*)){
.ring-arc,.ring-mark,.ring-legend div{transition:opacity .3s var(--ease)}
.ring-wrap:has(.ring-legend div:hover) .ring-arc,
.ring-wrap:has(.ring-legend div:hover) .ring-mark,
.ring-wrap:has(.ring-legend div:hover) .ring-legend div,
.ring-wrap:has(.ring-arc:hover) .ring-arc,
.ring-wrap:has(.ring-arc:hover) .ring-mark,
.ring-wrap:has(.ring-arc:hover) .ring-legend div,
.ring-wrap:has(.ring-mark:hover) .ring-arc,
.ring-wrap:has(.ring-mark:hover) .ring-legend div{opacity:.25}
.ring-wrap:has(.ring-legend div:nth-child(1):hover) .ring-arc--1,
.ring-wrap:has(.ring-arc--1:hover) .ring-arc--1,
.ring-wrap:has(.ring-arc--1:hover) .ring-legend div:nth-child(1),
.ring-wrap:has(.ring-legend div:nth-child(2):hover) .ring-arc--2,
.ring-wrap:has(.ring-arc--2:hover) .ring-arc--2,
.ring-wrap:has(.ring-arc--2:hover) .ring-legend div:nth-child(2),
.ring-wrap:has(.ring-legend div:nth-child(4):hover) .ring-arc--3,
.ring-wrap:has(.ring-arc--3:hover) .ring-arc--3,
.ring-wrap:has(.ring-arc--3:hover) .ring-legend div:nth-child(4),
.ring-wrap:has(.ring-legend div:nth-child(3):hover) .ring-mark,
.ring-wrap:has(.ring-mark:hover) .ring-mark,
.ring-wrap:has(.ring-mark:hover) .ring-legend div:nth-child(3),
.ring-wrap:has(.ring-legend div:hover) .ring-legend div:hover{opacity:1}
.ring-legend div{cursor:default}
}
/* Curva hormonal — grafico de linha com crosshair (app.js, 6d). */
.chart-card{
margin-top:clamp(48px,6.5vw,72px); border:1px solid var(--line-strong);
background:var(--surface); border-radius:var(--radius); padding:clamp(20px,3vw,32px);
}
.chart-head{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:baseline; justify-content:space-between; margin-bottom:20px}
.chart-title{font-family:var(--serif); font-size:clamp(18px,2.2vw,22px); color:var(--stardust); font-weight:400; margin:0}
.chart-legend{display:flex; flex-wrap:wrap; gap:8px 20px}
.chart-legend span{display:flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted)}
.chart-legend i{width:20px; height:0; border-top-width:2px; flex:none}
.chart-swipe{display:none; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--nebula); margin-bottom:10px}
.chart-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.chart-scroll svg{display:block; min-width:640px; width:100%; height:auto; overflow:visible}
.chart-rel{position:relative}
.chart-note{margin-top:16px; font-size:12.5px; line-height:1.65; color:var(--nebula)}
/* Tooltip do crosshair — posicionado por JS (left/top inline), escondido por
opacidade para nao mexer em layout a cada movimento do mouse. */
.cx-tip{
position:absolute; pointer-events:none; opacity:0; transition:opacity .15s var(--ease);
background:rgba(6,5,10,.97); border:1px solid var(--line-strong); padding:12px 14px;
font-size:12.5px; line-height:1.55; color:var(--text-muted); width:220px; z-index:5;
top:0; left:0; border-radius:var(--radius);
}
.cx-tip.is-on{opacity:1}
.cx-tip b{display:block; color:var(--solar-gold); font-family:var(--serif); font-size:16px; margin-bottom:8px; font-weight:400}
.cx-tip u{display:block; text-decoration:none; color:var(--text); font-size:11.5px; margin-top:5px}
.cx-tip u i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px}
.chart-table{margin-top:18px; border-top:1px solid var(--line)}
.chart-table summary{
list-style:none; cursor:pointer; padding:14px 0; font-size:11.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--gold-star); transition:color .2s var(--ease);
}
.chart-table summary::-webkit-details-marker{display:none}
.chart-table summary:hover{color:var(--solar-gold)}
.chart-table__scroll{overflow-x:auto}
.chart-table table{width:100%; border-collapse:collapse; font-size:13px; min-width:520px; margin-bottom:6px}
.chart-table th,.chart-table td{text-align:left; padding:9px 12px 9px 0; border-bottom:1px solid var(--line); color:var(--text-muted); font-weight:300}
.chart-table th{color:var(--gold-star); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500}
@media (max-width:760px){
.chart-swipe{display:block}
}
.climaterio__quote{
font-family:var(--serif); font-style:italic; font-weight:300;
font-size:clamp(19px,2.4vw,25px); line-height:1.52; max-width:64ch;
color:var(--stardust); margin:clamp(40px,5.5vw,58px) 0;
}
/* Numero animado (app.js, 6c) — nao e contador de urgencia: e a contagem
real dos da .chip-grid abaixo, entao nunca pode destoar dela. */
.stat-count{
display:flex; align-items:baseline; gap:22px;
margin-bottom:clamp(36px,5vw,50px); padding-top:clamp(34px,4.5vw,46px);
border-top:1px solid var(--line);
}
.stat-count__num{
font-family:var(--serif); font-weight:300; font-size:clamp(50px,7.5vw,80px);
line-height:1; color:var(--solar-gold); flex:none;
}
.stat-count__label{font-size:14.5px; line-height:1.72; color:var(--text-muted); max-width:46ch}
.stat-count__label span{color:var(--gold-star); font-weight:500}
/* Colunas fluidas, nao grid de linhas — 9 categorias de tamanho bem diferente
(4 a 8 sinais) num grid comum travam a altura da linha inteira pela mais
alta, sobrando buraco embaixo das curtas (Vasomotor, Sono e energia). Com
`columns`, cada categoria flui no proprio espaco vertical, sem depender
da vizinha. `columns:230px 4` já reduz sozinho o numero de colunas em
telas estreitas, sem media query — no celular vira 1 coluna. */
/* Grafico de pizza dos sinais — pedido do cliente (03/09, quarta rodada):
"9 sistemas evidentes e os sinais de cada um em segundo plano". So existe
com JS (app.js, secao 6e); sem JS o .chip-grid abaixo segue sendo o
conteudo real, nunca fica vazio — com JS, o grafico assume o papel dela
e ela vira hidden (pedido do cliente, 05/09: "podemos retirar a parte
abaixo dos cards"). */
.sym-pie{
display:grid; gap:clamp(30px,4.5vw,52px); align-items:center;
margin-top:clamp(40px,6vw,60px);
}
@media (min-width:960px){.sym-pie{grid-template-columns:1fr 1.05fr}}
.sym-pie__chart{position:relative; max-width:400px; margin:0 auto; width:100%}
.sym-pie__svg{width:100%; height:auto; overflow:visible}
/* Linha com seta ligando a borda do anel ate a caixa de detalhe, que agora
nasce do lado de fora do anel (pedido do cliente, 05/09, com desenho:
"aparecer uma seta que liga o modal pelo lado de fora"). SVG a parte
(nao mistura com #symPieSvg) porque as coordenadas da ponta final vem de
um elemento HTML (a caixa), nao do desenho do donut — sem viewBox aqui,
1 unidade = 1px, do mesmo jeito que .sym-pie__tooltip calcula a posicao
dela (ver mostrarTooltip() no app.js). Coordenadas atualizadas por JS a
cada vez que a caixa abre; opacidade (nao display) controla show/hide,
junto com a caixa. */
.sym-pie__leader{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:4}
.sym-pie__leader-line{stroke:var(--solar-gold); stroke-width:1.5; transition:opacity .15s var(--ease)}
.sym-pie__arrowhead{fill:var(--solar-gold)}
/* Cada fatia nasce invisivel e cresce quando a secao entra na tela — reusa
a MESMA classe is-in que o observer generico de .reveal ja aplica em
.sym-pie (ver app.js, secao 6 "ANIMACAO DE ENTRADA"), sem observer novo. */
.sym-pie__seg{
transform-box:fill-box; transform-origin:center; cursor:pointer;
stroke:var(--bg-alt); stroke-width:2;
opacity:0; transform:scale(.9);
transition:transform .5s var(--ease), opacity .5s var(--ease), filter .3s var(--ease);
}
.sym-pie.is-in .sym-pie__seg{opacity:1; transform:scale(1)}
.sym-pie.is-in .sym-pie__seg.is-active{transform:scale(1.045); filter:brightness(1.18)}
.sym-pie__seg:hover{filter:brightness(1.15)}
.sym-pie__hub{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; padding:22%; pointer-events:none;
}
.sym-pie__hub-num{
font-family:var(--serif); font-weight:300; font-size:clamp(36px,6vw,54px);
color:var(--solar-gold); line-height:1; transition:opacity .15s var(--ease);
}
.sym-pie__hub-label{
margin-top:8px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--text-muted); line-height:1.5; transition:opacity .15s var(--ease);
}
/* Caixa de detalhe da fatia/legenda — pedido do cliente (05/09): "ao passar
o mouse mostrar as lista em uma caixa bem estruturado". Mesmo padrao
tecnico do .cx-tip (curva hormonal, mais acima nesta secao): posicionado
por left/top via JS e escondido por opacidade, nao por display/hidden —
fica na arvore de acessibilidade o tempo todo, pra aria-describedby (nos
links da legenda, ver app.js) funcionar em qualquer estado visual.
Ajustado no mesmo dia: nasce do lado de FORA do anel (nunca mais por cima
das fatias), na direcao radial da fatia — a posicao e calculada em
mostrarTooltip() (app.js) a partir do angulo da fatia, nao do cursor, e a
.sym-pie__leader-line desenha a ligacao com uma seta.
Funciona em QUALQUER dispositivo (nao so mouse): desde que #chipGrid saiu
de tela ("podemos retirar a parte abaixo dos cards"), essa caixa virou o
UNICO jeito de ver a lista completa de sinais — em touch e teclado ela
fixa aberta ao tocar/confirmar (ver app.js, secao 6e). */
.sym-pie__tooltip{
position:absolute; pointer-events:none; opacity:0; transition:opacity .15s var(--ease);
background:rgba(6,5,10,.97); border:1px solid var(--line-strong); padding:14px 16px;
width:min(230px, calc(100vw - 40px)); z-index:5; top:0; left:0; border-radius:var(--radius);
}
.sym-pie__tooltip.is-on{opacity:1}
.sym-pie__tooltip b{
display:block; color:var(--solar-gold); font-family:var(--serif); font-size:16px;
font-weight:400; margin-bottom:4px;
}
.sym-pie__tooltip-n{display:block; font-size:11px; color:var(--nebula); margin-bottom:10px}
.sym-pie__tooltip-list{display:flex; flex-wrap:wrap; gap:6px}
.sym-pie__tooltip-list li{
font-family:var(--sans); font-size:11.5px; line-height:1.3; color:var(--text-muted);
background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px;
padding:4px 10px;
}
.sym-pie__side{
border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
padding:clamp(22px,3vw,30px);
}
/* Mais destaque (pedido do cliente, 05/09): a dica explica o UNICO jeito de
ver a lista de sinais agora que #chipGrid saiu de tela — cor fraca demais
(var(--nebula)) e ela passava despercebida. */
.sym-pie__side-hint{
font-size:13.5px; font-weight:500; letter-spacing:.03em; color:var(--text-muted); margin-bottom:16px;
}
.sym-pie__legend{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:3px}
/* Link de verdade (href="#chip-cat-..."), nao botao — mesmo sem JS o clique
ja rola ate a grade completa (#chipGrid, que so fica hidden com JS). */
.sym-pie__legend a{
display:flex; align-items:center; gap:9px; width:100%; text-align:left;
padding:9px 10px; border-radius:var(--radius); border:1px solid transparent;
font-family:var(--sans); font-size:12.5px; line-height:1.35; color:var(--text-muted);
transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.sym-pie__legend a:hover,
.sym-pie__legend a:focus-visible,
.sym-pie__legend a.is-active{
border-color:var(--gold-star); background:rgba(184,147,90,.09); color:var(--stardust);
}
.sym-pie__legend-dot{width:11px; height:11px; border-radius:50%; flex:none}
.sym-pie__legend-n{margin-left:auto; padding-left:8px; font-size:11px; color:var(--nebula); flex:none}
/* Descricao acessivel de cada link, so pra leitor de tela — mesma tecnica
de .opts legend (perguntas do quiz, mais abaixo). Populada em app.js,
secao 6e. */
.sym-pie__desc{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:600px){
.sym-pie__legend{grid-template-columns:1fr 1fr}
}
.chip-grid{ columns:230px 4; column-gap:clamp(22px,3.2vw,32px) }
/* Borda na categoria inteira, nao por sinal — mesmo padrao do .myth-card
(superficie + linha + raio). 52 sinais emoldurados um a um pesava demais;
9 categorias emolduradas da o contorno pedido sem voltar ao problema. */
.chip-cat{
break-inside:avoid; margin-bottom:clamp(22px,3.2vw,32px);
border:1px solid var(--line); border-radius:var(--radius);
background:var(--surface); padding:clamp(20px,2.6vw,26px);
}
.chip-cat__h{
font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
color:var(--gold-star); margin-bottom:11px;
}
/* Dentro do card, lista corrida com separador — o ponto dourado entre os
itens organiza sem precisar de uma borda por sinal. */
.chip-cat__list li{
display:inline; font-size:13.5px; line-height:1.9; color:var(--text-muted);
}
.chip-cat__list li:not(:last-child)::after{
content:"·"; color:var(--gold-star); opacity:.6;
margin:0 8px; font-size:12px;
}
@media (max-width:760px){
.climaterio__quote{margin-left:auto; margin-right:auto; text-align:center}
.stat-count{flex-direction:column; align-items:center; text-align:center; gap:10px}
}
/* ---------- 7. SINTOMAS ---------- */
.symptoms{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.symptoms__head{max-width:760px; margin-bottom:clamp(34px,5vw,58px)}
.symptoms__head .h2{margin-bottom:20px}
.sym-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:0 clamp(28px,5vw,64px)}
.sym{display:flex; gap:18px; padding:26px 0; border-top:1px solid var(--line)}
/* Um icone por sintoma, no lugar do mesmo marcador repetido seis vezes: a
lista deixa de ser um bloco uniforme e ganha ponto de entrada visual.
Os SVG sao inline e herdam a cor daqui — sem request e sem biblioteca. */
.sym__mark{flex:none; margin-top:1px; color:var(--gold-star)}
.sym__mark svg{width:26px; height:26px; stroke:currentColor; stroke-width:1.1;
stroke-linecap:round; stroke-linejoin:round; fill:none}
.sym h3{font-size:20px; font-weight:400; margin-bottom:7px; line-height:1.3}
.sym p{font-size:14.8px; line-height:1.66; color:var(--text-muted)}
.symptoms__close{
margin-top:clamp(34px,5vw,54px); padding-top:34px; border-top:1px solid var(--line);
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px;
}
.symptoms__close p{
font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.7vw,27px);
line-height:1.42; max-width:32ch; font-weight:300;
}
/* ---------- 8. COMO FUNCIONA ---------- */
.steps__head{max-width:720px; margin-bottom:clamp(44px,6vw,72px)}
.steps__head .h2{margin-bottom:18px}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(28px,4vw,52px)}
.step{padding-top:30px; border-top:1px solid var(--line-strong)}
.step h3{margin-bottom:11px}
.step p{font-size:15px; line-height:1.7; color:var(--text-muted)}
.step__meta{
margin-top:16px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--gold-star);
}
/* ---------- 9. AUTORIDADE (bloco escuro) ---------- */
.authority{
background:var(--bg-alt); color:var(--stardust); position:relative; overflow:hidden;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.authority::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(85deg, rgba(10,9,16,.97) 0%, rgba(10,9,16,.86) 45%, rgba(10,9,16,.5) 100%),
url("../img/autoridade-nebulosa.webp");
background:
linear-gradient(85deg, rgba(10,9,16,.97) 0%, rgba(10,9,16,.86) 45%, rgba(10,9,16,.5) 100%),
image-set(url("../img/autoridade-nebulosa.avif") type("image/avif"),
url("../img/autoridade-nebulosa.webp") type("image/webp"));
background-size:cover; background-position:center right;
}
.authority .wrap{position:relative; z-index:1}
.authority .eyebrow{color:var(--solar-gold)}
.authority .eyebrow::before{background:var(--solar-gold)}
.authority__grid{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
gap:clamp(36px,6vw,84px); align-items:end;
}
.authority h2{color:var(--stardust); margin-bottom:26px}
.authority__cta{margin-top:clamp(28px,3.5vw,38px)}
.authority p{color:var(--text-muted); font-size:16px; line-height:1.78}
.authority p + p{margin-top:18px}
/* Retrato sem moldura. Duas coisas evitam que o recorte fique boiando:
- a mascara dissolve o pe da foto no fundo da secao, entao nao existe
corte reto de torso — que e o que denuncia figura colada;
- o halo quente atras separa o terno preto do fundo quase preto. Sem
ele sobram rosto e maos soltos no escuro. */
.doctor{margin:0}
.doctor__photo{
position:relative; height:clamp(340px,40vw,470px); overflow:hidden;
/* O halo tem que fechar em transparente antes da borda da caixa: se
encostar, o corte do overflow vira aresta e a moldura volta. */
background:
radial-gradient(46% 40% at 50% 32%, rgba(232,200,122,.22) 0%, rgba(184,147,90,.09) 48%, transparent 74%);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.45) 90%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.45) 90%,transparent 100%);
}
.doctor__photo img{
position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%;
}
.doctor__body{padding:0}
.doctor__name{font-family:var(--serif); font-size:26px; color:var(--stardust); line-height:1.25; margin-bottom:8px}
.doctor__crm{
font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
color:var(--solar-gold); margin-bottom:20px;
}
.doctor blockquote{
margin:0; padding-top:20px; border-top:1px solid rgba(237,229,218,.16);
font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.55;
color:var(--stardust); font-weight:300;
}
/* ---------- 9b. RESPIRO ----------
A imagem tem as maos e a luz na direita e sombra na esquerda, entao o
texto vai na esquerda e o veu escurece so esse lado. */
.respiro{
position:relative; display:flex; align-items:center;
min-height:clamp(320px,42vw,500px); padding:0;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
background:
linear-gradient(95deg, rgba(6,5,10,.96) 0%, rgba(6,5,10,.86) 34%, rgba(6,5,10,.3) 62%, rgba(6,5,10,.1) 100%),
url("../img/manha.webp");
background:
linear-gradient(95deg, rgba(6,5,10,.96) 0%, rgba(6,5,10,.86) 34%, rgba(6,5,10,.3) 62%, rgba(6,5,10,.1) 100%),
image-set(url("../img/manha.avif") type("image/avif"),
url("../img/manha.webp") type("image/webp"));
background-size:cover; background-position:center right;
}
/* Sem width:100% o .wrap encolhe para a largura do texto dentro do flex
e o margin:0 auto centraliza esse bloco em cima das maos. */
.respiro .wrap{width:100%}
.respiro__frase{
font-family:var(--serif); font-style:italic; font-weight:300;
font-size:clamp(22px,3.2vw,34px); line-height:1.4;
max-width:22ch; color:var(--stardust);
}
@media (max-width:760px){
/* No celular a imagem vira fundo inteiro e o veu fica vertical, senao
as maos ficam atras do texto. */
.respiro{
min-height:0; padding:clamp(56px,14vw,80px) 0 clamp(200px,44vw,260px);
align-items:flex-start;
background-position:center bottom;
}
.respiro{
background-image:
linear-gradient(180deg, rgba(6,5,10,.95) 0%, rgba(6,5,10,.82) 38%, rgba(6,5,10,.25) 100%),
image-set(url("../img/manha.avif") type("image/avif"),
url("../img/manha.webp") type("image/webp"));
}
.respiro__frase{max-width:none}
}
/* ---------- 10. MITO vs REALIDADE ---------- */
.myth__head{max-width:760px; margin-bottom:clamp(40px,5vw,60px)}
.myth__head .h2{margin-bottom:18px}
.myth__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px)}
.myth-card{
background:var(--surface); border:1px solid var(--line); padding:clamp(26px,3.4vw,38px);
border-radius:var(--radius);
}
.myth-card--heard{border-left:2px solid var(--nebula)}
.myth-card--truth{border-left:2px solid var(--solar-gold)}
.myth-card__flag{
font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
display:block; margin-bottom:16px;
}
.myth-card--heard .myth-card__flag{color:var(--text-muted)}
.myth-card--truth .myth-card__flag{color:var(--solar-gold)}
.myth-card p{font-size:15.5px; line-height:1.72; color:var(--text-muted)}
.myth-card p + p{margin-top:14px}
.myth-card strong{color:var(--text); font-weight:500}
.myth__close{
margin-top:clamp(28px,4vw,40px); padding:clamp(26px,3.4vw,36px);
background:rgba(237,229,218,.045); border:1px solid var(--line); border-radius:var(--radius);
}
.myth__close p{
font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.5vw,25px);
line-height:1.5; max-width:58ch; font-weight:300;
}
/* ---------- 11. QUIZ ---------- */
.quiz-section{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.quiz-section__head{text-align:center; max-width:620px; margin:0 auto clamp(34px,4.5vw,52px)}
.quiz-section__head .h2{margin-bottom:16px}
.quiz-section__head .lead{margin-left:auto; margin-right:auto}
.quiz{
max-width:760px; margin:0 auto; background:var(--surface);
border:1px solid var(--line); border-radius:var(--radius);
padding:clamp(24px,4vw,52px); position:relative;
}
.quiz__bar{height:2px; background:var(--line); margin-bottom:12px; overflow:hidden}
.quiz__bar span{
display:block; height:100%; width:0;
background:linear-gradient(90deg,var(--gold-star),var(--solar-gold));
transition:width .45s var(--ease);
}
.quiz__meta{
display:flex; justify-content:space-between; align-items:center; gap:14px;
font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--nebula);
margin-bottom:clamp(26px,3.5vw,40px);
}
.quiz__step{display:none}
.quiz__step.is-active{display:block; animation:stepIn .42s var(--ease) both}
@keyframes stepIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.quiz__q{
font-family:var(--serif); font-size:clamp(24px,3.4vw,34px); line-height:1.24;
font-weight:400; margin-bottom:8px;
}
.quiz__hint{font-size:13.5px; color:var(--text-muted); margin-bottom:26px}
/* Icone por pergunta — pedido do cliente (03/09, terceira rodada): "mais
interativo e visual". Mesma linguagem dos icones dos 6 sinais (.sym__mark):
traco fino, sem preenchimento, cor dourada — nao emoji, para nao destoar
do resto da marca. */
.quiz__icon{display:block; width:28px; height:28px; margin-bottom:16px; color:var(--gold-star)}
.quiz__icon svg{width:100%; height:100%}
.opts{display:grid; gap:10px; border:0; padding:0; margin:0; min-width:0}
.opts legend{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.opt{position:relative}
.opt input{position:absolute; opacity:0; width:1px; height:1px}
.opt label{
display:flex; align-items:center; gap:14px; min-height:56px;
padding:15px 20px; border:1px solid var(--line-strong); border-radius:var(--radius);
font-size:15.5px; line-height:1.45; cursor:pointer;
transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.opt label::before{
content:""; flex:none; width:16px; height:16px; border:1px solid var(--line-strong);
border-radius:50%; transition:background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.opt--multi label::before{border-radius:2px}
.opt label:hover{border-color:var(--gold-star); background:rgba(184,147,90,.05)}
.opt input:focus-visible + label{outline:2px solid var(--solar-gold); outline-offset:2px}
.opt input:checked + label{border-color:var(--gold-star); background:rgba(184,147,90,.10)}
.opt input:checked + label::before{
background:var(--gold-star); border-color:var(--gold-star);
box-shadow:inset 0 0 0 3px var(--cosmos);
}
.opt--multi input:checked + label::before{box-shadow:inset 0 0 0 2px var(--cosmos)}
.field{margin-bottom:20px}
.field label{
display:block; font-size:11px; font-weight:500; letter-spacing:.14em;
text-transform:uppercase; color:var(--text-muted); margin-bottom:9px;
}
.field input{
width:100%; min-height:54px; padding:15px 16px;
border:1px solid var(--line-strong); background:rgba(237,229,218,.05);
font-family:var(--sans); font-size:16px; font-weight:300; color:var(--text);
border-radius:1px; transition:border-color .2s var(--ease);
}
.field input::placeholder{color:rgba(140,120,101,.9)}
.field input:focus{border-color:var(--gold-star)}
.field input[aria-invalid="true"]{border-color:var(--terracota-dk)}
.field__error{margin-top:8px; font-size:13px; color:var(--terracota); display:none}
.field__error.is-on{display:block}
.consent{display:flex; gap:12px; align-items:flex-start; margin:22px 0 8px}
.consent input{
flex:none; width:22px; height:22px; margin:1px 0 0; accent-color:var(--gold-star); cursor:pointer;
}
.consent label{font-size:13.2px; line-height:1.62; color:var(--text-muted); cursor:pointer}
.consent a{text-decoration:underline; text-underline-offset:3px; color:var(--solar-gold)}
.quiz__nav{
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin-top:28px; padding-top:22px; border-top:1px solid var(--line);
}
.quiz__back{
font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);
min-height:44px; padding:0 8px; display:inline-flex; align-items:center; gap:8px;
transition:color .2s var(--ease);
}
.quiz__back:hover{color:var(--text)}
/* .quiz__back[hidden] agora e coberto pela regra global [hidden] */
.quiz__seal{
display:flex; align-items:flex-start; gap:9px; margin-top:22px;
font-size:12px; color:var(--gold-star); letter-spacing:.03em; line-height:1.5;
}
.quiz__seal svg{width:15px; height:15px; flex:none; margin-top:3px}
/* Tela de carregamento — pausa dramatica entre a ultima pergunta e a leitura
(pedido do cliente, 03/09, terceira rodada). O anel reaproveita a mesma
marca/animacao do hero (@keyframes orbitar, ja definido la em cima) —
nao inventa spinner novo. Passos aparecem em cascata via app.js. */
.quiz__loading{text-align:center; padding:clamp(14px,3vw,28px) 0}
.quiz__loading-mark{width:54px; margin:0 auto 22px; animation:orbitar 3.4s linear infinite}
.quiz__loading-title{
font-family:var(--serif); font-style:italic; font-weight:300;
font-size:clamp(21px,3vw,26px); color:var(--stardust); margin-bottom:24px;
}
.quiz__loading-bar{width:220px; height:2px; background:var(--line); margin:0 auto; border-radius:2px; overflow:hidden}
.quiz__loading-bar span{
display:block; height:100%; width:0%;
background:linear-gradient(90deg,var(--gold-star),var(--solar-gold));
transition:width 1.9s var(--ease);
}
.quiz__loading-steps{margin-top:26px; display:flex; flex-direction:column; gap:10px; align-items:center}
.quiz__loading-steps li{
font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--nebula);
opacity:0; transform:translateY(6px);
transition:opacity .4s var(--ease), transform .4s var(--ease), color .4s var(--ease);
}
.quiz__loading-steps li.is-on{opacity:1; transform:none; color:var(--gold-star)}
/* Leitura inicial (diagnostico) — entra entre o carregamento e a captura.
De proposito SEM cor de alerta: mesma paleta calma dos outros passos do
quiz, em qualquer nivel. O que muda de um nivel para outro e so o texto
(preenchido pelo app.js), nunca a cor — territorio CFM, ver copy.md.
#quizDiagBadge (o nome da fase) usa .quiz__q direto — "como um resultado
de verdade", nao um badge pequeno — so ganha respiro extra aqui dentro. */
.quiz__diag{
border:1px solid var(--line-strong); border-radius:var(--radius);
padding:clamp(22px,3.4vw,32px); background:rgba(237,229,218,.035);
}
.quiz__diag .quiz__q{margin-bottom:14px}
.quiz__diag-texto{font-size:16px; line-height:1.72; color:var(--text)}
.quiz__diag-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.quiz__diag-tag{
font-size:12px; letter-spacing:.03em; color:var(--text-muted);
border:1px solid var(--line-strong); border-radius:var(--radius); padding:6px 12px;
}
.quiz__diag-nota{
margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
font-size:12.5px; line-height:1.6; color:var(--nebula);
}
@media (max-width:760px){
/* .quiz__step ja centraliza o texto (ver 17b); flex nao segue text-align
sozinho, entao os chips da leitura precisam do proprio justify-content. */
.quiz__diag-tags{justify-content:center}
}
/* Tela final do quiz */
.quiz__done{text-align:center; padding:clamp(10px,3vw,26px) 0}
.quiz__done .mark{width:56px; margin:0 auto 26px}
.quiz__done h3{font-size:clamp(24px,3.4vw,32px); font-style:italic; margin-bottom:14px}
.quiz__done p{color:var(--text-muted); max-width:46ch; margin:0 auto 30px; font-size:15.5px}
.quiz__resume{
margin:0 auto 28px; max-width:460px; text-align:left;
border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
background:rgba(237,229,218,.04);
}
.quiz__resume dt{
font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--gold-star); margin-bottom:3px;
}
.quiz__resume dd{margin:0 0 12px; font-size:14.5px; line-height:1.5}
.quiz__resume dd:last-child{margin-bottom:0}
/* ---------- 13. FAQ ---------- */
.faq{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.faq__grid{display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1fr); gap:clamp(30px,5vw,72px); align-items:start}
.faq__head .h2{margin-bottom:18px}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
width:100%; text-align:left; display:flex; align-items:flex-start; justify-content:space-between;
gap:20px; padding:24px 0; min-height:56px;
font-family:var(--serif); font-size:clamp(18.5px,2.2vw,22px); line-height:1.35; font-weight:400;
}
.faq__q .ico{flex:none; width:22px; height:22px; margin-top:5px; position:relative}
.faq__q .ico::before,.faq__q .ico::after{
content:""; position:absolute; left:50%; top:50%; background:var(--gold-star);
transform:translate(-50%,-50%); transition:transform .3s var(--ease);
}
.faq__q .ico::before{width:13px; height:1px}
.faq__q .ico::after{width:1px; height:13px}
.faq__q[aria-expanded="true"] .ico::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{overflow:hidden; height:0; transition:height .34s var(--ease)}
.faq__a > div{padding:0 40px 26px 0}
.faq__a p{font-size:15.3px; line-height:1.74; color:var(--text-muted)}
.faq__a p + p{margin-top:12px}
/* ---------- 14. CTA FINAL ---------- */
.final{
text-align:center; position:relative; overflow:hidden;
/* A faixa de luz do horizonte fica no terco inferior; o veu clareia no
topo para o texto centralizado nao competir com ela. */
background:
linear-gradient(180deg, rgba(6,5,10,.93) 0%, rgba(6,5,10,.78) 48%, rgba(6,5,10,.55) 100%),
url("../img/horizonte-solar.webp");
background:
linear-gradient(180deg, rgba(6,5,10,.93) 0%, rgba(6,5,10,.78) 48%, rgba(6,5,10,.55) 100%),
image-set(url("../img/horizonte-solar.avif") type("image/avif"),
url("../img/horizonte-solar.webp") type("image/webp"));
background-size:cover; background-position:center bottom;
}
.final .mark{width:52px; margin:0 auto 30px; opacity:.9}
.final .h2{margin-bottom:20px}
.final .lead{margin:0 auto 38px}
.final__actions{display:flex; flex-direction:column; align-items:center; gap:14px}
/* ---------- 15. RODAPE ---------- */
.site-footer{
background:var(--bg-alt); color:var(--text-muted);
padding:clamp(56px,7vw,88px) 0 34px; border-top:1px solid var(--line);
}
.site-footer a{color:var(--text-muted); text-decoration:none}
.site-footer a:hover{color:var(--solar-gold)}
.footer__top{
display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.85fr);
gap:clamp(32px,5vw,64px);
padding-bottom:clamp(36px,5vw,52px);
border-bottom:1px solid var(--line);
}
/* Lockup horizontal, o mesmo do header: o arquivo empilhado tem a
assinatura em 8 unidades contra 57 do wordmark, e a 150px ela virava
um borrao. Aqui a assinatura e texto vivo, como no topo. */
.footer__brand img{height:52px; width:auto}
.footer__sig{
margin-top:9px; padding-left:59px;
font-size:8.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
color:var(--gold-star); line-height:1; white-space:nowrap;
}
.footer__tag{margin-top:24px; font-size:13.5px; line-height:1.75; max-width:32ch}
.footer__h{
font-family:var(--sans); font-size:10.5px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--gold-star);
margin:0 0 18px;
}
.footer__col ul{display:grid; gap:2px}
.footer__col a{
display:inline-block; padding:6px 0; min-height:24px;
font-size:13.5px; line-height:1.5;
transition:color .2s var(--ease);
}
.footer__horario{
margin-top:20px; font-size:12.5px; line-height:1.6; color:var(--nebula);
}
.footer__legal{padding:clamp(30px,4vw,42px) 0; border-bottom:1px solid var(--line)}
.disclaimer{
border-left:2px solid var(--solar-gold); padding:2px 0 2px 18px;
font-size:13px; line-height:1.75; max-width:88ch;
}
.footer__legal-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:14px clamp(32px,5vw,64px); margin-top:26px;
}
.footer__legal-grid p{font-size:12.5px; line-height:1.75; color:var(--nebula)}
.footer__legal strong{color:var(--text-muted); font-weight:500}
.disclaimer strong{color:var(--stardust)}
.footer__bottom{
padding-top:26px; display:flex; flex-wrap:wrap; gap:10px 28px;
justify-content:space-between; align-items:center;
font-size:12px; letter-spacing:.04em; color:var(--nebula);
}
.footer__bottom nav{display:flex; flex-wrap:wrap; gap:12px 24px}
.footer__bottom nav a{
display:inline-block; padding:5px 0; min-height:24px;
text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:860px){
.footer__top{grid-template-columns:1fr 1fr; gap:36px}
.footer__brand{grid-column:1 / -1}
}
@media (max-width:560px){
.footer__top{grid-template-columns:1fr}
.footer__brand{grid-column:auto}
.footer__tag{max-width:none}
}
/* ---------- 16. BOTAO FLUTUANTE (WhatsApp) ----------
Circular, so o glifo, no verde oficial #25D366.
Visivel desde o carregamento, em toda a pagina. A unica animacao e a
entrada, para nao aparecer de estalo junto com o resto.
z-index 100: acima do header (80), abaixo do link de pular para o
conteudo (200), que precisa continuar sendo o primeiro elemento
alcancavel por teclado.
O glifo branco sobre esse verde da 1,98:1, abaixo dos 3:1 de 1.4.11.
Nao e desvio: a WCAG isenta logotipo e marca ("Logotypes"), porque
marca registrada nao se recolore. O que precisa passar e a borda do
botao contra a pagina, e verde sobre Cosmos da 10,2:1. */
.fab{
position:fixed; z-index:100;
right:var(--gut); bottom:calc(var(--gut) + env(safe-area-inset-bottom));
display:inline-flex; align-items:center; justify-content:center;
width:58px; height:58px; border-radius:50%;
background:#25D366; color:#FFFFFF;
/* Sombra escura para profundidade, mais um halo verde: num fundo quase
preto so a sombra nao separa nada. */
box-shadow:0 10px 26px rgba(0,0,0,.55), 0 6px 20px rgba(37,211,102,.30);
transition:background-color .25s var(--ease), transform .25s var(--ease),
box-shadow .25s var(--ease);
}
.fab svg{width:32px; height:32px; flex:none}
.js .fab{animation:fabEntra .45s var(--ease) .25s both}
.fab:hover{
background:#1FBE5B; transform:translateY(-2px) scale(1.04);
box-shadow:0 14px 30px rgba(0,0,0,.6), 0 8px 26px rgba(37,211,102,.42);
}
.fab:active{background:#1AA34D}
@keyframes fabEntra{
from{opacity:0; transform:translateY(14px) scale(.9)}
to{opacity:1; transform:none}
}
@media (max-width:600px){
.fab{width:54px; height:54px}
.fab svg{width:30px; height:30px}
}
/* ---------- 17. RESPONSIVO ---------- */
@media (max-width:1000px){
.hero{
background-image:
linear-gradient(180deg, rgba(6,5,10,.14) 0%, rgba(6,5,10,.66) 58%, rgba(6,5,10,.97) 100%),
url("../img/hero-luz-yova-mobile-v2.webp");
background-size:cover;
/* top center cortava a faixa de luz mais forte, que fica na borda
direita da imagem-fonte; top right mostra ela inteira. */
background-position:top right;
background-repeat:no-repeat;
}
.hero__grid{grid-template-columns:1fr; gap:0}
.authority__grid{grid-template-columns:1fr}
.doctor{max-width:520px; margin-inline:auto}
.faq__grid{grid-template-columns:1fr}
.footer__top{grid-template-columns:1fr}
}
@media (max-width:760px){
body{font-size:16px}
.myth__cols{grid-template-columns:1fr}
.brand__tag{display:none}
.brand img{height:38px}
.brand__sig{padding-left:43px; font-size:7.6px; letter-spacing:.22em}
.symptoms__close{flex-direction:column; align-items:flex-start}
.faq__a > div{padding-right:8px}
.footer__brand img{height:46px}
.footer__sig{padding-left:52px; font-size:7.8px; letter-spacing:.22em}
}
@media (max-width:600px){
/* A copy comeca na zona escura da composicao mobile. */
.hero__actions{margin-top:30px}
.hero__trust{margin-top:32px}
.site-header .btn{display:none}
.hero__actions .btn,.final__actions .btn{width:100%}
.quiz__nav{flex-direction:column-reverse; align-items:stretch}
.quiz__nav .btn{width:100%}
.quiz__back{justify-content:center}
/* O botao flutuante fica no canto e nao ocupa a largura toda, entao a
folga aqui e so para a ultima linha do rodape nao ficar embaixo dele. */
.site-footer{padding-bottom:calc(34px + 62px)}
}
/* ---------- 17b. MOBILE CENTRALIZADO ----------
Tudo centralizado do header ao rodape. Detalhes que a centralizacao
exige e nao sao obvios:
- bordas laterais (.myth-card, .disclaimer) viram borda de topo,
porque filete a esquerda de texto centralizado fica torto
- blocos com max-width precisam de margin-inline:auto, senao ficam
centralizados por dentro e encostados a esquerda por fora
- valor digitado nos campos continua a esquerda: numero centralizado
e dificil de conferir
---------------------------------------------- */
@media (max-width:760px){
/* --- utilitarios de texto --- */
.hero__copy, .symptoms__head, .steps__head, .step,
.authority__grid > div, .myth__head, .myth-card, .myth__close,
.faq__head, .respiro, .sym,
.quiz__step, .quiz__done, .footer__brand, .footer__col,
.footer__legal, .doctor{
text-align:center;
}
/* Com o eyebrow em duas linhas, o filete ficava boiando ao lado do
bloco. Empilhado por cima, ele vira uma marca de abertura. */
.eyebrow{flex-direction:column; gap:14px}
.lead, .section-intro, .footer__tag, .disclaimer,
.symptoms__close p, .myth__close p, .respiro__frase,
.quiz__resume{
margin-left:auto; margin-right:auto;
}
/* --- header --- */
.site-header__inner{justify-content:center}
.brand{align-items:center}
.brand__sig{padding-left:0}
/* --- hero --- */
.hero__actions{justify-content:center}
.hero__trust{justify-content:center}
/* --- sintomas: o marcador sobe para cima do titulo --- */
.sym{flex-direction:column; align-items:center; gap:12px}
.sym__mark{margin-top:0}
.symptoms__close{align-items:center; text-align:center}
/* --- mito vs realidade --- */
.myth-card{border-left:0; border-top:2px solid}
.myth-card--heard{border-top-color:var(--nebula)}
.myth-card--truth{border-top-color:var(--solar-gold)}
/* --- quiz --- */
.quiz__meta{justify-content:center; gap:10px 20px; flex-wrap:wrap}
/* .quiz__icon e bloco de largura fixa — text-align:center do .quiz__step
so centraliza conteudo inline, nao a posicao do proprio bloco. Sem
isto ele ficava colado na borda esquerda enquanto o resto da pergunta
centralizava por baixo dele. */
.quiz__icon{margin-left:auto; margin-right:auto}
/* Texto centralizado, mas o indicador ancorado na borda: seguindo o
texto, ele saltava de posicao a cada opcao e a lista ficava inquieta.
Ancorado, o olho tem um ponto fixo para conferir o que esta marcado. */
.opt label{justify-content:center; position:relative; padding-left:48px; padding-right:48px}
.opt label::before{position:absolute; left:17px; top:50%; margin-top:-8px}
.field label{text-align:center}
.consent{justify-content:center; text-align:left}
.quiz__seal{justify-content:center; text-align:left}
#erro-lgpd{text-align:center}
/* o valor digitado fica a esquerda de proposito */
.field input{text-align:left}
/* --- FAQ: o sinal de + acompanha o texto em vez de ir para a borda --- */
.faq__q{justify-content:center; gap:14px; text-align:center}
.faq__a > div{padding-right:0}
/* --- rodape --- */
/* A imagem e block por causa do reset, e block nao centraliza com
text-align: precisa de margem automatica. */
.footer__brand img{margin-left:auto; margin-right:auto}
/* O recuo da assinatura existia para alinha-la sob o wordmark no layout
da esquerda. Centralizado, ele so empurra o texto para o lado. */
.footer__sig{padding-left:0}
.footer__col ul{justify-items:center}
.footer__legal-grid{text-align:center}
.footer__bottom{justify-content:center; text-align:center; gap:14px}
.footer__bottom nav{justify-content:center; width:100%}
.disclaimer{
border-left:0; border-top:2px solid var(--solar-gold);
padding:22px 0 0; max-width:none;
}
}
/* ---------- 17b. TELA BAIXA (altura, nao largura) ----------
O hero foi desenhado com 917px de altura. Num monitor 1920x1080 com a
escala do Windows em 133% — combinacao comum — a janela util fica em
1440x655, e os ultimos 262px do hero nunca aparecem: some a linha de
confianca, some a credencial do medico e o botao principal encosta na
borda da dobra.
Isto nao e problema de largura, entao nao cabe nos breakpoints acima:
em 1440x900 esta tudo visivel e em 1440x655 nao. A consulta e por ALTURA.
min-width:1001px mantem o mobile de fora, que tem composicao propria. */
@media (min-width:1001px) and (max-height:840px){
.hero{
padding-top:calc(var(--header-h) + clamp(20px,3vh,44px));
padding-bottom:clamp(40px,6vh,72px);
}
/* Teto menor so aqui: com 70px a manchete come tres linhas e sozinha
custa 218px da dobra. */
.hero .h-display{font-size:clamp(34px,3.9vw,54px)}
.hero h1{margin-bottom:18px}
.hero .lead{font-size:16.5px; line-height:1.62}
.hero__actions{margin-top:26px}
.hero .cta-note{margin-top:12px}
.hero__trust{margin-top:26px; padding-top:18px}
}
/* ---------- 18. MOVIMENTO REDUZIDO / IMPRESSAO ---------- */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
/* Sem zerar o delay, a constelacao ainda apareceria em cascata ao longo
de 2s — a animacao seria instantanea, mas a espera continuaria. */
animation-delay:.001ms !important;
transition-duration:.001ms !important;
}
.js .reveal{opacity:1 !important; transform:none !important}
}
@media print{
.site-header,.fab,.quiz-section{display:none}
body{background:#fff; color:#000}
}