/* "Um céu só": base compartilhada dos dois sites (protótipo). */
@font-face { font-family: 'Space Grotesk'; src: url('fontes/space-grotesk-latin-variable.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fontes/inter-latin-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --noite: #0E0D15; --azul: #182346; --meio: #3D5387; --lavanda: #7C83AD; --malva: #BFA9BA; --texto: #F3EDF4; --suave: #C9C5D8; --linha: rgba(191, 169, 186, .22); --gutter: clamp(16px, 5vw, 72px); --borda: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--noite); }
body { margin: 0; transition: color .6s ease; color: var(--texto); font: 400 17px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -.03em; line-height: 1.02; margin: 0; }
h2 { font-size: clamp(2.3rem, 6.5vw, 5.2rem); }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 92px; }
:root { --vidro: rgba(14, 13, 21, .5); --vidro-forte: rgba(24, 35, 70, .78); --ceu: linear-gradient(180deg, #0E0D15 0%, #182346 34%, #3D5387 58%, #7C83AD 74%, #BFA9BA 88%); --mar: linear-gradient(180deg, #3D5387, #182346 70%, #0E0D15); --brilho: #BFA9BA; }
:root[data-theme="light"] { color-scheme: light; --noite: #F6F1F6; --texto: #182346; --suave: #39446B; --malva: #3D5387; --lavanda: #5D6389; --linha: rgba(61, 83, 135, .26); --vidro: rgba(255, 255, 255, .62); --vidro-forte: rgba(255, 255, 255, .84); --ceu: linear-gradient(180deg, #DDE3F4 0%, #E9E4F2 45%, #F3E6EC 70%, #F7E7DC 88%); --mar: linear-gradient(180deg, #BFA9BA, #7C83AD 60%, #3D5387); --brilho: #fff; }
.tema { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--texto); font-size: 1.15rem; cursor: pointer; }
.tema:hover { background: var(--linha); }
:root { --logo: #F3EDF4; --lf1: #BFA9BA; --lf2: #7C83AD; --la1: #D9CCD6; --la2: #7C83AD; --lr: #E8B65F; --topo: 54px; --marca: 88px; --white: #171621; --navy: #F3EDF4; --line: rgba(191, 169, 186, .22); }
:root[data-theme="light"] { --logo: #182346; --lf1: #3D5387; --lf2: #7C83AD; --la1: #3D5387; --la2: #7C83AD; --lr: #D69A34; --white: #FAF7FB; --navy: #182346; --line: rgba(61, 83, 135, .26); }
.agora { display: block; width: fit-content; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linha); background: var(--vidro); backdrop-filter: blur(10px); font-size: .82rem; color: var(--texto); }
.agora[hidden] { display: block; visibility: hidden; }
@media (max-width: 760px) { .agora { white-space: nowrap; font-size: clamp(.64rem, 3vw, .8rem); padding: 4px 10px; } }
.aviso-tema { position: fixed; left: 50%; top: 84px; z-index: 40; translate: -50% -10px; max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 999px; background: var(--vidro-forte); border: 1px solid var(--linha); backdrop-filter: blur(14px); color: var(--texto); font-size: .88rem; opacity: 0; pointer-events: none; transition: opacity .3s, translate .3s; }
.aviso-tema.on { opacity: 1; translate: -50% 0; }
.chuva { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chuva--pagina { position: fixed; z-index: 0; }
.relampago { position: absolute; inset: 0; z-index: 3; background: #F3EDF4; opacity: 0; pointer-events: none; }
body > .relampago { position: fixed; z-index: 0; }
.relampago.on { animation: raio .7s ease-out; }
@keyframes raio { 0% { opacity: 0; } 8% { opacity: .5; } 18% { opacity: .1; } 26% { opacity: .38; } 100% { opacity: 0; } }
/* Lua chapada: só a parte iluminada aparece; o resto é um disco quase invisível sobre o céu. */
.fase-lua { position: absolute; inset: 0; width: 100%; height: 100%; display: none; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 22px rgba(231, 219, 227, .5)); }
.fase-lua circle { fill: #F3EDF4; fill-opacity: .04; }
.fase-lua circle.luz { fill: #E7DBE3; fill-opacity: 1; }
.fase-lua path { fill: #fff; }
[data-cena="noite"] .fase-lua { display: block; }
[data-cena="noite"] .sol, [data-cena="noite"] .nucleo { background: none; box-shadow: none; }
/* Transições: as cores da faixa e do amanhecer seguem o tema, sempre saindo do fundo da página. */
:root { --d1: #182346; --d2: #3D5387; --d3: #7C83AD; --d4: #BFA9BA; --d-pico: 42%; }
:root[data-theme="light"] { --d1: #ECE6F0; --d2: #DDD3E4; --d3: #CFC0D3; --d4: #BFA9BA; --d-pico: 72%; }
:root {
  --faixa: transparent 0%, color-mix(in oklab, var(--d1) 22%, transparent) 10%, color-mix(in oklab, var(--d1) 70%, transparent) 22%, var(--d1) 32%, color-mix(in oklab, var(--d1), var(--d2)) 41%, color-mix(in oklab, var(--d2), var(--d3) var(--d-pico)) 50%, color-mix(in oklab, var(--d1), var(--d2)) 59%, var(--d1) 68%, color-mix(in oklab, var(--d1) 70%, transparent) 78%, color-mix(in oklab, var(--d1) 22%, transparent) 90%, transparent 100%;
  --amanhecer: transparent 0%, color-mix(in oklab, var(--d1) 30%, transparent) 7%, color-mix(in oklab, var(--d1) 80%, transparent) 15%, var(--d1) 22%, color-mix(in oklab, var(--d1), var(--d2)) 30%, var(--d2) 38%, color-mix(in oklab, var(--d2), var(--d3)) 46%, var(--d3) 54%, color-mix(in oklab, var(--d3), var(--d4)) 62%, var(--d4) 72%;
}
.degrade { position: relative; z-index: 1; height: clamp(240px, 44svh, 460px); margin-block: calc(-1 * clamp(20px, 5vw, 90px)); pointer-events: none; background: linear-gradient(180deg, var(--faixa)); }
.aurora-fundo { background: linear-gradient(180deg, var(--amanhecer)); }
@supports (background: linear-gradient(in oklab 180deg, red, blue)) {
  .degrade { background: linear-gradient(in oklab 180deg, var(--faixa)); }
  .aurora-fundo { background: linear-gradient(in oklab 180deg, var(--amanhecer)); }
}
/* O rodapé continua a cor do amanhecer. */
body .rodape { position: relative; z-index: 1; border-top: 0; background: var(--d4); color: #0E0D15; }
body .rodape a, body .rodape .privacy-settings { color: #0E0D15; }
/* Conteúdo e faixas entram aos poucos conforme a rolagem. */
@supports (animation-timeline: view()) {
  .secao, .degrade { animation: surge linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  @keyframes surge { from { opacity: 0; transform: translateY(28px); } }
}
.pular { position: absolute; left: -999px; } .pular:focus { left: 16px; top: 16px; z-index: 50; background: var(--texto); color: var(--noite); padding: 8px 14px; }
.topo { position: fixed; z-index: 30; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gutter); }
.marca { display: flex; align-items: center; justify-content: center; height: var(--marca); padding: 0 20px; border-radius: 24px; border: 1px solid var(--linha); background: var(--vidro); backdrop-filter: blur(14px); text-decoration: none; font: 600 1.05rem 'Space Grotesk', sans-serif; }
.logo-viva { height: 68px; width: auto; aspect-ratio: 810 / 730; overflow: visible; }
.l-base { fill: var(--logo); } .l-f1 { fill: var(--lf1); } .l-f2 { fill: var(--lf2); } .l-a1 { fill: var(--la1); } .l-a2 { fill: var(--la2); } .l-fita { fill: var(--lr); }
.l-base, .l-f1, .l-f2, .l-a1, .l-a2, .l-fita { transition: fill .8s ease; }
.l-mar { fill: none; stroke: #7C83AD; stroke-width: 5; stroke-linecap: round; }
.topo nav { display: flex; gap: 6px; align-items: center; height: var(--topo); padding: 0 4px; border-radius: 999px; background: var(--vidro); backdrop-filter: blur(14px); border: 1px solid var(--linha); }
.topo nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: .9rem; text-decoration: none; color: var(--suave); }
.topo nav a:hover { color: var(--texto); }
.topo nav a.cta { white-space: nowrap; background: var(--malva); color: var(--noite); font-weight: 600; }
.selo { font: 500 .78rem 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--malva); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 1rem Inter, sans-serif; text-decoration: none; border: 1px solid var(--linha); color: var(--texto); background: transparent; cursor: pointer; }
.btn:hover { border-color: var(--malva); }
.btn--forte { background: var(--malva); color: var(--noite); border-color: var(--malva); }
.btn--forte:hover { background: #D5C3D2; }
.secao { padding: clamp(72px, 12vw, 150px) var(--gutter); max-width: 1440px; margin: 0 auto; }
.rodape a { color: inherit; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.game-launch { min-height: 44px; }
.privacy-settings { min-height: 44px; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.rodape { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding: 28px var(--borda); border-top: 1px solid var(--linha); color: var(--suave); font-size: .9rem; }
@media (max-width: 760px) {
  .pingu-launch { padding: 3px; border-radius: 50%; }
  .pingu-launch span { display: none; }
  .pingu-launch img { width: 42px; height: 46px; } .topo nav a:not(.cta) { display: none; } .topo nav { background: var(--vidro); padding: 0 4px; border: 1px solid var(--linha); backdrop-filter: blur(14px); }
  :root { --marca: 72px; }
  .marca { padding: 0 14px; border-radius: 20px; }
  .logo-viva { height: 54px; }
  .topo nav a.cta { padding: 0 12px; font-size: .84rem; } }
@media (max-width: 360px) { .topo { gap: 6px; } .marca { padding: 0 10px; } .logo-viva { height: 46px; } .tema { width: 36px; } .topo nav a.cta { padding: 0 9px; font-size: .76rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }