/* Base visual das páginas públicas do site global (landing /inicio, cadastro /comecar, /termos,
   /privacidade): tokens, as 8 paletas por [data-segmento], tipografia, revelação oval, botões com
   letras que rolam. Vem do mock aprovado (docs/specs/onboarding-self-service/mock/landing.html).
   O tema do segmento pinta só ações e artes; fundos ficam neutros (Q32b). */

/* Fontes locais (RNF-ONB-03: sem CDN). Manrope variável já servia o Desk; Inter variável (recorte latin)
   entrou com esta página -- ver gestai/public/fonts/Inter/NOTICE.md. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/gestai/fonts/Manrope/ManropeVariable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/gestai/fonts/Inter/InterVariable-latin.woff2") format("woff2"); }

:root {
	--s12: #0f172a; --s11: #475569; --s9: #64748b; --s7: #c6d0dd; --s6: #d6dee8; --s4: #e2e8f0; --chao: #f8fafc;
	--bg: #f8fafc; --guia: #e8edf3;
	--titulo: "Manrope", "Inter", system-ui, sans-serif;
	--corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--marca: #0076ba; --acento: #00afec;
	--a-quadro: #00527f; --a-fundo: #0d3358; --a-meio: #007dc4; --a-acento: #00afec; --a-claro: #cdeefb;
	--escuro: #0f172a; --guia-escura: rgba(255,255,255,.065);
	--sai: cubic-bezier(.22,1,.36,1);      /* ~ power3.out / expo.out */
	--vai: cubic-bezier(.65,0,.35,1);      /* ~ power2.inOut */
	--nav: 76px; --lado: clamp(16px, 4vw, 40px);
}
[data-segmento="radiologia"] { --marca: #0076ba; --acento: #00afec; --a-quadro: #00527f; --a-fundo: #0d3358; --a-meio: #007dc4; --a-acento: #00afec; --a-claro: #cdeefb; }
[data-segmento="odontologia"] { --marca: #0f766e; --acento: #2dd4bf; --a-quadro: #115e59; --a-fundo: #0b3b38; --a-meio: #14958a; --a-acento: #2dd4bf; --a-claro: #ccfbf1; }
[data-segmento="estetica"] { --marca: #a23d6d; --acento: #f08fb8; --a-quadro: #7a2a52; --a-fundo: #4a1832; --a-meio: #c0507f; --a-acento: #f08fb8; --a-claro: #fbd9e7; }
[data-segmento="barbearia"] { --marca: #9a4a14; --acento: #d08a3c; --a-quadro: #2b2724; --a-fundo: #171412; --a-meio: #7c4a24; --a-acento: #d08a3c; --a-claro: #f0dcc4; }
[data-segmento="veterinaria"] { --marca: #3f7a1f; --acento: #8cc63f; --a-quadro: #2f5a17; --a-fundo: #1c370d; --a-meio: #4f9a2a; --a-acento: #8cc63f; --a-claro: #dcefc5; }
[data-segmento="spa"] { --marca: #6b4fa0; --acento: #b9a2e6; --a-quadro: #4c3878; --a-fundo: #2c2048; --a-meio: #8466bd; --a-acento: #b9a2e6; --a-claro: #e6dcf7; }
[data-segmento="universidade"] { --marca: #8a1c2b; --acento: #c9a227; --a-quadro: #5e1220; --a-fundo: #3a0b14; --a-meio: #a8323f; --a-acento: #c9a227; --a-claro: #f1e4c0; }
[data-segmento="outro"] { --marca: #334155; --acento: #94a3b8; --a-quadro: #1e293b; --a-fundo: #0f172a; --a-meio: #475569; --a-acento: #94a3b8; --a-claro: #e2e8f0; }

@property --pt { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --dx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dist { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --rel { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --vel { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --e { syntax: "<number>"; inherits: false; initial-value: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: var(--nav); }
body { background: var(--bg); color: var(--s12); font: 16px/1.55 var(--corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { overflow-x: clip; }

/* ---------- O palco: a mesma grade de 80 px do cadastro editorial ---------- */
.grade-fundo {
	background-image: linear-gradient(to right, var(--guia) 1px, transparent 1px), linear-gradient(to bottom, var(--guia) 1px, transparent 1px);
	background-size: 80px 80px; background-position: center top;
}
.palco-fixo { position: fixed; inset: 0; z-index: -2; background-color: var(--bg); }
.palco-fixo.escuro {
	background-color: var(--escuro); opacity: 0; transition: opacity .7s var(--vai);
	background-image: linear-gradient(to right, var(--guia-escura) 1px, transparent 1px), linear-gradient(to bottom, var(--guia-escura) 1px, transparent 1px);
}
body.tom-escuro .palco-fixo.escuro { opacity: 1; }

/* ---------- Tipografia ---------- */
.sobre { font: 700 11px/1 var(--corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--s9); display: inline-flex; align-items: center; gap: 10px; }
.sobre::before { content: ""; width: 22px; height: 2px; background: var(--marca); }
.tom-e .sobre { color: rgba(255,255,255,.55); }
.tom-e .sobre::before { background: var(--acento); }
.gigante { font: 800 clamp(34px, 8vw, 120px)/.9 var(--titulo); letter-spacing: -.045em; text-transform: uppercase; }
.titulo-sec { font: 800 clamp(38px, 6.4vw, 96px)/.9 var(--titulo); letter-spacing: -.04em; text-transform: uppercase; }
.contorno { color: var(--bg); -webkit-text-fill-color: var(--bg); -webkit-text-stroke: 4px var(--s12); paint-order: stroke fill; }
.tom-e .contorno { color: var(--escuro); -webkit-text-fill-color: var(--escuro); -webkit-text-stroke-color: rgba(255,255,255,.8); }
.cor { color: var(--marca); }
.tom-e .cor { color: var(--acento); }
.selo-il { display: inline-flex; align-items: center; font: 600 11px/1.3 var(--corpo); color: #a2510a; background: #fff1e2; border: 1px dashed #e7a867; border-radius: 999px; padding: 2px 9px; white-space: nowrap; letter-spacing: 0; text-transform: none; }

/* Texto dividido. .ln = linha (autor quebra as linhas); .pal = palavra; .ch = letra (gerados pelo JS). */
.ln { display: block; }
.pal { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; } /* sem will-change: são centenas de letras, cada uma virava camada */

/* Revelação oval, igual à do landonorris: a linha abre numa elipse que sobe do pé, e as letras
   sobem escalonadas a partir do centro (--d = distância da letra ao centro da linha). */
.js [data-oval] .ln { clip-path: ellipse(20% 0% at 50% 100%); transition: clip-path 1.25s var(--vai); transition-delay: calc(var(--l, 0) * .12s); }
.js [data-oval] .ch { transform: translateY(55%); transition: transform 1.25s var(--vai); transition-delay: calc(var(--l, 0) * .12s + var(--d, 0) * 16ms); }
.js [data-oval].vis .ln { clip-path: ellipse(110% 130% at 50% 100%); }
.js [data-oval].vis .ch { transform: none; }
.js [data-oval].feito .ln { clip-path: none; }

/* Barra que varre a linha (high-line-reveal): a linha abre da esquerda já coberta pela barra, e a
   barra recolhe para a direita descobrindo o texto. */
.js [data-barra] .ln { position: relative; width: fit-content; clip-path: inset(-10% 100% -10% 0); transition: clip-path .55s var(--sai); transition-delay: calc(var(--l, 0) * .11s); }
.js [data-barra] .ln::after { content: ""; position: absolute; inset: 4% -2px 2%; background: var(--acento); transform-origin: right center; transition: transform .6s var(--vai); transition-delay: calc(var(--l, 0) * .11s + .42s); }
.js [data-barra].vis .ln { clip-path: inset(-10% -2% -10% 0); }
.js [data-barra].vis .ln::after { transform: scaleX(0); }

/* Subida simples para blocos */
.js [data-sobe] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--sai), transform .9s var(--sai); transition-delay: var(--atraso, 0s); }
.js [data-sobe].vis { opacity: 1; transform: none; }

/* ---------- Botões: letras que rolam no hover (btn-text .char do original) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 12px; font: 700 15px/1 var(--titulo); letter-spacing: -.005em; white-space: nowrap; transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--sai); }
.btn-pri { background: var(--marca); color: #fff; }
.btn-pri:hover { background: var(--a-quadro); }
.btn-sec { border: 1.5px solid currentColor; }
.btn-sec:hover { background: var(--s12); color: #fff; border-color: var(--s12); }
.tom-e .btn-sec:hover, .menu .btn-sec:hover { background: #fff; color: var(--s12); border-color: #fff; }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--sai); }
.btn:hover svg { transform: translateX(4px); }
.btn-sm { height: 42px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.rolo { position: relative; display: inline-block; overflow: hidden; line-height: 1.15; }
.rolo > span { display: block; }
.rolo > span + span { position: absolute; left: 0; top: 100%; }
.rolo .ch { transition: transform .5s var(--sai); transition-delay: calc(var(--i) * 14ms); }
.btn:hover .rolo .ch, .btn:focus-visible .rolo .ch, .lnk:hover .rolo .ch { transform: translateY(-100%); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }