/* Navegação */
.nav { display: flex; gap: var(--e2); }
.nav button {
  min-height: 44px; padding: 0 var(--e5);
  background: transparent; color: var(--ink);
  border: var(--borda); border-radius: var(--r3);
  font: 800 1rem var(--corpo); cursor: pointer;
  transition: background .15s, transform .12s;
}
.nav button:hover { background: var(--branco); transform: translateY(-2px); }
.nav button[aria-current="page"] { background: var(--amarelo); box-shadow: 0 3px 0 var(--ink); }

/* Atalhos e botões pequenos */
.atalhos { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
.btn-sec, .btn-mini {
  min-height: 44px; padding: 0 var(--e5);
  background: var(--branco); color: var(--ink);
  border: var(--borda); border-radius: var(--r3);
  font: 800 1rem var(--corpo); cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn-sec:hover, .btn-mini:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn-sec:active, .btn-mini:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-mini { background: var(--turquesa); }
.revise .btn-mini { margin-top: var(--e4); }

/* Páginas de estudo */
.tela.pagina.ativa { display: block; max-width: 880px; align-self: flex-start; padding-bottom: var(--e8); }
main:has(.pagina.ativa) { align-items: flex-start; }
.tit-pag { margin: 0 0 var(--e4); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; max-width: 22ch; }
.pagina .lead { max-width: 52ch; }
.fecho { margin-top: var(--e7); text-align: center; }

.topicos { display: grid; gap: var(--e3); }
.topico { background: var(--branco); border: var(--borda); border-radius: var(--r2); box-shadow: 0 4px 0 var(--ink); }
.topico summary {
  display: flex; align-items: center; gap: var(--e4);
  min-height: 64px; padding: var(--e3) var(--e5);
  list-style: none; cursor: pointer;
}
.topico summary::-webkit-details-marker { display: none; }
.topico summary::after { content: "+"; margin-left: auto; font: 800 1.75rem/1 var(--titulo); transition: transform .25s; }
.topico[open] summary::after { transform: rotate(45deg); }
.topico[open] summary { border-bottom: var(--borda); }
.topico .num {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--amarelo); border: var(--borda); border-radius: 50%;
  font: 800 1.125rem var(--titulo);
}
.topico .tt { font: 800 clamp(1.125rem, 2.4vw, 1.375rem)/1.2 var(--titulo); }
.topico .cod { margin-left: var(--e2); padding: 2px var(--e3); background: var(--papel); border: 2px solid var(--ink); border-radius: var(--r3); font-weight: 800; font-size: .8125rem; white-space: nowrap; }
.topico .corpo { padding: var(--e5); display: grid; gap: var(--e4); animation: entra .35s ease-out; }
.topico .resumo { margin: 0; font-size: 1.125rem; max-width: 62ch; }
.caixa { padding: var(--e3) var(--e4); border: var(--borda); border-radius: var(--r1); }
.caixa h4 { margin: 0 0 var(--e1); font: 800 .8125rem var(--corpo); letter-spacing: .08em; text-transform: uppercase; }
.caixa p { margin: 0; max-width: 62ch; }
.caixa.como { background: var(--papel); }
.caixa.exemplo { background: #dff4ff; }
.caixa.dica { background: #fff3c4; }
.caixa mark { background: var(--amarelo); color: var(--ink); font-weight: 800; padding: 0 var(--e1); border-radius: 6px; }
.corpo .btn-mini { justify-self: start; }

.lista-def { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e4); }
.lista-def dt { font-weight: 800; padding: 2px var(--e3); background: var(--papel); border: 2px solid var(--ink); border-radius: var(--r1); align-self: start; }
.lista-def dd { margin: 0; align-self: center; }

/* A prova */
.bloco { margin-top: var(--e7); }
.bloco h3 { margin: 0 0 var(--e3); font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.01em; }
.bloco p { max-width: 66ch; margin: 0 0 var(--e3); }
.anatomia { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
.parte { padding: var(--e4); background: var(--branco); border: var(--borda); border-radius: var(--r2); box-shadow: 0 4px 0 var(--ink); }
.parte .rotulo { display: inline-block; margin-bottom: var(--e2); padding: 2px var(--e3); background: var(--amarelo); border: 2px solid var(--ink); border-radius: var(--r3); font-weight: 800; font-size: .875rem; }
.parte .amostra { margin: 0 0 var(--e2); font-style: italic; font-weight: 700; }
.parte small { display: block; font-size: .9375rem; }
.passos { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: var(--e3); max-width: 66ch; }
.passos li { counter-increment: p; position: relative; padding: var(--e3) var(--e4) var(--e3) 72px; background: var(--branco); border: var(--borda); border-radius: var(--r2); }
.passos li::before {
  content: counter(p); position: absolute; left: var(--e4); top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--rosa); border: var(--borda); border-radius: 50%; font: 800 1.25rem var(--titulo);
}
.armadilhas { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e3); max-width: 66ch; }
.armadilhas li { padding: var(--e3) var(--e4); background: #fff3c4; border: var(--borda); border-radius: var(--r1); }
.tabela-rol { overflow-x: auto; border: var(--borda); border-radius: var(--r2); background: var(--branco); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; padding: var(--e3) var(--e4); background: var(--amarelo); border-bottom: var(--borda); }
.tabela td { padding: var(--e3) var(--e4); border-bottom: 2px solid var(--papel); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.familias { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4); margin-top: var(--e4); }
.familia { padding: var(--e4); border: var(--borda); border-radius: var(--r2); box-shadow: 0 4px 0 var(--ink); }
.familia h4 { margin: 0 0 var(--e2); font: 800 1.25rem/1.2 var(--titulo); }
.familia ul { margin: 0; padding-left: var(--e5); display: grid; gap: var(--e1); }
.f1 { background: #dff4ff; } .f2 { background: #fff3c4; } .f3 { background: #ffe0d6; } .f4 { background: #dff5d0; } .f5 { background: #ece3ff; }
.credito { margin-top: var(--e6); font-size: .9375rem; max-width: 66ch; }

@media (max-width: 760px) {
  .topo { flex-wrap: wrap; gap: var(--e3); }
  .nav { order: 3; width: 100%; }
  .nav button { flex: 1; padding: 0 var(--e3); }
  .anatomia { grid-template-columns: 1fr; }
  .topico summary { padding: var(--e3) var(--e4); gap: var(--e3); }
  .topico .corpo { padding: var(--e4); }
  .lista-def { grid-template-columns: 1fr; }
  .lista-def dt { justify-self: start; }
  .atalhos { justify-content: center; }
}

.pagina .lead { margin-inline: 0; }
body:has(.pagina.ativa) .cenario { opacity: .3; }

.texto-branco { padding: var(--e4) var(--e5); background: var(--branco); border: var(--borda); border-radius: var(--r2); box-shadow: 0 4px 0 var(--ink); max-width: 66ch; }
.texto-branco p { margin: 0; }
.texto-branco p + p { margin-top: var(--e3); }
.credito.texto-branco { margin-top: var(--e6); }

.rodape { width: fit-content; max-width: calc(100% - 32px); margin: 0 auto var(--e5); padding: var(--e2) var(--e5); background: var(--branco); border: var(--borda); border-radius: var(--r3); }

/* ===== Estações, vagões, imagens ===== */
[hidden] { display: none !important; }

.recorde { display: inline-block; margin: var(--e4) 0 0; padding: var(--e2) var(--e5); background: var(--branco); border: var(--borda); border-radius: var(--r3); box-shadow: 0 3px 0 var(--ink); font-weight: 800; }

.estacoes { display: grid; gap: var(--e3); margin-top: var(--e2); max-width: 560px; }
.estacao {
  position: relative; display: grid; gap: 2px; text-align: left;
  padding: var(--e3) var(--e5) var(--e3) 28px;
  background: var(--branco); color: var(--ink);
  border: var(--borda); border-radius: var(--r2); box-shadow: var(--sombra);
  font-family: var(--corpo); cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.estacao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-right: var(--borda); border-radius: 17px 0 0 17px; background: var(--faixa); }
.estacao.e1 { --faixa: var(--verde); }
.estacao.e2 { --faixa: var(--amarelo); }
.estacao.e3 { --faixa: var(--rosa); }
.estacao:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink); }
.estacao:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.e-num { font-weight: 800; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.e-tit { font: 800 1.375rem/1.15 var(--titulo); }
.e-sub { font-size: .9375rem; }
.e-meta { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e1); font-weight: 700; font-size: .9375rem; }
.nivel { display: inline-flex; gap: 4px; }
.nivel i { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; background: var(--branco); }
.nivel i.cheia { background: var(--ink); }
.e-rec { font-weight: 800; font-size: .875rem; }

/* Trem de vagões: 10 vagões por estação */
.trem-prog { display: flex; align-items: flex-end; gap: 4px; margin-top: var(--e3); padding-bottom: 5px; border-bottom: 3px solid var(--ink); max-width: 560px; }
.trem-prog .vagao {
  position: relative; flex: 1; min-width: 14px; height: 24px;
  background: var(--branco); border: 2px solid var(--ink); border-radius: 4px;
  display: grid; place-items: center; font: 800 .75rem/1 var(--corpo);
  transition: background .3s, transform .3s;
}
.trem-prog .vagao::after { content: ""; position: absolute; bottom: -9px; left: 18%; width: 64%; height: 6px; background: radial-gradient(circle at 20% 50%, var(--ink) 3px, transparent 3.5px), radial-gradient(circle at 80% 50%, var(--ink) 3px, transparent 3.5px); }
.trem-prog .vagao.ok { background: var(--verde); }
.trem-prog .vagao.ok::before { content: "\2713"; }
.trem-prog .vagao.erro { background: var(--vermelho); }
.trem-prog .vagao.erro::before { content: "\2717"; }
.trem-prog .vagao.atual { background: var(--amarelo); animation: trepida .5s ease-in-out infinite alternate; }
.trem-prog .loco {
  order: 99; flex: none; width: 46px; height: 30px; margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Crect x='7' y='2' width='6' height='9' fill='%2314301f'/%3E%3Crect x='2' y='10' width='28' height='12' rx='3' fill='%232f5d8a' stroke='%2314301f' stroke-width='2'/%3E%3Crect x='26' y='4' width='18' height='18' rx='3' fill='%23ff7a59' stroke='%2314301f' stroke-width='2'/%3E%3Crect x='30' y='8' width='9' height='6' rx='1' fill='%23bff1ff'/%3E%3Ccircle cx='10' cy='25' r='4' fill='%23ffd23f' stroke='%2314301f' stroke-width='2'/%3E%3Ccircle cx='24' cy='25' r='4' fill='%23ffd23f' stroke='%2314301f' stroke-width='2'/%3E%3Ccircle cx='38' cy='25' r='4' fill='%23ffd23f' stroke='%2314301f' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Imagem da questão */
.figura { display: block; margin: 0 auto var(--e5); padding: var(--e2); position: relative; background: var(--branco); border: var(--borda); border-radius: var(--r1); cursor: zoom-in; box-shadow: 0 4px 0 var(--ink); }
.figura img { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; margin: 0 auto; border-radius: 6px; }
.figura::after { content: "Ampliar"; position: absolute; right: var(--e3); bottom: var(--e3); padding: 2px var(--e3); background: var(--amarelo); border: 2px solid var(--ink); border-radius: var(--r3); font: 800 .75rem var(--corpo); }
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--e5); background: rgba(20, 48, 31, .88); cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 86vh; background: var(--branco); border: var(--borda); border-radius: var(--r1); }
.lb-fechar { position: absolute; top: var(--e4); right: var(--e4); min-height: 44px; padding: 0 var(--e5); background: var(--amarelo); color: var(--ink); border: var(--borda); border-radius: var(--r3); font: 800 1rem var(--corpo); cursor: pointer; }

.acoes-fim { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* Cartões das habilidades: letra branca */
.familia { color: var(--branco); }
.familia h4 { color: var(--branco); }
.f1 { background: #2f5d8a; } .f2 { background: #8c3b22; } .f3 { background: #5a3f8f; } .f4 { background: #1f6f63; } .f5 { background: #14301f; }
.familia li::marker { color: var(--amarelo); }

@media (max-width: 760px) {
  .estacoes { max-width: none; margin-inline: auto; }
  .acoes-fim { justify-content: center; }
  .figura img { max-height: 240px; }
}

/* ===== Ajustes para telas largas de computador ===== */
:root { --alt-cenario: clamp(130px, min(18vw, 30vh), 360px); }
.cenario { height: var(--alt-cenario); }
.fundo { inset: 0 0 var(--alt-cenario) 0; }

#inicio h1 { font-size: clamp(2.25rem, min(5vw, 8vh), 3.75rem); margin-bottom: var(--e3); }
#inicio .lead { max-width: 46ch; margin-bottom: var(--e4); font-size: clamp(1.0625rem, 2vh, 1.25rem); }
#inicio .mascote-grande, #fim .mascote-grande { width: min(100%, 300px, 36vh); }
#inicio.ativa, #fim.ativa { gap: var(--e6); }

.estacoes { max-width: 600px; gap: var(--e2); }
.estacao {
  grid-template-columns: 1fr auto; column-gap: var(--e4); align-items: center;
  padding: 10px var(--e5) 10px 28px; box-shadow: 0 5px 0 var(--ink);
}
.estacao .e-num { grid-column: 1; grid-row: 1; }
.estacao .e-tit { grid-column: 1; grid-row: 2; font-size: 1.25rem; }
.estacao .e-sub { grid-column: 1; grid-row: 3; }
.estacao .e-meta { grid-column: 2; grid-row: 1 / 3; justify-self: end; margin: 0; flex-direction: column; align-items: flex-end; gap: 2px; }
.estacao .e-rec { grid-column: 2; grid-row: 3; justify-self: end; }

.figura img { max-height: min(300px, 30vh); }

@media (max-width: 760px) {
  #inicio h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  #inicio .mascote-grande { width: min(60%, 200px); }
  .estacao .e-meta { flex-direction: row; align-items: center; grid-column: 1; grid-row: 4; justify-self: start; }
  .estacao .e-rec { grid-column: 1; grid-row: 5; justify-self: start; }
  .estacao { grid-template-columns: 1fr; }
  .estacao .e-meta, .estacao .e-rec { grid-row: auto; grid-column: 1; }
}

/* ===== Título acima da jacupemba ===== */
#inicio.ativa { grid-template-columns: minmax(280px, 400px) minmax(0, 560px); justify-content: center; }
.inicio-esq { display: grid; justify-items: center; text-align: center; gap: var(--e3); }
.inicio-esq .etiqueta { margin: 0; }
#inicio h1 { margin: 0; font-size: clamp(2.25rem, min(4.2vw, 7vh), 3.5rem); text-wrap: balance; }
#inicio .inicio-esq .mascote-grande { width: min(100%, 300px, 34vh); margin-top: var(--e2); }
@media (max-width: 760px) {
  #inicio.ativa { grid-template-columns: 1fr; }
  #inicio h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  #inicio .inicio-esq .mascote-grande { width: min(60%, 200px); }
}

/* ===== Cenário inteiro, sem corte ===== */
:root { --alt-cenario: clamp(130px, min(18vw, 34vh), 360px); }
.cenario {
  background:
    linear-gradient(to top, transparent 0 2.3%, #14301f 2.3% 3.5%, transparent 3.5% 5.4%, #14301f 5.4% 6.6%, transparent 6.6%),
    linear-gradient(to top, #8fd16a 0 10.8%, #bfe3a0 10.8% 27%, #d5ecbf 27% 45%, transparent 45%);
}

/* ===== Frase e estações mais acima; frase em duas linhas ===== */
#inicio.ativa { grid-template-columns: minmax(280px, 400px) minmax(0, 640px); align-items: start; }
#inicio .inicio-texto { padding-top: var(--e3); }
#inicio .inicio-texto .lead { max-width: none; font-size: clamp(.95rem, 1.15vw, 1.0625rem); margin-bottom: var(--e4); text-wrap: balance; }
.estacoes { max-width: 640px; }
@media (max-width: 760px) {
  #inicio.ativa { grid-template-columns: 1fr; align-items: center; }
  #inicio .inicio-texto { padding-top: 0; }
  #inicio .inicio-texto .lead { font-size: 1.0625rem; }
}

/* ===== Celular: cabeçalho compacto, estações logo à vista ===== */
@media (max-width: 760px) {
  .topo { padding: var(--e3) var(--e4); gap: var(--e2); }
  .marca { flex: 1; min-width: 0; font-size: 1.0625rem; }
  .som { padding: 0 var(--e3); }
  #som-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav button { font-size: .9375rem; padding: 0 var(--e2); }
  main { padding-top: var(--e2); }
  #inicio.ativa { gap: var(--e4); }
  .inicio-esq { gap: var(--e2); }
  #inicio .inicio-esq .mascote-grande { width: min(40%, 150px); margin-top: 0; }
  #inicio h1 { font-size: clamp(2rem, 9.5vw, 2.5rem); }
  .etiqueta { font-size: .75rem; }
  .estacao .e-meta { gap: var(--e3); }
}

/* ===== Celular: tela do jogo compacta ===== */
@media (max-width: 760px) {
  .placar { grid-template-columns: 1fr 1fr; gap: var(--e2) var(--e3); margin-bottom: var(--e2); }
  .placar .caso { grid-column: 1 / -1; padding-right: 0; }
  .placar .chip, .placar .chip.combo { grid-column: auto; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--e2); padding: 2px var(--e4); border-radius: var(--r3); }
  .placar .chip b { font-size: 1.375rem; }
  .mascote-lateral { width: 64px; margin-bottom: -28px; }
  .cartao { padding-top: var(--e6); }
  .figura img { max-height: 200px; }
  .retorno { padding: var(--e3) var(--e4); }
}

/* ===== Toque: botões confortáveis e sem atraso ===== */
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) {
  .btn-mini, .btn-sec, .btn-prox, .btn-grande { min-height: 48px; }
}

/* ===== Jacupemba em pé no topo da cachoeira ===== */
.mascote-grande.no-cenario { position: fixed; z-index: 2; margin: 0; max-width: none; pointer-events: none; }

/* ===== Início mais acima e mais à esquerda ===== */
main:has(#inicio.ativa) { align-items: flex-start; padding-top: 0; }
#inicio.ativa { justify-content: start; margin-left: clamp(0px, 3vw, 64px); }
#inicio .inicio-texto { padding-top: 0; }
#inicio .inicio-esq { padding-top: 0; }
@media (max-width: 760px) {
  #inicio.ativa { margin-left: 0; justify-content: stretch; }
}

/* O cenário agora é desenhado até as laterais: sem faixas de preenchimento */
.cenario { background: none; }

/* ===== Jacupemba e título mais à esquerda ===== */
#inicio.ativa { grid-template-columns: minmax(260px, 360px) minmax(0, 640px); margin-left: clamp(0px, .6vw, 16px); gap: var(--e5); }
@media (max-width: 760px) { #inicio.ativa { grid-template-columns: 1fr; margin-left: 0; } }

/* ===== Frase centralizada e estações um pouco mais abaixo ===== */
#inicio .inicio-texto .lead { text-align: center; margin-inline: auto; margin-bottom: var(--e6); }
@media (max-width: 760px) { #inicio .inicio-texto .lead { margin-bottom: var(--e5); } }

/* A tela inicial não anima a entrada: a jacupemba é fixa no cenário e precisa de referência estável */
#inicio.ativa { animation: none; }

/* ===== Selo e título encostados à esquerda (computador) ===== */
@media (min-width: 761px) {
  main:has(#inicio.ativa) { padding-left: var(--e4); }
  #inicio.ativa { margin-left: 0; grid-template-columns: minmax(260px, 320px) minmax(0, 640px); }
  #inicio .inicio-esq { justify-items: start; text-align: left; }
}

@media (min-width: 761px) {
  #inicio.ativa { max-width: none; width: 100%; grid-template-columns: 320px minmax(0, 1fr); }
  #inicio .inicio-texto { justify-self: center; width: min(640px, 100%); }
}

/* ===== Jogar / Matéria / A prova acima das estações (computador) ===== */
.nav-inicio { justify-content: center; margin-bottom: var(--e4); }
@media (min-width: 761px) {
  body:has(#inicio.ativa) .topo .nav { display: none; }
}
@media (max-width: 760px) {
  .nav-inicio { display: none; }
}

/* ===== Cartões das habilidades: todos verdes, letra branca ===== */
.f1, .f2, .f3, .f4, .f5 { background: #258549; color: var(--branco); }
.familia h4, .familia li { color: var(--branco); }
.familia li::marker { color: var(--branco); }

/* ===== Início: bloco do título centralizado, um pouco afastado da borda; jacupemba livre abaixo dele ===== */
#inicio.ativa { animation: revert; }
@media (min-width: 761px) {
  #inicio.ativa { grid-template-columns: max-content minmax(0, 1fr); }
  #inicio .inicio-esq { justify-items: center; text-align: center; margin-left: clamp(16px, 8vw, 150px); }
  #inicio .inicio-esq .mascote-grande { width: min(300px, 34vh); max-width: none; }
}

/* ===== Jacupemba colada ao título ===== */
@media (min-width: 761px) {
  #inicio .inicio-esq { gap: 0; }
  #inicio .inicio-esq .etiqueta { margin-bottom: var(--e3); }
  #inicio .inicio-esq .mascote-grande { margin-top: -18px; }
}

/* ===== Abas de volta ao cabeçalho (padrão); título um pouco mais abaixo ===== */
body:has(#inicio.ativa) .topo .nav { display: flex; }
.nav-inicio { display: none; }
@media (min-width: 761px) {
  #inicio .inicio-esq { margin-top: clamp(24px, 7vh, 72px); }
}

/* ===== Estações mais abaixo (computador) ===== */
@media (min-width: 761px) {
  #inicio .inicio-texto { padding-top: clamp(48px, 14vh, 120px); }
}

/* ===== Jacupemba um pouco menor na tela inicial (computador) ===== */
@media (min-width: 761px) {
  #inicio .inicio-esq .mascote-grande { width: min(240px, 29vh); }
}

/* ===== Estações um pouquinho mais acima ===== */
@media (min-width: 761px) {
  #inicio .inicio-texto { padding-top: clamp(36px, 11.5vh, 100px); }
}

/* ===== Estações mais acima e jacupemba menor (computador) ===== */
@media (min-width: 761px) {
  #inicio .inicio-texto { padding-top: clamp(24px, 8.5vh, 80px); }
  #inicio .inicio-esq .mascote-grande { width: min(200px, 25vh); }
}

/* ===== Jacupemba um pouco mais abaixo do título (computador) ===== */
@media (min-width: 761px) {
  #inicio .inicio-esq .mascote-grande { margin-top: 6px; }
}

/* ===== Abas sempre no mesmo lugar, centralizadas na página ===== */
html { scrollbar-gutter: stable; }
@media (min-width: 761px) {
  .topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .topo .marca { justify-self: start; }
  .topo .som { justify-self: end; }
}


/* ===== Texto inteiro para ler, sem cronômetro ===== */
.leitura { flex: 1; min-width: 0; }
.leitura-titulo { margin: 0 0 var(--e1); font: 800 clamp(1.75rem, 4vw, 2.5rem)/1.1 var(--titulo); letter-spacing: -.01em; text-wrap: balance; }
.leitura-autor { margin: 0 0 var(--e5); font-weight: 700; font-size: .9375rem; max-width: 66ch; text-wrap: pretty; }
.texto-lido { max-width: 66ch; font-size: 1.125rem; line-height: 1.7; }
.texto-lido p { margin: 0 0 var(--e3); text-wrap: pretty; }
.leitura-aviso { margin: var(--e5) 0; padding: var(--e3) var(--e4); max-width: 66ch; background: #fff3c4; border: var(--borda); border-radius: var(--r1); font-weight: 700; text-wrap: pretty; }
.reler { margin: 0 0 var(--e4); background: var(--papel); border: var(--borda); border-radius: var(--r1); }
.reler summary { min-height: 48px; padding: 0 var(--e4); display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.reler[open] summary { border-bottom: var(--borda); }
.reler .texto-lido { padding: var(--e4); max-height: 50vh; overflow: auto; }
.tempo.sem-tempo { background: #fff3c4; }
.tempo.sem-tempo i { display: none; }


/* ===== Textos com subtítulo e imagem ===== */
.texto-lido h3 { margin: var(--e4) 0 var(--e2); font: 800 1.25rem/1.2 var(--titulo); }
.texto-lido h3:first-child { margin-top: 0; }
.texto-fig { margin: var(--e4) 0 0; padding: 0; }
.texto-fig img { display: block; max-width: 100%; max-height: 340px; width: auto; height: auto; border: var(--borda); border-radius: var(--r1); background: var(--branco); }

/* ===== Dois anos: cabeçalho com link, selo do ano e página inicial ===== */
a.marca { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--e2); }
a.marca:hover { text-decoration: underline; }
.marca .ano { padding: 2px var(--e3); background: var(--amarelo); border: 2px solid var(--ink); border-radius: var(--r3); font: 800 .75rem var(--corpo); letter-spacing: .04em; }
.topo-dir { display: flex; align-items: center; gap: var(--e2); justify-self: end; }
.trocar-ano {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--e4);
  background: var(--branco); color: var(--ink); border: var(--borda); border-radius: var(--r3);
  font: 800 .9375rem var(--corpo); text-decoration: none; white-space: nowrap;
}
.trocar-ano:hover { background: var(--amarelo); }
@media (max-width: 760px) {
  .topo-dir { gap: var(--e1); }
  .trocar-ano { padding: 0 var(--e3); font-size: .8125rem; }
  .marca .ano { display: none; }
}

.pagina-inicial main { align-items: center; }
#escolha.ativa { display: grid; justify-items: center; text-align: center; gap: var(--e3); max-width: 900px; }
#escolha .etiqueta { margin: 0; }
#escolha h1 { margin: 0; font-size: clamp(2.25rem, min(6vw, 9vh), 4rem); line-height: 1; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
#escolha .mascote-grande { width: min(190px, 22vh); margin: 0 auto; }
.escolha-pergunta { margin: var(--e2) 0 0; font: 800 clamp(1.25rem, 2.4vw, 1.75rem)/1.2 var(--titulo); }
.anos { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: var(--e5); margin-top: var(--e2); }
.ano-card {
  position: relative; display: grid; justify-items: center; gap: 2px;
  padding: calc(var(--e5) + 8px) var(--e5) var(--e4);
  background: var(--branco); color: var(--ink); text-decoration: none;
  border: var(--borda); border-radius: var(--r2); box-shadow: var(--sombra);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.ano-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--faixa); border-bottom: var(--borda); border-radius: 17px 17px 0 0; }
.ano-card.a5 { --faixa: var(--verde); }
.ano-card.a9 { --faixa: var(--rosa); }
.ano-card:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink); }
.ano-card:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.a-num { font: 800 clamp(3.25rem, 7vw, 4.75rem)/1 var(--titulo); }
.a-ano { margin-top: -4px; font: 800 1.375rem/1 var(--titulo); }
.a-desc { margin-top: var(--e3); font-weight: 800; text-wrap: balance; }
.a-meta { font-size: .875rem; font-weight: 700; }
@media (max-width: 560px) {
  .anos { grid-template-columns: 1fr 1fr; gap: var(--e3); width: 100%; max-width: 420px; }
  .ano-card { padding: calc(var(--e4) + 8px) var(--e3) var(--e3); }
  .a-num { font-size: 3rem; }
  .a-ano { font-size: 1.125rem; }
  .a-desc { margin-top: var(--e2); font-size: .875rem; }
  .a-meta { margin-top: var(--e1); font-size: .75rem; }
  #escolha .mascote-grande { width: min(130px, 16vh); }
}


/* ===== Página inicial: um botão de cada lado da jacupemba ===== */
#escolha.ativa { max-width: 1000px; width: 100%; }
.escolha-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--e6); width: 100%; margin-top: var(--e3); }
.escolha-grade .ano-card { width: 100%; max-width: 320px; }
.escolha-grade .a5 { justify-self: end; }
.escolha-grade .a9 { justify-self: start; }
.escolha-grade .mascote-grande { width: min(230px, 30vh); margin: 0; }
@media (max-width: 560px) {
  .escolha-grade { gap: var(--e2); }
  .escolha-grade .mascote-grande { width: 84px; }
  .escolha-grade .ano-card { padding: calc(var(--e4) + 6px) var(--e2) var(--e3); }
  .escolha-grade .a-num { font-size: 2.5rem; }
  .escolha-grade .a-ano { font-size: 1rem; }
  .escolha-grade .a-desc { display: none; }
  .escolha-grade .a-meta { margin-top: var(--e2); font-size: .6875rem; }
}

/* A página inicial termina acima do cenário: nada fica por cima das colinas, da estação e da igreja */
.pagina-inicial main { padding-bottom: calc(var(--alt-cenario) + var(--e3)); }

/* Telas baixas: a página inicial fica mais compacta para não passar por cima do cenário */
@media (min-width: 561px) and (max-height: 780px) {
  #escolha.ativa { gap: var(--e2); }
  #escolha h1 { font-size: clamp(2rem, min(5vw, 7.5vh), 3.5rem); }
  .escolha-pergunta { margin-top: 0; font-size: 1.25rem; }
  .escolha-grade { margin-top: var(--e2); }
  .escolha-grade .mascote-grande { width: min(180px, 25vh); }
  .escolha-grade .ano-card { padding: calc(var(--e4) + 2px) var(--e4) var(--e3); }
  .escolha-grade .a-num { font-size: 3.25rem; }
  .escolha-grade .a-desc { margin-top: var(--e1); }
}