/* Âmago — página Sobre: o UNIVERSO de pontos (2026-09-28).
   ---------------------------------------------------------------------------------------
   O desenho é do `universo.js`: uma tela presa à janela, o scroll como câmara, os textos
   dos capítulos em HTML fixo por cima da tela e uma régua dos anos à direita. Aqui está só
   a apresentação. Veio do protótipo `prototipos/sobre-universo/` tal como o cliente o
   escolheu; os números do movimento estão no topo do script.

   Duas formas para os capítulos: SEM script (o <main> não tem `universo-vivo`) ficam em
   coluna, como uma página normal; COM script ficam fixos ao ecrã e é o script que lhes
   escreve a opacidade e a escala.
   ========================================================================================= */

.universo{position:relative;
  --agua:#8fe8d6;--agua-rgb:15,143,122}

/* O céu, atrás dos textos, com fundo opaco. */
.universo-ceu{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:none;
  background:var(--fundo)}
.universo-vivo .universo-ceu{display:block}
/* O rodapé vem NO FLUXO a seguir ao percurso e sobe por cima do céu e dos textos no fim,
   como em qualquer página do site (escolha do cliente, depois de quatro mecânicas de
   revelação chumbadas): por isso fica acima deles. */
.universo-vivo ~ .rodape{position:relative;z-index:4}
.universo-percurso{position:relative;z-index:1;pointer-events:none}

/* ---------- os capítulos ---------- */
/* Sem script: uma coluna de texto legível. */
.capitulo{position:relative;z-index:2;max-width:640px;margin:0 auto;
  padding:clamp(40px,7vh,80px) clamp(16px,4vw,40px)}
.capitulo .ano{display:block;font-size:clamp(44px,7vw,104px);font-weight:200;line-height:.95;
  color:var(--agua);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.capitulo h2{margin:14px 0 10px;font-size:clamp(20px,2.2vw,30px);font-weight:400;line-height:1.2;
  text-wrap:balance}
.capitulo p{margin:0;font-size:clamp(14px,1.15vw,17px);font-weight:300;line-height:1.6;
  color:rgba(252,252,252,.72);max-width:44ch;text-wrap:pretty}
.capitulo .eyebrow{display:block;margin:0 0 18px;font-size:12px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(252,252,252,.72)}
.capitulo h1{margin:0;font-size:var(--tipo-h1);font-weight:200;line-height:1.08;
  text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.capitulo .entrada{margin:18px auto 0;max-width:48ch;text-wrap:balance}
.capitulo .dica{display:none}
/* "HOJE" em maiúsculas por CSS e não no texto (um leitor de ecrã soletrava-o), no capítulo
   e na régua — escolha do cliente. */
.capitulo .ano.hoje,.universo-regua button.hoje{text-transform:uppercase}
.capitulo.fim h2{font-size:clamp(26px,3.6vw,48px);font-weight:200;line-height:1.1;
  text-transform:uppercase;letter-spacing:.01em;margin:0}
.capitulo.fim p{margin-top:16px}
.capitulo .botoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Com script: fixos ao ecrã, um de cada vez, a acender pela proximidade da câmara. */
.universo-vivo .capitulo{position:fixed;top:50%;z-index:2;pointer-events:none;
  width:min(46vw,520px);max-width:none;margin:0;padding:0;
  transform:translateY(-50%);opacity:0;visibility:hidden}
.universo-vivo .capitulo.esq{left:clamp(20px,7vw,120px)}
.universo-vivo .capitulo.dir{right:clamp(20px,7vw,120px);text-align:right}
.universo-vivo .capitulo.dir p{margin-left:auto}
.universo-vivo .capitulo.centro{left:50%;right:auto;transform:translate(-50%,-50%);
  text-align:center;width:min(86vw,720px)}
/* O véu: um clarão da cor do fundo por trás do texto, que apaga os pontos que lhe passam
   por trás. A mesma ideia do véu do hero e do convite da inicial. */
.universo-vivo .capitulo::before{content:"";position:absolute;inset:-60px -90px;z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(var(--fundo-rgb),.92) 0%,
    rgba(var(--fundo-rgb),.75) 45%,rgba(var(--fundo-rgb),0) 100%)}
.universo-vivo .capitulo .dica{display:inline-grid;justify-items:center;gap:8px;margin-top:38px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(252,252,252,.72)}
.universo-vivo .capitulo .dica svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  animation:universo-desce 2.6s ease-in-out infinite}
@keyframes universo-desce{0%,62%,100%{transform:translateY(0)}32%{transform:translateY(5px)}}
.universo-vivo .capitulo .botoes{pointer-events:auto;justify-content:flex-start}
.universo-vivo .capitulo.centro .botoes{justify-content:center}

/* ---------- a régua dos anos ---------- */
.universo-regua{display:none}
.universo-vivo .universo-regua{position:fixed;right:clamp(10px,2vw,28px);top:50%;
  transform:translateY(-50%);z-index:3;display:grid;gap:14px;margin:0;padding:0;list-style:none}
.universo-regua button{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 8px;
  align-items:center;gap:10px;color:rgba(252,252,252,.72);font:inherit;font-size:11px;
  letter-spacing:.14em;font-variant-numeric:tabular-nums;opacity:.55;transition:opacity .3s,color .3s;
  text-align:right}
.universo-regua button::after{content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;transition:box-shadow .3s,transform .3s}
.universo-regua button:hover,.universo-regua button:focus-visible{opacity:1}
.universo-regua button:focus-visible{outline:2px solid var(--agua);outline-offset:3px}
.universo-regua button[aria-current="true"]{opacity:1;color:var(--agua)}
.universo-regua button[aria-current="true"]::after{transform:scale(1.4);
  box-shadow:0 0 0 4px rgba(var(--agua-rgb),.25),0 0 14px rgba(var(--agua-rgb),.7)}

/* ---------- ecrãs estreitos ---------- */
@media (max-width:760px){
  /* O texto vai para o fundo do ecrã e o símbolo sobe (o script trata da posição dele). */
  .universo-vivo .capitulo.esq,.universo-vivo .capitulo.dir{left:20px;right:20px;width:auto;
    text-align:left;top:auto;bottom:16vh;transform:none}
  .universo-vivo .capitulo.dir p{margin-left:0}
  .universo-vivo .capitulo.centro{width:min(88vw,720px)}
  .universo-vivo .universo-regua{display:none}
}

@media (prefers-reduced-motion:reduce){
  .universo-vivo .capitulo .dica svg{animation:none}
}