/* ==========================================================================
   APOGEU — projeto conceito VEXA (slug: jornada)
   Uma jornada ao rolar: vale → nuvens → espaço. CSS puro, sem build.
   Camadas (z-index): céu 0 · estrelas 1 · fotos 2 · palco das nuvens 3 ·
   astronauta 4 · texto 5 · nuvens da frente 6 · lanterna 7 · grão 8 ·
   altímetro 19 · topo 20 · faixa VEXA 30 · cursor 40
   ========================================================================== */

@font-face {
  font-family: "Cormorant";
  src: url(../fonts/cormorant-normal.woff2) format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url(../fonts/cormorant-italic.woff2) format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url(../fonts/dmsans-normal.woff2) format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  --tinta: #0e1c2c;          /* texto escuro (dia) */
  --tinta-suave: #2c3d52;
  --luz: #f4efe4;            /* texto claro (noite) */
  --luz-suave: #c3c8d6;
  --ouro: #f2c879;
  --brasa: #ff8a4c;
  --noite: #070b18;
  --vidro: rgba(14, 20, 38, .72);
  --borda: rgba(255, 255, 255, .14);
  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --faixa: 32px;
  --gutter: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-mola: cubic-bezier(.34, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #9fc6df;
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--sans);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
em { font-style: italic; }

.envelope { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.envelope--estreito { width: min(860px, 100% - 2 * var(--gutter)); }
.camada-texto { position: relative; z-index: 5; }

/* ---------- tipografia ---------------------------------------------------- */
.sobretitulo {
  font: 600 .74rem/1.2 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .7em;
}
.sobretitulo::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.titulo-gigante {
  font: 500 clamp(3.1rem, 10.5vw, 10.5rem)/.86 var(--serif);
  letter-spacing: -.025em;
}
.titulo-grande {
  font: 500 clamp(2.5rem, 6.6vw, 6.2rem)/.92 var(--serif);
  letter-spacing: -.02em;
}
.titulo-gigante em, .titulo-grande em { font-weight: 400; }

/* linhas reveladas por máscara */
.linha { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.linha > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease); }
.revela.visto .linha > span { transform: none; }
.revela.visto .linha:nth-child(2) > span { transition-delay: .09s; }
.revela.visto .linha:nth-child(3) > span { transition-delay: .18s; }

/* ---------- faixa VEXA ---------------------------------------------------- */
.vexa-faixa {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--faixa);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--gutter);
  background: #0b0f14; color: #e6e1d6;
  font: 500 .74rem/1 var(--sans); letter-spacing: .02em;
}
.vexa-faixa strong { color: #fff; letter-spacing: .08em; }
.vexa-faixa a { text-decoration: none; color: #e6d7a8; white-space: nowrap; }
.vexa-faixa a:hover { text-decoration: underline; }
.vexa-faixa__progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.vexa-faixa__progresso i { display: block; height: 100%; background: linear-gradient(90deg, #c4422b, #e89a6b, #e6d7a8); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 520px) { .vexa-faixa__extra { display: none; } }

/* ---------- céu, estrelas, grão, lanterna -------------------------------- */
.ceu { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ceu__camada { position: absolute; inset: 0; }
.ceu__camada--manha { background: linear-gradient(180deg, #5f9fcb 0%, #9fc6df 45%, #dceaf0 100%); }
.ceu__camada--dourado { background: linear-gradient(180deg, #e9b98a 0%, #f4d5a6 45%, #fbecd4 100%); opacity: 0; }
.ceu__camada--crepusculo { background: linear-gradient(180deg, #1d1d4a 0%, #5b3a6e 42%, #c4645a 78%, #ef9b69 100%); opacity: 0; }
.ceu__camada--noite { background: radial-gradient(120% 80% at 70% 0%, #172150 0%, #0b1130 38%, #060914 100%); opacity: 0; }

.estrelas { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; }

.grao {
  position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lanterna { position: fixed; left: 0; top: 0; z-index: 7; pointer-events: none; opacity: 0; display: none; }
.lanterna::before {
  content: ""; position: absolute; width: 640px; height: 640px; left: -320px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 168, .17) 0%, rgba(255, 210, 150, .07) 28%, rgba(255, 200, 140, 0) 62%);
  mix-blend-mode: screen;
}
.lanterna i {
  position: absolute; width: 10px; height: 10px; left: -5px; top: -5px; border-radius: 50%;
  background: #fff4d8; box-shadow: 0 0 12px 4px rgba(255, 214, 150, .7), 0 0 40px 10px rgba(255, 190, 120, .25);
}
.tem-lanterna .lanterna { display: block; }
.cursor-lanterna, .cursor-lanterna a, .cursor-lanterna button, .cursor-lanterna summary, .cursor-lanterna label { cursor: none; }
.cursor-lanterna input, .cursor-lanterna textarea { cursor: text; }

/* ---------- astronauta ---------------------------------------------------- */
.astro {
  position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none;
  --h: min(76vh, 740px);
  height: var(--h); width: calc(var(--h) * .6045);
  margin-left: calc(var(--h) * -.30225); margin-top: calc(var(--h) * -.5);
  will-change: transform;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.astro.pronto { opacity: 1; }
.astro__corpo { position: relative; width: 100%; height: 100%; will-change: transform; }
/* SEM drop-shadow: no iPhone (Safari), com a camada acelerada, o halo da sombra
   era cortado no limite retangular da imagem e aparecia um retângulo em volta
   do astronauta. No céu ele flutua — não precisa de sombra. */
.astro__corpo img { width: 100%; height: 100%; }
/* Tons do entardecer e da noite: cópias da própria foto (com alfa) com filtro
   de cor (só matriz de cor, que não cria halo), por cima da original. */
.astro__corpo .astro__tinta { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.astro__corpo .astro__tinta--crepusculo { filter: sepia(.55) saturate(1.7) hue-rotate(-18deg) brightness(.97); }
.astro__corpo .astro__tinta--noite { filter: brightness(.72) sepia(.35) hue-rotate(185deg) saturate(1.5); }
.astro__jato {
  position: absolute; left: 50%; bottom: 30%; width: 70%; height: 30%; margin-left: -35%;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 246, 225, .65), rgba(170, 210, 255, .18) 55%, transparent);
  transform-origin: 50% 0;
}
@media (max-width: 900px) { .astro { --h: min(58vh, 460px); } }

/* ---------- topo ---------------------------------------------------------- */
.topo {
  position: fixed; z-index: 20; top: calc(var(--faixa) + 12px); left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 100% - 2 * var(--gutter));
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  background: rgba(250, 248, 242, .74); color: var(--tinta);
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .6s, color .6s, border-color .6s;
}
.topo--noite { background: rgba(10, 14, 32, .62); color: var(--luz); border-color: var(--borda); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__simbolo { width: 30px; height: 30px; overflow: visible; }
.marca__orbita { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .75; stroke-dasharray: 46; stroke-dashoffset: 0; }
.marca__planeta { fill: currentColor; }
.marca__satelite { fill: var(--brasa); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .marca__satelite { animation: brilha 2.6s ease-in-out infinite; }
  .marca:hover .marca__orbita { animation: traça 1s var(--ease); }
}
@keyframes brilha { 50% { transform: scale(1.35); } }
@keyframes traça { from { stroke-dashoffset: 46; } }
.marca__nome { font: 600 1.55rem/1 var(--serif); letter-spacing: .01em; }
.topo__nav { display: flex; gap: 26px; font-size: .9rem; }
.topo__nav a { text-decoration: none; position: relative; padding: 4px 0; }
.topo__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.topo__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 860px) { .topo__nav { display: none; } }

/* ---------- botões -------------------------------------------------------- */
.botao {
  --bg: #0e1c2c; --fg: #f8f3e8;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg);
  font: 600 .95rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background .3s, color .3s, box-shadow .3s;
  will-change: transform;
}
.botao:hover { box-shadow: 0 10px 30px -8px rgba(255, 138, 76, .55); background: #16283d; }
.botao--peq { min-height: 42px; padding: 0 20px; font-size: .86rem; }
.botao--grande { min-height: 60px; padding: 0 30px; font-size: 1rem; width: 100%; }
.botao--vidro { --bg: rgba(255, 255, 255, .16); --fg: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.botao--vidro:hover { background: rgba(255, 255, 255, .26); }
.topo--noite .botao, .noite-tema .botao:not(.botao--vidro) { --bg: #f2c879; --fg: #14121a; }
.topo--noite .botao:hover, .noite-tema .botao:not(.botao--vidro):hover { background: #ffd893; }

/* ---------- 1 · hero ------------------------------------------------------ */
.hero { position: relative; min-height: max(100svh, 640px); display: flex; align-items: flex-start; color: #fff; overflow-x: clip; }
.hero__foto {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 70%; will-change: transform; }
.hero__veu {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(7, 22, 44, .62) 0%, rgba(7, 22, 44, .28) 38%, rgba(7, 22, 44, 0) 60%),
    linear-gradient(90deg, rgba(7, 22, 44, .45) 0%, rgba(7, 22, 44, 0) 55%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.hero__conteudo { padding: calc(var(--faixa) + 120px) var(--gutter) 0; max-width: 1100px; }
.hero__chip { color: #fff; margin-bottom: 26px; }
.hero__chip::before { display: none; }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 0 rgba(255, 138, 76, .6); }
@media (prefers-reduced-motion: no-preference) { .pulso { animation: pulso 2.4s infinite; } }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(255, 138, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 138, 76, 0); } }
.hero h1 { text-shadow: 0 4px 40px rgba(4, 16, 34, .35); }
.hero__texto { max-width: 470px; margin-top: 28px; font-size: 1.1rem; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(4, 16, 34, .5); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__acoes .botao:not(.botao--vidro) { --bg: #f8f3e8; --fg: #0e1c2c; }
.hero__acoes .botao--vidro { --bg: rgba(8, 22, 40, .42); }
.hero__acoes .botao--vidro:hover { background: rgba(8, 22, 40, .58); }
.hero__acoes .botao:not(.botao--vidro):hover { background: #fff; }
.hero__chip, .hero__texto, .hero__acoes { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.carregado .hero__chip { opacity: 1; transform: none; }
.carregado .hero__texto { opacity: 1; transform: none; transition-delay: .45s; }
.carregado .hero__acoes { opacity: 1; transform: none; transition-delay: .6s; }
@media (prefers-reduced-motion: no-preference) {
  .hero__foto img { animation: hero-zoom 2.4s var(--ease) both; }
}
/* zoom de entrada usa a propriedade `scale` (o `transform` fica livre para o parallax) */
@keyframes hero-zoom { from { scale: 1.14; } to { scale: 1; } }

/* nuvens da borda: na frente do astronauta (mesmo z, depois no DOM), atrás do texto */
.hero__nuvens { position: absolute; left: 0; right: 0; bottom: -16vh; height: 40vh; z-index: 4; pointer-events: none; }
.nuvem-borda { position: absolute; bottom: 0; width: 70vw; max-width: none; height: auto; opacity: .96; will-change: transform; }
.nuvem-borda--a { left: -22vw; bottom: -4vh; }
.nuvem-borda--b { left: 30vw; bottom: -12vh; width: 80vw; }
.nuvem-borda--c { right: -24vw; bottom: -2vh; width: 62vw; }
.nuvem-borda:not([src]) { visibility: hidden; }

@media (max-width: 700px) {
  .hero__conteudo { padding-top: calc(var(--faixa) + 96px); }
  .hero__texto { font-size: 1rem; max-width: 92%; }
  .nuvem-borda { width: 130vw; }
  .nuvem-borda--b { width: 140vw; left: 0; }
}

/* ---------- 2 · subida pelas nuvens -------------------------------------- */
.subida { position: relative; height: 340vh; }
/* nuvens de trás (z 3) · astronauta (z 4) · nuvens da frente (z 5) · frases (z 6) */
.subida__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 6; pointer-events: none; }
.nuvem { position: absolute; left: 0; top: 0; max-width: none; will-change: transform, opacity; opacity: 0; pointer-events: none; }
.nuvens-tras, .nuvens-frente { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; visibility: hidden; }
.nuvens-frente { z-index: 5; }
.subida__frases { position: absolute; inset: 0; z-index: 5; color: var(--tinta); }
.frase {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  font: 500 clamp(2.6rem, 6.6vw, 7rem)/.92 var(--serif); letter-spacing: -.02em;
  max-width: 58vw; pointer-events: none;
}
.frase em { font-weight: 400; }
.frase__alt {
  display: block; margin-bottom: 22px; font: 600 .74rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; transition: opacity .8s;
}
.frase .linha > span { transition-duration: .9s; }
.frase.ativa .linha > span { transform: none; }
.frase.ativa .linha:nth-of-type(2) > span { transition-delay: .08s; }
.frase.ativa .frase__alt { opacity: .8; }
.frase .linha { text-shadow: 0 2px 30px rgba(255, 255, 255, .55); }
.subida__branco { position: absolute; inset: 0; z-index: 4; background: #fff7ea; opacity: 0; pointer-events: none; }
@media (max-width: 700px) {
  .frase { max-width: none; right: var(--gutter); top: 34%; }
}

/* ---------- 3 · acima das nuvens ----------------------------------------- */
.acima { position: relative; min-height: 130vh; display: flex; align-items: flex-start; color: #fff; }
.acima__foto {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
}
.acima__foto img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.acima__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 26, 40, .1) 10%, rgba(12, 26, 40, .45) 40%, rgba(12, 26, 40, .1) 75%); }
.acima__conteudo { width: min(1240px, 100% - 2 * var(--gutter)); margin: 20vh auto 0; }
.acima__conteudo .preenche { max-width: min(860px, 64vw); }
@media (max-width: 900px) { .acima__conteudo .preenche { max-width: none; } }
.acima__conteudo .sobretitulo { margin-bottom: 26px; }
.preenche { font: 500 clamp(1.9rem, 4.4vw, 4rem)/1.08 var(--serif); letter-spacing: -.01em; text-shadow: 0 2px 30px rgba(8, 16, 30, .35); }
.preenche .p { opacity: .26; transition: opacity .35s linear; }
.preenche .p.acesa { opacity: 1; }

/* ---------- 4 · a bordo: módulos com inclinação 3D ------------------------ */
.bordo { position: relative; padding: 16vh 0 20vh; color: var(--tinta); }
.cabeca-secao { max-width: 780px; margin-bottom: 64px; }
.cabeca-secao .sobretitulo { margin-bottom: 22px; }
.cabeca-secao__texto { margin-top: 24px; max-width: 560px; font-size: 1.08rem; color: inherit; opacity: .86; }
.cabeca-secao--centro { margin-inline: auto; text-align: center; }
.cabeca-secao--centro .sobretitulo::before { display: none; }
.cabeca-secao--centro .cabeca-secao__texto { margin-inline: auto; }
.modulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); perspective: 1200px; }
@media (max-width: 1000px) { .modulos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .modulos { grid-template-columns: 1fr; } }
.modulo {
  position: relative; height: 100%; min-height: 300px; padding: 30px 28px 32px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(20, 30, 56, .92), rgba(9, 14, 30, .94));
  color: var(--luz); border: 1px solid var(--borda); overflow: hidden;
  transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .6s;
  box-shadow: 0 30px 60px -30px rgba(10, 16, 40, .55);
  will-change: transform;
}
.modulo:hover { box-shadow: 0 40px 80px -30px rgba(10, 16, 40, .75); }
.modulo__brilho {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 216, 150, .2), transparent 55%);
}
.modulo:hover .modulo__brilho { opacity: 1; }
.modulo__icone { width: 46px; height: 46px; fill: none; stroke: var(--ouro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 44px; transform: translateZ(40px); }
.modulo__icone .cheio { fill: var(--ouro); stroke: none; }
.modulo__icone .anima { stroke: var(--brasa); stroke-dasharray: 80; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease); }
.modulo:hover .modulo__icone .anima { animation: desenha 1.1s var(--ease); }
@keyframes desenha { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
.modulo__n { font: 600 .72rem/1 var(--sans); letter-spacing: .22em; color: var(--luz-suave); transform: translateZ(20px); }
.modulo h3 { margin-top: 10px; font: 500 2.1rem/1 var(--serif); transform: translateZ(30px); }
.modulo p:last-child { margin-top: 14px; color: var(--luz-suave); font-size: .98rem; transform: translateZ(16px); }

/* ---------- 5 · crepúsculo ------------------------------------------------ */
.crepusculo { position: relative; min-height: 150vh; display: flex; align-items: center; color: #fff; }
.crepusculo__janela {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
}
.crepusculo__janela img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.crepusculo__janela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 40, .55), rgba(20, 14, 40, 0) 65%); }
.crepusculo__texto { padding: 0 var(--gutter); }
.crepusculo__texto .sobretitulo { margin-bottom: 24px; }
.crepusculo h2 { text-shadow: 0 4px 40px rgba(30, 10, 40, .4); }

/* ---------- 6 · capítulos (sticky) --------------------------------------- */
.capitulos { position: relative; height: 380vh; color: var(--luz); }
.capitulos__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.capitulos__orbitas {
  position: absolute; z-index: 3; width: min(980px, 74vw); height: auto; aspect-ratio: 1;
  left: 70vw; top: 54vh; transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
}
.capitulos__orbitas ellipse { fill: none; stroke: rgba(242, 200, 121, .55); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.capitulos__lista { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(600px, 46vw); min-height: 460px; }
.capitulos__lista > .sobretitulo { margin-bottom: 26px; }
.capitulos__marcos { list-style: none; margin: 0 0 30px; padding: 0; display: flex; gap: 8px; }
.capitulos__marcos li { width: 46px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
.capitulos__marcos li::after { content: ""; position: absolute; inset: 0; background: var(--ouro); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.capitulo { position: absolute; left: 0; right: 0; top: 96px; visibility: hidden; }
.capitulo.ativo { visibility: visible; }
.capitulo__n { font: 400 italic 1.4rem/1 var(--serif); color: var(--ouro); }
.capitulo h2 { font: 500 clamp(3rem, 6.4vw, 6.2rem)/.92 var(--serif); letter-spacing: -.02em; margin-top: 6px; }
.capitulo .linha > span { transition-duration: .8s; }
.capitulo.ativo .linha > span { transform: none; }
.capitulo__sub { font: 400 italic clamp(1.3rem, 2.2vw, 1.8rem)/1.2 var(--serif); margin-top: 8px; color: #f3dcb4; }
.capitulo p:not([class]) { margin-top: 18px; color: var(--luz-suave); max-width: 470px; }
.capitulo ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.capitulo li { padding: 7px 14px; border: 1px solid var(--borda); border-radius: 999px; font-size: .84rem; background: rgba(10, 14, 32, .4); }
.capitulo__sub, .capitulo p:not([class]), .capitulo ul, .capitulo__n { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.capitulo.ativo .capitulo__sub, .capitulo.ativo p:not([class]), .capitulo.ativo ul, .capitulo.ativo .capitulo__n { opacity: 1; transform: none; transition-delay: .15s; }
@media (max-width: 900px) {
  .capitulos__orbitas { width: 120vw; left: 74vw; top: 26vh; }
  .capitulos__lista { width: auto; right: var(--gutter); top: auto; bottom: 6vh; transform: none; min-height: 0; height: 58vh; }
  .capitulo { top: 74px; }
  .capitulo p:not([class]) { font-size: .96rem; }
}

/* ---------- 7 · o espaço -------------------------------------------------- */
.noite { position: relative; min-height: 120vh; display: flex; align-items: center; color: var(--luz); }
.noite__envelope { text-align: center; }
.noite__envelope .sobretitulo::before { display: none; }
.noite h2 { margin-top: 24px; }
.noite__texto { max-width: 560px; margin: 30px auto 0; font-size: 1.12rem; color: var(--luz-suave); }
.dica-lanterna { margin-top: 26px; font: 400 italic 1.15rem/1.3 var(--serif); color: var(--ouro); opacity: .9; }
@media (hover: none), (pointer: coarse) { .dica-lanterna { display: none; } }

/* ---------- 8 · constelações (sticky) ------------------------------------ */
.constelacoes { position: relative; height: 480vh; color: var(--luz); }
.constelacoes__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.constelacoes__cabeca { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--faixa) + 100px); display: flex; justify-content: space-between; align-items: center; }
.constelacoes__cabeca { gap: 16px; }
.constelacoes__contador { font: 400 italic 1.3rem/1 var(--serif); color: var(--ouro); white-space: nowrap; }
.constelacao {
  position: absolute; inset: 0; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 4vw;
  padding: calc(var(--faixa) + 130px) var(--gutter) 70px;
  opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s;
}
.constelacao.ativa { opacity: 1; visibility: visible; }
.constelacao svg { width: min(100%, 62vh); margin-left: auto; overflow: visible; }
.c-linhas line, .c-linhas polyline { fill: none; stroke: rgba(242, 216, 160, .8); stroke-width: .45; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--d, 1); }
.c-estrelas circle { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(var(--e, 0)); filter: drop-shadow(0 0 1.2px #fff); }
.c-estrelas .quente { fill: #ffcf9e; filter: drop-shadow(0 0 1.6px #ff9a5a); }
.c-estrelas .fria { fill: #dbe6ff; filter: drop-shadow(0 0 1.6px #9db8ff); }
.c-estrelas .tenue { opacity: .75; }
.c-rotulos text { font: 500 3px/1 var(--sans); fill: var(--luz-suave); letter-spacing: .1px; opacity: var(--r, 0); }
.constelacao figcaption { max-width: 440px; }
.principio { font: 600 .74rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.constelacao h3 { font: 500 clamp(2.6rem, 5.4vw, 5rem)/.95 var(--serif); margin: 14px 0 18px; }
.constelacao figcaption p:not([class]) { font-size: 1.12rem; color: #e9e4d8; }
.fato { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borda); font-size: .93rem; color: var(--luz-suave); }
.constelacoes__barra { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; height: 2px; background: rgba(255, 255, 255, .14); border-radius: 2px; }
.constelacoes__barra i { display: block; height: 100%; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 800px) {
  .constelacoes__cabeca { top: calc(var(--faixa) + 82px); }
  .constelacao { grid-template-columns: 1fr; align-content: center; gap: 10px; padding: calc(var(--faixa) + 110px) var(--gutter) 60px; }
  .constelacao svg { width: min(74vw, 40vh); margin: 0 auto; }
  .constelacao h3 { margin: 10px 0 10px; }
  .constelacao figcaption p:not([class]) { font-size: 1rem; }
  .fato { margin-top: 12px; padding-top: 12px; font-size: .86rem; }
}

/* ---------- 9 · contagem regressiva -------------------------------------- */
.contagem { position: relative; padding: 18vh 0 14vh; color: var(--luz); }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; max-width: 820px; }
.linha-tempo__trilho { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: rgba(255, 255, 255, .14); border-radius: 2px; }
.linha-tempo__trilho i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ouro), var(--brasa)); transform-origin: 50% 0; transform: scaleY(0); border-radius: 2px; }
.momento { position: relative; padding: 0 0 54px 92px; }
.momento:last-child { padding-bottom: 0; }
.momento__icone {
  position: absolute; left: 0; top: -6px; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: #0d1430; border: 1px solid var(--borda);
  transition: border-color .5s, background .5s, box-shadow .5s;
}
.momento__icone svg { width: 26px; height: 26px; fill: none; stroke: var(--luz-suave); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.momento__icone .raio, .momento__icone .chama { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1s var(--ease) .1s; }
.momento.aceso .momento__icone { border-color: var(--ouro); background: #1a1a33; box-shadow: 0 0 0 6px rgba(242, 200, 121, .08), 0 0 30px rgba(242, 200, 121, .25); }
.momento.aceso .momento__icone svg { stroke: var(--ouro); }
.momento.aceso .momento__icone .raio, .momento.aceso .momento__icone .chama { stroke-dashoffset: 0; }
.momento--ignicao.aceso .momento__icone { border-color: var(--brasa); box-shadow: 0 0 0 6px rgba(255, 138, 76, .1), 0 0 40px rgba(255, 138, 76, .45); }
.momento--ignicao.aceso .momento__icone svg { stroke: var(--brasa); }
@media (prefers-reduced-motion: no-preference) { .momento--ignicao.aceso .chama { animation: tremula .5s ease-in-out infinite alternate; transform-origin: 16px 25px; } }
@keyframes tremula { to { transform: scaleY(1.25); } }
.momento__t { font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--luz-suave); }
.momento h3 { font: 500 clamp(1.9rem, 3.6vw, 2.8rem)/1 var(--serif); margin: 10px 0 8px; }
.momento p:last-child { color: var(--luz-suave); max-width: 520px; }
.momento > *:not(.momento__icone) { opacity: .4; transition: opacity .6s; }
.momento.aceso > * { opacity: 1; }
.momento.aceso .momento__t { color: var(--ouro); }

/* ---------- 10 · janela de lançamento (lua) ------------------------------ */
.janela { position: relative; padding: 14vh 0; color: var(--luz); }
.lua__painel {
  max-width: 980px; margin: 0 auto; padding: clamp(22px, 4vw, 44px); border-radius: 30px;
  background: linear-gradient(170deg, rgba(24, 32, 64, .96), rgba(9, 13, 30, .97)); border: 1px solid var(--borda);
}
.selo-ilustrativo { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px dashed rgba(242, 200, 121, .6); color: var(--ouro); font-size: .78rem; letter-spacing: .02em; }
.lua__principal { display: grid; grid-template-columns: 240px 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; margin: 30px 0; }
.lua__desenho { width: 240px; height: 240px; }
#lua-fase { transition: d .6s var(--ease); }
.lua__data { font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--luz-suave); }
.lua__nome { font: 500 clamp(2.4rem, 5vw, 3.6rem)/1 var(--serif); margin: 10px 0 8px; }
.lua__luz { color: var(--ouro); font-size: .95rem; }
.lua__falta { margin-top: 14px; font: 400 italic 1.35rem/1.2 var(--serif); }
.lua__ceu { margin: 6px 0 22px; color: var(--luz-suave); max-width: 460px; }
.lua__dias { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.dia {
  flex: 0 0 64px; display: grid; justify-items: center; gap: 6px; padding: 10px 0 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .04); border: 1px solid transparent; color: var(--luz); cursor: pointer;
  transition: background .3s, border-color .3s, transform .3s var(--ease-mola);
}
.dia:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
.dia[aria-checked="true"] { border-color: var(--ouro); background: rgba(242, 200, 121, .12); }
.dia small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--luz-suave); }
.dia strong { font: 600 1.05rem/1 var(--sans); }
.dia svg { width: 22px; height: 22px; }
@media (max-width: 680px) {
  .lua__principal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .lua__desenho { width: 180px; height: 180px; }
  .lua__ceu { margin-inline: auto; }
}

/* ---------- 11 · perguntas ----------------------------------------------- */
.perguntas { position: relative; padding: 14vh 0; color: var(--luz); }
.acordeao { border-top: 1px solid var(--borda); }
.acordeao details { border-bottom: 1px solid var(--borda); }
.acordeao summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 0; font: 500 clamp(1.35rem, 2.6vw, 1.9rem)/1.15 var(--serif);
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary i { position: relative; flex: 0 0 34px; height: 34px; border: 1px solid var(--borda); border-radius: 50%; transition: transform .5s var(--ease), border-color .3s; }
.acordeao summary i::before, .acordeao summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .5s var(--ease); }
.acordeao summary i::after { transform: rotate(90deg); }
.acordeao details[open] summary i { transform: rotate(180deg); border-color: var(--ouro); }
.acordeao details[open] summary i::after { transform: rotate(0); }
.acordeao summary:hover { color: #fff; }
.acordeao details > div { padding: 0 54px 28px 0; color: var(--luz-suave); }
@media (prefers-reduced-motion: no-preference) {
  .acordeao details[open] > div { animation: abre .5s var(--ease); }
}
@keyframes abre { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- 12 · decolar (formulário) ----------------------------------- */
.decolar { position: relative; padding: 16vh 0 18vh; color: var(--luz); }
.decolar__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 90px); align-items: end; }
.decolar__chamada { padding-top: 36vh; }
.decolar__chamada .sobretitulo { margin-bottom: 24px; }
.decolar__nota { margin-top: 28px; max-width: 440px; color: var(--luz-suave); font-size: .95rem; }
.formulario {
  display: grid; gap: 20px; padding: clamp(22px, 3.4vw, 40px); border-radius: 28px;
  background: linear-gradient(170deg, rgba(24, 32, 64, .95), rgba(9, 13, 30, .97)); border: 1px solid var(--borda);
}
.campo { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo > span, .campo legend { font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--luz-suave); padding: 0; margin-bottom: 8px; }
.campo input, .campo textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05); color: var(--luz); font-size: 1rem; resize: vertical;
  transition: border-color .3s, background .3s;
}
.campo input::placeholder, .campo textarea::placeholder { color: #9aa1b6; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ouro); background: rgba(255, 255, 255, .08); }
.campo input[type="date"] { color-scheme: dark; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilulas label { position: relative; }
.pilulas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pilulas span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; transition: background .3s, border-color .3s, color .3s; }
.pilulas input:checked + span { background: var(--ouro); border-color: var(--ouro); color: #16121a; font-weight: 600; }
.pilulas input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 3px; }
.formulario__erro { min-height: 1.2em; color: #ffb59a; font-size: .92rem; }
.formulario__erro:empty { min-height: 0; }
.decolar .botao--grande { --bg: #f2c879; --fg: #14121a; }
.decolar .botao--grande:hover { background: #ffd893; }
@media (max-width: 900px) {
  .decolar__grade { grid-template-columns: 1fr; }
  .decolar__chamada { padding-top: 0; }
}

/* ---------- rodapé -------------------------------------------------------- */
.rodape { position: relative; z-index: 5; padding: 60px 0 70px; color: var(--luz); border-top: 1px solid var(--borda); background: rgba(5, 7, 16, .6); }
.rodape__grade { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.marca--rodape .marca__nome { font-size: 1.8rem; }
.rodape__texto { color: var(--luz-suave); font-size: .9rem; max-width: 620px; }
.rodape__links { display: flex; gap: 10px; flex-wrap: wrap; }
.rodape .botao:not(.botao--vidro) { --bg: #f2c879; --fg: #14121a; }
@media (max-width: 900px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ---------- altímetro ----------------------------------------------------- */
.altimetro {
  position: fixed; z-index: 19; right: 18px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; align-items: center; gap: 8px; width: 74px; padding: 14px 6px;
  border-radius: 999px; background: rgba(10, 14, 32, .5); border: 1px solid var(--borda); color: var(--luz);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center;
}
@media (min-width: 1180px) { .altimetro { display: flex; } }
.altimetro__rotulo { font: 600 .56rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--luz-suave); }
.altimetro__valor { font: 600 .8rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.altimetro__fase { font: 500 italic 1rem/1 var(--serif); color: var(--ouro); }
.altimetro__trilho { position: relative; width: 2px; height: 120px; background: rgba(255, 255, 255, .18); margin: 4px 0; border-radius: 2px; }
.altimetro__trilho i { position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 10px var(--ouro); will-change: transform; }

/* ---------- movimento reduzido: cenas estáticas, tudo legível ------------ */
.reduz .linha > span { transform: none !important; transition: none !important; }
.reduz .hero__chip, .reduz .hero__texto, .reduz .hero__acoes { opacity: 1; transform: none; transition: none; }
.reduz .astro { position: absolute; top: calc(var(--faixa) + 52vh); left: auto; right: 4vw; margin: 0; opacity: 1; transition: none; --h: min(60vh, 560px); }
.reduz .subida { height: auto; }
.reduz .subida__palco { position: relative; height: auto; min-height: 100vh; padding: 16vh 0; }
.reduz .subida__frases { position: relative; inset: auto; display: grid; gap: 12vh; padding: 0 var(--gutter); }
.reduz .frase { position: relative; left: auto; top: auto; transform: none; max-width: 900px; }
.reduz .frase__alt { opacity: .8; }
.reduz .nuvens-frente, .reduz .nuvens-tras, .reduz .subida__branco { display: none; }
.reduz .preenche .p { opacity: 1; }
.reduz .capitulos { height: auto; }
.reduz .capitulos__palco { position: relative; height: auto; padding: 14vh 0; overflow: visible; }
.reduz .capitulos__orbitas { display: none; }
.reduz .capitulos__lista { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; min-height: 0; padding: 0 var(--gutter); }
.reduz .capitulos__marcos { display: none; }
.reduz .capitulo { position: relative; top: auto; visibility: visible; margin-bottom: 9vh; max-width: 620px; }
.reduz .capitulo * { opacity: 1 !important; transform: none !important; }
.reduz .constelacoes { height: auto; }
.reduz .constelacoes__palco { position: relative; height: auto; padding: 12vh 0; overflow: visible; }
.reduz .constelacoes__cabeca { position: relative; top: auto; left: auto; right: auto; padding: 0 var(--gutter); }
.reduz .constelacoes__contador, .reduz .constelacoes__barra { display: none; }
.reduz .constelacao { position: relative; inset: auto; opacity: 1; visibility: visible; padding: 50px var(--gutter); transition: none; }
.reduz .c-linhas line, .reduz .c-linhas polyline { stroke-dashoffset: 0; }
.reduz .c-estrelas circle { transform: none; }
.reduz .c-rotulos text { opacity: 1; }
.reduz .momento > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}