/* =====================================================================
   A MATÉRIA — tema espacial
   Página editorial escura, com profundidade e movimento.
   Tudo aqui é escopado em .tema-espaco para não vazar no resto do site.
   ===================================================================== */

.tema-espaco {
  --void:      #04060c;   /* preto azulado do espaço profundo */
  --void-2:    #080d18;
  --void-3:    #0e1626;
  --ouro:      #d4af37;   /* dourado da matéria */
  --ouro-claro:#f0e0a8;
  --gelo:      #dfe6f2;   /* branco frio do texto */
  --gelo-mudo: #97a3ba;
  --linha:     rgba(223, 230, 242, 0.12);

  background: var(--void);
  color: var(--gelo);
}

/* ===== Céu: três camadas de estrelas com profundidades diferentes ===== */
.ceu { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ceu__camada {
  position: absolute; inset: -50% 0 0 0; height: 200%;
  background-repeat: repeat;
  will-change: transform;
}
/* estrelas pequenas, muitas, lentas */
.ceu__camada--1 {
  background-image:
    radial-gradient(1px 1px at 20% 12%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 68% 28%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 41% 61%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 85% 74%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 12% 88%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 92% 18%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 33% 33%, rgba(255,255,255,0.55), transparent);
  background-size: 420px 420px;
  animation: cintila 5.5s ease-in-out infinite alternate;
}
/* estrelas médias, douradas */
.ceu__camada--2 {
  background-image:
    radial-gradient(1.6px 1.6px at 15% 40%, rgba(240,224,168,0.85), transparent),
    radial-gradient(1.6px 1.6px at 72% 62%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 48% 15%, rgba(240,224,168,0.7), transparent),
    radial-gradient(1.6px 1.6px at 88% 88%, rgba(255,255,255,0.7), transparent);
  background-size: 680px 680px;
  animation: cintila 7.5s ease-in-out infinite alternate-reverse;
}
/* poucas estrelas grandes, com brilho */
.ceu__camada--3 {
  background-image:
    radial-gradient(2.4px 2.4px at 30% 70%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2.4px 2.4px at 80% 25%, rgba(240,224,168,0.9), transparent);
  background-size: 1100px 1100px;
  animation: cintila 9s ease-in-out infinite alternate;
}
@keyframes cintila { from { opacity: 0.55; } to { opacity: 1; } }

/* nebulosas: manchas de luz muito suaves, dão profundidade sem pesar */
.ceu__nebula {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5;
}
.ceu__nebula--a { top: -10%; left: -8%; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(76,120,196,0.30), transparent 68%); }
.ceu__nebula--b { top: 34%; right: -14%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(212,175,55,0.20), transparent 68%); }
.ceu__nebula--c { bottom: -12%; left: 18%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(150,80,190,0.16), transparent 70%); }

/* conteúdo acima do céu — só o conteúdo mesmo.
   Não pode pegar .transicao, .progresso, .capnav e .lbx: esses são fixos
   e um position:relative aqui quebraria os quatro. */
.tema-espaco > .topbar,
.tema-espaco > section,
.tema-espaco > .footer { position: relative; z-index: 1; }
/* O cabeçalho é sticky e precisa ficar ACIMA das seções. Ele já vinha com
   z-index:50 do styles.css, mas a regra acima o incluía e derrubava para 1 —
   empatado com as seções, que vêm depois no HTML e por isso venciam. Era isso
   que fazia o conteúdo passar por cima ao rolar e o botão do menu parar de
   receber clique. Também precisa vencer o .veu-topo (z-index:40). */
.tema-espaco > .header { position: sticky; z-index: 50; }

/* ===== Cabeçalho e rodapé no escuro ===== */
.tema-espaco .topbar { background: #01030a; color: var(--gelo-mudo); border-bottom: 1px solid var(--linha); }
.tema-espaco .header {
  background: rgba(4, 6, 12, 0.72); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linha);
}
.tema-espaco .nav a { color: var(--gelo); }
.tema-espaco .nav a::after { background: var(--ouro); }
.tema-espaco .menu-btn__i, .tema-espaco .menu-btn__i::before, .tema-espaco .menu-btn__i::after { background: var(--gelo); }
.tema-espaco.is-open .menu-btn__i { background: transparent; }
.tema-espaco .footer { background: #01030a; border-top: 1px solid var(--linha); color: var(--gelo-mudo); }
.tema-espaco .footer__tag, .tema-espaco .footer__copy, .tema-espaco .footer__staff { color: var(--gelo-mudo); }
.tema-espaco .footer__insta { color: var(--ouro); }
.tema-espaco .footer__logo { filter: brightness(0) invert(1); opacity: 0.85; }
/* o logo do cabeçalho sumia no escuro (e o dourado global do styles.css
   não tem contraste aqui): no tema espaço a gema fica branca, como o logo
   do rodapé, e o nome escrito acompanha no gelo */
/* pega a gema E o nome (os dois são recortes do mesmo PNG).
   Opacidade CHEIA + um sopro de brilho: traço fino claro sobre fundo
   escuro perde espessura percebida — qualquer transparência aqui deixava
   a tipografia do logo "magra" */
.tema-espaco .brand img {
  filter: brightness(0) invert(1) drop-shadow(0 0 0.5px rgba(238, 242, 247, 0.8));
}

/* ===== Barra de progresso da leitura ===== */
.progresso {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
  z-index: 120; transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(212,175,55,0.7);
}

/* ===== Navegação lateral por capítulo ===== */
.capnav { position: fixed; right: 1.6rem; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 0.9rem; }
.capnav__i { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; cursor: pointer; background: none; border: none; padding: 0; }
.capnav__t { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gelo-mudo); opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
.capnav__p { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gelo-mudo); transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.capnav__i:hover .capnav__t { opacity: 1; transform: none; }
.capnav__i.is-active .capnav__p { background: var(--ouro); border-color: var(--ouro); transform: scale(1.5); box-shadow: 0 0 10px rgba(212,175,55,0.8); }
.capnav__i.is-active .capnav__t { opacity: 1; transform: none; color: var(--ouro-claro); }

/* ===== Abertura ===== */
.esp-hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 6rem 1.5rem 4rem; }
.esp-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; will-change: transform; }
.esp-hero__veu { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 18%, rgba(4,6,12,0.82) 72%, var(--void) 100%); }
.esp-hero__in { position: relative; max-width: 54rem; }
.esp-hero__eyebrow { font-size: 0.66rem; letter-spacing: 0.44em; text-transform: uppercase; color: var(--ouro); margin-bottom: 1.8rem; }
.esp-hero__title { font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 8vw, 5.4rem); line-height: 1.04; letter-spacing: -0.01em; color: #fff; }
.esp-hero__title em { font-style: normal; display: block; background: linear-gradient(100deg, var(--ouro-claro), var(--ouro) 45%, #fff 70%, var(--ouro-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% auto; animation: brilha 7s linear infinite; }
@keyframes brilha { to { background-position: 220% center; } }
.esp-hero__sub { font-size: 0.7rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gelo-mudo); margin-top: 2rem; }
.esp-hero__lead { color: var(--gelo); font-size: clamp(1rem, 2.2vw, 1.22rem); line-height: 1.6; margin-top: 2rem; max-width: 34rem; margin-inline: auto; }
.esp-hero__desce { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--gelo-mudo); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; }
.esp-hero__desce span { width: 1px; height: 44px; background: linear-gradient(var(--ouro), transparent); animation: desce 2.2s ease-in-out infinite; }
@keyframes desce { 0%,100% { opacity: 0.2; transform: scaleY(0.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ===== Seções ===== */
.esp-sec { padding: clamp(5rem, 14vh, 9rem) clamp(1.25rem, 5vw, 3rem); position: relative; }
.esp-wrap { max-width: 44rem; margin: 0 auto; }
.esp-sec__num { position: absolute; top: clamp(2rem, 6vh, 4rem); left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: clamp(9rem, 26vw, 20rem); line-height: 1; color: rgba(223,230,242,0.035); pointer-events: none; user-select: none; z-index: -1; }
.esp-kicker { font-size: 0.64rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ouro); margin-bottom: 1.4rem; }
.esp-h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 4.4vw, 2.9rem); line-height: 1.16; color: #fff; margin-bottom: 1.8rem; }
.esp-h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem, 2.8vw, 1.7rem); color: var(--ouro-claro); margin: 3rem 0 1.2rem; }
.esp-p { font-size: 1.02rem; line-height: 1.85; color: var(--gelo-mudo); margin-bottom: 1.3rem; }
.esp-p strong { color: #fff; font-weight: 700; }
.esp-p em { font-style: normal; color: var(--ouro-claro); }

/* ===== Figuras e galeria ===== */
.esp-fig { margin: 2.6rem 0; }
.esp-fig__q { position: relative; overflow: hidden; cursor: zoom-in; background: var(--void-2); }
.esp-fig__q img { width: 100%; height: auto; display: block; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter 0.6s; }
.esp-fig__q:hover img { transform: scale(1.045); filter: brightness(1.08); }
.esp-fig__q::after { content: "⤢"; position: absolute; right: 0.8rem; bottom: 0.8rem; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(4,6,12,0.7); color: var(--ouro-claro); border: 1px solid var(--linha); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.35s; font-size: 0.85rem; }
.esp-fig__q:hover::after { opacity: 1; }
.esp-fig figcaption { font-size: 0.78rem; color: var(--gelo-mudo); line-height: 1.55; margin-top: 0.7rem; }
.esp-fig figcaption span { display: block; font-size: 0.66rem; color: var(--ouro); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.25rem; }
.esp-fig--larga { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.esp-fig--larga figcaption { max-width: 44rem; margin-inline: auto; padding: 0 1.25rem; }
.esp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 2.6rem 0; }
.esp-duo .esp-fig { margin: 0; }

/* ===== Cartões ===== */
.esp-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 3rem 0; }
.esp-card { position: relative; background: linear-gradient(160deg, rgba(223,230,242,0.06), rgba(223,230,242,0.015)); border: 1px solid var(--linha); padding: 1.6rem 1.2rem; overflow: hidden; transition: transform 0.5s cubic-bezier(.2,.7,.2,1), border-color 0.5s; }
.esp-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(212,175,55,0.14), transparent 45%); opacity: 0; transition: opacity 0.45s; }
.esp-card:hover { transform: translateY(-6px); border-color: rgba(212,175,55,0.4); }
.esp-card:hover::before { opacity: 1; }
.esp-card__n { position: relative; display: block; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ouro-claro); margin-bottom: 0.6rem; }
.esp-card p { position: relative; font-size: 0.88rem; line-height: 1.65; color: var(--gelo-mudo); }

/* ===== Números que contam ===== */
.esp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 3rem 0; }
.esp-num { text-align: center; padding-top: 1.1rem; border-top: 1px solid var(--linha); position: relative; }
.esp-num::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--ouro); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.esp-num.is-in::before { width: 100%; }
.esp-num strong { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.2rem); color: #fff; letter-spacing: -0.01em; }
.esp-num span { display: block; font-size: 0.76rem; line-height: 1.5; color: var(--gelo-mudo); margin-top: 0.5rem; }

/* ===== Citação ===== */
.esp-cit { position: relative; font-family: var(--serif); font-size: clamp(1.15rem, 3vw, 1.7rem); line-height: 1.48; color: #fff; text-align: center; margin: 4rem auto; max-width: 36rem; padding: 2.2rem 0; }
.esp-cit::before, .esp-cit::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro), transparent); }
.esp-cit::before { top: 0; } .esp-cit::after { bottom: 0; }

/* ===== Esquemas SVG ===== */
.esp-esq { margin: 3rem 0; }
.esp-esq svg { width: 100%; height: auto; display: block; background: linear-gradient(160deg, rgba(223,230,242,0.05), transparent); border: 1px solid var(--linha); }
.esp-esq figcaption { font-size: 0.78rem; color: var(--gelo-mudo); line-height: 1.55; margin-top: 0.7rem; }
.esp-svgt { font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; fill: var(--gelo-mudo); }
.esp-svgt--b { font-weight: 700; fill: var(--ouro-claro); }
.esp-svgt--s { font-size: 11px; letter-spacing: 0.06em; fill: rgba(151,163,186,0.85); }
.esp-svgt--fria { fill: #9fc4ff; }
/* o traço só fica escondido se o JS estiver vivo para desenhá-lo */
.js .esp-traco { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); }
.js .is-in .esp-traco { animation: desenha 1.8s cubic-bezier(.2,.7,.2,1) var(--del, 0s) forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }

/* =====================================================================
   ESQUEMAS EM CAMADAS
   O diagrama se monta em ordem: primeiro o que está no fundo, depois os
   rótulos, por último o que acontece por cima. Cada elemento carrega o
   próprio atraso em --del. Sem JS nada disso se aplica: aparece tudo.
   ===================================================================== */

/* aparecer no lugar (rótulos, eixos, linhas de apoio) */
.js .esp-esq .esq-in { opacity: 0; transition: opacity 0.8s ease var(--del, 0s); }
.js .esp-esq.is-in .esq-in { opacity: 1; }

/* camadas que crescem a partir de um ponto do desenho (--ox/--oy no <svg>) */
.js .esp-esq .esq-cam {
  opacity: 0; transform: scale(0.74);
  transform-box: view-box; transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: opacity 0.9s ease var(--del, 0s),
              transform 1.3s cubic-bezier(.2,.7,.2,1) var(--del, 0s);
}
.js .esp-esq.is-in .esq-cam { opacity: 1; transform: none; }

/* faixa que se abre da esquerda para a direita */
.js .esp-esq .esq-faixa {
  opacity: 0; transform: scaleX(0.06);
  transform-box: fill-box; transform-origin: left center;
  transition: opacity 0.5s ease var(--del, 0s),
              transform 1.1s cubic-bezier(.2,.7,.2,1) var(--del, 0s);
}
.js .esp-esq.is-in .esq-faixa { opacity: 1; transform: none; }

/* o que sobe pelo conduto (as gemas subindo com o magma) */
.js .esp-esq .esq-sobe {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease var(--del, 0s),
              transform 1.5s cubic-bezier(.16,.8,.24,1) var(--del, 0s);
}
.js .esp-esq.is-in .esq-sobe { opacity: 1; transform: none; }

/* onda de choque do meteorito: bate, expande, some — três vezes */
.js .esp-esq .esq-onda { opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .esp-esq.is-in .esq-onda { animation: impacto 2.6s ease-out var(--del, 0s) 3; }
@keyframes impacto {
  0%        { opacity: 0.8; transform: scale(0.15); }
  60%, 100% { opacity: 0;   transform: scale(3.6); }
}

/* ===== Etapas ===== */
.esp-etapas { list-style: none; margin: 3rem 0; display: grid; gap: 0.7rem; }
.esp-etapa { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.2rem; border-left: 2px solid var(--linha); background: linear-gradient(90deg, rgba(223,230,242,0.045), transparent); flex-wrap: wrap; transition: border-color 0.4s, background 0.4s; }
.esp-etapa:hover { border-left-color: var(--ouro); background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent); }
.esp-etapa__n { font-family: var(--serif); font-size: 0.82rem; color: var(--ouro); letter-spacing: 0.1em; }
.esp-etapa strong { font-family: var(--serif); font-size: 1.08rem; color: #fff; }
.esp-etapa em { font-style: normal; font-size: 0.82rem; color: var(--gelo-mudo); margin-left: auto; }

/* ===== Fecho ===== */
.esp-fim { padding: clamp(5rem, 14vh, 9rem) clamp(1.25rem, 5vw, 3rem); text-align: center; }
.esp-fim .esp-p { max-width: 38rem; margin-inline: auto; }
.esp-cta { display: inline-block; margin-top: 2.6rem; background: transparent; color: var(--ouro-claro); border: 1px solid var(--ouro); padding: 1.05rem 2.8rem; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; position: relative; overflow: hidden; transition: color 0.4s; }
.esp-cta::before { content: ""; position: absolute; inset: 0; background: var(--ouro); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.esp-cta:hover { color: var(--void); }
.esp-cta:hover::before { transform: scaleX(1); }
.esp-cta span { position: relative; }

.esp-fontes { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem); border-top: 1px solid var(--linha); }
.esp-fontes ul { list-style: none; display: grid; gap: 0.6rem; max-width: 44rem; margin: 0 auto; }
.esp-fontes li { font-size: 0.8rem; line-height: 1.6; color: var(--gelo-mudo); }
.esp-fontes strong { color: var(--ouro-claro); }

/* ===== Revelação no scroll =====
   Só escondemos se o JS estiver vivo para revelar (a classe .js vem do
   materia.js). Sem JS, o conteúdo aparece normalmente. */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv--d1 { transition-delay: 0.1s; } .js .rv--d2 { transition-delay: 0.2s; } .js .rv--d3 { transition-delay: 0.3s; }
/* imagens entram com corte, fica mais cinematográfico */
.js .rv-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.2,.7,.2,1); }
.js .rv-img.is-in { clip-path: inset(0 0 0 0); }

/* ===== Lightbox ===== */
.lbx { position: fixed; inset: 0; z-index: 200; background: rgba(2,4,10,0.96); backdrop-filter: blur(8px); display: none; place-items: center; padding: 3rem 1.2rem; }
.lbx.is-open { display: grid; animation: lbxIn 0.4s ease; }
@keyframes lbxIn { from { opacity: 0; } to { opacity: 1; } }
.lbx__img { max-width: min(1200px, 94vw); max-height: 78vh; width: auto; height: auto; object-fit: contain; animation: lbxZoom 0.5s cubic-bezier(.2,.7,.2,1); }
@keyframes lbxZoom { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.lbx__cap { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); max-width: 40rem; text-align: center; font-size: 0.82rem; color: var(--gelo-mudo); line-height: 1.5; padding: 0 1rem; }
.lbx__cap span { display: block; font-size: 0.66rem; color: var(--ouro); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.3rem; }
.lbx__x, .lbx__nav { position: absolute; background: none; border: 1px solid var(--linha); color: var(--gelo); cursor: pointer; display: grid; place-items: center; transition: border-color 0.3s, color 0.3s; }
.lbx__x { top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; }
.lbx__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.3rem; }
.lbx__nav--ant { left: 1.2rem; } .lbx__nav--prox { right: 1.2rem; }
.lbx__x:hover, .lbx__nav:hover { border-color: var(--ouro); color: var(--ouro-claro); }

/* ===== Responsivo ===== */
@media (max-width: 900px) { .capnav { display: none; } }
@media (max-width: 760px) {
  .esp-duo, .esp-tres, .esp-nums { grid-template-columns: 1fr; }
  .esp-etapa em { margin-left: 0; flex-basis: 100%; }
  .esp-svgt { font-size: 16px; }
  .esp-svgt--s { font-size: 14px; }
  .esp-hero { min-height: 92svh; }
  .lbx__nav { width: 40px; height: 40px; }
  .lbx__nav--ant { left: 0.5rem; } .lbx__nav--prox { right: 0.5rem; }
}

/* ===== Quem prefere menos movimento, recebe menos movimento ===== */
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv-img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .ceu__camada, .esp-hero__title em, .esp-hero__desce span { animation: none !important; }
  .esp-hero__foto { transform: none !important; }
  .js .is-in .esp-traco, .js .esp-traco { animation: none !important; stroke-dashoffset: 0; }
  /* os esquemas aparecem prontos, sem sequência */
  .js .esp-esq .esq-in,
  .js .esp-esq .esq-cam,
  .js .esp-esq .esq-faixa,
  .js .esp-esq .esq-sobe {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js .esp-esq .esq-onda { animation: none !important; opacity: 0 !important; }
}

/* ===== Mosaico de imagens (galeria dentro do capítulo) ===== */
.esp-mosaico { display: grid; gap: 1.1rem; margin: 2.8rem 0; }
.esp-mosaico--2 { grid-template-columns: 1fr 1fr; }
.esp-mosaico--destaque { grid-template-columns: 1.35fr 1fr; align-items: start; }
.esp-mosaico .esp-fig { margin: 0; }
.esp-mosaico--destaque .esp-col { display: grid; gap: 1.1rem; }
@media (max-width: 760px) {
  .esp-mosaico--2, .esp-mosaico--destaque { grid-template-columns: 1fr; }
}

/* =====================================================================
   BORDAS QUE SE DISSOLVEM NO FUNDO
   A imagem não tem moldura: ela desaparece no preto do site.
   ===================================================================== */
.esp-fig__q { background: transparent; }
.esp-fig__q img {
  -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 58%, rgba(0,0,0,0.55) 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 58%, rgba(0,0,0,0.55) 80%, transparent 100%);
}
/* a foto em largura total dissolve só nas laterais e embaixo */
.esp-fig--larga .esp-fig__q img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
                      linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
                      linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* brilho atrás da foto: dá a sensação de a imagem emitir luz */
.esp-fig__q::before {
  content: ""; position: absolute; inset: 8%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.16), transparent 68%);
  filter: blur(48px); opacity: 0; transition: opacity 1.2s ease;
}
.esp-fig__q.is-in::before, .rv-img.is-in .esp-fig__q::before,
.esp-fig__q:hover::before { opacity: 1; }
.esp-fig { position: relative; }
.esp-fig__q { position: relative; z-index: 0; }
/* o ⤢ não pode ser mascarado junto com a foto */
.esp-fig__q::after { z-index: 2; }

/* =====================================================================
   MAIS MOVIMENTO
   ===================================================================== */
/* nebulosas respirando devagar — o fundo nunca fica parado */
.ceu__nebula { animation: deriva 26s ease-in-out infinite alternate; }
.ceu__nebula--b { animation-duration: 34s; animation-delay: -8s; }
.ceu__nebula--c { animation-duration: 42s; animation-delay: -16s; }
@keyframes deriva {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(3vw, -2vh, 0) scale(1.12); }
}

/* texto entra saindo de desfoque — parece que ganha nitidez */
.js .rv { filter: blur(6px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.9s ease; }
.js .rv.is-in { filter: blur(0); }

/* imagens: entram com corte E um zoom que assenta */
.js .rv-img img { transform: scale(1.1); transition: transform 1.6s cubic-bezier(.16,.8,.24,1), filter 0.6s; }
.js .rv-img.is-in img { transform: scale(1); }

/* número gigante do capítulo desliza junto com o scroll */
.esp-sec__num { transition: opacity 1.4s ease; opacity: 0; }
.esp-sec:has(.is-in) .esp-sec__num { opacity: 1; }

/* citação: a linha se abre a partir do centro */
.esp-cit::before, .esp-cit::after { width: 0; transition: width 1.4s cubic-bezier(.2,.7,.2,1) 0.2s; }
.esp-cit.is-in::before, .esp-cit.is-in::after { width: 46px; }

/* cartões: leve inclinação seguindo o mouse */
.esp-card { transform-style: preserve-3d; }

/* botão final com atração magnética */
.esp-cta { transition: color 0.4s, transform 0.35s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .ceu__nebula { animation: none; }
  .js .rv { filter: none !important; }
  .js .rv-img img { transform: none !important; }
  .esp-sec__num { opacity: 1; }
  .esp-cit::before, .esp-cit::after { width: 46px; transition: none; }
}

/* o hover precisa vencer o zoom da revelação (senão fica travado em scale(1)) */
.js .rv-img.is-in:hover img { transform: scale(1.05); }

/* Largura total sem depender de 100vw (que inclui a barra de rolagem e
   estoura ~19px de cada lado): anulamos exatamente o padding da seção. */
.esp-fig--larga { margin-inline: calc(-1 * clamp(1.25rem, 5vw, 3rem)); max-width: none; }
.esp-fig--larga figcaption { max-width: 44rem; margin-inline: auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
/* No celular a largura total não compensa o risco de estouro: a foto
   respeita o contêiner (com a máscara, a diferença é imperceptível). */
@media (max-width: 760px) {
  .esp-fig--larga { margin-inline: 0; }
  .esp-fig--larga figcaption { padding: 0; }
}

/* =====================================================================
   TOPO TRANSPARENTE
   No alto da página a barra e o cabeçalho somem: a imagem atravessa.
   O fundo escuro só aparece depois que a pessoa rola.
   ===================================================================== */
.tema-espaco .topbar,
.tema-espaco .header {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background 0.55s ease, backdrop-filter 0.55s ease, border-color 0.55s ease;
}
.tema-espaco.rolou .topbar { background: rgba(1, 3, 10, 0.9); border-bottom-color: var(--linha); }
.tema-espaco.rolou .header {
  background: rgba(4, 6, 12, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--linha);
}
/* véu suave só para o menu continuar legível sobre a foto, sem barra dura */
.tema-espaco .veu-topo {
  position: fixed; top: 0; left: 0; right: 0; height: 210px; z-index: 40;
  background: linear-gradient(180deg, rgba(4,6,12,0.82), rgba(4,6,12,0.35) 55%, transparent);
  pointer-events: none; opacity: 1; transition: opacity 0.55s ease;
}
.tema-espaco.rolou .veu-topo { opacity: 0; }

/* =====================================================================
   CORREÇÃO DA DISSOLUÇÃO
   O raio precisa ser "closest-side": assim o fim do degradê (transparente)
   cai EXATAMENTE na borda da imagem. Com 88% da largura ele terminava
   fora do quadro e a foto aparecia com borda dura.
   ===================================================================== */
.esp-fig__q img,
.esp-mosaico .esp-fig__q img,
.esp-duo .esp-fig__q img {
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%,
            #000 60%, rgba(0,0,0,0.72) 80%, rgba(0,0,0,0.28) 93%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%,
            #000 60%, rgba(0,0,0,0.72) 80%, rgba(0,0,0,0.28) 93%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
/* a de largura total dissolve nas laterais e embaixo (o topo encosta no texto) */
.esp-fig--larga .esp-fig__q img {
  -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 45%,
            #000 55%, rgba(0,0,0,0.7) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 100% at 50% 45%,
            #000 55%, rgba(0,0,0,0.7) 78%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
/* a foto de abertura também derrete no fundo, por baixo */
.esp-hero__foto {
  -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,0.5) 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,0.5) 78%, transparent 100%);
}