/* historia.css: a história do Grupo na viagem (T13, 13/10/2026; refeita a diagramação da T12, pedido P1 dos prints 1 e 2).
   Cores e fontes do DESIGN-ONMNIA (viagem): noite #030910, tinta #f0f5f5, apoio #c0d1dc, linha #c0d1dc33, foco #c2e9ff; Zodiak 300 e Synonym 400.
   Sem contorno na letra (nenhum text-shadow); a leitura vem do céu negro e de um véu de uma camada só atrás da coluna (.h-veu).
   T13, a grade (a mesma em todos os capítulos):
   - computador: o céu é dividido em duas faixas que não se cruzam. À esquerda, a faixa da constelação (do pé do cabeçalho até acima da borda
     da Terra); à direita, a coluna de leitura, alinhada pela direita ao menu do cabeçalho (antes do nome "História" das etapas). Medida de
     52 a 64 caracteres por linha: o texto de apoio vai até 28 corpos e o texto principal (1,08 vez maior, em Zodiak) até 29,5 corpos dele
     (parágrafo curto de duas linhas pode ficar mais curto: text-wrap pretty equilibra as linhas para não deixar palavra sozinha);
     a coluna tem a largura do principal. No pé, à esquerda, a legenda: o nome da seção
     e a régua de anos, na mesma linha dos controles do rodapé;
   - celular: a constelação numa faixa entre o cabeçalho e a coluna; a coluna ocupa a largura entre as margens do cabeçalho; sem régua;
   - hierarquia: ano (contador grande), título, texto principal (Zodiak), texto de apoio (Synonym, cor de apoio), número (com fio acima);
   - respiro numa unidade só (--h-u): 0,9 entre ano e título, 2,6 entre o cabeçalho do capítulo e o corpo e antes do número, 1,4 entre parágrafos;
   - capítulo longo (2023 e o fecho) em duas batidas no mesmo lugar: primeiro o texto; depois a nota (o nome em 2023; missão, visão, valores
     e a frase final no fecho). Assim a frase final nunca fica cortada nem embaixo dos botões;
   - as posições que dependem do cabeçalho e do rodapé (que outras frentes mudam) são medidas pelo historia.js uma vez por redimensionamento
     e chegam aqui como variáveis (--h-topo, --h-colx, --h-colw, --h-esq, --h-leg-y, --h-leg-w, --h-veu-x).
   O HTML chega como bloco parado (.parada: sem JavaScript, movimento reduzido e ?modo=leve); o historia.js troca para .viagem. */
#historia{--h-noite:#030910;--h-tinta:#f0f5f5;--h-apoio:#c0d1dc;--h-linha:#c0d1dc33;--h-foco:#c2e9ff;
 --h-u:clamp(8px,1.15vh,12px);--h-sup:clamp(16px,1.08vw,18px);--h-lead:calc(var(--h-sup)*1.08);
 --h-ano-fs:clamp(58px,5.4vw,92px);--h-tit-fs:clamp(20px,1.55vw,26px);--h-fecho-fs:clamp(32px,2.9vw,48px);--h-convite-fs:clamp(28px,2.6vw,44px);--h-cifra-fs:clamp(38px,3vw,50px);
 --h-gut:clamp(20px,6vw,96px);--h-colx:calc(100vw - var(--h-gut) - var(--h-colw));--h-colw:min(calc(var(--h-sup)*31.9),calc(50vw - var(--h-gut)));--h-topo:clamp(170px,20vh,200px);
 --h-esq:var(--h-gut);--h-leg-y:calc(100% - 96px);--h-leg-w:min(34em,40vw);--h-veu-x:78%;
 color:var(--h-tinta);font-family:Synonym,system-ui,sans-serif;font-synthesis:none}
#historia p,#historia ul,#historia h3,#historia h2{margin:0}
#historia ul{list-style:none;padding:0}
#historia i[lang]{font-style:italic}
#historia q{quotes:none}
#chapters [hidden]{display:none}
.h-sem-img{display:none}
/* escala do capítulo: 1 normal; o historia.js aperta (h-justo, h-justo2) só o capítulo que não couber entre o cabeçalho e o rodapé */
#historia .h-cap{--k:1}
#historia .h-cap.h-justo{--k:.92}
#historia .h-cap.h-justo2{--k:.85}

/* ---------- tipografia (vale também no bloco parado) ---------- */
.h-cab{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--h-u)*.9);font-weight:300}
.h-ano{display:block;height:1em;font:300 calc(var(--h-ano-fs)*var(--k))/1 Zodiak,serif;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;color:var(--h-tinta)}
.h-tit{font:300 calc(var(--h-tit-fs)*var(--k))/1.2 Zodiak,serif;letter-spacing:-.005em;color:var(--h-apoio);text-wrap:balance}
.h-texto{display:grid;gap:calc(var(--h-u)*1.4)}
.h-texto p{max-width:28em;font-size:calc(var(--h-sup)*var(--k));line-height:1.62;color:var(--h-apoio)}
.h-texto:not(.h-lado) p:first-child{max-width:29.5em;font:300 calc(var(--h-lead)*var(--k))/1.42 Zodiak,serif;letter-spacing:-.005em;color:var(--h-tinta);text-wrap:pretty}
.h-tinta{color:var(--h-tinta)}
/* número do capítulo: uma linha de dado sob o texto, separada por um fio */
#historia .h-cifra{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;row-gap:2px;margin-top:calc(var(--h-u)*2.6);padding-top:calc(var(--h-u)*1.4);border-top:1px solid var(--h-linha)}
.h-cifra-n{font:300 calc(var(--h-cifra-fs)*var(--k))/1 Zodiak,serif;letter-spacing:-.03em;font-variant-numeric:lining-nums}
.h-cifra-a,.h-cifra-r{font-size:calc(var(--h-sup)*var(--k));line-height:1.3;color:var(--h-apoio)}
/* nota (o nome do Grupo em 2023; missão, visão e valores no fecho): fio à esquerda, texto de apoio */
.h-lado{padding-left:calc(var(--h-u)*1.5);border-left:1px solid var(--h-linha);gap:var(--h-u)}
.h-lado p{line-height:1.6}
/* fecho: o título ocupa o lugar do ano; a frase final fecha a coluna */
.hc-fecho .h-tit{font:300 calc(var(--h-fecho-fs)*var(--k))/1.06 Zodiak,serif;letter-spacing:-.025em;color:var(--h-tinta);max-width:15ch}
#historia .h-convite{margin-top:calc(var(--h-u)*3);font:300 calc(var(--h-convite-fs)*var(--k))/1.1 Zodiak,serif;letter-spacing:-.02em;color:var(--h-tinta);text-wrap:balance;max-width:17ch}
#historia .nq{white-space:nowrap} /* "covid-19" não quebra no hífen */

/* ---------- viagem: camada presa no palco ---------- */
#historia.viagem{position:absolute;inset:0;z-index:6;pointer-events:none;visibility:hidden;font-size:var(--h-sup)}
#historia.viagem.ativa{visibility:visible}
.h-ceu{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* véu de uma camada: só atrás da coluna do texto (opacidade = presença da história, escrita pelo ceu-historia.js) */
.h-veu{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity;
 background:radial-gradient(46% 74% at var(--h-veu-x) 48%,rgb(3 9 16/.8) 0,rgb(3 9 16/.66) 40%,rgb(3 9 16/.3) 68%,rgb(3 9 16/0) 90%)}
.h-caps{position:absolute;inset:0}
#historia.viagem .h-cap{position:absolute;inset:0;box-sizing:border-box;opacity:0;display:grid;grid-template-columns:var(--h-colw);grid-template-rows:auto auto;align-content:start;justify-content:start;
 padding:var(--h-topo) 0 0 var(--h-colx)}
#historia.viagem .h-cab{grid-area:1/1;min-width:0}
/* as duas batidas do capítulo ocupam a mesma célula: uma sai antes de a outra entrar */
#historia.viagem .h-corpo{grid-area:2/1;min-width:0;margin-top:calc(var(--h-u)*2.6)}
#historia.viagem .h-corpo-b>.h-lado:first-child{margin-top:0}
#historia.viagem .h-cap.h-viva,#historia.viagem .h-viva .h-tit,#historia.viagem .h-viva .h-corpo,#historia.viagem .h-viva .h-corpo>*{will-change:opacity,transform}
/* o ano de cada capítulo fica no texto (leitor de tela e espaço na grade); quem aparece é o contador por cima dele */
#historia.viagem .h-ano{opacity:0}
.h-ano-vivo{position:absolute;left:0;top:0;display:none;height:1em;opacity:0;will-change:opacity;font:300 64px/1 Zodiak,serif;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--h-tinta);white-space:nowrap;
 -webkit-mask-image:linear-gradient(180deg,#0000 0,#000 14%,#000 86%,#0000 100%);mask-image:linear-gradient(180deg,#0000 0,#000 14%,#000 86%,#0000 100%)}
#historia.viagem .h-ano-vivo{display:flex}
.h-casa{display:block;height:1em;overflow:hidden}
.h-fita{display:flex;flex-direction:column;will-change:transform}
.h-fita span{display:block;height:1em;line-height:1;text-align:center}
/* legenda no pé, à esquerda: o nome da seção e a régua de anos (computador) */
.h-titulo{position:absolute;left:var(--h-esq);top:var(--h-leg-y);opacity:0;will-change:opacity;font:400 13px/1.3 Synonym,sans-serif;color:var(--h-apoio);letter-spacing:.02em;white-space:nowrap}
.h-regua{position:absolute;left:var(--h-esq);width:var(--h-leg-w);top:calc(var(--h-leg-y) + 29px);height:22px;opacity:0;will-change:opacity}
.h-trilho{position:absolute;left:0;right:0;top:0;height:1px;background:var(--h-linha)}
.h-fill{position:absolute;inset:0;background:var(--h-apoio);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.h-ponto{position:absolute;left:-3.5px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--h-tinta);will-change:transform}
.h-tick{position:absolute;top:-2px;left:calc(var(--x) * 100%);width:1px;height:5px;background:var(--h-linha)}
.h-tick-marco{background:var(--h-apoio);height:7px;top:-3px}
.h-tick b{position:absolute;top:10px;left:0;font:400 11px/1 Synonym,sans-serif;color:var(--h-apoio);font-variant-numeric:tabular-nums}
.h-tick:last-child b{left:auto;right:0}
.h-pular{position:absolute;left:var(--h-gut);top:calc(clamp(26px,5.5vh,58px) + clamp(60px,5vw,80px)*1.115 + 16px);z-index:3;pointer-events:auto;font-size:14px;color:var(--h-noite);background:var(--h-tinta);padding:12px 16px;
 transform:translateY(-200vh)}
.h-pular:focus{transform:none}
.h-pular:focus-visible{outline:2px solid var(--h-foco);outline-offset:3px}
#historia.viagem .h-pular{visibility:visible}

/* ---------- celular e tela estreita: constelação no alto, coluna embaixo dela, sem régua ---------- */
@media (max-width:699px){
 #historia{--h-u:clamp(8px,1.15vh,11px);--h-sup:15px;--h-lead:17.5px;--h-ano-fs:clamp(42px,12.5vw,54px);--h-tit-fs:18px;--h-fecho-fs:26px;--h-convite-fs:24px;--h-cifra-fs:32px;
  --h-gut:16px;--h-colx:16px;--h-colw:calc(100vw - 32px);--h-topo:clamp(214px,27.5svh,244px)}
 .h-veu{background:linear-gradient(180deg,rgb(3 9 16/0) 18%,rgb(3 9 16/.5) 32%,rgb(3 9 16/.74) 48%,rgb(3 9 16/.8) 100%)}
 .h-lado p{line-height:1.5}
 .h-texto p{line-height:1.52;max-width:none}
 .h-texto:not(.h-lado) p:first-child{line-height:1.34;max-width:none}
 #historia.viagem .h-titulo,#historia.viagem .h-regua{display:none}
 .h-pular{top:calc(28px + env(safe-area-inset-top) + 58px*1.115 + 16px)}
}
/* celular baixo (360 x 640 e parecidos): letra um pouco menor, para a coluna caber entre a faixa da constelação e o rodapé */
@media (max-width:699px) and (max-height:700px){
 #historia{--h-sup:14px;--h-lead:16px;--h-ano-fs:40px;--h-tit-fs:17px;--h-fecho-fs:22px;--h-convite-fs:21px;--h-cifra-fs:28px}
 .h-lado p{line-height:1.44}
 .h-texto p{line-height:1.46}
 .h-texto:not(.h-lado) p:first-child{line-height:1.3}
}

/* ---------- parado: sem JavaScript, movimento reduzido e versão leve (em fluxo, antes da viagem parada) ---------- */
#historia.parada{position:relative;background:var(--h-noite);padding:clamp(28px,5vh,56px) 0 0;font-size:var(--h-sup)}
#historia.parada .h-regua{display:none}
#historia.parada .h-caps{position:static}
#historia.parada .h-titulo{position:static;opacity:1;padding:0 var(--h-gut) clamp(20px,4vh,40px);font:300 clamp(28px,3vw,44px)/1.1 Zodiak,serif;color:var(--h-tinta);letter-spacing:0;white-space:normal}
#historia.parada .h-cap{position:relative;display:flex;flex-direction:column;padding:clamp(48px,9vh,96px) var(--h-gut);border-top:1px solid var(--h-linha);min-height:0}
#historia.parada .h-cap>*{max-width:40rem}
#historia.parada .h-cab{order:0}
#historia.parada .h-texto{order:1;margin-top:calc(var(--h-u)*2.6)}
#historia.parada .h-cifra{order:2}
#historia.parada .h-lado{order:3;margin-top:calc(var(--h-u)*2.6)}
#historia.parada .h-convite{order:4}
#historia.parada .h-ano{font-size:min(19vw,22vh)}
#historia.parada .h-pular{position:absolute;top:8px}
@media (max-width:600px){#historia.parada .h-cap{padding:48px 22px}}
@media (prefers-reduced-motion:reduce){#historia *{transition:none!important}}