@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat-latin-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('assets/fonts/sourcesans3-latin-variable.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

:root{--font-display:'Montserrat',Arial,sans-serif;--font-body:'Source Sans 3','Segoe UI',sans-serif;--radius-lg:.35rem;--radius-md:.25rem}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.7}
[hidden]{display:none!important}
button,input,summary{font-family:inherit}
h1,h2,h3,.lunar-moment blockquote,.brand__text strong,.signature-line>span,.photo-stack__main figcaption,.stage-card__number,.stage-view__index,.guide__image-tag strong,.credential-list span,.google-rating strong,.weather-card>div>strong,.prepare summary,.site-footer__seal strong{font-family:var(--font-display);font-weight:500}
strong,b{font-weight:700}
.hero h1,.section-heading h2,.guide h2,.prepare h2,.final-cta h2{font-family:var(--font-display);font-weight:450;line-height:1.18;letter-spacing:-.04em}
.hero h1{font-size:clamp(2.75rem,4.7vw,4.3rem);max-width:17ch;line-height:1.14}
.section-heading h2,.guide h2,.prepare h2{font-size:clamp(2.1rem,3.8vw,3.4rem)}
.hero h1 strong,.cosmos-heading h2 strong,.lunar-moment blockquote strong,.final-cta h2 strong{color:var(--gold-soft)}
.hero h1 strong,.section-heading h2 strong,.guide h2 strong,.prepare h2 strong,.cosmos-heading h2 strong,.final-cta h2 strong{font-weight:700}
.brand__text strong{font-size:1.05rem;font-weight:700;letter-spacing:-.025em}
.brand__text small{font-size:.8125rem;letter-spacing:0}
.nav-links a,.button,.button--compact{font-family:var(--font-display);font-size:.875rem;font-weight:600;letter-spacing:0}
.eyebrow{font-family:var(--font-display);font-size:.75rem;letter-spacing:.09em;font-weight:600}
.hero__trust{font-size:.9375rem;gap:.6rem 1rem}
.hero__lead{font-size:1.1875rem;line-height:1.65;max-width:32rem}
.hero__lead strong{color:#fff}
.hero__actions{gap:.65rem;margin-top:1.6rem}
.button{border-radius:.25rem;box-shadow:none;min-height:3.3rem;padding:.8rem 1.1rem}
.button--gold:hover{box-shadow:0 6px 25px #f5aa1c20}
.intro::before,.feature-card::before,.journey::after{display:none}
.intro,.pillars,.prepare{background:#f0f1ea}
.stage-card,.stage-view,.feature-card,.review-card,.google-rating,.weather-card,.site-footer__seal,.guide__image-tag{border-radius:.35rem}
.feature-card__icon,.weather-card__icon{border:0;border-radius:0}
.stage-card>i{border:0}
.feature-card h3{font-size:1.6rem;line-height:1.25;letter-spacing:-.03em;font-weight:600}
.feature-card p,.credential-list li{font-size:1.0625rem}
.stage-card strong{font-size:1rem;font-weight:600}
.stage-card small,.stage-view__live,.guide__image-tag span,.google-rating small{font-size:.875rem}
.stage-view__body>p{font-size:.8125rem}
.weather-card p{font-size:1rem}
.stage-view__body>span{font-size:1.125rem}
.stage-view__body h3{font-size:1.9rem;line-height:1.25;font-weight:600;letter-spacing:-.025em}
.signature-line{font-size:.8rem;letter-spacing:.025em}
.review-card>p{font-family:var(--font-body);font-size:1.25rem;line-height:1.65;font-weight:400}
.review-card footer strong{font-size:.9375rem}
.guide__lead{font-family:var(--font-body);font-size:1.25rem!important;line-height:1.6!important;font-weight:400}
.photo-stack{min-height:34rem;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:1rem;perspective:none}
.photo-stack figure{position:relative;inset:auto;width:100%;height:100%;transform:none;border:0;border-radius:.3rem;box-shadow:none}
.photo-stack__main{grid-row:span 2}
.photo-stack__main figcaption{font-size:1.15rem;font-weight:600;text-transform:none;letter-spacing:0;bottom:0;left:0;right:0;border:0;border-radius:0;background:linear-gradient(transparent,#020504bd);padding:3rem 1rem 1rem;backdrop-filter:none}
.guide__image{border-radius:.3rem}
.lunar-moment__media::after{background:linear-gradient(90deg,#020304ed 6%,#020304ae 48%,#02030425),linear-gradient(transparent 65%,#020304b8)}
.lunar-moment blockquote{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.2;font-weight:400;letter-spacing:-.035em;max-width:20ch}
.final-cta h2{font-size:clamp(2.4rem,4.6vw,4.3rem);max-width:24ch}
.constellation{opacity:.55}
.site-footer__grid a,.site-footer__grid span,.site-footer__brand p{font-size:1rem}
.site-footer__grid strong{font-size:.875rem;letter-spacing:.025em}
.site-footer__bottom,.site-footer__seal small{font-size:.875rem}
.site-footer__seal span{font-size:.75rem}
.site-footer__seal strong{font-size:1rem;font-weight:600;line-height:1.5}
.prepare summary span{font-family:var(--font-body)}
.prepare summary{font-size:1rem;font-weight:600;line-height:1.5;letter-spacing:-.01em}

/* Still illustrations and the live celestial model share one stage panel. */
.stage-view__image-wrap{isolation:isolate}
.stage-view__image-wrap::after{pointer-events:none}
.stage-view__image-wrap[data-media=diagram]::after,.stage-view__image-wrap[data-media=celestial]::after{display:none}
.stage-view__image-wrap[data-media=diagram] #stage-image{object-fit:contain}
.stage-view__image-wrap[data-stage="06"] #stage-image{transform:scale(1.2);transform-origin:center bottom;object-position:center bottom}
.stage-view__image-wrap[data-media=diagram],.stage-view__image-wrap[data-media=celestial]{background:#02090e}
.stage-view__live{font-family:var(--font-body);font-size:.8125rem;font-weight:500;letter-spacing:.025em;text-transform:none;border-radius:.25rem}
.stage-view__celestial{position:absolute;inset:0}
.stage-view__celestial canvas,.full-moon__viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.stage-view__celestial.is-ready canvas,.full-moon__viewport.is-ready canvas{opacity:1}
.stage-view__celestial .scene-fallback,.full-moon__viewport .scene-fallback{width:100%;height:100%;object-fit:contain;transition:opacity .4s ease}
.stage-view__celestial.is-ready .scene-fallback,.full-moon__viewport.is-ready .scene-fallback{opacity:0;visibility:hidden}
/* A Lua cheia de baixo usa a MESMA foto de reserva: mesmo tratamento da Lua do
   topo (ver `.moon-fallback`): so aparece se o 3D falhar, e recortada no disco. */
.full-moon__viewport .scene-fallback{opacity:0;animation:lua-reserva .6s ease 6s forwards;-webkit-mask-image:radial-gradient(circle closest-side,#000 85%,transparent 86.5%);mask-image:radial-gradient(circle closest-side,#000 85%,transparent 86.5%)}
.full-moon__viewport.is-ready .scene-fallback{animation:none}
.no-webgl .full-moon__viewport .scene-fallback{opacity:1;animation:none}
/* ── O NOME DE CADA CONSTELAÇÃO ─────────────────────────────────────────────
   Camada de texto por cima do canvas, posicionada quadro a quadro pelo
   `cosmos.js`. Fica fora do fluxo e não recebe clique: é legenda, não
   controle. `will-change` avisa o navegador que estes nós se movem todo
   quadro, o que evita repintura da caixa inteira a cada giro. */
.sky-labels{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}
.sky-label{position:absolute;top:0;left:0;white-space:nowrap;font-family:var(--font-display);font-size:.8125rem;letter-spacing:.02em;color:#dce9ee;text-shadow:0 1px 6px #000,0 0 14px #000a;opacity:0;transition:opacity .25s ease;will-change:transform,opacity}
@media (max-width:720px){.sky-label{font-size:.6875rem}}
.celestial-legend{position:absolute;z-index:3;left:1.25rem;bottom:4.2rem;display:flex;gap:1rem;font-size:.8125rem;color:#c4d5d8}
/* ⚠️ `display:flex` VENCE o `hidden` do navegador. Sem esta linha, esconder a
   legenda pelo atributo não esconderia nada, e ela ficaria nomeando dois aros
   que já saíram da tela. */
.celestial-legend[hidden]{display:none}
.celestial-legend span{display:inline-flex;align-items:center;gap:.45rem}
.celestial-legend span::before{content:"";height:2px;width:1rem;background:#7edbd4}
.celestial-legend span+span::before{background:var(--gold-soft)}
.motion-toggle{position:absolute;z-index:4;bottom:1rem;left:1.25rem;min-height:44px;padding:.45rem .8rem;border:1px solid #b9cbd347;background:#04131be8;border-radius:.25rem;color:#e8eeee;font-size:.875rem;cursor:pointer}
.motion-toggle:hover,.motion-toggle:focus-visible{border-color:var(--gold-soft);color:var(--gold-soft)}
.lunar-moment{min-height:0;background:#020304}
.lunar-moment__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:3rem;padding-block:6rem}
.lunar-moment__content{padding-block:0}
.full-moon{position:relative;min-width:0;margin:0}
.full-moon__viewport{position:relative;width:100%;height:clamp(24rem,42vw,36rem)}
.full-moon figcaption{margin-top:1rem;text-align:center;font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.full-moon figcaption span{display:block;margin-top:.25rem;color:#99abae;font-family:var(--font-body);font-size:.875rem;font-weight:400}

/* Each fact is a star on the same route. Lines follow the markers on resize. */
.facts-constellation{position:relative;z-index:6;padding:2rem 0 3rem;margin-top:1rem}
.facts-constellation__items{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;align-items:start}
.fact{display:flex;align-items:center;flex-direction:column;text-align:center;margin-top:5rem;min-width:0}
.fact:nth-child(2){margin-top:0}
.fact:nth-child(3){margin-top:7rem}
.fact:nth-child(4){margin-top:2rem}
.fact__star{position:relative;display:block;flex:none;width:.55rem;height:.55rem;margin:.6rem 0 2rem;border-radius:50%;background:#fff0c6;box-shadow:0 0 8px #ffd36daa,0 0 22px 5px #f5aa1c24;transition:box-shadow .35s,background .35s}
.fact__star::before,.fact__star::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(transparent,#fff5d8b8,transparent);pointer-events:none}
.fact__star::before{width:1px;height:1.5rem}
.fact__star::after{height:1px;width:1.5rem;background:linear-gradient(90deg,transparent,#fff5d8b8,transparent)}
.fact__body{min-width:0}
.fact__value{display:block;color:#f2f2eb;font-family:var(--font-display);font-size:clamp(2.5rem,4.5vw,3.65rem);font-weight:650;line-height:1.12;letter-spacing:-.055em;font-variant-numeric:lining-nums;white-space:nowrap;transition:color .35s}
.fact__value>span{font-size:.42em;font-weight:500;letter-spacing:-.015em}
.fact p{max-width:21ch;margin:.7rem auto 0;color:#bcc8c2;font-size:1rem;line-height:1.5;text-wrap:balance}
.facts-constellation__connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.facts-constellation__link{fill:none;stroke:#c8b77e;stroke-opacity:.48;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease,stroke-opacity .35s}
.facts-constellation__link:nth-child(2){transition-delay:.24s,0s}
.facts-constellation__link:nth-child(3){transition-delay:.48s,0s}
.facts-constellation.is-drawn .facts-constellation__link{stroke-dashoffset:0}
.facts-constellation__link.is-active{stroke-opacity:1}
@media(hover:hover){
  .fact:hover .fact__star{background:#fff;box-shadow:0 0 10px #ffd36d,0 0 30px 8px #f5aa1c38}
  .fact:hover .fact__value{color:var(--gold-soft)}
}

/* The Moon is a single lit sphere. Scrolling moves the light, not a frame. */
.hero{overflow:clip;padding-top:7.5rem;background:#030707;isolation:isolate}
.hero__backdrop{opacity:.2;filter:saturate(.6) brightness(.7);background-position:center 22%;transform:none}
.hero::before{background:linear-gradient(90deg,#030707ed 10%,#03070744 65%,#03070755)}
.hero__grid{align-items:start;grid-template-columns:1fr 1fr;gap:2.5rem;min-height:160svh}
.hero__copy{position:sticky;top:max(7rem,calc(50svh - 21rem));padding-block:1rem}
.moon-chapter{height:160svh;min-width:0}
.moon-sticky{position:sticky;top:max(6.5rem,calc(50svh - 20rem));padding-bottom:1.5rem}
.moon-viewport{position:relative;width:100%;height:clamp(23rem,39vw,34rem);overflow:hidden}
.moon-viewport canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease;pointer-events:none}
.moon-viewport.is-ready canvas{opacity:1}
/* A FOTO DE RESERVA DA LUA (24/09/2026, o dono viu em producao): "quando eu
   entro na pagina a lua aparece com um quadrado em volta e depois some".
   A foto e uma Lua CHEIA sobre um quadrado PRETO, e aparecia na hora, enquanto
   o 3D carregava: o preto puro destoava do fundo com estrelas (o quadrado), e
   ao ficar pronto o 3D trocava a Lua cheia pela crescente que a legenda anuncia
   (a Lua "sumia"). Agora:
   1. ela NAO aparece enquanto o 3D carrega; so se ele falhar: na hora quando o
      aparelho nao tem WebGL (`.no-webgl`), ou depois de 6 s sem ficar pronto;
   2. quando aparece, e recortada no DISCO (a Lua ocupa 85,6% da foto, no
      centro; `closest-side` e metade do lado desenhado pelo `contain`), sem
      quadrado. `mix-blend-mode` nao serviria: o bloco preso (`sticky`) isola a
      mistura e o preto continuaria preto.
   ⚠️ Animacao vence declaracao comum no cascata: por isso o `animation:none`
   junto do `is-ready`, senao o `forwards` traria a foto de volta. */
.moon-fallback{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease;animation:lua-reserva .6s ease 6s forwards;-webkit-mask-image:radial-gradient(circle closest-side,#000 85%,transparent 86.5%);mask-image:radial-gradient(circle closest-side,#000 85%,transparent 86.5%)}
@keyframes lua-reserva{to{opacity:.9}}
.moon-viewport.is-ready .moon-fallback{opacity:0;visibility:hidden;animation:none}
.no-webgl .moon-fallback{opacity:.9;animation:none}
.moon-caption{max-width:24rem;margin:0 auto;text-align:center}
.cosmos-kicker{display:block;color:var(--gold-soft);font-size:.875rem;letter-spacing:.065em}
.moon-caption p{margin:.65rem 0 .6rem;font-family:var(--font-display);font-size:1.75rem;font-weight:500;line-height:1.3;letter-spacing:-.025em}
.moon-hint{display:block;color:#d3d8d1;font-size:.875rem}
.moon-caption small{display:block;color:#b8c0b5;font-size:.75rem;line-height:1.5;margin-top:.3rem}
#moon-phase-control{display:block;width:min(16rem,80%);margin:1rem auto .3rem;accent-color:var(--gold);height:1.75rem;cursor:ew-resize}
#moon-phase-control:focus-visible{outline:2px solid var(--gold);outline-offset:5px}

/* Planetary exploration uses real surface maps; galaxy imagery is separate. */
.cosmos-section{position:relative;isolation:isolate;overflow:clip;padding:7rem 0 0;background:#030609}
/* 24/09/2026: o fundo deixou de ser a M51 do Hubble (so se ve com telescopio)
   e passou a ser as Nuvens de Magalhaes FOTOGRAFADAS NA CANASTRA pela CanAstro,
   que da serra se veem a olho nu (pedido do dono).
   ⚠️ A foto fica presa ao PE da secao, atras do texto "Ao fundo...", e nao
   espalhada pela secao inteira como a M51: a secao e muito alta, o `cover`
   esticava a foto na altura toda, e atras do texto so apareciam os galhos do
   pe da foto, com as duas nuvens escondidas atras dos planetas. Legenda que
   diz "ao fundo" tem de mostrar o que diz. O degrade de cima funde a faixa
   com o fundo escuro da secao. */
.galaxy-backdrop{position:absolute;z-index:-1;inset:auto 0 0;height:38rem;pointer-events:none;background:linear-gradient(#030609 0%,#030609a6 12%,#03060959 45%,#03060973 100%),url('assets/cosmos/nuvens-de-magalhaes.jpg') center 40% / cover no-repeat}
.cosmos-heading{max-width:58rem;text-align:center}
.cosmos-heading .eyebrow{justify-content:center}
.cosmos-heading h2{font-family:var(--font-display);font-size:clamp(2.4rem,4.8vw,4.5rem);font-weight:450;line-height:1.18;letter-spacing:-.04em;margin:0}
.cosmos-heading>p:not(.eyebrow){max-width:37rem;margin:1.7rem auto 0;color:#c4cbd1;font-size:1.125rem;line-height:1.7}
.solar-explorer{position:relative}
/* ── A CENA VAI DE BORDA A BORDA (pedido do dono, 20/09/2026: "sem margens").
   O explorador nasceu dentro de `.container`, que reserva 3rem de rua dos dois
   lados e trava em 76rem: numa tela de 1440 a fila de planetas ficava num
   quadro de 1216 com sobra preta dos dois lados. Agora o BLOCO ocupa a largura
   inteira e a rua volta só para o texto, que precisa dela para ser lido. A
   cena ganha o resto: como o enquadramento é `largura / proporção`, canvas
   mais largo deixa os planetas MAIORES, não mais espalhados. */
.solar-explorer.container{width:100%;max-width:none;margin-inline:0}
.solar-explorer>.planet-nav,
.solar-explorer>.planet-story{width:min(calc(100% - 3rem),var(--container));margin-inline:auto}
/* ── A VIAGEM DO SOL A NETUNO ───────────────────────────────────────────────
   O trilho é alto e o explorador fica preso dentro dele: rolar deixa de
   empurrar a página e passa a conduzir a câmera pelos nove corpos, na ordem.
   São ~0,42 tela por corpo, que é tempo de ver sem virar arrastar.
   ⚠️ Só em tela grande e com movimento permitido. Nos dois casos de baixo o
   trilho vira altura automática e o explorador volta a ser um bloco normal,
   com os botões como único controle — que é exatamente a seção aprovada. */
.solar-journey{position:relative;height:380svh}
/* ⚠️ ALTURA FIXA DE UMA TELA, e a CENA é quem cede. Com `min-height` o palco
   crescia além da janela (cena de 39rem + barra + texto = 964px numa janela
   de 810) e o painel sobrava embaixo da dobra, onde ninguém alcança: bloco
   preso não rola por dentro. O dono abriu e viu a página cortada. Agora o
   palco tem exatamente uma tela e a cena encolhe para o que sobra, que é a
   única parte que encolhe sem perder informação. */
.solar-journey>.solar-explorer{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;height:100svh}
/* Preso ao caso em que a viagem EXISTE. Solto, este seletor (três classes)
   venceria o `.solar-viewport.is-compact` (duas) e quebraria a altura da
   cena no celular, que não tem viagem nenhuma. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .solar-journey>.solar-explorer .solar-viewport{flex:1 1 auto;height:auto;min-height:13rem;max-height:39rem;margin-top:0}
  .solar-journey>.solar-explorer .planet-story{padding-top:1.6rem}
}
@media (max-width:900px){
  .solar-journey{height:auto}
  .solar-journey>.solar-explorer{position:static;height:auto;display:block}
}
@media (prefers-reduced-motion:reduce){
  .solar-journey{height:auto}
  .solar-journey>.solar-explorer{position:static;height:auto;display:block}
}
.solar-viewport{position:relative;height:clamp(25rem,41vw,39rem);width:100%;margin-top:2rem;scroll-margin-top:6rem;touch-action:pan-y}
.solar-viewport.is-compact{height:58rem}
.solar-viewport.is-compact.is-focused{height:clamp(24rem,85vw,32rem)}
.solar-viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s ease;cursor:grab;touch-action:pan-y}
.solar-viewport.is-ready canvas{opacity:1}
.solar-viewport canvas:active{cursor:grabbing}
.planet-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .45s ease}
.solar-viewport.is-ready .planet-labels{opacity:1}
.planet-label{position:absolute;top:0;left:0;font-size:.875rem;color:#e3e5e3;text-shadow:0 2px 8px #000;white-space:nowrap;transition:opacity .2s}
.solar-viewport.is-compact .planet-label{font-size:1rem}
.solar-fallback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(30rem,85%);font-size:1.1rem;text-align:center;color:#d1d7d8;line-height:1.8}
.solar-viewport.is-ready .solar-fallback{display:none}
.planet-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem .9rem;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;padding:.85rem 0}
.planet-nav button{padding:.6rem .45rem;min-height:44px;border:0;border-bottom:1px solid transparent;background:none;color:#d1d7d8;font-family:var(--font-display);font-size:.875rem;font-weight:500;cursor:pointer;transition:color .2s,border-color .2s}
.planet-nav button:hover,.planet-nav button[aria-pressed=true]{color:var(--gold-soft);border-bottom-color:var(--gold)}
.planet-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.planet-story{display:grid;grid-template-columns:1fr 1.7fr;column-gap:3rem;padding:2.5rem 1rem 1rem;min-height:13rem;max-width:62rem;margin:auto}
.planet-story .cosmos-kicker{grid-column:1;font-size:.875rem}
.planet-story h3{grid-column:1;font-size:2.25rem;font-weight:600;line-height:1.2;letter-spacing:-.035em;margin:.7rem 0 0}
.planet-story>p{grid-column:2;grid-row:1 / 3;color:#c4cbd1;font-size:1.125rem;margin:.1rem 0 0;line-height:1.75}
/* A frase do tour. ⚠️ Precisa de célula PRÓPRIA: a regra acima manda todo `p`
   filho para a coluna 2, linhas 1 a 3, e sem isto ela cairia exatamente em
   cima da descrição. Fica logo abaixo, na mesma coluna, com um fio dourado à
   esquerda para dizer que ali a conversa mudou: sai a enciclopédia e entra o
   que a pessoa vê indo. */
.planet-story>p#planet-tour{grid-column:2;grid-row:3;align-self:start;margin:1.15rem 0 0;padding:.05rem 0 .05rem 1rem;border-left:2px solid var(--gold);color:var(--gold-soft);font-size:1rem;line-height:1.65}
.planet-story>p#planet-tour[hidden]{display:none}
.cosmos-note{font-size:.875rem;line-height:1.7;color:#aeb8c0;text-align:center;max-width:55rem;margin:1rem auto 0}
.galaxy-note{padding-block:7rem 8rem;max-width:54rem;text-align:center}
.galaxy-note>span{color:var(--gold-soft);letter-spacing:.11em;font-size:.8rem}
.galaxy-note>p{font-family:var(--font-display);font-size:clamp(2.1rem,4vw,3.8rem);font-weight:400;line-height:1.2;letter-spacing:-.035em;margin:1.2rem 0 1.5rem}
.galaxy-note small{display:block;font-size:1rem;line-height:1.7;color:#c4cbd1}
.cosmos-credits{margin-top:1.5rem;padding-block:1rem;font-size:.75rem;color:#a3aba9;border-top:1px solid #ffffff14}
.cosmos-credits summary{cursor:pointer;min-height:2.3rem}
.cosmos-credits a{text-decoration:underline;text-underline-offset:3px}
.cosmos-credits p{max-width:70rem}
.no-webgl .moon-chapter{height:auto}
.no-webgl .moon-sticky{position:relative;top:0}
.no-webgl .hero__grid{min-height:auto}
.no-webgl .hero__copy{position:relative;top:0}
.no-webgl #moon-phase-control{display:none}

@media(max-width:1120px){
  .hero__grid{gap:1.5rem}
  .hero__actions .button{font-size:.875rem}
  .hero__copy{top:7rem}
  .hero h1{font-size:clamp(2.75rem,4.7vw,3.4rem)}
  .moon-viewport{height:28rem}
  .facts-constellation__items{gap:1rem}
  .fact{margin-top:4rem}
  .fact:nth-child(3){margin-top:5rem}
  .fact p{max-width:19ch}
}
@media(max-width:900px){
  .hero{padding-top:6.8rem}
  .hero__grid{display:block;min-height:0}
  .hero__copy{position:relative;top:0;max-width:42rem;margin-inline:auto}
  .hero h1{font-size:clamp(2.75rem,6vw,3.8rem);max-width:18ch}
  .moon-chapter{height:165svh;margin-top:1rem}
  .moon-sticky{top:calc(50svh - 19rem);max-width:37rem;margin-inline:auto}
  .moon-viewport{height:26rem}
  .photo-stack{min-height:32rem;max-width:42rem;margin:auto;width:100%}
  .planet-story{column-gap:1.5rem}
  .lunar-moment__grid{grid-template-columns:1fr;gap:2rem;padding-block:5rem}
  .lunar-moment__content{max-width:42rem;margin-inline:auto}
  .full-moon{width:min(100%,34rem);margin-inline:auto}
}
@media(max-width:720px){
  .facts-constellation{padding:1rem 0 2rem}
  .facts-constellation__items{grid-template-columns:1fr;gap:2.1rem;max-width:26rem;margin-inline:auto}
  .fact:nth-child(n){display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1.25rem;margin-top:0;text-align:left;align-items:center}
  .fact__star{justify-self:start;margin:0 0 0 .9rem}
  .fact:nth-child(even) .fact__star{margin-left:1.65rem}
  .fact__value{font-size:2.65rem;letter-spacing:-.045em}
  .fact p{max-width:none;margin:.4rem 0 0;text-wrap:initial}
}
@media(max-width:640px){
  .brand__text strong{font-size:1.05rem}
  .hero h1{font-size:clamp(2.25rem,9vw,3.25rem);line-height:1.16}
  .hero__lead{font-size:1.125rem}
  .hero__trust{display:flex;font-size:.9375rem}
  .hero__actions .button{font-size:.875rem}
  .moon-chapter{height:160svh;margin-top:0}
  .moon-sticky{top:max(5rem,calc(50svh - 16rem));padding-bottom:0}
  .moon-viewport{height:min(84vw,23rem)}
  .moon-caption p{font-size:1.65rem}
  .cosmos-kicker{font-size:.875rem}
  .photo-stack{min-height:27rem;gap:.65rem;grid-template-columns:1.45fr 1fr}
  .photo-stack__main figcaption{font-size:1rem}
  .feature-card h3{font-size:1.55rem}
  .section-heading h2,.guide h2,.prepare h2{font-size:clamp(1.9rem,7.6vw,2.75rem)}
  .stage-list{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0;gap:.6rem}
  .stage-card{min-height:4.8rem;gap:.7rem;padding:.75rem .9rem}
  .stage-card small{font-size:.875rem}
  .stage-view__image-wrap{height:23rem}
  .stage-view__live{top:1rem;left:1rem;max-width:calc(100% - 2rem);font-size:.8125rem}
  .celestial-legend{left:1rem;bottom:4rem;gap:.75rem;font-size:.75rem}
  .motion-toggle{left:1rem}
  .full-moon__viewport{height:min(88vw,26rem)}
  .stage-view__body h3{font-size:1.75rem}
  .cosmos-section{padding-top:5rem}
  .cosmos-heading h2{font-size:clamp(2rem,8vw,2.9rem)}
  .cosmos-heading>p:not(.eyebrow){font-size:1.125rem}
  .solar-viewport{height:28rem;margin-top:1.5rem}
  .planet-label{font-size:.875rem}
  .planet-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem .5rem;padding:.6rem 0}
  .planet-nav button[data-planet=all]{grid-column:1/-1}
  .planet-nav button{padding:.55rem .15rem}
  .planet-story{display:block;padding:2rem 0 0;min-height:16rem}
  .planet-story h3{font-size:2rem;margin-bottom:1rem}
  .cosmos-note{font-size:.75rem;text-align:left;margin-top:.8rem}
  .galaxy-note{padding-block:5rem 6rem}
  /* No celular a faixa e estreita e cabe UMA nuvem: fica a Grande (a esquerda na foto). */
  .galaxy-backdrop{height:34rem;background-size:auto,cover;background-position:center,30% 50%}
  .review-card>p{font-size:1.25rem}
  .final-cta h2{font-size:clamp(2rem,8vw,2.9rem)}
  .final-cta__content>small{font-size:.875rem}
  .mobile-cta{border-radius:.3rem}
  .mobile-cta strong,.mobile-cta span{font-size:.875rem}
}
@media(max-height:720px) and (min-width:901px){
  .hero__copy{position:relative;top:0}
  .moon-sticky{top:5rem}
  .moon-viewport{height:22rem}
  .moon-caption p{font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .hero__grid{min-height:0;align-items:center}
  .hero__copy,.moon-sticky{position:relative;top:0}
  .moon-chapter{height:auto}
  .facts-constellation__link{stroke-dashoffset:0;transition:none}
}