/* ==========================================================
   FATIA, VERTENTE B: a cena é o fundo da página inteira; o texto mora em cartões ancorados ao mapa.
   A base é a Linha B (branca, editorial, tipografia quieta). Celular primeiro: os cartões ocupam a parte de
   baixo da tela, com o lugar do mapa destacado acima deles; no computador, o cartão sai do lugar, com um fio.
   ========================================================== */
:root { --fundo: var(--branco); --cabecalho: 60px; --logo: 15px; --linha-fina: #DCDCE0; }
@media (min-width: 900px) { :root { --cabecalho: 72px; --logo: 28px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: var(--peso-texto) var(--texto-corpo)/1.55 var(--font-texto); overflow-x: clip; }
h1, h2, h3, p, ol, ul { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.pular { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: var(--quase-branco); padding: 12px 16px; z-index: 60; }
.pular:focus { left: 8px; }
.rotulo { font: 600 var(--texto-apoio)/1.25 var(--font-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-texto); }
.estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.cabecalho { position: fixed; left: 0; right: 0; top: 0; z-index: 40; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--linha-fina); }
.cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--cabecalho); padding: 0 12px; }
@media (min-width: 900px) { .cabecalho-linha { padding: 0 var(--margem); } }
.logo img { display: block; height: calc(var(--logo) * 1.3); width: auto; margin: calc(var(--logo) * -.15); }
.cabecalho-linha { gap: 10px; }
/* O contato sempre ao alcance, também no celular */
.cabecalho-acao { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; flex: none; font: 600 var(--texto-apoio)/1 var(--font-texto); text-decoration: none; background: var(--tinta); color: var(--branco); }
.cabecalho-acao:hover { background: var(--grafite); }
/* A navegação entre os capítulos: "3 de 5" e o nome; abre a lista dos cinco */
.capitulos-nav { position: relative; margin-left: auto; }
.capitulos-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 30px 0 10px; border: 1.5px solid var(--tinta); background: var(--branco); position: relative; }
.capitulos-botao::after { content: ""; position: absolute; right: 11px; top: 45%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.capitulos-botao[aria-expanded="true"]::after { transform: translateY(-10%) rotate(-135deg); }
.capitulos-n { font: 600 var(--texto-apoio)/1 var(--font-texto); white-space: nowrap; }
.capitulos-nome { display: none; font: 400 var(--texto-apoio)/1 var(--font-texto); white-space: nowrap; }
@media (min-width: 900px) { .capitulos-nome { display: inline; } }
.capitulos-lista { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; list-style: none; padding: 6px 0; margin: 0; background: var(--branco); border: 1.5px solid var(--tinta); box-shadow: 0 10px 30px rgba(50, 48, 56, .2); }
.capitulos-botao[aria-expanded="true"] + .capitulos-lista { display: block; }
.capitulos-lista a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font: 500 var(--texto-apoio)/1.2 var(--font-texto); text-decoration: none; }
.capitulos-lista a:hover, .capitulos-lista a[aria-current] { background: var(--quase-branco); }
.capitulos-lista a[aria-current] { font-weight: 700; }
html:not(.anima) .capitulos-botao { display: none; }
html:not(.anima) .capitulos-lista { display: flex; position: static; flex-wrap: wrap; border: 0; box-shadow: none; padding: 0; min-width: 0; }
@media (max-width: 899px) { html:not(.anima) .capitulos-nav { display: none; } }
/* Os dois botões da abertura, lado a lado */
.acoes { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.acoes .acao { margin-top: 8px; }
.acao-secundaria { border-bottom-width: 1px; }

/* ---------- A cena, em tela cheia ---------- */
.cena { position: fixed; inset: 0; z-index: 0; background: var(--branco); }
.cena-canvas { display: block; width: 100%; height: 100%; }
.fio { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.fio line { stroke: var(--tinta); stroke-width: 2; opacity: 0; transition: opacity .3s; }
.fio circle { fill: none; stroke: var(--tinta); stroke-width: 2.5; opacity: 0; transition: opacity .3s; }
.fio.visivel line, .fio.visivel circle { opacity: 1; }
.rotulos { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rotulos > * { position: absolute; left: 0; top: 0; }
.r-fase { margin: -14px 0 0 10px; font: 600 22px/1 var(--font-titulo); color: var(--tinta); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; opacity: 0; transition: opacity .4s; }
.r-fase.visivel { opacity: 1; }
.r-parada { display: flex; align-items: center; gap: 4px; margin: -22px 0 0 -22px; min-width: 44px; min-height: 44px; padding: 0 0 0 11px; opacity: 0; transition: opacity .35s; pointer-events: none; cursor: pointer; }
.r-parada i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--branco); border: 3px solid var(--tinta); box-shadow: 0 0 0 3px var(--branco); }
.r-parada i::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1 var(--font-texto); color: var(--tinta); }
.r-parada.visivel i::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--tinta); opacity: 0; animation: pulsar 2.2s ease-out infinite; }
@keyframes pulsar { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.3); opacity: 0; } }
.r-parada.escolhida i::after { color: var(--branco); }
.r-parada span { font: 600 16px/1 var(--font-titulo); color: var(--tinta); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; }
.r-parada.visivel { opacity: 1; pointer-events: auto; }
.r-parada.escolhida i { background: var(--tinta); }
.r-marcador { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--praca); box-shadow: 0 0 0 3px var(--branco); opacity: 0; transition: opacity .4s; }
.r-marcador.visivel { opacity: 1; }
.r-gov { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; transform-origin: 0 0; translate: -50% -50%; white-space: nowrap; background: var(--branco); color: var(--tinta); border: 1.5px solid var(--cinza-medio); font: 500 var(--texto-apoio)/1.1 var(--font-texto); opacity: 0; transition: opacity .4s; }
.r-gov b { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--cinza-medio); color: var(--branco); font: 600 16px/1 var(--font-titulo); }
.r-gov.ativo { border-color: var(--tinta); font-weight: 600; }
.r-gov.ativo b { background: var(--tinta); }
.r-gov.visivel { opacity: 1; }

/* ---------- Os passos e os cartões ---------- */
.historia { position: relative; z-index: 2; }
.cartao { background: var(--branco); color: var(--tinta); padding: 18px 18px 16px; box-shadow: 0 14px 40px rgba(50, 48, 56, .2); border-top: 3px solid var(--tinta); }
.cartao h1 { margin-top: 10px; font: var(--peso-titulo) clamp(30px, 3.6vw, 52px)/1.04 var(--font-titulo); letter-spacing: -.02em; }
.cartao h2 { margin-top: 6px; font: var(--peso-titulo) clamp(24px, 2.4vw, 34px)/1.1 var(--font-titulo); letter-spacing: -.015em; }
.cartao h3 { display: flex; align-items: baseline; gap: 12px; font: var(--peso-titulo) 22px/1.15 var(--font-titulo); letter-spacing: -.01em; }
.cartao .n { color: var(--cinza-medio); }
.cartao > p:not(.rotulo):not(.provisorio):not(.nota) { margin-top: 8px; font-weight: 400; line-height: 1.45; }
.cartao .destaque { margin-top: 0 !important; font: var(--peso-titulo) 24px/1.22 var(--font-titulo) !important; }
.acao { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 12px; font: 600 var(--texto-apoio)/1.2 var(--font-texto); text-decoration: none; border-bottom: 2px solid var(--tinta); }
.acao::after { content: "\2192"; font-weight: 500; }
.nota, .provisorio { margin-top: 10px; font: 400 var(--texto-apoio)/1.4 var(--font-texto); color: var(--texto-suave); }
details { margin-top: 8px; }
summary { display: inline-flex; min-height: 44px; align-items: center; font: 600 var(--texto-apoio)/1.2 var(--font-texto); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
details ul { margin-top: 4px; padding-left: 20px; display: grid; gap: 6px; font: 400 var(--texto-apoio)/1.45 var(--font-texto); }
details p { margin-top: 8px; font: 400 var(--texto-apoio)/1.5 var(--font-texto); }
.instrucao { margin-top: 8px; font: 500 var(--texto-apoio)/1.4 var(--font-texto); color: var(--grafite); }
.instrucao::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--tinta); vertical-align: .1em; }
/* Os botões das fases: borda, número, nome e seta; pressionado escurece; o da fase escolhida fica cheio */
.fases { list-style: none; padding: 0; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fase-botao { position: relative; text-decoration: none; color: var(--tinta); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; width: 100%; min-height: 56px; padding: 8px 30px 8px 12px;
  border: 1.5px solid var(--tinta); background: var(--branco); box-shadow: 0 2px 0 var(--tinta); transition: background-color .15s, transform .1s, box-shadow .1s; }
.fase-botao .num { font: var(--peso-titulo) 20px/1 var(--font-titulo); color: var(--cinza-medio); }
.fase-botao .nome { font: var(--peso-titulo) 16px/1.2 var(--font-titulo); }
.seta { position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.fase-botao:hover { background: var(--quase-branco); }
.fase-botao:active { transform: translateY(2px); box-shadow: 0 0 0 var(--tinta); background: #E6E6EA; }
.fase-botao[aria-current] { background: var(--tinta); color: var(--branco); }
.fase-botao[aria-current] .num { color: var(--cinza-claro); }
/* Os botões das etapas: no celular, quadrados numerados de 48 px (os nomes vão para o leitor de tela e para a folha) */
.etapas { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 6px; }
.etapa-botao { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 38px 6px 10px; text-align: left;
  border: 1.5px solid var(--tinta); background: var(--branco); box-shadow: 0 2px 0 var(--tinta); transition: background-color .15s, transform .1s, box-shadow .1s; }
.etapa-botao .num { flex: none; font: var(--peso-titulo) 18px/1 var(--font-titulo); font-variant-numeric: tabular-nums; color: var(--cinza-texto); }
.etapa-botao .curto { font: 500 var(--texto-apoio)/1.25 var(--font-texto); }
.etapa-botao .mais { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 20px/1 var(--font-texto); }
.etapa-botao[aria-expanded="true"] .num { color: var(--cinza-claro); }
.etapa-botao:hover { background: var(--quase-branco); }
.etapa-botao:active { transform: translateY(2px); box-shadow: 0 0 0 var(--tinta); background: #E6E6EA; }
.etapa-botao[aria-expanded="true"] { background: var(--tinta); color: var(--branco); }
.ver-mais { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font: 600 var(--texto-apoio)/1.2 var(--font-texto); text-decoration: underline; text-underline-offset: 4px; }
.ver-mais::after { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; text-decoration: none; font-weight: 600; line-height: 1; }
/* Os estados de foco: o anel de foco aparece por fora do botão, sobre qualquer fundo */
.fase-botao:focus-visible, .etapa-botao:focus-visible, .ver-mais:focus-visible, .acao:focus-visible, .capitulos-botao:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 6px var(--branco); }
.so-largo { display: none; }
@media (min-width: 900px) { .so-celular { display: none; } .so-largo { display: inline; } }
/* Os textos do cartão ficam sempre nos tons do cartão branco (o tema escuro do aparelho não mexe neles) */
.cartao, .caixa, .folha { --texto: var(--tinta); --texto-suave: var(--cinza-texto); color-scheme: light; color: var(--tinta); background: var(--branco); }
/* A folha do "ver mais" */
.folha { width: min(560px, calc(100vw - 24px)); max-height: 80svh; margin: auto auto 12px; padding: 0; border: 0; border-top: 3px solid var(--tinta); box-shadow: 0 -10px 40px rgba(50, 48, 56, .25); color: var(--tinta); }
@media (min-width: 900px) { .folha { margin: auto; } }
.folha::backdrop { background: rgba(50, 48, 56, .35); }
.folha-cabeca { position: sticky; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 18px 10px; background: var(--branco); }
.folha-titulo { font: var(--peso-titulo) 22px/1.2 var(--font-titulo); }
.folha-fechar { min-height: 44px; padding: 0 4px; font: 600 var(--texto-apoio)/1 var(--font-texto); text-decoration: underline; text-underline-offset: 4px; flex: none; }
.folha-corpo { padding: 0 18px 20px; font: 400 var(--texto-apoio)/1.5 var(--font-texto); }
.folha-corpo ul { padding-left: 20px; display: grid; gap: 8px; }
.folha-corpo p + p { margin-top: 10px; }
/* Em que ponto da história se está: uma barra fina sob o cabeçalho, um trecho por capítulo */
.progresso { position: fixed; z-index: 41; left: 0; right: 0; top: var(--cabecalho); display: flex; gap: 3px; height: 4px; padding: 0 var(--margem); }
.progresso span { position: relative; background: #DCDCE0; overflow: hidden; }
.progresso i { position: absolute; inset: 0; background: var(--tinta); transform: scaleX(0); transform-origin: left; }
html:not(.anima) .progresso, html:not(.anima) .rolar-dica { display: none; }
/* O sinal de que dá para rolar, no começo */
.rolar-dica { position: fixed; z-index: 11; left: 50%; top: 60%; transform: translateX(-50%); margin: 0; padding: 6px 12px 6px 30px; background: var(--tinta); color: var(--branco); font: 600 var(--texto-apoio)/1.2 var(--font-texto); white-space: nowrap; opacity: 0; transition: opacity .3s; pointer-events: none; }
.rolar-dica::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-75%) rotate(45deg); animation: descer 1.4s ease-in-out infinite; }
.rolar-dica.visivel { opacity: 1; }
@keyframes descer { 0%, 100% { margin-top: -2px; } 50% { margin-top: 2px; } }
@media (min-width: 900px) { .rolar-dica { top: auto !important; bottom: 28px; left: 30%; } }
/* No celular, o primeiro cartão é só o título, a frase e o botão */
@media (max-width: 899px) { .cartao-abertura .rotulo { display: none; } .cartao-abertura h1 { margin-top: 0; } .cartao-abertura { padding: 14px 16px 6px; } .cartao-abertura .acoes { column-gap: 14px; } .cartao-abertura .acao { white-space: nowrap; } .cartao-abertura .acao::after { margin-left: -4px; } .cartao-abertura .acao { min-height: 44px; margin-top: 4px; } }

/* A experiência animada (html.anima, posta pelo JavaScript só depois de iniciar tudo): cada passo é um trecho de
   rolagem, e o cartão dele fica no fluxo da página, grudado no pé da tela (celular) ou na coluna da direita
   (computador) enquanto o passo está à vista. Assim o texto está sempre na página: o toque rola como em qualquer
   página, o Tab avança pela história e, se o script falhar, os cartões continuam ali. A estrutura transparente
   dos passos não recebe toque (pointer-events: none), para o toque chegar às paradas do mapa. */
html.anima .historia { pointer-events: none; }
/* No celular, o cartão gruda no pé da tela durante o passo dele (o --topo vem do JavaScript: a altura da tela
   menos a do cartão) e sobe com a rolagem quando o passo termina, enquanto o próximo entra. */
html.anima .passo { min-height: 100svh; padding: 0 12px; }
html.anima .historia .cartao:not(.caixa) { position: sticky; top: var(--topo, 55svh); z-index: 10; pointer-events: auto; }
@media (min-width: 900px) {
  html.anima .passo { min-height: 100svh; padding: 26svh 40px 0 calc(60vw + 32px); }
  html.anima .historia .cartao:not(.caixa) { top: 26svh; }
}
/* Sem a experiência animada: os cartões um embaixo do outro, e a cena some */
html:not(.anima) .cena { display: none; }
html:not(.anima) .historia { padding: calc(var(--cabecalho) + 24px) var(--margem) 40px; display: grid; gap: 16px; max-width: 640px; margin: 0 auto; }
html:not(.anima) .passo:empty { display: none; }

/* O cartão da etapa: cresce a partir da parada e volta para ela */
.caixa { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 14px; pointer-events: auto; transform-origin: var(--ox, 50%) var(--oy, 0); }
.caixa.crescendo { animation: crescer .55s cubic-bezier(.2, .8, .2, 1) both; }
.caixa.voltando { animation: crescer .35s cubic-bezier(.6, 0, .8, .2) reverse both; }
@keyframes crescer { from { transform: scale(.04); opacity: .5; } to { transform: none; opacity: 1; } }
.caixa-titulo { margin: 8px 70px 12px 0; font: var(--peso-titulo) 23px/1.15 var(--font-titulo); }
.caixa-topicos { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: t; }
.caixa-topicos li { position: relative; padding-left: 30px; font: 400 17px/1.4 var(--font-texto); counter-increment: t; }
.caixa-topicos li::before { content: counter(t); position: absolute; left: 0; font: 600 17px/1.4 var(--font-titulo); color: var(--cinza-medio); }
.caixa-topicos li.sem-topicos { padding-left: 0; color: var(--texto-suave); }
.caixa-topicos li.sem-topicos::before { content: none; }
.caixa-fechar { position: absolute; top: 12px; right: 16px; min-height: 44px; padding: 0 4px; font: 600 var(--texto-apoio)/1 var(--font-texto); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 900px) {
  html.anima .historia .cartao:not(.caixa) { width: 400px; padding: 26px 28px 24px; }
  .caixa { left: 0; top: 0; right: auto; bottom: auto; width: 400px; padding: 26px 28px 24px; }
  html.anima .historia .cartao-abertura { width: 460px; }
  .cartao h3 { font-size: 28px; }
  .cartao .destaque { font-size: 28px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .caixa.crescendo, .caixa.voltando { animation: none; }
  .fio line, .fio circle, .r-parada, .r-fase, .r-marcador, .r-gov { transition: none; }
  .r-parada i::before, .rolar-dica::before { animation: none !important; }
}

/* A caixa da etapa: o nome completo da etapa antes dos tópicos; nas etapas sem detalhe, o aviso de protótipo */
.caixa-topicos li.nome-completo { counter-increment: none; padding-left: 0; color: var(--cinza-texto); font-size: var(--texto-apoio); }
.caixa-topicos li.nome-completo::before { content: none; }
.caixa-topicos { counter-reset: t; }

/* O seletor das cores do centro (para o Tiago comparar): discreto, no canto do mapa */
.seletor-centro { position: fixed; z-index: 12; right: 12px; top: calc(var(--cabecalho) + 14px); display: flex; align-items: center; gap: 0; background: var(--branco); border: 1.5px solid var(--tinta); font: 500 var(--texto-apoio)/1 var(--font-texto); }
.seletor-centro span { padding: 0 8px; color: var(--cinza-texto); }
.seletor-centro button { min-height: 44px; padding: 0 10px; border-left: 1.5px solid var(--tinta); }
.seletor-centro button[aria-pressed="true"] { background: var(--tinta); color: var(--branco); }
html:not(.anima) .seletor-centro { display: none; }
@media (min-width: 900px) { .seletor-centro { right: auto; left: 20px; top: auto; bottom: 20px; } }