/* O Amazonas — estilos do site
   Cores e fontes ficam nas variáveis do :root (modo claro) e nos blocos de modo escuro logo abaixo. */

:root{
  --bg:#EEF4EC; --surface:#FFFFFF; --surface-2:#F6FAF5; --ink:#15241B; --muted:#4A5C51; --line:#C7D7CB;
  --leaf:#1E6B47; --leaf-2:#2F8A5D; --leaf-soft:#DCEFE2;
  --acai:#6A2C6E; --acai-soft:#F3E6F3;
  --rio:#0D6886; --rio-soft:#DFF0F6;
  --jambu:#F2B705; --jambu-ink:#3A2C00; --jambu-soft:#FFF3C8;
  --urucum:#B5381B; --misto:#7C8780; --clima:#4C86A8;
  --terra:#D6E6CC; --terra-line:#8FAE86; --agua:#4FA3C7; --vizinho:#E3EADF;
  --sombra:0 2px 0 rgba(21,36,27,.08), 0 10px 24px -12px rgba(21,36,27,.25);
  --display:"Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --text:"Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1913; --surface:#16241C; --surface-2:#1B2C22; --ink:#E7F0E9; --muted:#A8BAAE; --line:#2C4035;
    --leaf:#5CBB89; --leaf-2:#7DD0A3; --leaf-soft:#1E3A2B;
    --acai:#D49AD8; --acai-soft:#2E1D30;
    --rio:#5BBEDF; --rio-soft:#13303B;
    --jambu:#F5C842; --jambu-ink:#2A2000; --jambu-soft:#3A3115;
    --urucum:#FF8A6B; --misto:#9AA59E; --clima:#7FB4D3;
    --terra:#22382A; --terra-line:#4F7558; --agua:#3E8DB0; --vizinho:#18261E;
    --sombra:0 2px 0 rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1913; --surface:#16241C; --surface-2:#1B2C22; --ink:#E7F0E9; --muted:#A8BAAE; --line:#2C4035;
  --leaf:#5CBB89; --leaf-2:#7DD0A3; --leaf-soft:#1E3A2B;
  --acai:#D49AD8; --acai-soft:#2E1D30;
  --rio:#5BBEDF; --rio-soft:#13303B;
  --jambu:#F5C842; --jambu-ink:#2A2000; --jambu-soft:#3A3115;
  --urucum:#FF8A6B; --misto:#9AA59E; --clima:#7FB4D3;
  --terra:#22382A; --terra-line:#4F7558; --agua:#3E8DB0; --vizinho:#18261E;
  --sombra:0 2px 0 rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.6);
}
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px); scroll-behavior:smooth; font-size:100%; }
html.letra-grande{ font-size:118%; }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:1.125rem; line-height:1.6;
  padding-top:64px; padding-bottom:96px;
  -webkit-text-size-adjust:100%;
}
img,svg{ max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:var(--rio); }
:focus-visible{ outline:3px solid var(--jambu); outline-offset:3px; border-radius:6px; }
h1,h2,h3{ font-family:var(--display); line-height:1.1; margin:0; letter-spacing:-.01em; }
h2{ font-size:clamp(2rem, 5.5vw, 3rem); font-weight:800; }
h3{ font-size:1.45rem; font-weight:700; }
p{ margin:0 0 .8em; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- barra de cima ---------- */
.topo{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topo .dentro{ max-width:1120px; margin:0 auto; height:64px; display:flex; align-items:center; gap:.6rem; padding:0 1rem; }
.marca{ font-family:var(--display); font-weight:800; font-size:1.25rem; text-decoration:none; color:var(--ink); margin-right:auto; display:flex; align-items:center; gap:.4rem; }
.pilula{
  display:flex; align-items:center; gap:.5rem; border:2px solid var(--leaf); background:var(--surface);
  border-radius:999px; padding:.35rem .8rem .35rem .55rem; font-weight:700; font-size:1rem; min-height:44px;
}
.pilula .barrinha{ width:56px; height:8px; border-radius:8px; background:var(--leaf-soft); overflow:hidden; }
.pilula .barrinha i{ display:block; height:100%; width:0; background:var(--leaf); border-radius:8px; transition:width .6s ease; }
.pilula.pulo{ animation:pulo .6s ease; }
@keyframes pulo{ 30%{ transform:scale(1.12);} 60%{ transform:scale(.97);} }
.botao-letra{ min-width:44px; min-height:44px; border-radius:12px; border:2px solid var(--line); background:var(--surface); font-weight:700; }
.botao-letra[aria-pressed="true"]{ border-color:var(--ink); }

/* ---------- navegação de baixo ---------- */
.paradas{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -16px rgba(0,0,0,.35);
}
.paradas ol{ list-style:none; margin:0 auto; padding:.35rem .4rem; display:grid; grid-template-columns:repeat(6,1fr); max-width:780px; gap:.2rem; }
.paradas a{
  display:flex; flex-direction:column; align-items:center; gap:.05rem; text-decoration:none; color:var(--muted);
  font-size:.82rem; font-weight:700; padding:.35rem .2rem; border-radius:14px; min-height:56px; justify-content:center;
}
.paradas a span{ font-size:1.45rem; line-height:1; }
.paradas a.ativa{ color:var(--ink); background:var(--leaf-soft); }

/* ---------- estrutura ---------- */
section{ padding:4.5rem 1.1rem 3.5rem; }
.largura{ max-width:1080px; margin:0 auto; }
.cabeca{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem; }
.cabeca .selo{
  flex:none; width:64px; height:64px; border-radius:22px; display:grid; place-items:center; font-size:2rem;
  background:var(--surface); border:2px solid var(--line); box-shadow:var(--sombra);
}
.cabeca p{ color:var(--muted); max-width:58ch; margin:.5rem 0 0; font-size:1.15rem; }

/* ---------- abertura ---------- */
.abertura{ min-height:calc(100svh - 64px); display:flex; align-items:center; padding-top:2rem; position:relative; overflow:hidden; }
.abertura .largura{ width:100%; position:relative; z-index:1; }
.abertura h1{
  font-size:clamp(3.4rem, 14.5vw, 11rem); font-weight:800; line-height:.86; letter-spacing:-.035em;
  background:linear-gradient(100deg, var(--leaf) 0%, var(--rio) 30%, var(--leaf-2) 55%, var(--rio) 80%, var(--leaf) 100%);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:correnteza 14s linear infinite; padding-bottom:.08em;
}
.abertura h1 small{ display:block; font-size:.32em; letter-spacing:0; line-height:1; color:var(--ink); -webkit-text-fill-color:var(--ink); margin-bottom:.1em; }
@keyframes correnteza{ to{ background-position:-300% 0; } }
.abertura .chamada{ font-size:clamp(1.2rem, 3vw, 1.5rem); max-width:36ch; margin:1.2rem 0 1.8rem; }
.botao-grande{
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; font-size:1.35rem;
  background:var(--leaf); color:#fff; border:0; border-radius:18px; padding:.85rem 1.5rem; text-decoration:none;
  box-shadow:0 4px 0 color-mix(in srgb, var(--leaf) 60%, #000); min-height:56px;
}
:root[data-theme="dark"] .botao-grande, .escuro .botao-grande{ color:#06140C; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .botao-grande{ color:#06140C; } }
.botao-grande:active{ transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb, var(--leaf) 60%, #000); }
.como{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.8rem; margin-top:2.4rem; max-width:720px; }
.como div{ background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:.9rem; font-size:1rem; line-height:1.35; }
.como b{ display:block; font-size:1.8rem; line-height:1; margin-bottom:.4rem; }
.ondas{ position:absolute; left:0; right:0; bottom:0; height:38%; z-index:0; pointer-events:none; opacity:.9; }
.ondas path{ fill:none; stroke:var(--agua); stroke-width:3; stroke-linecap:round; opacity:.35; stroke-dasharray:14 22; animation:fluir 6s linear infinite; }
.ondas path:nth-child(2){ animation-duration:9s; opacity:.25; }
.ondas path:nth-child(3){ animation-duration:12s; opacity:.18; }
@keyframes fluir{ to{ stroke-dashoffset:-360; } }

/* ---------- botão ouvir ---------- */
.ouvir{
  display:inline-flex; align-items:center; gap:.35rem; border:2px solid currentColor; background:transparent;
  border-radius:999px; padding:.25rem .8rem; font-weight:700; font-size:.95rem; min-height:40px;
}
.ouvir[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.sem-voz .ouvir{ display:none; }

/* ---------- mapa ---------- */
.mapa-grade{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:1.2rem; align-items:start; }
.mapa-caixa{ background:var(--surface); border:2px solid var(--line); border-radius:26px; padding:.6rem; box-shadow:var(--sombra); }
#mapa{ display:block; width:100%; height:auto; }
#mapa .vizinho{ fill:var(--vizinho); }
#mapa .estado{ fill:var(--terra); stroke:var(--terra-line); stroke-width:3; stroke-linejoin:round; }
#mapa .rio{ fill:none; stroke:var(--agua); stroke-linecap:round; stroke-linejoin:round; }
#mapa .rio-corre{ fill:none; stroke:#fff; stroke-opacity:.55; stroke-linecap:round; stroke-dasharray:6 18; animation:fluir 8s linear infinite; }
#mapa .nome-pais{ fill:var(--muted); font:italic 700 20px var(--text); opacity:.8; }
#mapa .nome-rio{ fill:var(--rio); font:italic 600 16px var(--text); }
#mapa .zona-sul{ fill:var(--urucum); opacity:.14; }
#mapa .cidade-pequena{ fill:var(--ink); font:600 15px var(--text); }
#mapa .ponto{ cursor:pointer; outline:none; }
#mapa .ponto .halo{ fill:var(--jambu); opacity:0; transform-box:fill-box; transform-origin:center; }
#mapa .ponto.novo .halo{ animation:halo 2.2s ease-out infinite; }
@keyframes halo{ 0%{ opacity:.55; transform:scale(.6);} 100%{ opacity:0; transform:scale(1.9);} }
#mapa .ponto .bola{ fill:var(--surface); stroke:var(--ink); stroke-width:3; transition:transform .2s; transform-box:fill-box; transform-origin:center; }
#mapa .ponto:hover .bola, #mapa .ponto:focus-visible .bola{ transform:scale(1.12); }
#mapa .ponto.escolhido .bola{ fill:var(--jambu); stroke-width:4; }
#mapa .ponto .emoji{ font-size:24px; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
#mapa .ponto .rotulo{ font:700 20px var(--display); fill:var(--ink); paint-order:stroke; stroke:var(--terra); stroke-width:6px; stroke-linejoin:round; pointer-events:none; }
#mapa .ponto .visto{ fill:var(--leaf); }
#mapa .ponto .visto-txt{ fill:#fff; font:700 14px var(--text); text-anchor:middle; dominant-baseline:central; }
.legenda{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; padding:.6rem .6rem .3rem; font-size:.98rem; color:var(--muted); }
.legenda span{ display:inline-flex; align-items:center; gap:.4rem; }
.legenda i{ width:14px; height:14px; border-radius:50%; display:inline-block; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{
  border:2px solid var(--line); background:var(--surface); border-radius:999px; padding:.45rem .9rem; font-weight:700; font-size:1rem; min-height:44px;
  display:inline-flex; align-items:center; gap:.4rem;
}
.chip[aria-pressed="true"]{ border-color:var(--ink); background:var(--jambu-soft); }
.chip .ok{ color:var(--leaf); font-size:.9rem; }
.painel{ background:var(--surface); border:2px solid var(--line); border-radius:26px; padding:1.3rem; box-shadow:var(--sombra); position:sticky; top:84px; }
.painel.vazio{ text-align:center; color:var(--muted); padding:2.5rem 1.3rem; }
.painel.vazio .grande{ font-size:3.4rem; display:block; margin-bottom:.4rem; animation:aponta 1.6s ease-in-out infinite; }
@keyframes aponta{ 50%{ transform:translate(-6px,-6px); } }
.painel h3{ font-size:1.8rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; }
.bloco{ border-radius:18px; padding:.9rem 1rem; margin-top:.8rem; border-left:8px solid; }
.bloco h4{ margin:0 0 .4rem; font-family:var(--display); font-size:1.15rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.bloco ul{ margin:0; padding-left:1.1rem; }
.bloco li{ margin:.35rem 0; }
.bloco.antes{ background:var(--acai-soft); border-color:var(--acai); }
.bloco.antes h4{ color:var(--acai); }
.bloco.depois{ background:var(--rio-soft); border-color:var(--rio); }
.bloco.depois h4{ color:var(--rio); }
.bloco.proposta{ background:var(--jambu-soft); border-color:var(--jambu); }
.bloco.proposta h4{ color:var(--ink); }
.bloco.lula{ background:var(--leaf-soft); border-color:var(--leaf); }
.bloco.lula h4{ color:var(--leaf); }
.painel.entrou, .duelo-caixa.entrou{ animation:entra .35s ease; }
@keyframes entra{ from{ opacity:.2; transform:translateY(8px);} }

/* ---------- linha do tempo ---------- */
.trilho-caixa{ position:relative; }
.trilho{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem .2rem 1.2rem;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.trilho::-webkit-scrollbar{ display:none; }
.evento{
  scroll-snap-align:center; flex:0 0 min(86vw, 560px); background:var(--surface); border:2px solid var(--line);
  border-radius:26px; padding:1.3rem 1.3rem 1.1rem; box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.evento .topo-ev{ display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; }
.evento .icone{ font-size:2.6rem; line-height:1; width:68px; height:68px; display:grid; place-items:center; background:var(--acai-soft); border-radius:20px; flex:none; }
.evento .quando{ font-family:var(--display); font-weight:700; color:var(--acai); font-size:1.1rem; line-height:1.1; }
.evento .onde{ color:var(--muted); font-size:.98rem; }
.evento h3{ font-size:1.6rem; margin-bottom:.5rem; }
.numero{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin:.4rem 0 .8rem; padding:.7rem .9rem; background:var(--surface-2); border-radius:16px; }
.numero b{ font-family:var(--display); font-size:2.8rem; line-height:1; color:var(--urucum); font-variant-numeric:tabular-nums; }
.numero span{ font-weight:700; color:var(--muted); line-height:1.25; }
.mais{ margin-top:auto; }
.mais details{ border-top:2px dashed var(--line); padding-top:.6rem; }
.mais summary{ cursor:pointer; font-weight:700; color:var(--rio); min-height:44px; display:flex; align-items:center; list-style:none; }
.mais summary::-webkit-details-marker{ display:none; }
.mais summary::before{ content:"＋"; margin-right:.5rem; font-weight:700; }
.mais details[open] summary::before{ content:"－"; }
.mais ul{ margin:.2rem 0 .6rem; padding-left:1.1rem; }
.mais li{ margin:.35rem 0; }
.controles{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:.4rem; }
.seta{ width:56px; height:56px; border-radius:50%; border:2px solid var(--ink); background:var(--surface); font-size:1.5rem; font-weight:700; }
.seta:disabled{ opacity:.3; cursor:default; }
.pontinhos{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; max-width:60vw; }
.pontinhos button{ width:14px; height:14px; padding:0; border-radius:50%; border:2px solid var(--acai); background:transparent; }
.pontinhos button.atual{ background:var(--acai); transform:scale(1.25); }
.pontinhos button.visto{ background:color-mix(in srgb, var(--acai) 35%, transparent); }

/* ---------- propostas (cartões que viram) ---------- */
.aviso-faixa{
  display:flex; gap:.8rem; align-items:flex-start; background:var(--surface); border:2px dashed var(--line);
  border-radius:20px; padding:1rem 1.1rem; margin-bottom:1.4rem; max-width:760px;
}
.aviso-faixa b.ic{ font-size:1.8rem; line-height:1; }
.cartoes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:1.1rem; }
.cartao{ perspective:1400px; }
.cartao .giro{ display:grid; transition:transform .7s cubic-bezier(.3,.8,.3,1); transform-style:preserve-3d; height:100%; }
.cartao.virado .giro{ transform:rotateY(180deg); }
.face{
  grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:24px; padding:1.2rem 1.2rem 1rem;
  border:2px solid var(--line); box-shadow:var(--sombra); display:flex; flex-direction:column; gap:.4rem;
}
.face.frente{ background:var(--surface); }
.face.verso{ background:var(--jambu-soft); border-color:var(--jambu); transform:rotateY(180deg); }
.face .ic{ font-size:2.6rem; line-height:1; }
.face h3{ font-size:1.5rem; }
.face .rot{ font-weight:700; color:var(--muted); font-size:1rem; margin-top:.3rem; }
.face .rot.alerta{ color:var(--urucum); }
.face p{ margin:0; }
.face .extra{ font-size:1rem; background:var(--surface); border-radius:14px; padding:.6rem .8rem; margin-top:.3rem; }
.face .acoes{ margin-top:auto; padding-top:.7rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.virar{
  border:0; background:var(--ink); color:var(--bg); font-weight:700; border-radius:999px; padding:.5rem 1rem; min-height:44px;
  display:inline-flex; align-items:center; gap:.4rem;
}
.cartao.visto .frente .virar::after{ content:"✓"; color:var(--leaf-2); margin-left:.2rem; }
.lula-box{ background:var(--rio-soft); border:2px solid var(--rio); border-radius:16px; padding:.7rem .9rem; margin-top:.5rem; }
.lula-box b{ display:block; color:var(--rio); font-family:var(--display); font-size:1.1rem; margin-bottom:.15rem; }
.destaque-zfm{ background:var(--surface); border:3px solid var(--jambu); border-radius:26px; padding:1.3rem; box-shadow:var(--sombra); margin-bottom:1.6rem; }
.destaque-zfm > h3{ font-size:clamp(1.5rem, 4.2vw, 2rem); margin-bottom:1rem; display:flex; gap:.5rem; align-items:flex-start; }
.destaque-zfm .canto li strong{ color:var(--ink); }
.plano-links{ margin-top:1.5rem; font-size:1rem; color:var(--muted); max-width:760px; }

/* ---------- comparar ---------- */
.avisos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.8rem; margin-bottom:1.6rem; }
.avisos div{ background:var(--surface); border:2px solid var(--line); border-radius:20px; padding:1rem; font-size:1rem; line-height:1.4; }
.avisos b{ display:block; font-family:var(--display); font-size:1.15rem; margin:.3rem 0 .2rem; }
.avisos .ic{ font-size:1.8rem; line-height:1; }
.temas{ display:flex; gap:.5rem; overflow-x:auto; padding:.2rem .1rem .8rem; scrollbar-width:thin; }
.temas .chip{ flex:none; }
.grafico-caixa{ background:var(--surface); border:2px solid var(--line); border-radius:26px; padding:1.3rem; box-shadow:var(--sombra); }
.grafico-caixa h3{ font-size:1.7rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.grafico-caixa .unid{ color:var(--muted); font-size:1rem; margin:.2rem 0 1rem; }
.grafico{ display:flex; align-items:flex-end; gap:clamp(.4rem, 2vw, 1.2rem); height:260px; padding:0 .2rem; border-bottom:3px solid var(--ink); overflow-x:auto; }
.barra{ flex:1 1 0; min-width:44px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.barra .valor{ font-family:var(--display); font-weight:700; font-size:1.05rem; white-space:nowrap; margin-bottom:.2rem; font-variant-numeric:tabular-nums; }
.barra .col{ width:100%; max-width:84px; height:0; border-radius:12px 12px 0 0; transition:height 1s cubic-bezier(.2,.9,.3,1); }
.barra .col.a{ background:var(--acai); }
.barra .col.m{ background:var(--misto); }
.barra .col.b{ background:var(--rio); }
.barra .col.c{ background:var(--clima); }
.anos{ display:flex; gap:clamp(.4rem, 2vw, 1.2rem); padding:.4rem .2rem 0; }
.anos span{ flex:1 1 0; min-width:44px; text-align:center; font-weight:700; font-size:.98rem; line-height:1.2; }
.fonte{ font-size:.92rem; color:var(--muted); margin-top:.6rem; }
.leg-periodo{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.98rem; color:var(--muted); margin:.2rem 0 .8rem; }
.leg-periodo span{ display:inline-flex; align-items:center; gap:.4rem; }
.leg-periodo i{ width:16px; height:16px; border-radius:4px; display:inline-block; }
.duas-colunas{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1.2rem; }
.lado{ border-radius:18px; padding:.9rem 1rem; }
.lado small{ display:block; font-weight:700; font-size:.95rem; margin-bottom:.2rem; }
.lado.a{ background:var(--acai-soft); }
.lado.a small{ color:var(--acai); }
.lado.b{ background:var(--rio-soft); }
.lado.b small{ color:var(--rio); }
.ladoN{ font-family:var(--display); font-size:2.4rem; font-weight:800; line-height:1; display:block; margin:.2rem 0; }
.leitura{ margin-top:1rem; display:grid; gap:.7rem; }
.leitura div{ display:flex; gap:.7rem; align-items:flex-start; }
.leitura .ic{ font-size:1.5rem; line-height:1.2; flex:none; }
.leitura p{ margin:0; }
.leitura b{ display:block; }

/* ---------- Lula x Flávio ---------- */
#duelo{ background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--urucum) 7%, transparent) 30%, transparent); }
.alerta-faixa{ display:inline-flex; align-items:center; gap:.5rem; background:var(--urucum); color:#fff; font-weight:700; border-radius:999px; padding:.35rem 1rem; font-size:1rem; margin-bottom:1rem; }
.alerta-faixa i{ width:10px; height:10px; border-radius:50%; background:#fff; animation:piscar 1.2s ease-in-out infinite; }
@keyframes piscar{ 50%{ opacity:.2; } }
.duelo-caixa{ background:var(--surface); border:2px solid var(--line); border-radius:26px; padding:1.3rem; box-shadow:var(--sombra); }
.duelo-caixa > h3{ font-size:clamp(1.6rem, 4.5vw, 2.2rem); margin-bottom:1rem; }
.ringue{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ringue.um{ grid-template-columns:1fr; }
.canto{ border-radius:22px; padding:1.1rem 1.1rem 1rem; border:3px solid; }
.canto.f{ border-color:var(--acai); background:var(--acai-soft); }
.canto.l{ border-color:var(--rio); background:var(--rio-soft); }
.canto .quem{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800; font-size:1.35rem; margin-bottom:.4rem; }
.canto.f .quem{ color:var(--acai); }
.canto.l .quem{ color:var(--rio); }
.canto .quem b{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:1.2rem; flex:none; }
.canto.f .quem b{ background:var(--acai); }
.canto.l .quem b{ background:var(--rio); }
:root[data-theme="dark"] .canto .quem b{ color:#0E1913; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .canto .quem b{ color:#0E1913; } }
.placa{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; background:var(--surface); border-radius:16px; padding:.7rem .9rem; margin:.4rem 0 .7rem; }
.placa strong{ font-family:var(--display); font-size:3rem; line-height:1; white-space:nowrap; }
.canto.f .placa strong{ color:var(--urucum); }
.canto.l .placa strong{ color:var(--leaf); }
.placa span{ font-weight:700; color:var(--muted); line-height:1.25; }
.canto ul{ margin:0; padding-left:1.1rem; }
.canto li{ margin:.4rem 0; }
.canto .fonte{ margin-top:.7rem; }
.frases{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:1rem; }
.frase-cartao{ background:var(--acai-soft); border-radius:22px; padding:1.1rem; border-left:8px solid var(--acai); display:flex; flex-direction:column; gap:.4rem; }
.frase-cartao blockquote{ margin:0; font-family:var(--display); font-weight:700; font-size:1.45rem; line-height:1.2; }
.frase-cartao blockquote::before{ content:"“"; color:var(--urucum); font-size:2.2rem; line-height:0; vertical-align:-.35em; margin-right:.1em; }
.frase-cartao .autor{ font-weight:700; }
.frase-cartao .ctx{ color:var(--muted); font-size:1rem; }
.frase-cartao .acoes{ margin-top:auto; padding-top:.4rem; }
.nota-pai{ background:var(--surface); border:2px dashed var(--line); border-radius:16px; padding:.7rem 1rem; margin-bottom:1rem; font-size:1rem; }
@media (max-width: 760px){ .ringue{ grid-template-columns:1fr; } }
@media (max-width: 420px){ .paradas a{ font-size:.72rem; } .paradas a span{ font-size:1.3rem; } }

/* ---------- jogo ---------- */
.jogo{ max-width:760px; margin:0 auto; background:var(--surface); border:2px solid var(--line); border-radius:28px; padding:1.4rem; box-shadow:var(--sombra); text-align:center; }
.jogo .progresso{ display:flex; gap:.35rem; justify-content:center; margin-bottom:1rem; flex-wrap:wrap; }
.jogo .progresso i{ width:22px; height:8px; border-radius:6px; background:var(--line); }
.jogo .progresso i.certo{ background:var(--leaf); }
.jogo .progresso i.errado{ background:var(--urucum); }
.jogo .progresso i.agora{ background:var(--jambu); }
.frase{ font-family:var(--display); font-size:clamp(1.5rem, 4.5vw, 2.1rem); font-weight:700; line-height:1.2; margin:.4rem auto 1.3rem; max-width:24ch; }
.resp{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.resp button{
  border:3px solid; border-radius:22px; padding:1rem .6rem; font-family:var(--display); font-weight:800; font-size:1.5rem;
  background:var(--surface); min-height:88px; display:flex; flex-direction:column; align-items:center; gap:.1rem;
}
.resp button b{ font-size:2rem; line-height:1; }
.resp .v{ border-color:var(--leaf); color:var(--leaf); }
.resp .m{ border-color:var(--urucum); color:var(--urucum); }
.resp button:disabled{ opacity:.45; cursor:default; }
.resp button.marcado{ opacity:1; box-shadow:0 0 0 4px var(--jambu); }
.retorno{ margin-top:1.1rem; border-radius:20px; padding:1rem 1.1rem; text-align:left; }
.retorno.certo{ background:var(--leaf-soft); }
.retorno.errado{ background:color-mix(in srgb, var(--urucum) 14%, var(--surface)); }
.retorno strong{ font-family:var(--display); font-size:1.4rem; display:block; margin-bottom:.2rem; }
.retorno .acoes{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.7rem; align-items:center; }
.final .placar{ font-family:var(--display); font-size:4.5rem; font-weight:800; line-height:1; color:var(--leaf); }
.final .nivel{ font-family:var(--display); font-size:1.8rem; font-weight:700; margin:.3rem 0 .6rem; }
.final .botoes{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.2rem; }
.botao-linha{ border:2px solid var(--ink); background:var(--surface); border-radius:16px; padding:.7rem 1.2rem; font-weight:700; min-height:52px; font-size:1.05rem; }
.arvore-final{ width:200px; margin:0 auto; }

/* ---------- análise e fontes ---------- */
.dois-lados{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.4rem 0; }
.dois-lados div{ background:var(--surface); border:2px solid var(--line); border-radius:22px; padding:1.1rem; }
.dois-lados b{ font-family:var(--display); font-size:1.2rem; display:block; margin-bottom:.3rem; }
.texto{ max-width:66ch; }
.fontes details{ background:var(--surface); border:2px solid var(--line); border-radius:20px; padding:.4rem 1.1rem; margin-top:1rem; max-width:820px; }
.fontes summary{ cursor:pointer; font-weight:700; min-height:48px; display:flex; align-items:center; }
.fontes ul{ font-size:1rem; padding-left:1.1rem; }
.fontes li{ margin:.3rem 0; }
footer{ text-align:center; color:var(--muted); font-size:.95rem; padding:1rem 1rem 2rem; }

/* ---------- árvore (gaveta) ---------- */
.gaveta-fundo{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; display:none; }
.gaveta{
  position:fixed; left:50%; bottom:0; transform:translate(-50%, 110%); z-index:61; width:min(560px, 100%);
  background:var(--surface); border-radius:28px 28px 0 0; padding:1.3rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom,0px));
  transition:transform .35s cubic-bezier(.2,.9,.3,1); text-align:center; max-height:92svh; overflow:auto;
}
.gaveta.aberta{ transform:translate(-50%, 0); }
.gaveta-fundo.aberta{ display:block; }
.gaveta h3{ font-size:1.8rem; }
.gaveta .arvore{ width:220px; margin:.4rem auto; display:block; }
.gaveta ul{ text-align:left; margin:.6rem auto; max-width:40ch; padding-left:1.2rem; }
.fechar{ position:absolute; right:.8rem; top:.8rem; width:48px; height:48px; border-radius:50%; border:2px solid var(--line); background:var(--surface); font-size:1.3rem; }
.arvore .folha{ transform-box:fill-box; transform-origin:center; transition:transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s; }
.arvore .folha.apagada{ transform:scale(0); opacity:0; }
.arvore .fruta{ fill:#5B1E5F; transition:opacity .5s; }
.arvore .tronco-g{ transform-box:view-box; transition:transform .8s cubic-bezier(.3,1.3,.5,1); }

/* ---------- aviso flutuante ---------- */
.aviso{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 88px); transform:translate(-50%, 20px); opacity:0; z-index:70;
  background:var(--ink); color:var(--bg); border-radius:999px; padding:.6rem 1.1rem; font-weight:700; font-size:1rem;
  transition:opacity .25s, transform .25s; pointer-events:none; max-width:92vw; text-align:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
}
.aviso.mostra{ opacity:1; transform:translate(-50%, 0); }
.chuva{ position:fixed; inset:0; pointer-events:none; z-index:65; overflow:hidden; }
.chuva span{ position:absolute; top:-40px; font-size:28px; animation:cair linear forwards; }
@keyframes cair{ to{ transform:translateY(110vh) rotate(540deg); } }

/* ---------- responsivo ---------- */
@media (max-width: 860px){
  .mapa-grade{ grid-template-columns:1fr; }
  .painel{ position:static; }
  .avisos{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  body{ font-size:1.08rem; }
  section{ padding:3.5rem .9rem 3rem; }
  .como{ grid-template-columns:1fr; }
  .como div{ display:flex; align-items:center; gap:.8rem; }
  .como b{ margin:0; }
  .duas-colunas, .dois-lados{ grid-template-columns:1fr; }
  .cabeca .selo{ width:52px; height:52px; font-size:1.6rem; border-radius:18px; }
  .pilula .barrinha{ display:none; }
  .marca .txt{ display:none; }
  .grafico{ height:220px; }
  .barra .valor{ font-size:.9rem; }
  .resp button{ font-size:1.25rem; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}