/* site.css: o que todas as páginas usam (ESPECIFICACAO.md, seção 2).
   Tokens, fontes, base, cabeçalho, rodapé, botões, pausa, componentes (2.9) e utilitários de movimento (2.6).
   O <style> de cada página só traz as figuras daquela página. */

/* fontes servidas pelo próprio site (licença OFL em /fontes) */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(/fontes/ibm-plex-sans-variavel.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fontes/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fontes/space-grotesk-variavel.woff2) format("woff2")}

/* ---------------------------------------------------------------- tokens (2.2) */
:root{
  --navy:#092632;--navy-2:#0f3442;--azul:#004c73;--acento:#8edbed;--grafite:#1f2427;--fio:#d9e2e7;
  --fundo:#f4f7f9;--branco:#fff;--ok:#2e9e6e;--atencao:#e3a21a;--aco-1:#e6ecef;--aco-2:#cfd8dd;
  --cinza:#9aa7ae;--obra:#8a5e00;--azul-claro:#4fb3cc;
  --l-petri:#004c73;--l-dados:#2a93ad;--l-aprend:#d46a1f;--l-decisao:#b83e28;
  --titulo:"Space Grotesk",system-ui,sans-serif;
  --texto:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --margem:16px;
}
@media (min-width:720px){:root{--margem:24px}}
@media (min-width:1080px){:root{--margem:32px}}

/* cada linha de ferramenta tem a sua cor, sempre a mesma (2.8) */
.l-petri{--c:var(--l-petri)}.l-dados{--c:var(--l-dados)}.l-aprend{--c:var(--l-aprend)}.l-decisao{--c:var(--l-decisao)}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:not(.sem-movimento){scroll-behavior:smooth}}
body{margin:0;background:var(--fundo);color:var(--grafite);font:400 17px/1.55 var(--texto);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--azul)}
h1,h2{font-family:var(--titulo);font-weight:600;letter-spacing:-.01em;color:var(--navy);margin:0}
h1{font-size:clamp(2rem,1.1rem + 2.7vw,3.25rem);line-height:1.08}
h2{font-size:clamp(1.625rem,1.2rem + 2vw,2.5rem);line-height:1.15}
h3{font:600 1.125rem/1.3 var(--texto);margin:0;color:var(--navy)}
p{margin:0}
figure{margin:0}
.recipiente{max-width:1160px;margin:0 auto;padding:0 var(--margem)}
section{padding:64px 0}
@media (min-width:960px){section{padding:96px 0}}
main [id]{scroll-margin-top:76px}
#conteudo{scroll-margin-top:64px}
.claro{background:var(--branco)}
.escuro{background:var(--navy);color:#fff}
.escuro h2,.escuro h3{color:#fff}
.sobrancelha{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--azul);margin-bottom:12px}
.escuro .sobrancelha{color:var(--acento)}
.intro{max-width:62ch;margin-top:16px}
.escuro .intro{color:rgba(255,255,255,.88)}
.cabeca-secao{margin-bottom:32px}
.cabeca-secao h2{max-width:30ch}
@media (min-width:960px){.cabeca-secao{margin-bottom:40px}}
figcaption,.legenda,.fonte{font:400 12px/1.5 var(--mono);color:rgba(31,36,39,.7)}
.escuro figcaption,.escuro .legenda,.escuro .fonte{color:rgba(142,219,237,.8)}
.nota{font:400 12px/1.5 var(--mono);color:rgba(31,36,39,.75);margin-top:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nq{white-space:nowrap}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.escuro :focus-visible{outline-color:var(--acento)}
.pular{position:absolute;left:12px;top:-60px;background:var(--azul);color:#fff;padding:10px 16px;border-radius:8px;z-index:100;text-decoration:none;font-weight:600}
.pular:focus{top:12px}

/* ---------------------------------------------------------------- botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:8px;font:600 16px/1 var(--texto);text-decoration:none;border:1.5px solid var(--azul);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.botao.primario{background:var(--azul);color:#fff}
.botao.primario:hover{background:var(--navy);border-color:var(--navy)}
.botao.secundario{background:transparent;color:var(--azul)}
.botao.secundario:hover{background:rgba(0,76,115,.06)}
.botao-texto{background:none;border:0;padding:6px 0;font:500 12px/1.4 var(--mono);color:var(--azul);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;text-align:left}
.escuro .botao-texto{color:var(--acento)}
@media (prefers-reduced-motion:reduce){.pausa{display:none!important}}
.no-js .pausa,.no-js .hamburguer{display:none}
@media (max-width:959px){.no-js .menu-celular[hidden]{display:block;position:static;padding-top:0}}

/* ---------------------------------------------------------------- cabeçalho (2.4) */
.topo{position:sticky;top:0;z-index:50;height:64px;background:var(--fundo);transition:background-color .2s,box-shadow .2s}
.topo.solido{background:rgba(244,247,249,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--fio)}
.topo .recipiente{height:64px;display:flex;align-items:center;gap:8px}
@media (min-width:960px){.topo .recipiente{gap:24px}}
.marca{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;text-decoration:none;min-width:0}
.marca img{display:block;width:45px;height:8px;flex:none}
.marca .nome{font:600 18px/1.2 var(--titulo);letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
@media (max-width:419px){
  .marca img{display:none}
  .marca .nome{font-size:15px;line-height:1.1;white-space:normal}
  .marca .nome span{display:block}
}
.menu{display:none}
.menu ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px}
@media (min-width:960px) and (max-width:1119px){.menu ul{gap:18px}}
.menu a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;color:var(--grafite);text-decoration:none;font-weight:600;font-size:15px;padding:0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--azul)}
.menu a[aria-current="true"]{border-bottom-color:var(--azul);color:var(--navy)}
.idiomas{display:flex;flex:none;padding:2px;border:1px solid var(--fio);border-radius:10px;background:#fff}
.idiomas a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:38px;padding:0 8px;border-radius:8px;font:500 13px/1 var(--mono);letter-spacing:.04em;color:rgba(31,36,39,.75);text-decoration:none;transition:background-color .15s,color .15s}
.idiomas a:not([aria-current]):hover{color:var(--azul);background:var(--fundo)}
.idiomas a[aria-current="page"]{background:var(--navy);color:#fff}
.idiomas a::after{content:"";position:absolute;top:-3px;right:0;bottom:-3px;left:0}
.idiomas a:first-child::after{left:-4px}.idiomas a:last-child::after{right:-4px}
@media (max-width:399px){.idiomas a{min-width:32px;padding:0 6px;font-size:12px}}
.hamburguer{flex:none;width:44px;height:44px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;color:var(--navy);padding:0}
.hamburguer span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-celular{position:fixed;inset:64px 0 0 0;background:#fff;z-index:49;padding:16px var(--margem) 32px;overflow:auto}
.menu-celular[hidden]{display:none}
.menu-celular ul{list-style:none;margin:0;padding:0}
.menu-celular li a{display:flex;align-items:center;min-height:56px;font:600 22px/1.2 var(--texto);color:var(--navy);text-decoration:none;border-bottom:1px solid var(--fio)}
.menu-celular li a[aria-current="true"]{color:var(--azul)}
body.travado{overflow:hidden}
@media (min-width:960px){.menu{display:block}.hamburguer,.menu-celular{display:none!important}}

/* ---------------------------------------------------------------- rodapé (2.5) */
.rodape{background:var(--fundo);border-top:1px solid var(--fio);padding:40px 0}
.rodape .recipiente{display:grid;gap:8px}
.rodape .assinatura{font:600 16px/1.4 var(--texto);color:var(--navy)}
.rodape .legal{font:400 12px/1.6 var(--mono);color:rgba(31,36,39,.75)}
.rodape .pausa{justify-self:start;margin-top:8px}
@media (min-width:720px){
  .rodape .recipiente{grid-template-columns:1fr auto;column-gap:40px;align-items:start}
  .rodape .assinatura,.rodape .legal{grid-column:1}
  .rodape .pausa{grid-column:2;grid-row:1 / span 2;align-self:center;margin-top:0}
}

/* ---------------------------------------------------------------- movimento (2.6) */
/* utilitários */
.rotor{transform-box:fill-box;transform-origin:center}
.em-cena .rotor{animation:gira 2.4s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.anel{transform-box:fill-box;transform-origin:center;opacity:0}
.em-cena .anel{animation:anel 2.4s ease-out infinite}
.em-cena .anel.a2{animation-delay:.8s}.em-cena .anel.a3{animation-delay:1.6s}
@keyframes anel{0%{transform:scale(1);opacity:.8}100%{transform:scale(3);opacity:0}}
.fluxo-svg{stroke-dasharray:4 8}
.em-cena .fluxo-svg{animation:fluxo 1.6s linear infinite}
@keyframes fluxo{to{stroke-dashoffset:-48}}
.desenha [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease-out}
.visto .desenha [pathLength],.desenha.visto [pathLength],.no-js .desenha [pathLength]{stroke-dashoffset:0}
.cobertura{transform-box:fill-box;transform-origin:right center}
.no-js .cobertura{transform:scaleX(0)}
.svg-desk{display:none}
.svg-cel{display:block;max-width:480px;margin:0 auto}
@media (min-width:960px){.svg-desk{display:block}.svg-cel{display:none}}

/* fora da tela ou com a aba oculta: tudo para onde está */
.js [data-anima]:not(.em-cena) *,.js [data-anima]:not(.em-cena) *::before,.js [data-anima]:not(.em-cena) *::after,
.aba-oculta *,.aba-oculta *::before,.aba-oculta *::after{animation-play-state:paused!important}

/* sem movimento (preferência do sistema ou botão): o quadro parado */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .anel{opacity:0!important}
  .desenha [pathLength],.numeros [pathLength]{stroke-dashoffset:0!important}
  .cobertura{transform:scaleX(0)!important}
  .placa::after{display:none}
}
.sem-movimento *,.sem-movimento *::before,.sem-movimento *::after{animation:none!important;transition:none!important}
.sem-movimento .anel{opacity:0!important}
.sem-movimento .desenha [pathLength],.sem-movimento .numeros [pathLength]{stroke-dashoffset:0!important}
.sem-movimento .cobertura{transform:scaleX(0)!important}
.sem-movimento .placa::after{display:none}

/* ---------------------------------------------------------------- mini-anel (2.9) */
.mini-anel{display:block;flex:none;overflow:visible}
.mini-anel .arco{display:inline;fill:none;stroke:var(--fio);stroke-width:5;stroke-linecap:butt}
.mini-anel .aceso{stroke:var(--azul)}
.mini-anel .obra{stroke:var(--azul);stroke-width:2;stroke-dasharray:2 3}
.escuro .mini-anel .arco{stroke:rgba(255,255,255,.18)} .escuro .mini-anel .aceso,.escuro .mini-anel .obra{stroke:var(--acento)}

/* ---------------------------------------------------------------- placa da estação (2.9) */
.placa-estacao{position:relative;background:var(--fundo);padding:0 0 40px;overflow:hidden}
.placa-estacao::before,.heroi::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--fio) 1px,transparent 1px),linear-gradient(90deg,var(--fio) 1px,transparent 1px);background-size:24px 24px;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent);pointer-events:none}
@media (min-width:960px){.placa-estacao{padding-bottom:56px}}
.faixas{display:flex;height:6px}
.faixas i{flex:1;display:block;background:var(--c,var(--navy));transform-origin:left center}
.placa-estacao>.faixas{position:relative}
.js .placa-estacao>.faixas i{animation:faixa .6s cubic-bezier(.3,.7,.2,1) both}
.js .placa-estacao>.faixas i:nth-child(2){animation-delay:.08s}
.js .placa-estacao>.faixas i:nth-child(3){animation-delay:.16s}
.js .placa-estacao>.faixas i:nth-child(4){animation-delay:.24s}
@keyframes faixa{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.placa-grade{position:relative;display:grid;gap:24px;padding-top:20px}
.placa-corpo{min-width:0}
@media (min-width:720px){.placa-grade{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:48px;padding-top:36px}}
.voltar{font:400 13px/1.4 var(--mono)}
.voltar a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--azul)}
.voltar a:hover{text-decoration:underline;text-underline-offset:3px}
.placa-estacao h1{font-size:clamp(2.25rem,1.4rem + 3vw,3.5rem);line-height:1.05;margin-top:4px;overflow-wrap:anywhere}
.meta-estacao{font:400 14px/1.5 var(--mono);color:var(--azul);margin-top:10px}
.frase-estacao{font-size:18px;line-height:1.5;max-width:46ch;margin-top:14px;color:var(--grafite)}
.etiqueta{display:inline-block;font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);background:#fff;border:1.5px solid var(--navy);border-radius:14px;padding:5px 12px}
.placa-estacao .etiqueta{margin-top:18px}
.linhas-estacao{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.linhas-estacao li{display:inline-flex;align-items:center;gap:8px;font:400 13px/1.3 var(--mono);color:var(--grafite);background:#fff;border:1px solid var(--fio);border-radius:999px;padding:6px 12px 6px 8px}
.linhas-estacao li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,var(--navy))}
.acende{display:flex;flex-direction:row;align-items:center;gap:12px}
.acende .mini-anel{width:64px;height:64px}
@media (min-width:720px){
  .acende{flex-direction:column;gap:10px;text-align:center;max-width:200px}
  .acende .mini-anel{width:96px;height:96px}
}

/* aviso (só no Curtailment) */
.aviso{display:flex;align-items:flex-start;gap:10px;max-width:60ch;margin-top:16px;padding:12px 16px;background:#fdf3df;border-left:4px solid var(--atencao);border-radius:8px;font-size:16px;line-height:1.45}
.aviso .icone-pausa{flex:none;font:600 18px/1.3 var(--mono);color:var(--obra)}

/* ---------------------------------------------------------------- linha de bordo (2.9) */
.linha-bordo{background:#fff;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);padding:6px 0}
.linha-bordo ol{list-style:none;margin:0;padding:0;display:flex;position:relative}
/* trilho: cheio até a última estação, tracejado até o destino */
.linha-bordo ol::before,.linha-bordo ol::after{content:"";position:absolute;top:19.5px;height:3px;pointer-events:none}
.linha-bordo ol::before{left:calc(100% / 12);right:calc(100% * 3 / 12);background:var(--navy)}
.linha-bordo ol::after{left:calc(100% * 9 / 12);right:calc(100% / 12);background:repeating-linear-gradient(90deg,var(--navy) 0 6px,transparent 6px 11px);opacity:.55}
.linha-bordo li{flex:1;min-width:0;position:relative;z-index:1}
.linha-bordo a{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:10px 0 6px;text-decoration:none;color:rgba(31,36,39,.8)}
.linha-bordo i{position:relative;display:block;flex:none;width:22px;height:22px}
.linha-bordo i::before,.linha-bordo i::after{content:"";position:absolute;left:4px;top:4px;width:14px;height:14px;border-radius:50%}
.linha-bordo .passada i::before{background:var(--navy)}
.linha-bordo .seguinte i::before{background:#fff;border:3px solid var(--navy)}
.linha-bordo .destino i::before{background:var(--fundo);border:2px dashed var(--navy)}
.linha-bordo .atual i::before,.linha-bordo .atual i::after{left:0;width:22px;border-radius:7px}
.linha-bordo .atual i::before{background:#fff;border:3px solid var(--navy)}
.linha-bordo .atual i::after{border:2px solid var(--acento);opacity:0;transform-origin:center}
.linha-bordo.em-cena .atual i::after{animation:pulso 1.6s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.linha-bordo span{font:400 11px/1.3 var(--mono);text-align:center;white-space:nowrap}
.linha-bordo .atual a{color:var(--navy)}
.linha-bordo .atual span{font-weight:500}
.linha-bordo .destino a{color:var(--obra)}
.linha-bordo a:hover span{text-decoration:underline;text-underline-offset:3px}
@media (min-width:720px){.linha-bordo span{white-space:normal;max-width:16ch}}
@media (max-width:719px){
  .linha-bordo li:not(.atual) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ---------------------------------------------------------------- seção visual (2.9) */
.fig{background:#fff;border:1px solid var(--fio);border-radius:12px;padding:16px}
.fig svg{width:100%;height:auto}
.fig svg:not(.svg-desk):not(.svg-cel){display:block}
.fig>figcaption,.fig .fonte{margin-top:12px}
.chave{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font:400 12px/1.5 var(--mono);color:var(--grafite)}
.chave li{display:inline-flex;align-items:center;gap:8px}
.sw{display:inline-block;flex:none;width:14px;height:4px;border-radius:2px;background:currentColor;vertical-align:middle}
.sw.ponto,.sw-ponto{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--navy)}
.sw.oco{background:#fff;border:2px solid var(--cinza)}
.sw-cinza{background:var(--cinza)}
.sw-aprend{background:var(--l-aprend)}
.sw-navy{background:var(--navy)}
.sw-azul{background:var(--azul)}
.sw-ambar{background:var(--atencao)}
.sw-ok{background:var(--ok)}
.sw-acento{background:var(--acento)}
.sw-azul-claro{background:repeating-linear-gradient(90deg,var(--azul-claro) 0 4px,transparent 4px 7px)}
.sw-hachura-azul,.sw-hachura-ambar{width:14px;height:10px;border-radius:2px}
.sw-hachura-azul{background:repeating-linear-gradient(45deg,var(--azul-claro) 0 1.5px,#fff 1.5px 4px);border:1px solid var(--azul-claro)}
.sw-hachura-ambar{background:repeating-linear-gradient(45deg,var(--atencao) 0 1.5px,#fff 1.5px 4px);border:1px solid var(--atencao)}

/* ---------------------------------------------------------------- Em aberto, Ferramentas, Documento, Próxima (2.9) */
section.secao.curta{padding:32px 0}
.secao.curta:not(.proxima-secao){background:#fff}
:not(.curta)+.secao.curta{border-top:1px solid var(--fio)}
.secao.curta.proxima-secao{background:var(--fundo);border-top:1px solid var(--fio);padding-bottom:48px}
.titulo-curto{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--azul);margin:0 0 14px}
.lista-seta{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:72ch}
.lista-seta li{padding-left:24px;position:relative;font-size:16px}
.lista-seta li::before{content:"→";position:absolute;left:0;color:var(--azul)}
.lista-seta strong{color:var(--navy)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font:400 13px/1.3 var(--mono);color:var(--grafite);background:#fff;border:1px solid var(--fio);border-radius:8px;padding:6px 10px}
.chip.l-petri,.chip.l-dados,.chip.l-aprend,.chip.l-decisao{border-left:4px solid var(--c)}
.documento{font:400 13px/1.55 var(--mono);max-width:80ch;color:var(--grafite)}
.documento+.documento{margin-top:8px;color:rgba(31,36,39,.75)}
.proxima{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;max-width:640px;padding:30px 24px 24px;background:#fff;border:1px solid var(--fio);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--grafite);transition:border-color .15s,box-shadow .15s}
.proxima:hover,.proxima:focus-visible{border-color:var(--azul);box-shadow:0 8px 24px rgba(9,38,50,.06)}
.proxima .faixas{position:absolute;top:0;left:0;right:0}
.proxima .rotulo,.proxima b,.proxima .frase{grid-column:1;display:block}
.proxima .rotulo{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--azul)}
.proxima b{font:600 28px/1.15 var(--titulo);letter-spacing:-.01em;color:var(--navy);margin-top:6px;overflow-wrap:anywhere}
.proxima .frase{font-size:16px;margin-top:6px}
.proxima .seta{grid-column:2;grid-row:1 / span 3;font:600 28px/1 var(--titulo);color:var(--azul);transition:transform .15s}
.proxima:hover .seta,.proxima:focus-visible .seta{transform:translateX(4px)}
.proxima.obra{border:1.5px dashed var(--obra);background:transparent}
.proxima.obra .faixas{opacity:.55}
.proxima.obra .frase{font:500 13px/1.4 var(--mono);letter-spacing:.04em;color:var(--obra)}
.anterior{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font:400 13px/1.4 var(--mono);color:var(--azul);text-decoration:none}
.anterior:hover{text-decoration:underline;text-underline-offset:3px}
.proxima-secao .recipiente{display:flex;flex-direction:column;align-items:flex-start}
.proxima-secao .proxima{width:100%}

/* ---------------------------------------------------------------- grade de telas (2.9) */
.telas-grade{list-style:none;margin:0;padding:0;display:grid;gap:32px}
@media (min-width:720px){.telas-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
.tela{min-width:0}
.tela .moldura{display:block;aspect-ratio:16/10;padding:8px;background:#fff;border:1px solid var(--fio);border-radius:12px;overflow:hidden;transition:border-color .15s}
.tela .moldura:hover,.tela .moldura:focus-visible{border-color:var(--azul)}
.tela .moldura img{display:block;width:100%;height:100%;object-fit:contain}
.tela .pergunta{font:600 18px/1.3 var(--titulo);color:var(--navy);margin-top:14px}
.tela .fonte{margin-top:6px}

/* ---------------------------------------------------------------- números (2.9) */
.numeros{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:720px){.numeros{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.numeros li{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-areas:"v b" ". s";column-gap:12px;align-items:center;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
.numeros svg{grid-area:v;width:20px;height:20px;color:var(--acento)}
.numeros b{grid-area:b;font:600 clamp(2.5rem,2rem + 2vw,3.5rem)/1.05 var(--titulo);letter-spacing:-.02em;color:var(--acento)}
.numeros span{grid-area:s;font:400 13px/1.4 var(--mono);color:#fff;margin-top:4px}
.numeros [pathLength]{fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease-out .3s}
.visto .numeros [pathLength],.numeros.visto [pathLength],.no-js .numeros [pathLength]{stroke-dashoffset:0}

/* ---------------------------------------------------------------- inicial: herói, legenda das linhas, fileira de anéis */
.heroi{position:relative;padding-top:32px;overflow:hidden}
@media (min-width:960px){.heroi{padding-top:56px}}
.heroi .recipiente{position:relative}
.sub{margin-top:16px;font-size:18px;max-width:46ch}
.sub span{display:block}
.figura-mapa{position:relative;margin-top:28px}
.legenda-linhas{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:960px){.legenda-linhas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.linha-botao{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;border:1px solid var(--fio);border-radius:10px;background:#fff;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s}
.linha-botao:hover{border-color:var(--azul)}
.linha-botao[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.linha-botao span{min-width:0}
.linha-botao b{display:block;font:600 15px/1.25 var(--texto);color:var(--navy)}
.linha-botao small{display:block;font:400 12px/1.35 var(--mono);color:rgba(31,36,39,.72)}
.roundel{flex:none;display:block}
@media (max-width:399px){.legenda-linhas{grid-template-columns:1fr}}
.nota-mapa{margin-top:14px;font:400 12px/1.4 var(--mono);color:rgba(31,36,39,.72);display:flex;justify-content:space-between;align-items:center;gap:4px 12px;flex-wrap:wrap}
.destino-grade{display:grid;gap:40px}
.destino-grade>*{min-width:0}
@media (min-width:960px){.destino-grade{grid-template-columns:5fr 7fr;align-items:center}}
.figura-laco svg{width:100%;height:auto}
.aneis-estacoes{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aneis-estacoes a{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"m b" "m s";column-gap:14px;align-items:center;min-height:64px;padding:8px 12px;background:var(--fundo);border:1px solid var(--fio);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .15s}
.aneis-estacoes a:hover,.aneis-estacoes a:focus-visible{border-color:var(--azul)}
.aneis-estacoes .mini-anel{grid-area:m}
.aneis-estacoes b{grid-area:b;align-self:end;font:600 16px/1.2 var(--titulo);color:var(--navy);overflow-wrap:anywhere}
.aneis-estacoes small{grid-area:s;align-self:start;font:400 12px/1.4 var(--mono);color:var(--azul)}
@media (min-width:720px){
  .aneis-estacoes{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .aneis-estacoes a{grid-template-columns:1fr;grid-template-areas:"m" "b" "s";justify-items:center;text-align:center;row-gap:6px;padding:16px 10px;height:100%;align-content:start}
}

/* ---------------------------------------------------------------- inicial: sobre */
.sobre-grade{display:grid;gap:40px}
.sobre-grade>*{min-width:0}
@media (min-width:960px){.sobre-grade{grid-template-columns:7fr 5fr;align-items:start}}
.linhas-sobre>span{display:block}
.placa{position:relative;max-width:380px;margin:0;padding:28px 26px 24px;border:1px solid var(--navy);border-radius:6px;background:linear-gradient(160deg,var(--aco-1),var(--aco-2));overflow:hidden}
.placa::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px);opacity:.15;pointer-events:none}
.placa::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-120%);pointer-events:none}
.sobre.visto .placa::after{animation:brilho 1.2s ease-out .3s 1 both}
@keyframes brilho{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
.rebite{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9aa7ae 60%,#6b7a82)}
.rebite.r1{top:10px;left:10px}.rebite.r2{top:10px;right:10px}.rebite.r3{bottom:10px;left:10px}.rebite.r4{bottom:10px;right:10px}
.placa .titulo-placa{font:500 12px/1.4 var(--mono);letter-spacing:.12em;color:var(--navy);margin:0 0 14px;text-align:center;border-bottom:1px solid rgba(9,38,50,.25);padding-bottom:10px}
.placa dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;position:relative}
.placa dt{font:400 11px/1.5 var(--mono);text-transform:uppercase;color:rgba(31,36,39,.75);padding-top:2px}
.placa dd{margin:0;font:400 14px/1.45 var(--mono);color:var(--navy)}
.link-externo{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-weight:600;min-height:44px}

/* ---------------------------------------------------------------- inicial: contato e o trilho (2.9) */
.contato{position:relative;overflow:hidden;padding-bottom:112px}
@media (min-width:960px){.contato{padding-bottom:128px}}
.contato-grade{display:grid;gap:40px}
.contato-grade>*{min-width:0}
@media (min-width:960px){.contato-grade{grid-template-columns:1fr 1fr;align-items:start}}
.linhas{list-style:none;margin:0;padding:0}
.linhas li{border-top:1px solid rgba(255,255,255,.12)}
.linhas li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.linhas a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:64px;padding:10px 12px;color:#fff;text-decoration:none;transition:background-color .15s}
.linhas a:hover,.linhas a:focus-visible{background:rgba(255,255,255,.06)}
.linhas svg{color:var(--acento)}
.linhas .rot{display:block;font:400 11px/1.4 var(--mono);color:var(--acento);text-transform:uppercase;letter-spacing:.06em}
.linhas .val{display:block;font:400 clamp(16px,1rem + .4vw,20px)/1.3 var(--texto);overflow-wrap:anywhere}
.linhas .seta{color:var(--acento);transition:transform .15s}
.linhas a:hover .seta,.linhas a:focus-visible .seta{transform:translateX(4px)}
.trilho-contato{position:absolute;left:0;right:0;bottom:20px;height:10px;overflow:hidden;pointer-events:none}
.trilho-contato::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--acento);opacity:.3}
.trilho-contato .trem{position:absolute;left:0;top:0;width:24px;height:10px;border-radius:5px;background:var(--navy-2);border:1px solid var(--acento);transform:translateX(var(--margem))}
.em-cena .trilho-contato .trem{animation:trem 14s linear infinite}
@keyframes trem{from{transform:translateX(-40px)}to{transform:translateX(100vw)}}