/* Rotinauta: página inicial. Cores e fontes de docs/04-identidade-visual.md.
   Tudo servido daqui mesmo (fontes, ícones, scripts): quem visita não tem dados enviados a terceiros. */
@font-face { font-family: 'Baloo 2'; font-weight: 700; font-display: swap; src: url('fontes/Baloo2_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('fontes/Baloo2_800ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 500; font-display: swap; src: url('fontes/Nunito_500Medium.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('fontes/Nunito_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('fontes/Nunito_800ExtraBold.ttf') format('truetype'); }

:root {
  --espaco: #2A1F6E;
  --espaco-escuro: #24185E;
  --abismo: #1D1450;
  --abismo-2: #150E3D;
  --nave: #3B2A8C;
  --lavanda: #8C7BFF;
  --lavanda-clara: #CFC7FF;
  --nevoa: #E4DFFF;
  --estrela: #FFC83D;
  --estrela-escura: #E0A400;
  --orbita: #2EC4B6;
  --orbita-texto: #0E7C72;
  --foguete: #FF6B5B;
  --alerta: #B23A2F;
  --feito: #2BB673;
  --nao-feito: #F0544F;
  --fundo-filho: #F4F1FF;
  --fundo-pais: #F7F6FB;
  --texto: #1B1446;
  --texto-2: #4A4170;
  --borda: #E4E0F5;
  --titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --corpo: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.2, .7, .2, 1);
  --cab: 72px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 12px); }
body {
  margin: 0;
  background: var(--abismo);
  color: var(--texto);
  font-family: var(--corpo);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--titulo); line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
em { font-style: normal; }
:focus-visible { outline: 3px solid var(--estrela); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--estrela); color: var(--espaco-escuro); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--estrela); color: var(--espaco-escuro); font-weight: 800; padding: 10px 16px; border-radius: 12px; text-decoration: none; }
.pular:focus { top: 12px; }

.ceu { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .rodape { position: relative; z-index: 1; }

.caixa { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.caixa-estreita { max-width: 820px; }
.centro { text-align: center; }

.c-orbita { color: var(--orbita); }
.c-estrela { color: var(--estrela); }
.c-foguete { color: var(--foguete); }
.c-nave { color: var(--nave); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: var(--titulo); font-weight: 800; letter-spacing: .005em; line-height: 1;
  transition: transform .25s var(--mola), box-shadow .25s ease, background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn .ic { width: 22px; height: 22px; flex: none; stroke-width: 2.4; }
.btn-g { font-size: 1.12rem; padding: 17px 28px; min-height: 58px; }
.btn-p { font-size: 1rem; padding: 11px 20px; min-height: 44px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.97); }
.btn-estrela { background: var(--estrela); color: var(--espaco-escuro); box-shadow: 0 6px 0 var(--estrela-escura), 0 14px 32px rgba(255, 200, 61, .28); }
.btn-estrela:hover { box-shadow: 0 8px 0 var(--estrela-escura), 0 20px 40px rgba(255, 200, 61, .38); }
.btn-estrela:active { box-shadow: 0 2px 0 var(--estrela-escura), 0 6px 16px rgba(255, 200, 61, .25); }
.btn-fantasma { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 2px rgba(207, 199, 255, .38); backdrop-filter: blur(6px); }
.btn-fantasma:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(207, 199, 255, .7); }
.btn-roxo { background: var(--espaco); color: #fff; box-shadow: 0 6px 0 #150E3D, 0 14px 30px rgba(42, 31, 110, .3); }
.btn-roxo:hover { background: var(--nave); }
.btn-roxo:active { box-shadow: 0 2px 0 #150E3D; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

/* ---------- cabeçalho ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .35s ease, box-shadow .35s ease, transform .35s var(--suave); }
.topo-in { max-width: 1200px; margin: 0 auto; height: var(--cab); padding: 0 24px; display: flex; align-items: center; gap: 18px; }
.topo.rolou { background: rgba(29, 20, 80, .93); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(207, 199, 255, .12); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--titulo); font-weight: 800; font-size: 1.55rem; letter-spacing: -.01em; }
.marca-logo { width: 40px; height: 42px; transition: transform .5s var(--mola); }
.marca:hover .marca-logo { transform: rotate(-12deg) scale(1.08); }
.topo-nav { margin-left: auto; display: flex; gap: 2px; }
.topo-nav a { color: var(--lavanda-clara); text-decoration: none; font-weight: 700; font-size: .98rem; padding: 8px 14px; border-radius: 999px; transition: color .2s, background-color .2s; }
.topo-nav a:hover, .topo-nav a.ativo { color: #fff; background: rgba(255, 255, 255, .1); }
.topo-cta { margin-left: 6px; }

/* ---------- elementos do espaço ---------- */
.escuro { color: #fff; position: relative; }
.nebulosa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nebulosa::before, .nebulosa::after { content: ''; position: absolute; border-radius: 50%; filter: blur(40px); }
.nebulosa-heroi::before { width: 70vw; height: 70vw; left: 35%; top: -30%; background: radial-gradient(closest-side, rgba(140, 123, 255, .34), transparent); }
.nebulosa-heroi::after { width: 50vw; height: 50vw; left: -20%; bottom: -30%; background: radial-gradient(closest-side, rgba(46, 196, 182, .16), transparent); }
.nebulosa-como::before { width: 60vw; height: 60vw; right: -20%; top: 10%; background: radial-gradient(closest-side, rgba(255, 107, 91, .14), transparent); }
.nebulosa-como::after { width: 50vw; height: 50vw; left: -15%; top: 40%; background: radial-gradient(closest-side, rgba(140, 123, 255, .22), transparent); }
.nebulosa-astro::before { width: 60vw; height: 60vw; left: -10%; top: 0; background: radial-gradient(closest-side, rgba(255, 200, 61, .12), transparent); }
.nebulosa-filme::before { width: 70vw; height: 50vw; left: 15%; top: 20%; background: radial-gradient(closest-side, rgba(140, 123, 255, .28), transparent); }
.nebulosa-fund::before { width: 60vw; height: 60vw; right: -10%; top: -10%; background: radial-gradient(closest-side, rgba(255, 200, 61, .14), transparent); }
.nebulosa-fund::after { width: 50vw; height: 50vw; left: -10%; bottom: -20%; background: radial-gradient(closest-side, rgba(255, 107, 91, .12), transparent); }

/* ---------- 1. herói ---------- */
.heroi { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--cab) + 32px) 0 96px; overflow: hidden; }
.heroi-in { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 48px; }
.planeta-heroi { position: absolute; width: 520px; height: 520px; right: -170px; bottom: -330px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #A99BFF 0%, #6E5CE6 45%, #3B2A8C 100%); box-shadow: inset -40px -30px 80px rgba(21, 14, 61, .6), 0 0 120px rgba(140, 123, 255, .3); }
.planeta-heroi i { position: absolute; left: -18%; top: 34%; width: 136%; height: 34%; border-radius: 50%; border: 10px solid rgba(255, 200, 61, .5); transform: rotate(-14deg); border-bottom-color: transparent; }
.lua-heroi { position: absolute; width: 40px; height: 40px; left: 52%; top: 15%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF9A8E, #FF6B5B 55%, #D9483A); box-shadow: 0 0 40px rgba(255, 107, 91, .45); animation: boia 7s ease-in-out infinite; }

.selo-sobre { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(207, 199, 255, .22); color: var(--nevoa); font-weight: 700; font-size: .95rem; }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--orbita); box-shadow: 0 0 0 0 rgba(46, 196, 182, .7); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(46, 196, 182, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 196, 182, 0); } }

.heroi-t { margin-top: 22px; font-weight: 800; font-size: min(5.2vw, 4.2rem); line-height: 1.02; letter-spacing: -.02em; }
.ht-linha { display: block; }
.ht-linha em { position: relative; display: inline-block; }
.ht-linha em::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: .06em; height: .09em; border-radius: 99px; background: currentColor; opacity: .35; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--suave) 1.1s; }
.pronto .ht-linha em::after { transform: scaleX(1); }
.heroi-sub { margin-top: 22px; max-width: 34em; color: var(--lavanda-clara); font-size: clamp(1.06rem, 1.45vw, 1.24rem); font-weight: 700; line-height: 1.55; }
.heroi-acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.heroi-acoes.centro { justify-content: center; }

.vagas { margin-top: 28px; display: inline-flex; align-items: center; gap: 14px; color: var(--nevoa); text-decoration: none; font-weight: 700; font-size: .98rem; }
.vagas[hidden] { display: none; }
.vagas strong { color: var(--estrela); font-family: var(--titulo); font-size: 1.15rem; }
.vagas-barra { width: 140px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.vagas-barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--foguete), var(--estrela)); transform-origin: left; transform: scaleX(1); transition: transform 1.6s var(--suave); }

.heroi-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.orbita-anel { position: absolute; width: 560px; height: 560px; border-radius: 50%; border: 1.5px dashed rgba(207, 199, 255, .2); animation: gira 60s linear infinite; }
.orbita-anel::before { content: ''; position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--orbita); box-shadow: 0 0 18px var(--orbita); }
@keyframes gira { to { transform: rotate(360deg); } }
.fone-heroi { --s: .92; transform: rotate(3deg); transition: transform .6s var(--suave); }
.flutua { position: absolute; z-index: 3; animation: boia 6s ease-in-out infinite; }
.flutua svg { width: 100%; height: 100%; }
.flutua-a { width: 64px; height: 64px; left: 4%; top: 12%; animation-delay: -1s; filter: drop-shadow(0 10px 24px rgba(255, 200, 61, .45)); }
.flutua-b { width: 52px; height: 52px; right: 6%; top: 30%; animation-delay: -3s; filter: drop-shadow(0 10px 20px rgba(43, 182, 115, .4)); }
.flutua-c { right: 2%; bottom: 18%; padding: 10px 16px; border-radius: 16px; background: #fff; color: var(--espaco-escuro); font-family: var(--titulo); font-weight: 800; font-size: 1.1rem; box-shadow: 0 14px 30px rgba(10, 6, 40, .4); animation-delay: -2s; }
@keyframes boia { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(3deg); } }
.dica-toque { position: absolute; z-index: 4; left: 50%; bottom: -6px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: var(--foguete); color: #fff; font-weight: 700; font-size: .95rem; box-shadow: 0 10px 24px rgba(255, 107, 91, .4); animation: chama-atencao 2.4s ease-in-out infinite; transition: opacity .4s, transform .4s; }
.dica-toque span { font-family: var(--titulo); font-weight: 800; }
.dica-toque::before { content: ''; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; background: var(--foguete); transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.dica-toque.some { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }
@keyframes chama-atencao { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }

.rolar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--lavanda-clara); text-decoration: none; font-weight: 700; font-size: .9rem; opacity: .85; }
.rolar-mouse { width: 24px; height: 36px; border-radius: 12px; border: 2px solid currentColor; position: relative; }
.rolar-mouse i { position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--estrela); animation: rolinho 1.8s ease-in-out infinite; }
@keyframes rolinho { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* entrada do herói */
.js [data-entra] { opacity: 0; transform: translateY(28px); filter: blur(8px); }
.js .pronto [data-entra] { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--suave), transform 1.1s var(--suave), filter .9s var(--suave); transition-delay: var(--d, 0s); }
.js .heroi-visual[data-entra] { transform: translateY(60px) scale(.94); }
.js .pronto .heroi-visual[data-entra] { transform: none; }

/* ---------- celulares (desenho 300 × 640, escalado com --s) ---------- */
.fone-caixa { --s: 1; position: relative; width: calc(300px * var(--s)); height: calc(640px * var(--s)); flex: none; }
.fone { position: absolute; left: 0; top: 0; width: 300px; height: 640px; padding: 10px; border-radius: 50px; background: #1B1446; box-shadow: 0 40px 80px rgba(8, 4, 32, .55), inset 0 0 0 2.5px #3B2A8C, inset 0 0 0 5px #120C38; transform: scale(var(--s)); transform-origin: 0 0; }
.tela { position: relative; width: 280px; height: 620px; border-radius: 40px; overflow: hidden; background: var(--fundo-filho); color: var(--texto); font-family: var(--corpo); line-height: 1.25; text-align: left; isolation: isolate; }
.tela svg { flex: none; }
.ilha { position: absolute; left: 95px; top: 9px; width: 90px; height: 26px; border-radius: 13px; background: #0B0820; z-index: 8; }
.hora { position: absolute; left: 26px; top: 12px; z-index: 8; color: #fff; font-weight: 800; font-size: 13px; }
.faixa { position: absolute; left: 0; top: 0; width: 280px; height: 112px; background: var(--espaco); }
.fone-avatar { position: absolute; left: 14px; top: 52px; width: 42px; height: 44px; }
.fone-oi { position: absolute; left: 64px; top: 48px; color: var(--lavanda-clara); font-weight: 700; font-size: 12px; }
.fone-titulo { position: absolute; left: 64px; top: 63px; color: #fff; font-family: var(--titulo); font-weight: 800; font-size: 25px; line-height: 1.1; }
.fone-estrelas { position: absolute; right: 40px; top: 62px; height: 30px; padding: 0 11px 0 9px; display: flex; align-items: center; gap: 5px; border-radius: 15px; background: rgba(255, 255, 255, .13); }
.fone-estrelas svg { width: 17px; height: 17px; }
.fone-estrelas b { color: #fff; font-family: var(--titulo); font-weight: 800; font-size: 17px; line-height: 1; padding-top: 2px; min-width: 20px; font-variant-numeric: tabular-nums; }
.fone-estrelas.pula { animation: pula .5s var(--mola); }
@keyframes pula { 40% { transform: scale(1.3); } }
.fone-cadeado { position: absolute; right: 12px; top: 68px; width: 18px; height: 18px; color: var(--lavanda-clara); stroke-width: 2; }
.fone-mais { position: absolute; right: 38px; top: 97px; color: var(--estrela); font-weight: 800; font-size: 13px; opacity: 0; white-space: nowrap; }
.fone-mais.sobe { animation: sobe-mais 1.4s var(--suave) forwards; }
@keyframes sobe-mais { 0% { opacity: 0; transform: translateY(12px); } 20% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
.abas { position: absolute; left: 12px; right: 12px; top: 124px; display: flex; gap: 6px; }
.aba { flex: 1; height: 50px; border-radius: 13px; background: #fff; border: 1.5px solid var(--borda); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--texto-2); font-family: var(--titulo); font-weight: 700; font-size: 11px; line-height: 1; }
.aba svg { width: 18px; height: 18px; stroke-width: 2; }
.aba.on { background: var(--espaco); border-color: var(--espaco); color: #fff; }
.aba.on svg { color: var(--estrela); }
.cartao-fone { position: absolute; left: 12px; width: 256px; border-radius: 16px; background: #fff; box-shadow: 0 3px 10px rgba(42, 31, 110, .08); }
.foco { top: 184px; height: 290px; display: flex; flex-direction: column; align-items: center; padding: 16px 14px 0; transition: box-shadow .4s; }
.foco.brilha { box-shadow: 0 0 0 3px var(--estrela), 0 10px 30px rgba(255, 200, 61, .35); }
.pilula { padding: 2px 9px; border-radius: 99px; background: var(--fundo-filho); color: var(--espaco); font-weight: 800; font-size: 10px; }
.foco-icone { margin-top: 10px; width: 92px; height: 92px; border-radius: 50%; background: var(--fundo-filho); display: flex; align-items: center; justify-content: center; }
.foco-icone svg { width: 52px; height: 52px; color: var(--espaco); stroke-width: 1.8; }
.foco-titulo { margin-top: 8px; font-family: var(--titulo); font-weight: 800; font-size: 21px; line-height: 1.2; text-align: center; color: var(--texto); }
.foco-premio { margin-top: 4px; display: flex; align-items: center; gap: 5px; color: var(--texto-2); font-weight: 800; font-size: 12px; }
.foco-premio svg { width: 16px; height: 16px; }
.foco .troca { animation: troca .5s var(--suave); }
@keyframes troca { from { opacity: 0; transform: translateX(24px); } }
.btn-missao { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 48px; border: 0; border-radius: 14px; background: var(--estrela); color: var(--espaco-escuro); display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--titulo); font-weight: 800; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 4px 0 var(--estrela-escura); transition: transform .15s var(--mola), box-shadow .15s, filter .2s; -webkit-tap-highlight-color: transparent; }
.btn-missao svg { width: 19px; height: 19px; stroke-width: 3; }
.btn-missao:hover { filter: brightness(1.05); }
.btn-missao:active, .btn-missao.aperta { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 var(--estrela-escura); }
.btn-missao.feito { background: #E6F7EE; color: #1E8A55; box-shadow: 0 4px 0 #BFE8D2; }
.lista-fone { top: 486px; height: 170px; padding: 12px 12px 0; overflow: hidden; }
.lista-titulo { display: block; font-family: var(--titulo); font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.lf-linha { display: flex; align-items: center; gap: 9px; height: 34px; border-top: 1px solid #F0EDFA; font-weight: 700; font-size: 12.5px; }
.lista-titulo + .lf-linha { border-top: 0; }
.lf-linha > svg { width: 18px; height: 18px; color: var(--espaco); stroke-width: 2; }
.lf-linha > span { flex: 1; }
.st { display: flex; align-items: center; gap: 4px; color: var(--texto-2); font-weight: 800; font-size: 11px; transition: color .3s; }
.st svg { width: 14px; height: 14px; stroke-width: 2.2; }
.st-feito { color: #1E8A55; }
.st-espera { color: var(--orbita-texto); }
.st.troca { animation: troca .4s var(--suave); }
.aviso-pai { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 9; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .97); color: var(--texto); font-size: 12px; line-height: 1.3; box-shadow: 0 10px 30px rgba(10, 6, 40, .3); transform: translateY(-130%); transition: transform .5s var(--mola); }
.aviso-pai b { font-family: var(--titulo); font-size: 13.5px; display: block; }
.aviso-pai .ap-logo { width: 30px; height: 31px; }
.aviso-pai.on { transform: translateY(0); }
.festa { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; background: rgba(27, 20, 70, .5); opacity: 0; pointer-events: none; transition: opacity .3s; }
.festa-cartao { width: 220px; padding: 20px 16px; border-radius: 22px; background: #fff; text-align: center; transform: scale(.6); transition: transform .45s var(--mola); }
.festa-cartao svg { width: 56px; height: 56px; margin: 0 auto 6px; }
.festa-cartao b { display: block; font-family: var(--titulo); font-weight: 800; font-size: 21px; color: var(--texto); }
.festa-cartao span { display: block; margin-top: 4px; color: var(--texto-2); font-weight: 700; font-size: 12px; }
.festa.on { opacity: 1; }
.festa.on .festa-cartao { transform: scale(1); }
.faiscas { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.faisca { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.faisca svg { width: 100%; height: 100%; }

/* celular dos pais */
.tela-pais { background: var(--fundo-pais); }
.faixa-pais { height: 100px; }
.fp-data { position: absolute; left: 18px; top: 46px; color: var(--lavanda-clara); font-weight: 700; font-size: 12px; }
.fp-titulo { position: absolute; left: 18px; top: 61px; color: #fff; font-family: var(--titulo); font-weight: 800; font-size: 23px; }
.fp-aprovar { top: 112px; height: 140px; padding: 12px; transition: box-shadow .4s; }
.fp-aprovar.brilha { box-shadow: 0 0 0 3px var(--orbita), 0 10px 30px rgba(46, 196, 182, .3); }
.fp-linha-t { display: flex; align-items: center; justify-content: space-between; }
.fp-linha-t b, .fp-humor > b, .fp-mesada > b { font-family: var(--titulo); font-weight: 800; font-size: 14px; }
.fp-linha-t small { color: var(--texto-2); font-weight: 800; font-size: 11px; }
.fp-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--foguete); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: transform .3s var(--mola), opacity .3s; }
.fp-badge.zero { transform: scale(0); opacity: 0; }
.fp-item { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.fp-tile { width: 38px; height: 38px; border-radius: 10px; background: var(--fundo-filho); display: flex; align-items: center; justify-content: center; }
.fp-tile svg { width: 22px; height: 22px; color: var(--espaco); stroke-width: 2; }
.fp-item b { display: block; font-size: 13px; font-weight: 800; }
.fp-item small { display: block; color: var(--texto-2); font-weight: 700; font-size: 10.5px; }
.fp-botoes { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; transition: opacity .3s, transform .3s; }
.fp-b { flex: 1; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--titulo); font-weight: 700; font-size: 13.5px; transition: transform .15s var(--mola); }
.fp-refazer { background: var(--fundo-filho); color: var(--texto-2); }
.fp-ok { background: var(--espaco); color: #fff; }
.fp-ok svg { width: 15px; height: 15px; stroke-width: 3; }
.fp-ok.aperta { transform: scale(.93); }
.fp-aprovado { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 38px; border-radius: 11px; background: #E6F7EE; color: #1E8A55; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 12.5px; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .4s var(--mola); }
.fp-aprovado svg { width: 18px; height: 18px; }
.fp-aprovar.aprovado .fp-botoes { opacity: 0; transform: scale(.95); }
.fp-aprovar.aprovado .fp-aprovado { opacity: 1; transform: none; }
.fp-hoje { top: 264px; padding: 12px; }
.fp-barra { display: block; margin-top: 10px; height: 8px; border-radius: 4px; background: #EFECF9; overflow: hidden; }
.fp-barra i { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--orbita); transition: width .8s var(--suave); }
.fp-humor { top: 340px; padding: 12px; }
.fp-humor-l { display: flex; align-items: center; gap: 9px; margin-top: 6px; font-weight: 800; font-size: 13px; }
.fp-humor-l svg { width: 30px; height: 30px; }
.fp-humor-l small { display: block; color: var(--texto-2); font-weight: 700; font-size: 10.5px; }
.fp-mesada { top: 432px; padding: 12px; }
.fp-valor { display: block; margin-top: 2px; color: var(--espaco); font-family: var(--titulo); font-weight: 800; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fp-mesada small { color: var(--texto-2); font-weight: 700; font-size: 10.5px; }

.toque { position: absolute; z-index: 5; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .35); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 0 rgba(255, 200, 61, .6); opacity: 0; pointer-events: none; }
.voo { position: absolute; z-index: 6; width: 44px; height: 44px; margin: -22px 0 0 -22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 16px rgba(255, 200, 61, .6)); }
.voo svg { width: 100%; height: 100%; }

/* ---------- 2. geladeira (cena de rolagem) ---------- */
.geladeira { position: relative; height: 360svh; }
.g-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.g-porta { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 90% at 30% 15%, #FFFFFF 0%, #F7F6FB 55%, #E9E5F5 100%); will-change: transform; overflow: clip; }
.g-brilho { position: absolute; left: 22%; top: -20%; width: 14%; height: 140%; transform: rotate(18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
.g-junta { position: absolute; left: 0; right: 0; top: 64px; height: 4px; background: var(--borda); }
.g-pegador { position: absolute; right: 2.2vw; top: 20%; width: 22px; height: 52%; border-radius: 11px; background: linear-gradient(90deg, #D9D4EE, #F4F1FF 45%, #CFC8EA); box-shadow: 0 10px 24px rgba(42, 31, 110, .12); }
.g-ceu { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 60% 30%, rgba(140, 123, 255, .25), transparent 60%); pointer-events: none; }

.g-textos { position: absolute; left: max(24px, calc((100vw - 1200px) / 2 + 24px)); top: 22%; width: min(44vw, 560px); z-index: 2; }
.g-txt { position: absolute; left: 0; top: 0; width: 100%; font-family: var(--titulo); font-weight: 800; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -.015em; color: var(--texto); will-change: transform, opacity; }
.g-l { display: block; }
.g-b { color: var(--alerta); }
.g-c em { color: var(--nave); }
.js .g-b, .js .g-c, .js .g-a3 { opacity: 0; }

.g-papel-pos { position: absolute; right: max(40px, calc((100vw - 1200px) / 2 + 24px)); top: 50%; width: min(50vw, 700px); aspect-ratio: 860 / 640; transform: translateY(-46%); z-index: 3; }
.g-papel { position: absolute; inset: 0; container-type: inline-size; transform-origin: 7% 8%; transform: rotate(-2.5deg); will-change: transform; }
.g-folha { position: absolute; inset: 0; border-radius: 6px; background: #fff; box-shadow: 0 18px 40px rgba(42, 31, 110, .16), 0 2px 6px rgba(42, 31, 110, .08); padding: 4.6cqw 4.6cqw 4cqw; display: flex; flex-direction: column; }
.g-cab { display: flex; align-items: center; gap: 2.4cqw; margin-left: 7cqw; }
.g-cab b { font-family: var(--titulo); font-weight: 800; font-size: 5.3cqw; color: var(--texto); letter-spacing: .01em; }
.g-estrela-contorno { width: 5cqw; height: 5cqw; }
.g-grade { flex: 1; margin-top: 1.6cqw; display: grid; grid-template-columns: 2.6fr repeat(7, 1fr); grid-template-rows: .55fr repeat(4, 1fr); border-top: 2px solid #D9D4EE; border-left: 2px solid #D9D4EE; }
.g-grade > * { border-right: 2px solid #D9D4EE; border-bottom: 2px solid #D9D4EE; display: flex; align-items: center; justify-content: center; position: relative; }
.g-dia { font-weight: 800; font-size: 3cqw; color: var(--texto-2); }
.g-rotulo { justify-content: flex-start; gap: 1.6cqw; padding-left: 1.4cqw; font-weight: 700; font-size: 2.9cqw; color: var(--texto); }
.g-rotulo svg { width: 4.6cqw; height: 4.6cqw; color: var(--espaco); stroke-width: 2; }
.g-ad { width: 6.6cqw; height: 6.6cqw; transform: scale(0); will-change: transform; }
.g-ima { position: absolute; z-index: 2; width: 6.4cqw; height: 6.4cqw; margin: -3.2cqw 0 0 -3.2cqw; border-radius: 50%; box-shadow: inset -.6cqw -.8cqw 0 rgba(0, 0, 0, .14), 0 .8cqw 1.6cqw rgba(42, 31, 110, .25); will-change: transform; }
.g-ima::after { content: ''; position: absolute; left: 22%; top: 18%; width: 30%; height: 24%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.g-ima:nth-of-type(1) { left: 3%; top: 4%; background: var(--foguete); }
.g-ima:nth-of-type(2) { left: 97%; top: 4%; background: var(--orbita); }
.g-ima:nth-of-type(3) { left: 3%; top: 96%; background: var(--lavanda); }
.g-ima:nth-of-type(4) { left: 97%; top: 96%; background: var(--estrela); }
.g-chama { position: absolute; left: 50%; top: 96%; width: 24%; height: 38%; margin-left: -12%; transform-origin: 50% 0; transform: scaleY(0); z-index: -1; }
.g-fumacas { position: absolute; left: -10%; right: -10%; bottom: -24%; height: 40%; pointer-events: none; }
.g-fumaca { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #E4DFFF 70%); opacity: 0; transform: scale(.2); }
.g-contagem { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.g-contagem span { grid-area: 1 / 1; font-family: var(--titulo); font-weight: 800; font-size: clamp(7rem, 18vw, 15rem); line-height: 1; color: var(--foguete); -webkit-text-stroke: 6px #fff; paint-order: stroke fill; text-shadow: 0 20px 60px rgba(255, 107, 91, .35); opacity: 0; transform: scale(.4); }
.g-progresso { position: absolute; left: 50%; bottom: 22px; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: rgba(42, 31, 110, .12); overflow: hidden; z-index: 5; }
.g-progresso i { display: block; height: 100%; width: 100%; background: var(--espaco); transform-origin: left; transform: scaleX(0); }

/* ---------- seções ---------- */
.secao { position: relative; padding: clamp(88px, 12vw, 150px) 0; }
.claro { background: var(--fundo-filho); }
.branco { background: #fff; }
.amarelo { background: var(--estrela); color: var(--espaco-escuro); }
.secao-cab { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); }
.sobretitulo { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(42, 31, 110, .08); color: var(--nave); }
.escuro .sobretitulo { background: rgba(255, 255, 255, .1); color: var(--estrela); }
.amarelo .sobretitulo { background: rgba(36, 24, 94, .1); color: var(--espaco-escuro); }
.titulo { font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; }
.lead { margin-top: 18px; font-size: clamp(1.06rem, 1.4vw, 1.22rem); font-weight: 700; line-height: 1.55; color: var(--texto-2); }
.escuro .lead { color: var(--lavanda-clara); }
.amarelo .lead { color: #3A2C7A; }
.centro .lead { margin-left: auto; margin-right: auto; max-width: 36em; }
.sub-titulo { margin: clamp(72px, 9vw, 120px) 0 28px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; text-align: center; }

/* revelações ao rolar */
.js [data-revela] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--suave), transform 1s var(--suave); transition-delay: var(--d, 0s); }
.js [data-revela].visivel { opacity: 1; transform: none; }
.js [data-palavras] .pw { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(4deg); filter: blur(6px); transition: opacity .7s var(--suave), transform .9s var(--mola), filter .7s var(--suave); transition-delay: calc(var(--i) * 55ms); }
.js [data-palavras].visivel .pw { opacity: 1; transform: none; filter: none; }

/* ---------- 3. como funciona ---------- */
.como { padding-top: clamp(40px, 6vw, 80px); }
.como-grade { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: passo; }
.passo button { width: 100%; display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 18px 20px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(207, 199, 255, .12); cursor: pointer; transition: background-color .35s, box-shadow .35s, transform .35s var(--suave); }
.passo button:hover { background: rgba(255, 255, 255, .08); }
.passo-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titulo); font-weight: 800; font-size: 1.2rem; background: rgba(255, 255, 255, .1); color: var(--lavanda-clara); transition: background-color .35s, color .35s, transform .4s var(--mola); }
.passo b { display: block; font-family: var(--titulo); font-weight: 800; font-size: 1.25rem; color: #fff; margin-bottom: 2px; }
.passo small { display: block; color: var(--lavanda-clara); font-weight: 600; font-size: .98rem; line-height: 1.5; }
.passo.ativo button { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--estrela); transform: translateX(6px); }
.passo.ativo .passo-n { background: var(--estrela); color: var(--espaco-escuro); transform: scale(1.08); }
.dupla { position: relative; display: flex; justify-content: center; gap: 28px; }
.fone-crianca { --s: .86; z-index: 2; }
.fone-pais { --s: .86; margin-top: 56px; }

/* ---------- 4. mural digital e recursos ---------- */
.mural-dig { color: var(--texto); }
.mural-dig-grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 1.04rem; color: var(--texto-2); }
.checks li b { color: var(--texto); font-weight: 800; }
.checks svg { width: 28px; height: 28px; flex: none; margin-top: -1px; }
.mural-dig-visual { position: relative; padding: 46px 30px; border-radius: 32px; overflow: hidden; display: flex; justify-content: center; background: radial-gradient(ellipse 80% 90% at 30% 15%, #FFFFFF 0%, #F7F6FB 55%, #E2DDF3 100%); box-shadow: inset 0 0 0 1px #E4E0F5, 0 30px 60px rgba(42, 31, 110, .12); }
.porta-mini { position: absolute; inset: 0; pointer-events: none; }
.tablet { --s: .9; position: relative; width: calc(640px * var(--s)); height: calc(420px * var(--s)); }
.tablet-tela { position: absolute; left: 0; top: 0; width: 640px; height: 420px; padding: 18px 18px 16px; border-radius: 30px; background: var(--fundo-filho); box-shadow: 0 0 0 14px #1B1446, 0 0 0 16px #3B2A8C, 0 40px 70px rgba(42, 31, 110, .35); transform: scale(var(--s)); transform-origin: 0 0; font-family: var(--corpo); line-height: 1.2; color: var(--texto); }
.tb-cab { display: flex; align-items: center; gap: 10px; height: 44px; }
.tb-avatar { width: 38px; height: 40px; }
.tb-cab small { display: block; color: var(--texto-2); font-weight: 700; font-size: 11px; }
.tb-cab b { font-family: var(--titulo); font-weight: 800; font-size: 19px; }
.tb-estrelas { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 10px; border-radius: 99px; background: var(--espaco); color: #fff; }
.tb-estrelas svg { width: 20px; height: 20px; }
.tb-estrelas b { font-size: 18px; line-height: 1; padding-top: 2px; font-variant-numeric: tabular-nums; min-width: 22px; }
.tb-grade { margin-top: 10px; height: 326px; display: grid; grid-template-columns: 148px repeat(7, 1fr); grid-template-rows: 26px repeat(5, 1fr); gap: 5px; }
.tb-dia { display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; font-size: 11px; color: var(--texto-2); }
.tb-dia.hoje { background: var(--espaco); color: #fff; }
.tb-rot { display: flex; align-items: center; gap: 7px; padding: 0 8px; border-radius: 11px; background: #fff; font-weight: 800; font-size: 11.5px; line-height: 1.15; }
.tb-rot svg { width: 18px; height: 18px; color: var(--espaco); stroke-width: 2; }
.tb-rot.cmp { background: #FFE9E6; }
.tb-rot.cmp svg { color: var(--alerta); }
.tb-cel { border-radius: 11px; background: #fff; display: grid; place-items: center; }
.tb-cel.hoje { background: #FFF6DA; box-shadow: inset 0 0 0 1.5px var(--estrela); }
.tb-cel i { grid-area: 1 / 1; width: 16px; height: 16px; border-radius: 50%; border: 2px dashed #D9D4EE; transition: opacity .2s; }
.tb-cel.on i { opacity: 0; }
.tb-cel svg { grid-area: 1 / 1; width: 30px; height: 30px; transform: scale(0); transition: transform .45s var(--mola); }
.tb-cel.on svg { transform: scale(1); }
.ima-mini { position: absolute; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .14), 0 4px 8px rgba(42, 31, 110, .25); z-index: 2; }
.ima-mini.ima-1 { left: 7%; top: 24px; background: var(--foguete); }
.ima-mini.ima-2 { right: 7%; top: 24px; background: var(--orbita); }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bloco { padding: 20px 20px 24px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px #E9E5F7, 0 12px 30px rgba(42, 31, 110, .06); transition: transform .4s var(--suave), box-shadow .4s; }
.bloco:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #DCD6F2, 0 20px 40px rgba(42, 31, 110, .1); }
.bloco-arte { height: 132px; margin-bottom: 18px; border-radius: 18px; background: var(--fundo-filho); display: grid; place-items: center; overflow: hidden; }
.bloco h4 { font-size: 1.32rem; font-weight: 800; margin-bottom: 4px; }
.bloco p { color: var(--texto-2); font-weight: 600; font-size: .98rem; line-height: 1.5; }
.anima-pausa { animation-play-state: paused !important; }

.relogio-dia { position: relative; width: 108px; height: 108px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--borda); }
.rd { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--fundo-filho); color: var(--texto-2); animation: rd-acende 8s infinite; }
.rd svg { width: 20px; height: 20px; stroke-width: 2; }
.rd-1 { left: 50%; top: 4%; }
.rd-2 { left: 96%; top: 50%; animation-delay: 2s; }
.rd-3 { left: 50%; top: 96%; animation-delay: 4s; }
.rd-4 { left: 4%; top: 50%; animation-delay: 6s; }
@keyframes rd-acende { 0%, 24% { background: var(--espaco); color: var(--estrela); transform: scale(1.12); } 26%, 100% { background: var(--fundo-filho); color: var(--texto-2); transform: none; } }
.rd-ponteiro { position: absolute; left: 50%; top: 50%; width: 4px; height: 30px; margin-left: -2px; margin-top: -30px; border-radius: 2px; background: var(--foguete); transform-origin: 50% 100%; animation: ponteiro 8s steps(4, jump-none) infinite; }
.rd-ponteiro::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--espaco); }
@keyframes ponteiro { from { transform: rotate(0); } to { transform: rotate(270deg); } }
.humores { display: flex; gap: 8px; }
.humores svg { width: 38px; height: 38px; animation: humor 6s infinite; opacity: .5; }
.humores svg:nth-child(2) { animation-delay: 1.2s; }
.humores svg:nth-child(3) { animation-delay: 2.4s; }
.humores svg:nth-child(4) { animation-delay: 3.6s; }
.humores svg:nth-child(5) { animation-delay: 4.8s; }
@keyframes humor { 0%, 18% { transform: translateY(-8px) scale(1.25); opacity: 1; } 22%, 100% { transform: none; opacity: .5; } }
.avaliar { display: flex; gap: 10px; }
.avaliar span { width: 74px; padding: 8px 4px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: avalia 4.5s infinite; }
.avaliar span:nth-child(2) { animation-delay: .25s; }
.avaliar span:nth-child(3) { animation-delay: .5s; }
.avaliar svg { width: 32px; height: 32px; }
.avaliar small { font-size: 10.5px; font-weight: 800; color: var(--texto-2); }
.avaliar em { font-size: 12px; font-weight: 800; color: #1E8A55; }
.avaliar em.neg { color: var(--alerta); }
@keyframes avalia { 0%, 8% { transform: scale(.6); opacity: 0; } 18%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.sinc { position: relative; width: 170px; height: 80px; display: flex; justify-content: space-between; align-items: center; }
.sinc-f { width: 42px; height: 76px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 3px var(--espaco); position: relative; }
.sinc-f::before { content: ''; position: absolute; left: 7px; right: 7px; top: 8px; height: 12px; border-radius: 3px; background: var(--espaco); }
.sinc-f::after { content: ''; position: absolute; left: 7px; right: 7px; top: 26px; height: 22px; border-radius: 5px; background: var(--fundo-filho); animation: sinc-pisca 3s infinite; }
.sinc-f:last-child::after { animation-delay: 1.5s; }
@keyframes sinc-pisca { 0%, 30% { background: var(--fundo-filho); } 40%, 70% { background: var(--orbita); } 100% { background: var(--fundo-filho); } }
.sinc-onda { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--estrela); box-shadow: 0 0 14px var(--estrela); animation: sinc-vai 3s ease-in-out infinite; }
@keyframes sinc-vai { 0% { transform: translateX(-46px) scale(.4); opacity: 0; } 15% { opacity: 1; } 45% { transform: translateX(46px) scale(1); opacity: 1; } 50% { opacity: 0; } 51% { transform: translateX(46px) scale(.4); opacity: 0; } 65% { opacity: 1; } 95% { transform: translateX(-46px) scale(1); opacity: 1; } 100% { opacity: 0; } }
.pin { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pin svg { width: 44px; height: 44px; color: var(--espaco); stroke-width: 2; animation: pin-abre 4s infinite; }
@keyframes pin-abre { 0%, 70% { transform: none; color: var(--espaco); } 78%, 92% { transform: translateY(-3px) rotate(-8deg); color: #1E8A55; } 100% { transform: none; } }
.pin-pontos { display: flex; gap: 10px; }
.pin-pontos i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--lavanda); animation: pin-ponto 4s infinite; }
.pin-pontos i:nth-child(2) { animation-delay: .35s; }
.pin-pontos i:nth-child(3) { animation-delay: .7s; }
.pin-pontos i:nth-child(4) { animation-delay: 1.05s; }
@keyframes pin-ponto { 0%, 10% { background: transparent; } 15%, 90% { background: var(--espaco); box-shadow: inset 0 0 0 2px var(--espaco); } 100% { background: transparent; } }
.seq { display: flex; align-items: center; gap: 14px; }
.seq-fogo { width: 46px; height: 46px; color: var(--foguete); stroke-width: 2; animation: fogo 5s infinite; }
@keyframes fogo { 0%, 60% { transform: scale(.85); filter: none; } 70%, 92% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255, 107, 91, .6)); } 100% { transform: scale(.85); } }
.seq-dias { display: flex; gap: 7px; }
.seq-dias i { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--borda); animation: seq-dia 5s infinite; }
.seq-dias i:nth-child(2) { animation-delay: .5s; }
.seq-dias i:nth-child(3) { animation-delay: 1s; }
.seq-dias i:nth-child(4) { animation-delay: 1.5s; }
.seq-dias i:nth-child(5) { animation-delay: 2s; }
@keyframes seq-dia { 0%, 8% { background: #fff; transform: scale(.8); } 14%, 92% { background: var(--estrela); box-shadow: inset 0 0 0 2px var(--estrela-escura); transform: none; } 100% { background: #fff; } }

/* ---------- 5. mesada ---------- */
.mesada-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.nota-dinheiro { margin-top: 26px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .45); font-weight: 600; font-size: .98rem; color: #3A2C7A; }
.nota-dinheiro b { color: var(--espaco-escuro); }
.nota-dinheiro svg { width: 22px; height: 22px; flex: none; stroke-width: 2.2; margin-top: 2px; }
.mesada-visual { position: relative; display: grid; gap: 26px; justify-items: center; }
.extrato { width: min(100%, 420px); padding: 22px 24px; border-radius: 26px; background: var(--espaco); color: #fff; box-shadow: 0 30px 60px rgba(42, 31, 110, .35); }
.extrato small { color: var(--lavanda-clara); font-weight: 800; font-size: .88rem; }
.extrato-total { display: block; font-family: var(--titulo); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1.05; color: var(--estrela); font-variant-numeric: tabular-nums; }
.extrato ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.extrato li { display: flex; justify-content: space-between; gap: 12px; color: var(--lavanda-clara); font-weight: 700; font-size: .95rem; }
.extrato li span:last-child { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.extrato li.neg span:last-child { color: #FFA69C; }
.js .extrato li { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--suave), transform .5s var(--suave); }
.js .extrato li.on { opacity: 1; transform: none; }
.potes { position: relative; display: flex; gap: clamp(16px, 3vw, 28px); }
.pote { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pote-vidro { position: relative; width: 104px; height: 136px; margin-bottom: 10px; border-radius: 22px 22px 28px 28px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 4px var(--espaco-escuro), inset 10px 0 0 4px rgba(255, 255, 255, .35); overflow: hidden; }
.pote-tampa { position: absolute; left: 12px; right: 12px; top: 0; height: 14px; border-radius: 0 0 8px 8px; background: var(--espaco-escuro); }
.pote-liquido { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 0; border-radius: 0 0 24px 24px; background: var(--cor); transition: height 1.6s var(--suave); }
.onda { position: absolute; left: 0; top: -9px; width: 200%; height: 10px; background: radial-gradient(circle at 10px 10px, var(--cor) 9px, transparent 10px) repeat-x; background-size: 20px 20px; animation: onda 2.4s linear infinite; }
@keyframes onda { to { transform: translateX(-50%); } }
.pote-gastar { --cor: var(--foguete); }
.pote-guardar { --cor: var(--orbita); }
.pote-sonho { --cor: #FFB020; }
.pote b { font-family: var(--titulo); font-weight: 800; font-size: 1.15rem; }
.pote-v { font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.pote em { margin-top: 2px; padding: 1px 9px; border-radius: 99px; background: var(--espaco-escuro); color: #fff; font-weight: 800; font-size: .76rem; }
.moedas { position: absolute; inset: -260px 0 0; pointer-events: none; }
.moeda { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE7A3, var(--estrela) 55%, var(--estrela-escura)); box-shadow: inset 0 0 0 2px rgba(36, 24, 94, .35); }

.sim { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 32px; background: #fff; overflow: hidden; box-shadow: 0 30px 70px rgba(42, 31, 110, .2); color: var(--texto); }
.sim-ctrl { padding: clamp(24px, 4vw, 44px); }
.sim-t { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 22px; }
.sim-sonhos { border: 0; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sim-sonhos legend { padding: 0; margin-bottom: 10px; font-weight: 800; font-size: .98rem; color: var(--texto-2); }
.chip-op { position: relative; cursor: pointer; }
.chip-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-op > span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--fundo-filho); box-shadow: inset 0 0 0 2px transparent; font-weight: 800; font-size: .95rem; line-height: 1.1; transition: background-color .2s, color .2s, box-shadow .2s, transform .3s var(--mola); }
.chip-op svg { width: 26px; height: 26px; color: var(--espaco); stroke-width: 2; }
.chip-op small { display: block; font-size: .78rem; color: var(--texto-2); font-weight: 700; }
.chip-op > span > small { margin-left: 2px; }
.chip-op:hover > span { box-shadow: inset 0 0 0 2px var(--lavanda-clara); }
.chip-op input:checked + span { background: var(--espaco); color: #fff; transform: scale(1.03); }
.chip-op input:checked + span svg { color: var(--estrela); }
.chip-op input:checked + span small { color: var(--lavanda-clara); }
.chip-op input:focus-visible + span { outline: 3px solid var(--estrela); outline-offset: 2px; }
.faixa-ctrl { display: block; margin-top: 18px; }
.fc-rotulo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: .98rem; color: var(--texto-2); }
.fc-rotulo output { font-family: var(--titulo); font-size: 1.4rem; color: var(--espaco); }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin-top: 4px; background: transparent; cursor: pointer; --v: 50%; }
input[type='range']::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--espaco) var(--v), var(--borda) var(--v)); }
input[type='range']::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--espaco) var(--v), var(--borda) var(--v)); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; border-radius: 50%; background: var(--estrela); border: 4px solid #fff; box-shadow: 0 4px 12px rgba(42, 31, 110, .35); transition: transform .2s var(--mola); }
input[type='range']::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--estrela); border: 4px solid #fff; box-shadow: 0 4px 12px rgba(42, 31, 110, .35); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type='range']:focus-visible { outline: none; }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--espaco), 0 4px 12px rgba(42, 31, 110, .35); }
.sim-cartao { padding: clamp(24px, 4vw, 44px); background: var(--fundo-filho); display: flex; flex-direction: column; justify-content: center; }
.sonho-cab { display: flex; align-items: center; gap: 14px; }
.sonho-icone { width: 64px; height: 64px; border-radius: 50%; background: var(--estrela); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(255, 200, 61, .45); }
.sonho-icone svg { width: 36px; height: 36px; color: var(--espaco-escuro); stroke-width: 2; }
.sonho-cab small { display: block; color: var(--texto-2); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.sonho-cab b { font-family: var(--titulo); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; }
.sonho-trilha { position: relative; margin: 34px 0 10px; height: 22px; border-radius: 11px; background: #E4E0F5; }
.sonho-barra { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #FFB020, var(--estrela)); }
.sonho-foguete { position: absolute; top: 50%; left: var(--p, 0%); width: 46px; height: 46px; transform: translate(-50%, -50%) rotate(90deg); filter: drop-shadow(0 4px 8px rgba(42, 31, 110, .3)); }
.sonho-valores { display: flex; justify-content: space-between; font-weight: 800; font-size: .95rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.sonho-msg { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: #E2F7F4; color: var(--orbita-texto); font-weight: 700; font-size: 1.04rem; line-height: 1.45; }
.sonho-msg > svg { width: 40px; height: 40px; flex: none; }
.sonho-msg b { color: var(--texto); }
.sonho-msg strong { color: var(--espaco); font-family: var(--titulo); font-size: 1.2em; font-weight: 800; white-space: nowrap; display: inline-block; }
.sonho-msg strong.pop { animation: pula .6s var(--mola); }
.sonho-msg small { display: block; margin-top: 4px; color: var(--texto-2); font-size: .88rem; }

/* ---------- 6. astronauta ---------- */
.astro-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.astro-palco { position: relative; display: grid; place-items: center; min-height: 460px; }
.astro-halo { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 123, 255, .45), rgba(140, 123, 255, 0)); }
.astro-grande { position: relative; width: min(340px, 72vw); height: auto; aspect-ratio: 120 / 124; animation: flutua-astro 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(8, 4, 32, .5)); }
.astro-grande.troca { animation: flutua-astro 6s ease-in-out infinite, troca-astro .45s var(--mola); }
@keyframes flutua-astro { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@keyframes troca-astro { 0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }
.astro-sombra { position: absolute; bottom: 10px; width: 200px; height: 22px; border-radius: 50%; background: rgba(8, 4, 32, .45); filter: blur(10px); animation: sombra 6s ease-in-out infinite; }
@keyframes sombra { 50% { transform: scale(.82); opacity: .6; } }
.astro-ctrl { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }
.ac-linha { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; width: 100%; }
.ac-rotulo { color: var(--lavanda-clara); font-weight: 800; font-size: .92rem; }
.ac-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.op { min-width: 36px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .08); color: var(--nevoa); box-shadow: inset 0 0 0 1.5px rgba(207, 199, 255, .25); font-weight: 800; font-size: .86rem; transition: transform .25s var(--mola), background-color .2s, box-shadow .2s, color .2s; }
.op:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(207, 199, 255, .6); }
.op[aria-pressed='true'] { background: var(--estrela); color: var(--espaco-escuro); box-shadow: none; }
.op.cor { width: 36px; padding: 0; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.op.cor[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--abismo), 0 0 0 6px var(--estrela); transform: scale(1.06); }

/* ---------- 7. segurança ---------- */
.selos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.selo { padding: 26px; border-radius: 26px; background: var(--fundo-pais); box-shadow: inset 0 0 0 1px #EEEBF8; transition: transform .4s var(--suave), box-shadow .4s; }
.selo:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #E0DAF4, 0 20px 40px rgba(42, 31, 110, .08); }
.selo-ic { width: 58px; height: 58px; margin-bottom: 18px; border-radius: 18px; display: grid; place-items: center; }
.selo-ic svg { width: 30px; height: 30px; stroke-width: 2.1; }
.selo-ic.c-1 { background: #FFE9E6; color: var(--alerta); }
.selo-ic.c-2 { background: #E7E3FF; color: var(--nave); }
.selo-ic.c-3 { background: #E2F7F4; color: var(--orbita-texto); }
.selo-ic.c-4 { background: #FFF3D6; color: #9A6A00; }
.selo-ic.c-5 { background: #E6F7EE; color: #1E8A55; }
.selo-ic.c-6 { background: #FFE9E6; color: var(--alerta); }
.selo h4 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.selo p { color: var(--texto-2); font-weight: 600; font-size: .98rem; line-height: 1.5; }
.nota-site { margin-top: 32px; text-align: center; color: var(--texto-2); font-weight: 700; font-size: .95rem; }

/* ---------- 8. filme ---------- */
.filme-quadro { position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #120C38 url('filme/capa-horizontal.jpg') center / cover; box-shadow: 0 0 0 1px rgba(207, 199, 255, .16), 0 40px 100px rgba(8, 4, 32, .7), 0 0 120px rgba(140, 123, 255, .25); }
.filme-quadro.vertical { aspect-ratio: 9 / 16; max-width: min(420px, 100%); background-image: url('filme/capa-vertical.jpg'); }
.filme-video { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.filme-play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 16px; padding: clamp(16px, 3vw, 32px); border: 0; cursor: pointer; background: linear-gradient(180deg, rgba(21, 14, 61, 0) 55%, rgba(21, 14, 61, .7)); color: #fff; text-align: left; transition: opacity .4s; }
.filme-play-ic { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--estrela); color: var(--espaco-escuro); box-shadow: 0 0 0 0 rgba(255, 200, 61, .5), 0 20px 40px rgba(8, 4, 32, .5); animation: play-pulso 2.4s infinite; transition: transform .3s var(--mola); }
.filme-play-ic svg { width: 32px; height: 32px; margin-left: 5px; }
.filme-play:hover .filme-play-ic { transform: scale(1.08); }
@keyframes play-pulso { 70% { box-shadow: 0 0 0 26px rgba(255, 200, 61, 0), 0 20px 40px rgba(8, 4, 32, .5); } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0), 0 20px 40px rgba(8, 4, 32, .5); } }
.filme-play-txt { align-self: center; font-family: var(--titulo); font-weight: 800; font-size: 1.25rem; text-shadow: 0 2px 10px rgba(8, 4, 32, .6); }
.filme-play-txt small { margin-left: 6px; padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .18); font-size: .85rem; }
.filme-quadro.tocando .filme-play { opacity: 0; pointer-events: none; }

/* ---------- 9. mural grátis ---------- */
.mural-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mural-visual { position: relative; aspect-ratio: 1 / .95; }
.folha-a4 { position: absolute; width: 86%; aspect-ratio: 297 / 210; border-radius: 10px; background: #fff; box-shadow: 0 30px 60px rgba(120, 80, 0, .25), 0 2px 6px rgba(42, 31, 110, .1); container-type: inline-size; padding: 4cqw; display: flex; flex-direction: column; transition: transform 1.2s var(--suave); }
.folha-1 { left: 0; top: 14%; transform: rotate(-5deg); z-index: 2; }
.folha-2 { right: 0; top: 2%; transform: rotate(6deg); overflow: hidden; }
.mural-visual.visivel .folha-1 { transform: rotate(-3deg) translateY(-6px); }
.mural-visual.visivel .folha-2 { transform: rotate(8deg) translate(10px, 4px); }
.fa4-cab { display: flex; align-items: center; gap: 2.4cqw; }
.fa4-cab svg { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--espaco); padding: 1cqw; }
.fa4-cab b { font-family: var(--titulo); font-weight: 800; font-size: 4.4cqw; color: var(--espaco-escuro); white-space: nowrap; }
.fa4-cab i { flex: 1; height: .5cqw; background: var(--espaco); margin-top: 3cqw; }
.fa4-grade { flex: 1; margin-top: 2.4cqw; display: grid; grid-template-columns: 2.6fr repeat(7, 1fr); grid-auto-rows: 1fr; border: .3cqw solid #E4E0F5; }
.fa4-grade span { border: .2cqw solid #E4E0F5; display: grid; place-items: center; font-size: 1.9cqw; font-weight: 800; }
.fa4-grade .fa4-h { background: var(--espaco); color: #fff; }
.fa4-grade .fa4-h1 { background: var(--orbita); color: var(--espaco-escuro); justify-items: start; padding-left: 1.2cqw; }
.fa4-grade .fa4-cmp { grid-column: 1 / -1; background: var(--foguete); color: var(--espaco-escuro); justify-items: start; padding-left: 1.2cqw; }
.fa4-grade .fa4-l { justify-items: start; padding-left: 1.2cqw; color: var(--texto); font-weight: 700; font-size: 1.7cqw; }
.fa4-grade i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; border: .3cqw dashed #CFC7FF; grid-area: 1 / 1; }
.fa4-grade svg { grid-area: 1 / 1; width: 4cqw; height: 4cqw; transform: scale(0) rotate(-30deg); transition: transform .5s var(--mola); transition-delay: var(--d, 0s); }
.mural-visual.visivel .fa4-grade svg { transform: none; }
.fa4-rodape { display: flex; gap: 2cqw; margin-top: 2.4cqw; }
.fa4-rodape span { flex: 1; padding: 1.4cqw 2cqw 3cqw; border-radius: 1.6cqw; box-shadow: inset 0 0 0 .4cqw var(--estrela); font-weight: 800; font-size: 1.6cqw; color: var(--espaco-escuro); text-transform: uppercase; }
.fa4-t { display: flex; align-items: center; gap: 1.4cqw; font-family: var(--titulo); font-weight: 800; font-size: 4cqw; color: var(--espaco-escuro); }
.fa4-t svg { width: 4cqw; height: 4cqw; stroke-width: 2.2; }
.fa4-cartoes { margin-top: 2.4cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.fa4-cartoes span { padding: 1.4cqw 1.6cqw; border-radius: 1.2cqw; box-shadow: inset 0 0 0 .3cqw #CFC7FF; border-left: .9cqw solid var(--orbita); font-weight: 800; font-size: 1.8cqw; color: var(--espaco-escuro); }
.fa4-cartoes .cmp { border-left-color: var(--foguete); }
.fa4-adesivos { margin-top: 2.4cqw; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1cqw; }
.fa4-adesivos svg { width: 100%; height: auto; aspect-ratio: 1; }
.mural-gratis-selo { position: absolute; z-index: 3; right: 4%; bottom: 6%; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; background: var(--espaco); color: var(--estrela); font-family: var(--titulo); font-weight: 800; font-size: 1.6rem; transform: rotate(-12deg); box-shadow: 0 14px 30px rgba(42, 31, 110, .35); animation: carimbo 5s ease-in-out infinite; }
.mural-gratis-selo::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed rgba(255, 200, 61, .6); animation: gira 20s linear infinite; }
@keyframes carimbo { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.05); } }
.checks-escuro li { color: #3A2C7A; }
.checks-escuro li span { color: var(--espaco-escuro); font-weight: 700; }
.checks-escuro svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--espaco); color: var(--estrela); stroke-width: 3.2; }

/* formulários da lista */
.cartao-form { margin-top: 30px; padding: clamp(20px, 3vw, 28px); border-radius: 26px; background: #fff; color: var(--texto); box-shadow: 0 30px 60px rgba(120, 80, 0, .2); }
.campos { display: grid; grid-template-columns: 1fr 104px; gap: 12px; }
.campo-grupo { display: block; min-width: 0; }
.campo-cheio { grid-column: 1 / -1; }
.campo-rotulo { display: block; margin-bottom: 6px; font-weight: 800; font-size: .95rem; }
.campo-rotulo small { font-weight: 600; opacity: .7; }
.campo-grupo .campo { width: 100%; }
select.campo { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; }
.campo-uf { position: relative; }
.campo-uf::after { content: ''; position: absolute; right: 16px; bottom: 25px; width: 8px; height: 8px; border: solid var(--texto-2); border-width: 0 3px 3px 0; transform: rotate(45deg); pointer-events: none; }
.cartao-form-escuro .campo-uf::after { border-color: var(--lavanda-clara); }
.cartao-form-escuro select.campo option { color: #1B1446; background: #FFFFFF; }
.aceite[hidden] { display: none; }
.btn-enviar { width: 100%; margin-top: 18px; }
.campo { flex: 1; min-width: 0; height: 58px; padding: 0 18px; border-radius: 16px; border: 2px solid var(--borda); background: var(--fundo-pais); color: var(--texto); font: 700 1.05rem var(--corpo); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.campo::placeholder { color: #9A93BE; font-weight: 600; }
.campo:focus { outline: none; border-color: var(--espaco); background: #fff; box-shadow: 0 0 0 4px rgba(255, 200, 61, .55); }
.campo.erro { border-color: var(--nao-feito); }
.aceite { margin-top: 14px; display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: .9rem; line-height: 1.45; color: var(--texto-2); cursor: pointer; }
.aceite input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 2px solid #B9B1DE; background: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s, transform .25s var(--mola); }
.aceite input::after { content: ''; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); margin-top: -3px; transition: transform .25s var(--mola); }
.aceite input:checked { background: var(--espaco); border-color: var(--espaco); }
.aceite input:checked::after { transform: rotate(45deg) scale(1); }
.aceite input:focus-visible { outline: 3px solid var(--estrela); outline-offset: 2px; }
.aceite.erro input { border-color: var(--nao-feito); animation: treme .4s; }
.aceite a { color: var(--nave); font-weight: 800; }
@keyframes treme { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 10px; min-height: 1.4em; color: var(--alerta); font-weight: 800; font-size: .95rem; }
.form-nota { margin-top: 4px; color: var(--texto-2); font-weight: 600; font-size: .85rem; }
.form-ok { text-align: center; padding: 8px 4px; }
.form-ok:focus { outline: none; }
.form-ok[hidden] { display: none; }
.form-ok h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; margin: 12px 0 6px; }
.form-ok p { color: var(--texto-2); font-weight: 600; margin-bottom: 18px; }
.form-ok .dica-pai { margin: 18px 0 0; font-size: .9rem; }
.link-outro { display: block; margin: 14px auto 0; padding: 6px 10px; border: 0; background: none; cursor: pointer; color: inherit; opacity: .75; font-weight: 700; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
.link-outro:hover { opacity: 1; }
.ok-ic { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #E6F7EE; color: #1E8A55; animation: ok-entra .7s var(--mola); }
.ok-ic svg { width: 38px; height: 38px; stroke-width: 3; }
@keyframes ok-entra { from { transform: scale(0) rotate(-40deg); } }
.form-lista.saindo { animation: sai .3s forwards; }
@keyframes sai { to { opacity: 0; transform: scale(.96); } }

/* ---------- 10. famílias fundadoras ---------- */
.fund-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.beneficios { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.beneficios li { display: flex; align-items: center; gap: 14px; color: var(--lavanda-clara); font-weight: 600; font-size: 1.05rem; }
.beneficios b { color: #fff; font-weight: 800; }
.bn-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 200, 61, .14); color: var(--estrela); }
.bn-ic svg { width: 24px; height: 24px; stroke-width: 2.2; }
.constelacao { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; max-width: 520px; margin: 0 auto; }
.ce { aspect-ratio: 1; display: grid; place-items: center; }
.ce svg { width: 100%; height: 100%; opacity: .16; filter: grayscale(1) brightness(1.6); transform: scale(.62); transition: opacity .5s, filter .5s, transform .6s var(--mola); transition-delay: var(--d, 0s); }
.ce.acesa svg { opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 200, 61, .65)); transform: scale(1); }
.ce.sua svg { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)); transform: scale(1.6); animation: sua 1.6s var(--mola) infinite alternate; }
@keyframes sua { to { transform: scale(1.25); } }
.const-legenda { margin: 14px 0 22px; text-align: center; color: var(--lavanda-clara); font-weight: 700; font-size: .95rem; }
.const-legenda strong { color: var(--estrela); font-family: var(--titulo); font-size: 1.15em; }
.cartao-form-escuro { margin-top: 0; background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(207, 199, 255, .2), 0 30px 60px rgba(8, 4, 32, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cartao-form-escuro .campo { background: rgba(255, 255, 255, .08); border-color: rgba(207, 199, 255, .3); color: #fff; }
.cartao-form-escuro .campo::placeholder { color: #A79BE0; }
.cartao-form-escuro .campo:focus { background: rgba(255, 255, 255, .12); border-color: var(--estrela); }
.cartao-form-escuro .aceite { color: var(--lavanda-clara); }
.cartao-form-escuro .aceite a { color: var(--estrela); }
.cartao-form-escuro .aceite input { background: transparent; border-color: rgba(207, 199, 255, .6); }
.cartao-form-escuro .aceite input:checked { background: var(--estrela); border-color: var(--estrela); }
.cartao-form-escuro .aceite input::after { border-color: var(--espaco-escuro); }
.cartao-form-escuro .form-msg { color: #FFA69C; }
.cartao-form-escuro .form-ok p { color: var(--lavanda-clara); }
.cartao-form-escuro .ok-ic { background: rgba(255, 200, 61, .16); }
.cartao-form-escuro .ok-ic svg { width: 44px; height: 44px; }
.regras { margin-top: 16px; color: var(--lavanda-clara); font-size: .88rem; }
.regras summary { cursor: pointer; font-weight: 800; width: fit-content; }
.regras p { margin-top: 8px; line-height: 1.55; }

/* ---------- 11. quem fez ---------- */
.quem-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.quem-arte { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #E7E2FF 70%); box-shadow: inset 0 0 0 1px #E4E0F5; }
.quem-astro { position: absolute; }
.quem-astro-a { width: 56%; left: 8%; top: 14%; animation: boia 7s ease-in-out infinite; }
.quem-astro-b { width: 40%; right: 8%; bottom: 14%; animation: boia 6s ease-in-out infinite -2s; }
.quem-coracao { position: absolute; width: 16%; right: 22%; top: 18%; animation: boia 5s ease-in-out infinite -1s; }
.quem-coracao svg { width: 100%; height: auto; }
.citacao { margin: 26px 0 0; padding: 0 0 0 24px; border-left: 5px solid var(--estrela); display: grid; gap: 14px; }
.citacao p { color: var(--texto-2); font-weight: 600; font-size: clamp(1.04rem, 1.3vw, 1.16rem); line-height: 1.65; }
.assinatura { margin-top: 20px; padding-left: 29px; font-family: var(--titulo); font-weight: 800; font-size: 1.15rem; color: var(--nave); }

/* ---------- 12. perguntas ---------- */
.faq { border-top: 2px solid var(--borda); }
.faq details { border-bottom: 2px solid var(--borda); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-family: var(--titulo); font-weight: 800; font-size: clamp(1.12rem, 1.8vw, 1.32rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--fundo-filho); transition: transform .35s var(--mola), background-color .3s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; border-radius: 2px; background: var(--espaco); }
.faq summary i::after { transform: rotate(90deg); transition: transform .35s var(--mola); }
.faq details[open] summary i { background: var(--estrela); transform: rotate(180deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq summary:hover i { background: #E7E2FF; }
.faq-r { padding: 0 4px 22px; }
.faq-r p { color: var(--texto-2); font-weight: 600; max-width: 62ch; }
.faq-r a { color: var(--nave); font-weight: 800; }
.faq details[open] .faq-r { animation: abre .45s var(--suave); }
@keyframes abre { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- 13. chamada final e rodapé ---------- */
.final-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.final-logo { width: 110px; height: 114px; margin-bottom: 24px; animation: boia 6s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(140, 123, 255, .45)); }
.final .heroi-acoes { margin-top: 30px; }
.rodape { background: var(--abismo-2); color: var(--lavanda-clara); padding: 56px 0 40px; }
.rodape-in { display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: start; }
.rodape-marca p { margin-top: 12px; font-weight: 700; line-height: 1.5; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: flex-end; }
.rodape-links a { color: var(--nevoa); text-decoration: none; font-weight: 700; padding: 6px 0; }
.rodape-links a:hover { color: var(--estrela); }
.rodape-fim { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(207, 199, 255, .14); font-size: .9rem; font-weight: 600; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  .topo-nav { display: none; }
  .topo-cta { margin-left: auto; }
  .fone-crianca, .fone-pais { --s: .74; }
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --cab: 64px; }
  .heroi { padding-bottom: 110px; }
  .heroi-in, .como-grade, .mural-dig-grade, .mesada-grade, .astro-grade, .mural-grade, .fund-grade, .quem-grade { grid-template-columns: 1fr; gap: 40px; }
  .heroi-texto { text-align: center; }
  .heroi-t { font-size: min(7.4vw, 3.6rem); }
  .heroi-acoes { justify-content: center; }
  .heroi-sub { margin-left: auto; margin-right: auto; }
  .vagas { justify-content: center; }
  .heroi-visual { min-height: 0; padding: 20px 0 50px; }
  .orbita-anel { width: 440px; height: 440px; }
  .fone-heroi { --s: .82; }
  .passos { order: 2; }
  .dupla { order: 1; }
  .mural-dig-visual { order: 2; }
  .astro-grade { gap: 14px; justify-items: center; }
  .astro-texto { display: contents; text-align: center; }
  .astro-texto > * { order: 1; text-align: center; }
  .astro-texto > .sobretitulo { justify-self: center; margin-bottom: 0; }
  .astro-palco { order: 2; min-height: 0; padding: 10px 0 18px; }
  .astro-grande { width: min(250px, 62vw); }
  .astro-halo { width: 280px; height: 280px; }
  .astro-sombra { bottom: 0; width: 150px; }
  .astro-ctrl { order: 3; margin-top: 0; }
  .astro-ctrl { justify-items: center; }
  .ac-linha { grid-template-columns: 1fr; gap: 6px; justify-items: center; }
  .ac-ops { justify-content: center; }
  .mural-visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .sim { grid-template-columns: 1fr; }
  .selos { grid-template-columns: repeat(2, 1fr); }
  .quem-arte { max-width: 300px; }
  .rodape-in { grid-template-columns: 1fr; }
  .rodape-links { justify-content: flex-start; }

  .g-textos { left: 20px; right: 20px; top: calc(var(--cab) + 4svh); width: auto; }
  .g-txt { font-size: clamp(2.2rem, 9.6vw, 3.6rem); text-align: center; }
  .g-papel-pos { left: 50%; right: auto; top: max(38svh, calc(var(--cab) + 210px)); width: min(92vw, 560px); transform: translateX(-50%); }
  .g-pegador { right: 8px; width: 14px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .caixa { padding: 0 16px; }
  .topo-in { padding: 0 16px; }
  .marca { font-size: 1.35rem; }
  .marca-logo { width: 34px; height: 36px; }
  .btn-g { width: 100%; }
  .heroi-acoes { flex-direction: column; }
  .heroi-t { font-size: clamp(2rem, 9.2vw, 3rem); }
  .lua-heroi { left: auto; right: 7%; top: calc(var(--cab) + 64px); width: 24px; height: 24px; }
  .selo-sobre { font-size: .8rem; }
  .selo-sobre { font-size: .85rem; }
  .orbita-anel { width: 340px; height: 340px; }
  .fone-heroi { --s: .76; }
  .flutua-a { width: 46px; height: 46px; left: 0; }
  .flutua-b { width: 40px; height: 40px; right: 0; }
  .flutua-c { right: -4px; font-size: .95rem; padding: 8px 12px; }
  .dupla { gap: 10px; }
  .fone-crianca, .fone-pais { --s: .54; }
  .fone-pais { margin-top: 34px; }
  .passo button { padding: 12px 14px; gap: 12px; align-items: center; }
  .passos { gap: 8px; }
  .passo:not(.ativo) small { display: none; }
  .passo b { font-size: 1.1rem; margin: 0; }
  .passo.ativo button { transform: none; }
  .mural-dig-visual { padding: 30px 12px; border-radius: 24px; }
  .ima-mini { width: 18px; height: 18px; }
  .ima-mini.ima-1, .ima-mini.ima-2 { top: 20px; }
  .bento, .selos { grid-template-columns: 1fr; }
  .pote-vidro { width: 86px; height: 116px; }
  .chip-op > span { font-size: .88rem; }
  .constelacao { gap: 2px; }
  .mural-gratis-selo { width: 88px; height: 88px; font-size: 1.25rem; }
  .citacao { padding-left: 16px; }
  .assinatura { padding-left: 21px; }
}
@media (max-width: 380px) {
  .fone-crianca, .fone-pais { --s: .5; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .geladeira { height: auto; }
  .g-palco { position: relative; height: auto; min-height: 100svh; }
}
.geladeira.estatico, html:not(.js) .geladeira { height: auto; }
.geladeira.estatico .g-palco, html:not(.js) .g-palco { position: relative; height: auto; min-height: 0; padding: calc(var(--cab) + 40px) 24px 64px; display: grid; gap: 32px; justify-items: center; }
.geladeira.estatico .g-textos, .geladeira.estatico .g-txt, .geladeira.estatico .g-papel-pos,
html:not(.js) .g-textos, html:not(.js) .g-txt, html:not(.js) .g-papel-pos { position: relative; inset: auto; transform: none; width: 100%; max-width: 760px; opacity: 1; }
.geladeira.estatico .g-txt, html:not(.js) .g-txt { text-align: center; }
.geladeira.estatico .g-txt + .g-txt, html:not(.js) .g-txt + .g-txt { margin-top: 18px; }
.geladeira.estatico .g-a3 { opacity: 1; }
.geladeira.estatico .g-contagem, .geladeira.estatico .g-progresso, .geladeira.estatico .g-chama,
html:not(.js) .g-contagem, html:not(.js) .g-progresso, html:not(.js) .g-chama { display: none; }
html:not(.js) .g-ad { transform: none; }