/* LEVA LULA — lambe-lambe. Tokens no topo; o resto organizado por componente.
   Mobile-first (360–430px). Breakpoints: 760px (grades de conteúdo) e 1024px (navegação vira trilho lateral). */

/* ============ tokens ============ */
:root{
  --muro:#413c36;
  --papel:#ede4d0; --papel-2:#e6dbc4; --papel-3:#f1e9d8;
  --verm:#c1121f; --verm-esc:#8f0d17;
  --tinta:#1a1512; --tinta-2:#4a423a;
  --ficha-papel:#efe8d9; --ficha-tinta:#5f5747; --ficha-borda:#d5c9ad;
  --etiqueta-papel:#d8ccb2; --etiqueta-tinta:#403a32;
  --risca:#cbbfa4;
  --sombra-papel:drop-shadow(3px 5px 0 rgba(0,0,0,.42)) drop-shadow(0 14px 14px rgba(0,0,0,.24));
  --sombra:0 2px 6px rgba(0,0,0,.45), 0 12px 34px rgba(0,0,0,.28);
  --fonte-display:"Anton","Arial Narrow",sans-serif;
  --fonte-corpo:"Archivo","Helvetica Neue",sans-serif;
  --gut:max(clamp(12px,3vw,28px), env(safe-area-inset-left), env(safe-area-inset-right));
  --rot-a:-.3deg; --rot-b:.3deg;
  --barra:calc(63px + env(safe-area-inset-bottom)); /* altura da barra de abas fixa no rodapé (celular e tablet) */
  --trilho:232px;                                   /* largura do trilho lateral (desktop) */
}
@media (min-width:760px){:root{--rot-a:-.7deg; --rot-b:.6deg}}

/* ============ base ============ */
*{box-sizing:border-box}
html{
  background-color:var(--muro);
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(0,0,0,.38), transparent 62%),
    radial-gradient(900px 640px at 96% 18%, rgba(0,0,0,.34), transparent 60%),
    radial-gradient(700px 500px at 18% 62%, rgba(0,0,0,.30), transparent 65%),
    radial-gradient(860px 560px at 82% 88%, rgba(0,0,0,.36), transparent 62%),
    radial-gradient(560px 300px at 55% 40%, rgba(120,100,82,.10), transparent 70%),
    linear-gradient(160deg, #45403a 0%, var(--muro) 45%, #2e2a25 100%);
  scroll-padding-top:64px; /* topo de uma linha (<=56px); no desktop o trilho não cobre nada (ver >=1024px) */
}
html:has(body.com-vistas){scroll-padding-bottom:var(--barra)}
body{
  margin:0; color:var(--tinta); background:transparent;
  font-family:var(--fonte-corpo); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--verm); color:var(--papel)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#2f2b26}
::-webkit-scrollbar-thumb{background:#5b544b; border:3px solid #2f2b26; border-radius:8px}
:focus-visible{outline:3px solid var(--verm); outline-offset:3px}
h1[tabindex="-1"], h2[tabindex="-1"]{outline:none}
a{color:inherit}
b{font-weight:800}
[hidden]{display:none!important}

/* ============ muro e pilha de cartazes ============ */
/* overflow-x:clip só contém a inclinação transitória da animação `colar`; em repouso nada passa da largura */
.muro{max-width:1060px; margin:0 auto; padding:clamp(14px,3vw,34px) var(--gut) 56px; position:relative; overflow-x:clip}
.pilha > * + *{margin-top:clamp(22px,4vw,38px)}

/* ============ cartaz (papel colado) ============
   A sombra vem de filter no cartaz; o papel é o ::before recortado pelo rasgo. */
.cartaz{
  position:relative; color:var(--tinta); filter:var(--sombra-papel);
  padding:clamp(24px,3.6vw,34px) clamp(16px,3.4vw,34px);
}
.cartaz::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--papel)}
.rasgo-topo::before{clip-path:polygon(0 11px,4% 5px,9% 12px,15% 3px,22% 10px,29% 4px,36% 12px,44% 5px,52% 11px,60% 3px,67% 11px,74% 4px,82% 12px,90% 5px,96% 10px,100% 6px,100% 100%,0 100%)}
.rasgo-baixo::before{clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),95% calc(100% - 5px),89% calc(100% - 12px),83% calc(100% - 3px),76% calc(100% - 10px),69% calc(100% - 4px),61% calc(100% - 12px),53% calc(100% - 5px),46% calc(100% - 11px),38% calc(100% - 3px),31% calc(100% - 10px),24% calc(100% - 4px),16% calc(100% - 12px),9% calc(100% - 5px),4% calc(100% - 11px),0 calc(100% - 4px))}
.rasgo-topo.rasgo-baixo::before{clip-path:polygon(0 11px,4% 5px,9% 12px,15% 3px,22% 10px,29% 4px,36% 12px,44% 5px,52% 11px,60% 3px,67% 11px,74% 4px,82% 12px,90% 5px,96% 10px,100% 6px,100% calc(100% - 11px),95% calc(100% - 5px),89% calc(100% - 12px),83% calc(100% - 3px),76% calc(100% - 10px),69% calc(100% - 4px),61% calc(100% - 12px),53% calc(100% - 5px),46% calc(100% - 11px),38% calc(100% - 3px),31% calc(100% - 10px),24% calc(100% - 4px),16% calc(100% - 12px),9% calc(100% - 5px),4% calc(100% - 11px),0 calc(100% - 4px))}
.rasgo-baixo{padding-bottom:clamp(30px,4.4vw,44px)}
.torto-a{--rot:var(--rot-a); transform:rotate(var(--rot))}
.torto-b{--rot:var(--rot-b); transform:rotate(var(--rot))}
.meia-tom{background-image:radial-gradient(rgba(20,18,16,.16) 1px, transparent 1.4px); background-size:5px 5px}

/* ============ tipografia comum ============ */
.cartaz h2{font:400 clamp(30px,6.2vw,52px)/.96 var(--fonte-display); letter-spacing:-.01em; margin:0 0 .3em; text-transform:uppercase; overflow-wrap:anywhere}
.cartaz h3{font:400 clamp(18px,2.6vw,23px)/1.1 var(--fonte-display); letter-spacing:.015em; text-transform:uppercase; margin:1.8em 0 .5em}
.cartaz h3::before{content:""; display:block; width:72px; border-top:5px solid var(--verm); margin-bottom:.5em}
.sub{color:var(--tinta-2); font-size:14.5px; margin:.2em 0 .8em}
.lugar{margin:0; font:800 12.5px/1.25 var(--fonte-corpo); letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-2)}
.proc{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0}
.ficha{display:inline-block; font:700 11px/1.4 var(--fonte-corpo); letter-spacing:.07em; color:var(--ficha-tinta); background:var(--ficha-papel); border:1px solid var(--ficha-borda); padding:2px 7px; text-transform:uppercase}
.ficha.mini{font-size:11px; letter-spacing:.03em; padding:1px 4px}
.selo{display:inline-block; font:400 11px/1.3 var(--fonte-display); letter-spacing:.07em; color:var(--papel); background:var(--tinta); padding:2px 7px 1px; text-transform:uppercase; vertical-align:middle}
.selo.baixa{background:var(--verm)}
.etiqueta-erro{display:inline-block; background:var(--verm); color:var(--papel); font-weight:900; padding:10px 16px; transform:rotate(-1.2deg); box-shadow:var(--sombra)}

/* ============ botões ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 12px;
  font:900 13px/1.1 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.04em; text-align:center; text-decoration:none;
  color:var(--papel); background:var(--verm); border:none; cursor:pointer;
  box-shadow:0 3px 0 var(--verm-esc), 0 8px 20px rgba(0,0,0,.3);
}
.btn.tinta{background:var(--tinta); box-shadow:0 3px 0 rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.3)}
.btn:hover{box-shadow:0 5px 0 var(--verm-esc), 0 14px 26px rgba(0,0,0,.34)}
.btn.tinta:hover{box-shadow:0 5px 0 rgba(0,0,0,.6), 0 14px 26px rgba(0,0,0,.34)}
.btn:active{box-shadow:0 2px 0 var(--verm-esc)}
.btn[disabled]{opacity:.6; cursor:wait}
.botoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.botoes .btn{flex:1 1 130px}
.botoes .btn:first-child:not(:only-child){flex-grow:1.2}

/* ============ navegação (com resultado na tela) ============
   Um DOM só. Celular/tablet: topo de uma linha (marca | trilha | Buscar) e as abas numa barra fixa no rodapé.
   Desktop (>=1024px): o .topo vira um trilho lateral com marca, contexto, abas e "Nova consulta". */
.topo{position:sticky; top:0; z-index:40}
.faixa{
  display:none; position:relative; z-index:2;
  align-items:center; gap:10px;
  min-height:52px; padding:4px var(--gut);
  background:var(--papel); border-bottom:3px solid var(--tinta); box-shadow:0 3px 0 rgba(0,0,0,.35);
}
body.com-resultado .faixa{display:flex}
.faixa-carga{display:none; position:absolute; left:0; right:0; bottom:-3px; height:3px; background:var(--verm); overflow:hidden}
body.navegando .faixa-carga{display:block}
.faixa-marca{flex:none; font:400 24px/1 var(--fonte-display); text-transform:uppercase; letter-spacing:-.01em; text-decoration:none; color:var(--tinta); display:inline-flex; align-items:center; min-height:44px}
.faixa-marca .lula{color:var(--verm); margin-left:.25em}
.faixa-btn{flex:none; margin-left:auto; min-height:44px; padding:0 14px; font:900 13px/1 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.04em; color:var(--papel); background:var(--tinta); border:none; cursor:pointer}
.faixa-btn[aria-expanded="true"]{background:var(--verm)}
.rot-longo{display:none}
.faixa-acoes{display:flex; align-items:center; gap:8px; flex:none; margin-left:auto}
/* "Compartilhar": os dois textos ocupam a mesma célula, então o botão não muda de largura quando avisa "Link copiado" */
.faixa-comp{display:inline-grid; place-items:center; color:var(--tinta); background:transparent; box-shadow:inset 0 0 0 3px var(--tinta)}
.faixa-comp > span{grid-area:1 / 1}
.faixa-comp .c-aviso, .faixa-comp.avisando .c-rot{visibility:hidden}
.faixa-comp.avisando .c-aviso{visibility:visible}
.c-curto{display:none}
/* no celular estreito o rótulo encurta para a faixa caber em 360px */
@media (max-width:420px){ .faixa-btn{padding:0 10px; font-size:12px; letter-spacing:.02em; white-space:nowrap} .faixa-acoes{gap:6px} .c-longo{display:none} .c-curto{display:inline} }

/* trilha (celular): "Cidade/UF" no nível da cidade, "‹ Cidade" (link) no bairro; trunca com reticências, nunca quebra */
.contexto{flex:1 1 0; min-width:0}
.ctx-cidade{display:block; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 13px/44px var(--fonte-corpo); letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-2); text-decoration:none}
a.ctx-cidade{color:var(--tinta)}
a.ctx-cidade:hover{color:var(--verm)}
.ctx-uf, .ctx-nome, .ctx-placar{display:none}
.ctx-placar b.lula{color:var(--verm)}

/* abas: barra fixa no rodapé, em tinta cheia para não se confundir com o papel do conteúdo; quatro passos numerados,
   o atual em vermelho */
.vistas{
  position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:var(--tinta); border-top:3px solid var(--papel); box-shadow:0 -4px 0 rgba(0,0,0,.45);
}
.vistas a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:60px; padding:4px 2px;
  font:900 12.5px/1 var(--fonte-corpo); letter-spacing:.04em; text-transform:uppercase; text-decoration:none; text-align:center;
  color:var(--papel); background:var(--tinta);
}
.v-n{font:400 17px/1 var(--fonte-display); letter-spacing:0; opacity:.7}
.vistas a + a{border-left:1px solid rgba(237,228,208,.28)}
.vistas a:hover{background:var(--verm)}
.vistas a[aria-current="page"]{color:var(--papel); background:var(--verm)}
.vistas a[aria-current="page"] .v-n{opacity:1}
body.com-vistas{padding-bottom:var(--barra)}
/* o critério do ranking (cartaz estático) só aparece na home e na vista dos bairros */
body.com-resultado:not([data-vista="bairros"]) .criterio{display:none}
#criterio{scroll-margin-top:64px}

/* ============ capa e papelzinho de busca ============ */
.paredao{position:relative; padding-top:clamp(6px,1.6vw,14px)}
.camada-velha{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:clip}
.velho{
  position:absolute; background:#332220; color:#cfc0aa;
  font-family:var(--fonte-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(14px,2.6vw,24px); padding:.75em 1.1em;
  opacity:.85; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.velho.v1{top:0; left:2px; transform:rotate(-2.4deg); background:#3a2a26; color:#d6c5ab}
.velho.v2{top:58%; right:6px; transform:rotate(1.7deg); background:#241a18; color:#c9b494; padding:1.1em}
.velho.v3{top:66%; left:2px; transform:rotate(-1.3deg); background:#2c2120; color:#cdbda0; padding:1em}
.velho.v4{top:56%; right:8px; transform:rotate(1deg); background:#2a2523; color:#b3a690; font-size:clamp(12px,2vw,18px)}
.velho.v5{top:74%; right:10px; transform:rotate(-1.8deg); background:#31222a; color:#c8b6a4; padding:1em}
.velho.v6{top:82%; left:10%; transform:rotate(.9deg); background:#262019; color:#b8ab93; font-size:clamp(12px,2vw,18px)}

.capa{position:relative; z-index:1}
.capa-cartaz{padding-bottom:clamp(48px,6.5vw,64px)}
.capa-cartaz::after{
  content:""; position:absolute; inset:10px -4px -9px 9px; background:#d9cbae; z-index:-2;
  transform:rotate(.5deg);
}
.marca{font:400 clamp(56px,19.5vw,150px)/.88 var(--fonte-display); text-transform:uppercase; letter-spacing:-.015em; margin:0; white-space:nowrap}
.marca .leva, .marca .lula{display:inline-block}
.marca .leva{color:var(--tinta)}
.marca .lula{color:var(--verm); text-shadow:2px 3px 0 rgba(26,21,18,.22)}
.chamada{font:900 clamp(19px,5.4vw,32px)/1.12 var(--fonte-corpo); max-width:22ch; margin:.45em 0 .1em; text-wrap:balance}
.chamada span{display:block; margin-top:.3em; font:600 clamp(14px,3.8vw,18px)/1.3 var(--fonte-corpo); color:var(--tinta-2)}
@media (min-width:760px){
  .capa-cartaz{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; column-gap:clamp(24px,4vw,48px)}
  .capa-cartaz .chamada{margin:0 0 .3em; max-width:20ch}
}

.busca{position:relative; z-index:3; padding:clamp(18px,3vw,30px); max-width:min(100%,640px); transform:rotate(-1.1deg); margin:clamp(-34px,-3vw,-22px) 0 0 clamp(10px,3vw,30px); filter:var(--sombra-papel)}
.busca::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--papel-3);
  clip-path:polygon(1% .8%,30% 0%,68% 1.2%,99% .3%,100% 96%,72% 100%,34% 98.6%,0% 99.4%);
}
.fita{position:absolute; width:96px; height:26px; background:rgba(228,219,196,.55); box-shadow:0 1px 3px rgba(0,0,0,.25); z-index:2}
.fita.f1{--rf:-6deg; top:-13px; left:34px; transform:rotate(var(--rf))}
.fita.f2{--rf:4deg; top:-11px; right:40px; transform:rotate(var(--rf))}
.busca label{display:block; font-weight:900; font-size:clamp(15px,2vw,17px); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.55em}
.busca label small{font-weight:400; text-transform:none; letter-spacing:0; color:var(--ficha-tinta)}
.busca .linha{display:flex; gap:10px; flex-wrap:wrap}
.busca .linha .btn{flex:1 1 auto; padding:0 18px}
.busca input[type=text]{
  flex:1 1 180px; min-width:0; min-height:52px; font:600 20px/1.2 var(--fonte-corpo); color:var(--tinta);
  background:var(--papel); border:none; border-bottom:3px solid var(--tinta); border-radius:0;
  padding:12px 12px 9px; caret-color:var(--verm);
}
.busca input::placeholder{color:#6f6454; opacity:1}
.alternativa{margin:10px 0 0; font-size:13.5px; color:var(--tinta-2)}
.alternativa button{background:none; border:none; padding:12px 0; font:inherit; font-weight:700; color:var(--verm); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.pincelada{height:5px; margin-top:12px; background:var(--verm); opacity:0; pointer-events:none}
.busca.colando .pincelada, .carregando .pincelada{opacity:1}
#status{color:var(--tinta-2); font-size:14.5px; margin:10px 0 0}
#status:empty{margin:0}

/* atalhos: tiras de papel coladas, links reais para as capitais */
.atalhos{margin-top:12px; padding-top:10px; border-top:2px dashed var(--risca)}
.atalhos-t{margin:0 0 8px; font:800 12px/1.2 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-2)}
.atalhos ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px}
.atalhos a{
  --r:-1.4deg;
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  font:400 16px/1 var(--fonte-display); letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--tinta);
  background:var(--papel); border:2px solid var(--tinta); box-shadow:2px 3px 0 rgba(0,0,0,.35);
  transform:rotate(var(--r));
}
.atalhos li:nth-child(even) a{--r:1.1deg}
.atalhos li:nth-child(3n) a{--r:-.6deg}
.atalhos a:hover{background:var(--verm); border-color:var(--verm); color:var(--papel)}
body.com-resultado .atalhos{display:none}

/* autocomplete */
.campo-cidade{position:relative; margin-top:12px; display:none}
.campo-cidade.aberta{display:block}
.campo-cidade input{width:100%}
.lista-cidades{
  position:absolute; z-index:30; left:0; right:0; top:100%; margin:6px 0 0; padding:0;
  list-style:none; background:var(--papel-3); box-shadow:var(--sombra);
  border-bottom:3px solid var(--tinta); max-height:280px; overflow:auto;
}
.lista-cidades li{padding:12px; min-height:44px; font-weight:600; font-size:15px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--risca)}
.lista-cidades li .uf{font-family:var(--fonte-display); color:var(--verm); letter-spacing:.05em}
.lista-cidades li[aria-selected="true"], .lista-cidades li:hover{background:var(--verm); color:var(--papel)}
.lista-cidades li[aria-selected="true"] .uf, .lista-cidades li:hover .uf{color:var(--papel)}

/* com resultado: a capa encolhe para a faixa; o papelzinho volta só quando se pede "Nova consulta" */
body.com-resultado .paredao{display:none}
body.com-resultado.busca-aberta .paredao{display:block; padding-top:6px}
body.com-resultado .camada-velha, body.com-resultado .capa-cartaz{display:none}
body.com-resultado .busca{margin:14px auto 20px}
#resultado:not(:empty){margin-top:clamp(14px,3vw,26px)}
body.busca-aberta #resultado:not(:empty){margin-top:0}
/* erro de uma navegação que manteve o resultado antigo na tela: etiqueta no topo, com "Tentar de novo" */
.aviso-nav{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px}
.aviso-nav .etiqueta-erro{min-width:0; overflow-wrap:anywhere}

/* ============ cartaz-manchete ============ */
.manchete{padding-top:clamp(26px,3.6vw,34px)}
.topo-linha{display:flex; justify-content:space-between; align-items:flex-start; gap:10px 14px}
.topo-linha .lugar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; padding-top:4px}
/* na tela do bairro o nome da cidade é o caminho de volta para a cidade inteira */
.lugar a{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; display:inline-block; padding:10px 0; margin:-10px 0}
.lugar a:hover{color:var(--verm)}
.bairro-nome{
  font:400 clamp(36px,10.6vw,84px)/.92 var(--fonte-display); letter-spacing:-.01em; text-transform:uppercase;
  margin:6px 0 8px; overflow-wrap:anywhere;
}
.aviso{margin:10px 0 0; padding:8px 12px; background:var(--papel-2); border-left:6px solid var(--tinta); font:700 14px/1.35 var(--fonte-corpo)}

.carimbo{
  position:relative; flex:none; font:400 clamp(15px,4.2vw,26px)/1 var(--fonte-display); text-transform:uppercase; letter-spacing:.04em;
  color:var(--verm); border:4px double var(--verm); padding:5px 9px 3px;
  transform:rotate(-5deg); margin:2px 4px 0 0; opacity:.92;
}
.carimbo::before, .carimbo::after{content:""; position:absolute; background:var(--papel); border-radius:50%}
.carimbo::before{width:14px; height:8px; left:-6px; top:38%; transform:rotate(-18deg)}
.carimbo::after{width:9px; height:12px; right:22%; bottom:-7px; transform:rotate(12deg)}
.carimbo.neutro{color:var(--tinta-2); border-color:var(--tinta-2)}

/* o placar: os dois percentuais frente a frente */
.placar-bloco{margin-top:4px}
.placar{--pl-fs:clamp(48px,14.4vw,120px); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:0 8px}
.pl-lado{margin:0; display:flex; flex-direction:column; min-width:0}
.pl-lado.flavio{align-items:flex-end; text-align:right}
.pl-num{font:400 var(--pl-fs)/.9 var(--fonte-display); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.pl-lado.lula .pl-num{color:var(--verm)}
.pl-nome{margin-top:6px; font:900 clamp(11px,2.9vw,15px)/1.15 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.02em; padding:3px 7px 2px}
.pl-lado.lula .pl-nome{padding-left:0}
.pl-lado.na-frente .pl-nome{background:var(--tinta); color:var(--papel)}
.pl-lado.lula.na-frente .pl-nome{padding-left:7px}
.pl-x{display:flex; align-items:center; height:calc(var(--pl-fs) * .9); font:900 clamp(22px,6vw,44px)/1 var(--fonte-corpo); color:var(--tinta-2)}
.placar.pequeno{--pl-fs:clamp(34px,9vw,60px)}
.placar.pequeno .pl-nome{font-size:clamp(11px,2.6vw,13px)}
.placar.pequeno .pl-x{font-size:clamp(18px,4vw,30px)}

.barra{display:flex; height:26px; margin-top:10px; border:3px solid var(--tinta); background-color:var(--papel); background-image:radial-gradient(rgba(20,18,16,.2) 1px, transparent 1.4px); background-size:5px 5px}
.b-lula{flex:none; background:var(--verm)}
.b-flavio{flex:none; margin-left:auto; background:var(--tinta)}
.barra.mini{height:10px; border-width:2px; margin-top:6px}

.frase-chave{font:800 clamp(18px,5vw,30px)/1.16 var(--fonte-corpo); margin:14px 0; max-width:34ch; text-wrap:balance}
.frase-chave b{font-weight:900; text-decoration:underline; text-decoration-color:var(--verm); text-decoration-thickness:3px; text-underline-offset:3px}

.fatos{display:grid; border-top:3px solid var(--tinta); margin-top:6px}
.fatos-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr)}
.fatos-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fato{display:flex; flex-direction:column; align-items:flex-start; padding:9px 8px 6px 10px; border-left:2px dashed var(--risca)}
.fato:first-child{padding-left:0; border-left:none}
.fato-v{font:400 clamp(22px,6.4vw,40px)/1 var(--fonte-display); font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.fato-l{margin-top:3px; font:800 11px/1.2 var(--fonte-corpo); letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-2)}
.fato-s{font:600 12px/1.25 var(--fonte-corpo); color:var(--tinta-2)}
.fato .ficha{margin-top:5px}
.tend{margin:16px 0 0; font-size:13px; line-height:1.45}
.placar-bloco .proc .ficha{letter-spacing:.02em}
.tend .ficha{margin-left:2px}
.tend .agora{color:var(--verm)}
/* quem a gente perdeu: linha em destaque junto do bloco de 2022 (estimativa, sempre com a palavra) */
.perdeu{margin:8px 0 0; padding:7px 12px 8px; background:var(--papel-3); border-left:5px solid var(--verm); font-size:14px; line-height:1.4; font-weight:600}
.perdeu b{font-weight:800}
.perdeu .agora{color:var(--verm)}
.perdeu .ficha{margin-top:4px}
.fb-queda{margin:6px 0 0; font-size:13px; line-height:1.4}
.fb-queda b{color:var(--verm)}

@media (min-width:760px){
  .manchete{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); column-gap:44px; align-items:start; align-content:start}
  .manchete > *{grid-column:1}
  .manchete > .placar-bloco{grid-column:2; grid-row:1 / span 8; align-self:center; margin-top:0}
  .manchete .placar{--pl-fs:clamp(34px,5.2vw,72px)}
  .manchete .pl-nome{font-size:clamp(12px,1.3vw,16px)}
  .fato-l{font-size:11.5px}
  .fato-v{font-size:clamp(22px,3.2vw,40px)}
}

/* ============ O que fazer aqui ============ */
.texto-diag{font-size:15.5px; line-height:1.6; margin:.2em 0 1em; max-width:68ch}
.acoes{list-style:none; margin:0; padding:0}
.acoes li{
  position:relative; min-height:48px; border-bottom:1px solid rgba(26,21,18,.14);
  background:repeating-linear-gradient(transparent 0 30px, rgba(26,21,18,.05) 30px 31px);
}
.acoes label{position:relative; display:block; padding:11px 0 11px 46px; font-size:15px; line-height:1.5; cursor:pointer}
.acoes label::before{content:""; position:absolute; left:6px; top:13px; width:20px; height:20px; border:3px solid var(--tinta); background:var(--papel)}
.acoes input[type=checkbox]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.acoes input[type=checkbox]:focus-visible + label{outline:3px solid var(--verm); outline-offset:-3px}
.acoes li.riscado label{color:var(--tinta-2); text-decoration:line-through; text-decoration-color:var(--verm); text-decoration-thickness:2px}
.acoes li.riscado label::before{border-color:var(--verm); background:var(--verm)}
.acoes li.riscado::after{content:""; position:absolute; left:12px; top:15px; width:6px; height:11px; border:solid var(--papel); border-width:0 3px 3px 0; transform:rotate(40deg); pointer-events:none}
/* enquanto a caneta traça (JS, só com movimento), o risco fixo espera e a cópia do texto é riscada da esquerda */
.acoes li.riscado.riscando label{text-decoration:none}
.acoes li.riscando label::after{content:attr(data-t); position:absolute; inset:0; padding:11px 0 11px 46px; color:transparent; text-decoration:line-through; text-decoration-color:var(--verm); text-decoration-thickness:2px; pointer-events:none}
.acoes.conversa li{background:repeating-linear-gradient(transparent 0 30px, rgba(26,21,18,.05) 30px 31px); padding:10px 0 10px 18px; border-bottom:1px dashed rgba(26,21,18,.22); font-size:15px}

/* carimbo FEITO: batido sobre o cartaz quando todas as ações estão riscadas */
.selo-feito{
  position:absolute; right:clamp(10px,4vw,34px); bottom:clamp(54px,9vw,84px); z-index:2; pointer-events:none;
  font:400 clamp(48px,14vw,84px)/1 var(--fonte-display); letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta); border:6px double var(--tinta); padding:6px 16px 2px; background:rgba(237,228,208,.55);
  transform:rotate(7deg); opacity:.9;
}

/* ============ mapa de estêncil ============ */
/* os controles ficam colados na borda de cima do quadro, por fora: nunca cobrem a cidade */
.mapa-ctrl{position:absolute; z-index:3; bottom:calc(100% + 9px); left:0; right:0; display:flex; gap:6px; pointer-events:none}
.mapa-ctrl .mz{pointer-events:auto; box-shadow:2px 3px 0 rgba(0,0,0,.4)}
.mapa-ctrl .mz.largo:nth-of-type(odd){transform:rotate(-1.2deg)}
.mapa-ctrl .mz.largo:nth-of-type(even){transform:rotate(.9deg)}
.mapa-ctrl .mz.largo:last-child{margin-left:auto}
.mz{width:44px; min-height:44px; padding:0; font:900 22px/1 var(--fonte-corpo); color:var(--tinta); background:var(--papel-3); border:3px solid var(--tinta); cursor:pointer}
.mz.largo{width:auto; padding:0 11px; font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.mz:disabled{opacity:.4; cursor:default}
.mz:not(:disabled):hover{background:var(--tinta); color:var(--papel)}
.mapa-quadro{
  position:relative; margin:62px auto 0; width:min(100%, calc(76vh * var(--ar))); aspect-ratio:var(--ar);
  background:var(--papel-3); box-shadow:0 0 0 3px var(--tinta); touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.mapa-quadro.zoom{touch-action:none; cursor:grab}
.mapa-quadro.arrastando{cursor:grabbing}
.mapa-quadro svg{display:block; width:100%; height:100%; overflow:hidden}
.mapa-espera{height:200px; background-color:var(--papel-3); background-image:radial-gradient(rgba(20,18,16,.2) 1px, transparent 1.4px); background-size:6px 6px; box-shadow:0 0 0 3px var(--tinta)}
.area{fill-rule:evenodd; stroke:var(--papel-3); stroke-width:1.5px; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.area.ctx{fill:var(--papel-2); stroke:var(--risca); stroke-width:1px; pointer-events:none}
.area.t-virar{fill:var(--verm)}
.area.t-base{fill:var(--tinta)}
.area.t-baixa{fill:var(--etiqueta-papel)}
.area.t-sem_dado{stroke:var(--tinta-2); stroke-width:1px; stroke-dasharray:4 3}
.area.clic{cursor:pointer}
@media (hover:hover){.area.clic:hover{stroke:var(--tinta); stroke-width:2.5px}}
.pt-papel{fill:var(--papel)}
.pt-verm{fill:var(--verm)}
.pt-ponto{fill:var(--tinta-2); opacity:.5}
.ct-sel-a,.ct-sel-b,.ct-aberto-a,.ct-aberto-b{fill:none; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none}
.ct-sel-a{stroke:var(--tinta); stroke-width:7px}
.ct-sel-b{stroke:var(--papel-3); stroke-width:3px}
.ct-aberto-a{stroke:var(--tinta); stroke-width:5px}
.ct-aberto-b{stroke:var(--papel-3); stroke-width:1.5px}

.mapa-etiqueta{
  position:absolute; z-index:2; transform:translate(-50%, calc(-100% - 10px)) rotate(-2deg); pointer-events:none; white-space:nowrap;
  font:400 14px/1 var(--fonte-display); text-transform:uppercase; letter-spacing:.05em;
  background:var(--papel-3); color:var(--tinta); border:2px solid var(--tinta); padding:5px 8px 3px; box-shadow:2px 3px 0 rgba(0,0,0,.4);
}
.mapa-etiqueta::after{content:""; position:absolute; left:calc(50% - 7px); top:100%; border:7px solid transparent; border-top-color:var(--tinta); border-bottom:0}
.mapa-etiqueta.sel{background:var(--tinta); color:var(--papel); border-color:var(--papel-3)}
.mapa-etiqueta.a-esq{transform:translate(-14px, calc(-100% - 10px)) rotate(-2deg)}
.mapa-etiqueta.a-esq::after{left:7px}
.mapa-etiqueta.a-dir{transform:translate(calc(-100% + 14px), calc(-100% - 10px)) rotate(-2deg)}
.mapa-etiqueta.a-dir::after{left:auto; right:7px}
.mapa-etiqueta.abaixo{transform:translate(-50%, 10px) rotate(-2deg)}
.mapa-etiqueta.abaixo::after{top:auto; bottom:100%; border-top:0; border-bottom:7px solid var(--tinta)}

.mapa-ficha{margin-top:12px; padding-top:10px; border-top:3px solid var(--tinta); min-height:64px}
.ficha-bairro{display:grid; gap:6px; justify-items:start}
.fb-nome{margin:0; font:400 clamp(22px,5vw,30px)/1.05 var(--fonte-display); text-transform:uppercase; overflow-wrap:anywhere}
.fb-pl{margin:0; font-size:15px}
.fb-pl .l{color:var(--verm)}
.ficha-bairro .barra{width:100%; max-width:360px}
.ficha-bairro .sub{margin:0}

.legenda{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:14px 0 0; font-size:13px}
.legenda li{display:flex; align-items:center; gap:7px; min-height:24px}
.amostra{flex:none; width:28px; height:18px; border:2px solid var(--tinta)}
.am-virar{background:var(--verm)}
.am-urna{background:repeating-linear-gradient(135deg, var(--verm) 0 3px, var(--papel) 3px 7px)}
.am-base{background:var(--tinta)}
.am-baixa{background:var(--etiqueta-papel)}
.am-sem_dado{background-color:var(--papel-3); background-image:radial-gradient(rgba(20,18,16,.45) 1px, transparent 1.5px); background-size:5px 5px; border-style:dashed}

/* selo do tipo (mesma linguagem do mapa) */
.selo-tipo{display:inline-block; font:400 11px/1.3 var(--fonte-display); letter-spacing:.07em; text-transform:uppercase; padding:1px 6px 0; border:2px solid var(--tinta); vertical-align:middle}
.selo-tipo.t-virar{background:var(--verm); border-color:var(--verm); color:var(--papel)}
.selo-tipo.t-urna{background:repeating-linear-gradient(135deg, var(--papel) 0 3px, var(--papel-3) 3px 6px); border-color:var(--verm); color:var(--tinta)}
.selo-tipo.t-base{background:var(--tinta); color:var(--papel)}
.selo-tipo.t-baixa{background:var(--etiqueta-papel); color:var(--etiqueta-tinta)}
.selo-tipo.t-sem_dado{border-style:dashed; color:var(--tinta-2)}

/* ============ onde a cidade vira (lista de alvos) ============ */
.placar-bloco.menor{margin-top:6px}
.aviso-mun{font-size:14px; color:var(--tinta-2); margin:.8em 0 1em; max-width:60ch}
.aviso-mun b{color:var(--tinta)}
.aviso-mun.nota-unidade{margin-top:-.4em; font-style:italic}
.abas{display:flex; margin-top:6px; border-bottom:4px solid var(--tinta)}
.aba{
  flex:1 1 0; min-width:0; min-height:56px; padding:4px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font:900 12px/1.1 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.04em; color:var(--tinta);
  background:transparent; border:3px solid var(--tinta); border-bottom:none; margin-right:-3px; cursor:pointer;
}
.aba:last-child{margin-right:0}
@media (max-width:420px){ .aba{font-size:11px; letter-spacing:.02em; padding:4px 2px} }
.aba .aba-n{font:400 20px/1 var(--fonte-display); letter-spacing:0}
.aba{position:relative; isolation:isolate}
.aba::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--tinta); transform:scaleY(0); transform-origin:50% 100%}
.aba[aria-selected="true"]{color:var(--papel)}
.aba[aria-selected="true"]::before{transform:none}
.dica{font-size:13.5px; color:var(--tinta-2); margin:12px 0 4px; max-width:60ch}
.dica a{display:inline-block; padding:10px 0; margin:-10px 0; font-weight:800; color:var(--verm); text-underline-offset:3px}
.vazio{margin:14px 0 4px; font-size:15px; max-width:60ch}
.alvos-lista{list-style:none; margin:0; padding:0}
.alvo + .alvo{border-top:2px solid var(--tinta)}
.alvo a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:2px 14px;
  min-height:56px; padding:12px 8px 12px 10px; text-decoration:none; color:inherit;
}
.alvo a:hover{background:rgba(26,21,18,.07)}
.alvo .al-nome{font:800 16px/1.2 var(--fonte-corpo); overflow-wrap:anywhere}
.alvo .al-nome .ficha{margin-left:4px; vertical-align:middle}
.alvo .al-met{max-width:17ch; text-align:right; font:600 12.5px/1.25 var(--fonte-corpo); color:var(--tinta-2)}
.alvo .al-met b{font-weight:900; font-size:15px; color:var(--tinta)}
.alvo .al-sub{grid-column:1 / -1; font:600 12px/1.3 var(--fonte-corpo); color:var(--tinta-2); letter-spacing:.01em}
.alvo .barra{grid-column:1 / -1}
.alvo.aberto a{background:rgba(26,21,18,.08); box-shadow:inset 6px 0 0 var(--tinta)}
.mais{display:block; width:100%; min-height:48px; margin-top:6px; padding:0; font:900 14px/1 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.04em; color:var(--verm); background:none; border:none; border-top:4px solid var(--tinta); text-decoration:underline; text-underline-offset:4px; cursor:pointer}

/* ============ A União na sua cidade ============ */
.numeros{display:grid; grid-template-columns:1fr 1fr; gap:2px; background-color:var(--tinta); border:2px solid var(--tinta); margin-top:14px}
.numeros .n{background-color:var(--papel); padding:14px 14px 11px; min-width:0}
.numeros .n.largo{grid-column:1 / -1}
.numeros .v{font:400 clamp(26px,6vw,40px)/1 var(--fonte-display); font-variant-numeric:tabular-nums}
.numeros .n.lula .v{color:var(--verm)}
.numeros .l{font:700 12px/1.3 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-2); margin-top:4px}
.numeros .l b{color:var(--tinta)}
.numeros .ficha{margin-top:8px}
.nota-pt{margin:14px 0 0; padding:12px 16px; background:var(--papel-3); border-left:6px solid var(--verm); font-weight:700; font-size:15px; line-height:1.5}
.mais-args{margin-top:6px}
.mais-args summary{min-height:44px; display:flex; align-items:center; font:800 14px/1 var(--fonte-corpo); color:var(--verm); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ============ carregando e erro ============ */
.carregando{min-height:clamp(220px,46vh,380px); overflow:visible}
.carregando .rolo{position:absolute; inset:0; overflow:hidden; pointer-events:none; display:none}
.carregando .rolo i{position:absolute; top:0; bottom:0; left:0; width:34%; background:rgba(26,21,18,.09)}
.carregando .espera{font:400 clamp(28px,7vw,48px)/1 var(--fonte-display); text-transform:uppercase; margin:.3em 0 .2em}
.erro .botoes{margin-top:12px}

/* ============ critério do ranking (cartaz fixo, fora da pilha) ============ */
.criterio{margin-top:clamp(22px,4vw,38px)}
.criterios{margin:0 0 4px; border-top:3px solid var(--tinta)}
.criterios > div{padding:12px 0; border-bottom:2px dashed var(--risca)}
.criterios dt{display:flex; align-items:center; gap:9px; font:400 clamp(18px,2.6vw,23px)/1.1 var(--fonte-display); letter-spacing:.015em; text-transform:uppercase}
.criterios dd{margin:.4em 0 0; font-size:15px; line-height:1.55; max-width:68ch}
/* recolhido quando há resultado na tela: só o título, com a indicação de abrir/fechar; sem JS fica aberto */
.criterio-d > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; cursor:pointer}
.criterio-d > summary::-webkit-details-marker{display:none}
.criterio-d > summary h2{margin:0}
.criterio-d[open] > summary{margin-bottom:.5em}
.criterio-ind{
  flex:none; display:inline-flex; align-items:center; min-height:34px; padding:0 10px;
  font:900 12px/1 var(--fonte-corpo); letter-spacing:.06em; text-transform:uppercase;
  color:var(--papel); background:var(--tinta); box-shadow:2px 3px 0 rgba(0,0,0,.35);
}
.criterio-ind::before{content:"abrir +"}
.criterio-d[open] .criterio-ind::before{content:"fechar –"}
.criterio-d > summary:hover .criterio-ind{background:var(--verm)}

/* ============ lambe-lambe pra colar e postar ============ */
.lambes-aviso{margin:.6em 0 0; padding:10px 14px; max-width:68ch; background:var(--papel-3); border-left:6px solid var(--verm); font-weight:700; font-size:14.5px; line-height:1.45}
.lambes-cores{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
.lambe-cor, .lambe-local{
  min-height:44px; padding:6px 14px; font:900 13px/1.1 var(--fonte-corpo); letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  color:var(--tinta); background:var(--papel-3); border:3px solid var(--tinta); box-shadow:2px 3px 0 var(--tinta);
}
.lambe-cor[aria-pressed="true"], .lambe-local[aria-pressed="true"]{color:var(--papel); background:var(--tinta); box-shadow:none; transform:translate(2px,3px)}
/* "onde vai colar": mesma etiqueta dos botões de cor, com a contagem de folhas do grupo */
.lambes-locais{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
.lambe-local .lambe-n{margin-left:.45em; font:400 17px/1 var(--fonte-display); letter-spacing:0}
.lambes-onde{margin:-.2em 0 .2em; font-size:14.5px; font-weight:600; color:var(--tinta-2)}
.lambes-grade{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:20px}
.lambe{min-width:0; display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:14px; align-items:center}
.lambe canvas{
  display:block; width:100%; height:auto; aspect-ratio:210 / 297; background:#fff; border:2px solid var(--tinta);
  box-shadow:3px 5px 0 rgba(0,0,0,.42); transform:rotate(var(--r,0deg));
}
.lambe.torta-a{--r:-.7deg}
.lambe.torta-b{--r:.6deg}
.lambe-botoes{display:flex; flex-direction:column; gap:10px; min-width:0}
.lambe-botoes .btn{width:100%; min-height:48px; padding:6px 8px}
/* aviso de "imagem salva / toque de novo": gruda no pé da tela enquanto a seção estiver à vista, senão quem toca num lambe do meio da lista não vê */
.lambes-status{position:sticky; bottom:calc(var(--barra) + 12px); z-index:3; width:fit-content; max-width:100%; margin:12px 0 0; padding:10px 14px; font:800 13px/1.35 var(--fonte-corpo); letter-spacing:.04em; text-transform:uppercase; color:var(--papel); background:var(--tinta); box-shadow:3px 4px 0 var(--verm)}
/* vazio: some só da vista — com display:none o leitor de tela pode não anunciar o próximo aviso */
.lambes-status:empty{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); box-shadow:none}
@media (min-width:860px){
  .lambes-grade{grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 18px}
  .lambe{grid-template-columns:minmax(0,1fr); align-items:stretch}
}
@media (min-width:1240px){ .lambes-grade{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- bairro: de onde vem o voto, locais, regras ---------- */
.orig-frase{margin:.5em 0 14px; max-width:56ch; font:800 clamp(16px,2.4vw,19px)/1.4 var(--fonte-corpo)}
.orig-frase b{font-weight:900; box-shadow:inset 0 -3px 0 var(--verm)}
.orig-linhas{list-style:none; margin:0; padding:0}
.orig-linhas li + li{border-top:2px dashed var(--risca)}
.orig-linha{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:4px 12px; width:100%; min-height:56px; padding:10px 8px 12px 10px;
  font:inherit; color:inherit; text-align:left; background:none; border:none; cursor:pointer;
}
.orig-linha:hover{background:rgba(26,21,18,.07)}
.orig-linha:focus-visible{outline-offset:-3px}
.orig-rot{font:800 16px/1.25 var(--fonte-corpo); overflow-wrap:anywhere}
.orig-n{font:400 clamp(22px,6.4vw,32px)/1 var(--fonte-display); font-variant-numeric:tabular-nums}
.orig-barra{grid-column:1 / -1; display:block; height:8px; background:rgba(26,21,18,.12)}
.orig-barra i{display:block; height:100%; background:var(--tinta)}
.orig-teto{max-width:60ch}

.locais-lista{list-style:none; margin:10px 0 0; padding:0}
.local{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px 14px; padding:14px 0; border-top:2px solid var(--tinta)}
.local[hidden]{display:none}
.loc-info{min-width:0}
.loc-nome{margin:0; font:800 16px/1.2 var(--fonte-corpo); overflow-wrap:anywhere}
.loc-end{margin:3px 0 0; font:600 13.5px/1.35 var(--fonte-corpo); color:var(--tinta-2); overflow-wrap:anywhere}
.loc-met{margin:6px 0 0; font:600 12.5px/1.3 var(--fonte-corpo); color:var(--tinta-2)}
.loc-ate{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:0 5px; margin:0; text-align:right}
.loc-ate b{font:400 clamp(26px,7vw,38px)/1 var(--fonte-display); font-variant-numeric:tabular-nums}
.loc-ate-pre, .loc-ate-un{font:800 11px/1 var(--fonte-corpo); letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-2)}
.loc-acoes{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:2px 16px}
.loc-rota{flex:1 1 130px; min-height:48px}
.loc-contexto{margin:14px 0 0; padding-left:12px; border-left:4px solid var(--tinta); max-width:62ch; font-size:14px; line-height:1.5}

.regras h2{margin-bottom:6px}
.regras-lista{list-style:none; margin:0; padding:0}
.regras-lista li{position:relative; padding:9px 0 9px 22px; border-top:2px dashed var(--risca); font-size:15px; font-weight:600; line-height:1.5}
.regras-lista li:first-child{border-top:none}
.regras-lista li::before{content:""; position:absolute; left:2px; top:17px; width:9px; height:9px; background:var(--tinta)}

.rot-grupo{margin:14px 0 8px; font:900 14px/1.2 var(--fonte-corpo); letter-spacing:.05em; text-transform:uppercase}
.rot-temas + .rot-grupo{margin-top:20px}
.rot-papel{scroll-margin-top:60px}

/* ============ etiqueta de rodapé ============ */
.leiaute-pe{max-width:1060px; margin:0 auto; padding:0 var(--gut) 70px}
.etiqueta{
  background:var(--etiqueta-papel); color:var(--etiqueta-tinta); padding:16px 18px; font-size:12.5px; line-height:1.55; max-width:96ch; margin:0;
  transform:rotate(.4deg); box-shadow:0 2px 5px rgba(0,0,0,.4);
  clip-path:polygon(0 4%,2% 0,98% 1.5%,100% 6%,99.4% 94%,97% 100%,3% 98.6%,0 95%);
}
.etiqueta b{text-transform:uppercase; letter-spacing:.05em}

/* ============ vistas: tira de contexto, próximos passos e grades ============ */
/* tira que abre as vistas que não são o placar: é o h1 (nome do lugar + placar resumido) */
.tira{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 16px; margin-bottom:0; padding:16px clamp(16px,3.4vw,34px) 18px; font:400 clamp(26px,7vw,40px)/1 var(--fonte-display); letter-spacing:-.01em; text-transform:uppercase}
.tira:first-child{margin-top:0}
.tira-lugar{flex:0 0 100%; font:800 12.5px/1.25 var(--fonte-corpo); letter-spacing:.06em; color:var(--tinta-2)}
.tira-lugar a{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; display:inline-block; padding:10px 0; margin:-10px 0}
.tira-lugar a:hover{color:var(--verm)}
.tira-nome{min-width:0; overflow-wrap:anywhere}
.tira-placar{font:800 14px/1.2 var(--fonte-corpo); letter-spacing:0; text-transform:none; color:var(--tinta-2); white-space:nowrap}
.tira-placar b{font-weight:900; color:var(--tinta)}
.tira-placar b.lula{color:var(--verm)}

/* próximos passos (fim do placar) e plano da cidade: links grandes, no estilo dos botões */
.proximos h2, .plano h2, .sem-conteudo h2{font-size:clamp(26px,5vw,38px)}
.prox-lista{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
.proximo{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:68px; padding:10px 16px; text-align:left}
.proximo b{font:400 22px/1.05 var(--fonte-display); letter-spacing:.02em; overflow-wrap:anywhere}
.proximo small{font:700 12px/1.3 var(--fonte-corpo); letter-spacing:.01em; text-transform:none; opacity:.92}
.plano .texto-diag{margin-bottom:0}

.agir-grade, .bairros-grade{display:grid; gap:clamp(22px,4vw,38px)}
.agir-grade > *, .bairros-grade > *{min-width:0}
/* coluna do "agir" no bairro: o que fazer, locais e regras empilhados ao lado do roteiro */
.agir-col{display:grid; gap:clamp(22px,4vw,38px); align-content:start}
.agir-col > .cartaz{margin-top:0}

@media (min-width:760px){
  .prox-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
  .numeros{grid-template-columns:repeat(2,1fr)}
}

/* ============ desktop (>=1024px): o topo vira trilho lateral ============ */
@media (min-width:1024px){
  :root{--barra:0px}
  html:has(body.com-vistas){scroll-padding-top:20px} /* sem trilho (simulador) o topo de uma linha continua cobrindo 52px */
  #criterio{scroll-margin-top:20px}
  /* o trilho já diz onde a pessoa está: a tira fica só para leitor de tela e foco (continua sendo o h1 da vista) */
  .tira{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; filter:none}
  .tira a{visibility:hidden} /* o link da cidade já está no trilho */
  body.com-vistas{padding-left:var(--trilho)}
  body.com-vistas .muro, body.com-vistas .leiaute-pe{max-width:1180px}
  body.com-vistas .topo{
    position:fixed; top:0; left:0; bottom:0; width:var(--trilho); display:flex; flex-direction:column; gap:20px;
    padding:22px 14px 20px; overflow-y:auto; background:var(--papel); border-right:3px solid var(--tinta); box-shadow:3px 0 0 rgba(0,0,0,.35);
  }
  body.com-vistas .faixa{display:contents}
  body.com-vistas .faixa-carga{top:0; bottom:auto; height:4px}
  body.com-vistas .faixa-marca{order:1; align-self:flex-start; font-size:38px}
  .contexto{order:2; flex:none}
  .vistas{order:3; position:static; display:flex; flex-direction:column; gap:8px; padding:0; background:none; border:0; box-shadow:none}
  .vistas a{justify-content:flex-start; min-height:46px; padding:0 14px; font-size:14px; border:2px solid var(--tinta)}
  .vistas a + a{border-left:2px solid var(--tinta)}
  .vistas a{flex-direction:row; color:var(--tinta); background:var(--papel-3)}
  .vistas a:hover{color:var(--papel); background:var(--verm)}
  .vistas a[aria-current="page"]{color:var(--papel); background:var(--tinta)}
  .v-n, .proximos.fim{display:none}
  /* "Compartilhar" e "Nova consulta" empilhados, largura total, abaixo das abas */
  body.com-vistas .faixa-acoes{order:4; flex-direction:column; align-items:stretch; gap:10px; margin-left:0; width:100%}
  body.com-vistas .faixa-btn{margin-left:0; width:100%; min-height:48px}
  .rot-curto{display:none}
  .rot-longo{display:inline}
  .ctx-cidade{overflow:visible; white-space:normal; line-height:1.3; font-size:12.5px}
  a.ctx-cidade{display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px}
  .ctx-uf{display:inline}
  .ctx-nome{display:block; margin:0 0 8px; font:400 34px/.95 var(--fonte-display); letter-spacing:-.01em; text-transform:uppercase; overflow-wrap:anywhere}
  .ctx-placar{display:block; margin:0; font:800 14px/1.35 var(--fonte-corpo); color:var(--tinta-2)}
  .ctx-placar b{color:var(--tinta)}
  .ctx-placar b.lula{color:var(--verm)}
  .contexto[data-nivel="cidade"] .ctx-cidade{margin:0 0 8px; font:400 34px/.95 var(--fonte-display); letter-spacing:-.01em; color:var(--tinta); overflow-wrap:anywhere}
  .agir-grade{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch}
  .bairros-grade.com-mapa{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start}
  .bairros-grade.com-mapa > .mapa{position:sticky; top:20px}
  .bairros-grade .mapa-quadro{width:min(100%, calc(62vh * var(--ar)))}
}

@media print{
  .topo, .vistas{display:none!important}
  body.com-resultado, body.com-vistas{padding:0}
}

/* ============ movimento ============
   Cada animação é um gesto de oficina: colar, carimbar, passar o rolo, borrifar o estêncil, riscar a caneta.
   O estado final é o padrão do CSS; o JS acrescenta as classes de partida (pre, cola, anima, vai…).
   Tudo aqui dentro: com reduced-motion nada se move e o resultado já nasce pronto. Só transform, opacity,
   clip-path e (SVG) stroke-dashoffset. Micro 120–180ms · entradas 300–600ms · sequência ≤ ~1,1s. */
@media (prefers-reduced-motion:no-preference){
  /* colar: o cartaz entra assentando com clip-path; abaixo da dobra espera (pre) até ~15% entrar na tela */
  .pre{opacity:0}
  @media print{.pre{opacity:1} .alvo.pre .barra i{transform:none}}
  .cola{animation:colar .5s cubic-bezier(.2,.85,.25,1.05) backwards}
  @keyframes colar{
    0%{opacity:0; transform:translateY(26px) rotate(3.5deg) scale(1.035); clip-path:inset(0 0 100% 0)}
    55%{opacity:1; clip-path:inset(-20px -20px -40px -20px)}
    74%{transform:translateY(-3px) rotate(-.2deg) scale(1.005)}
    100%{opacity:1; transform:translateY(0) rotate(var(--rot,0deg)) scale(1); clip-path:inset(-20px -20px -40px -20px)}
  }
  /* rolo de tinta: a barra do placar é passada da esquerda (Lula) e da direita (Flávio) */
  .anima .placar-bloco .b-lula{transform-origin:0 50%; animation:rolar .5s cubic-bezier(.2,.8,.2,1) .62s backwards}
  .anima .placar-bloco .b-flavio{transform-origin:100% 50%; animation:rolar .5s cubic-bezier(.2,.8,.2,1) .62s backwards}
  .anima.discreto .placar-bloco .b-lula, .anima.discreto .placar-bloco .b-flavio{animation-duration:.35s; animation-delay:.5s}
  @keyframes rolar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* carimbo: entra grande e torto, bate, a tinta falhada firma; o cartaz dá um tranco no impacto */
  .anima .carimbo{animation:carimbar .26s cubic-bezier(.2,.9,.3,1) .75s backwards}
  @keyframes carimbar{
    0%{opacity:0; transform:scale(1.7) rotate(-11deg)}
    22%{opacity:.5}
    62%{opacity:.7; transform:scale(.94) rotate(-4.6deg)}
    100%{opacity:.92; transform:scale(1) rotate(-5deg)}
  }
  .manchete.sela{animation:colar .5s cubic-bezier(.2,.85,.25,1.05) backwards, tranco .09s ease-in-out .91s backwards}
  @keyframes tranco{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}45%{transform:translateY(2px) rotate(var(--rot,0deg))}}
  /* mini-barras e linhas da lista */
  .alvo.pre .barra i{transform:scaleX(0)}
  .alvo.vai .b-lula{transform-origin:0 50%; animation:rolar .4s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 30ms) backwards}
  .alvo.vai .b-flavio{transform-origin:100% 50%; animation:rolar .4s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 30ms) backwards}
  .alvo.entra{animation:entra-linha .24s ease-out calc(var(--i,0) * 30ms) backwards}
  @keyframes entra-linha{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
  .aba.pintar::before{animation:pintar .16s ease-out}
  @keyframes pintar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* mapa: estêncil borrifado por camadas (um <g> por tipo); o vermelho chega por último */
  .pre-estencil .gt, .pre-estencil ~ .mapa-etiqueta{opacity:0}
  .vai-estencil .gt{transform-box:fill-box; transform-origin:center; will-change:opacity,transform; animation:estencilar .16s ease-out backwards}
  .vai-estencil .gt-baixa, .vai-estencil .gt-sem_dado{animation-delay:.06s}
  .vai-estencil .gt-base{animation-delay:.18s}
  .vai-estencil .gt-urna{animation-delay:.34s}
  .vai-estencil .gt-virar{animation-delay:.5s}
  @keyframes estencilar{from{opacity:0; transform:scale(1.012)}to{opacity:1; transform:none}}
  .vai-estencil ~ .mapa-etiqueta{animation:etiqueta-cai .26s ease-out .66s backwards}
  .mapa-etiqueta.cai{animation:etiqueta-cai .26s ease-out backwards}
  @keyframes etiqueta-cai{from{opacity:0; translate:0 -16px; rotate:7deg}to{opacity:1; translate:0 0; rotate:0deg}}
  .traca{stroke-dasharray:1; animation:tracar .3s ease-out backwards}
  @keyframes tracar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  .ficha-bairro.nova{animation:ficha-cola .2s ease-out backwards}
  @keyframes ficha-cola{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

  /* checklist: a caneta risca o texto, a caixa recebe o visto carimbado; FEITO bate no fim */
  .acoes li.riscando label::after{animation:riscar .22s ease-out forwards}
  @keyframes riscar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .acoes li.riscando label::before{animation:caixa .2s ease-out}
  @keyframes caixa{from{transform:scale(1.3)}to{transform:none}}
  .acoes li.riscando::after{animation:visto .2s ease-out backwards}
  @keyframes visto{from{opacity:0; transform:scale(2.2) rotate(40deg)}60%{transform:scale(.9) rotate(40deg)}to{opacity:1; transform:scale(1) rotate(40deg)}}
  .selo-feito.bate{animation:feito .26s cubic-bezier(.2,.9,.3,1) .22s backwards}
  @keyframes feito{
    0%{opacity:0; transform:scale(1.7) rotate(15deg)}
    22%{opacity:.5}
    62%{opacity:.7; transform:scale(.94) rotate(6.5deg)}
    100%{opacity:.9; transform:scale(1) rotate(7deg)}
  }
  .oque.fechou{animation:tranco .09s ease-in-out .39s backwards}

  /* carregando: um cartaz em branco sendo colado, com o rolo varrendo da esquerda para a direita */
  .carregando .rolo{display:block}
  .carregando .rolo i{animation:varrer 1.1s linear infinite}
  @keyframes varrer{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
  .faixa-carga::before{content:""; position:absolute; top:0; bottom:0; left:0; width:35%; background:var(--tinta); animation:varrer 1.1s linear infinite}
  .faixa-nova{animation:faixa-desce .22s ease-out backwards}
  @keyframes faixa-desce{from{transform:translateY(-100%)}to{transform:none}}

  /* busca: o papelzinho é colado ao abrir e descolado ao fechar; erro balança um "não" */
  .busca.abre{animation:colar-busca .3s cubic-bezier(.2,.85,.25,1.05) backwards}
  .busca.fecha{animation:descolar-busca .16s ease-in forwards}
  @keyframes colar-busca{
    from{opacity:0; transform:translateY(-14px) rotate(-3deg); clip-path:inset(0 0 100% 0)}
    to{opacity:1; transform:rotate(-1.1deg); clip-path:inset(-20px -20px -40px -20px)}
  }
  @keyframes descolar-busca{
    from{opacity:1; transform:rotate(-1.1deg); clip-path:inset(-20px -20px -40px -20px)}
    to{opacity:0; transform:translateY(-10px) rotate(-2.5deg); clip-path:inset(0 0 100% 0)}
  }
  .busca.nao{animation:nao .24s ease-in-out}
  @keyframes nao{
    0%,100%{transform:translateX(0) rotate(-1.1deg)}
    25%{transform:translateX(-5px) rotate(-1.1deg)}
    50%{transform:translateX(5px) rotate(-1.1deg)}
    75%{transform:translateX(-4px) rotate(-1.1deg)}
  }
  #status .etiqueta-erro{animation:etiqueta-cola .24s ease-out backwards}
  @keyframes etiqueta-cola{from{opacity:0; transform:translateY(-8px) rotate(-5deg) scale(1.08)}to{opacity:1; transform:rotate(-1.2deg)}}

  /* capa na primeira carga: LEVA cola, LULA ~90ms depois; as fitas grudam */
  .abre-capa .marca .leva{animation:colar-letra .4s cubic-bezier(.2,.85,.25,1.05) backwards}
  .abre-capa .marca .lula{animation:colar-letra .4s cubic-bezier(.2,.85,.25,1.05) .09s backwards}
  @keyframes colar-letra{from{opacity:0; transform:translateY(-18px) rotate(-3deg) scale(1.06)}to{opacity:1; transform:none}}
  .abre-capa .fita{animation:grudar .26s ease-out .4s backwards}
  @keyframes grudar{from{opacity:0; transform:scale(.8) rotate(calc(var(--rf) - 14deg))}to{opacity:1; transform:scale(1) rotate(var(--rf))}}

  /* botões e papéis soltos: micro-gestos de 120–180ms */
  .btn{transition:transform .12s ease-out, box-shadow .12s ease-out}
  .btn:hover{transform:translateY(-2px) rotate(-.4deg)}
  .btn:active{transform:translateY(1px)}
  .btn[disabled]{transform:none}
  .btn.bateu{animation:afundar .14s ease-in-out}
  @keyframes afundar{50%{transform:translateY(3px); box-shadow:0 0 0 rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.3)}}
  .alvo a{transition:transform .12s ease-out, box-shadow .12s ease-out}
  .alvo:not(.aberto) a:hover{transform:translateY(-1px); box-shadow:0 2px 0 rgba(26,21,18,.4)}
  .atalhos a{transition:transform .14s ease-out, background-color .14s}
  .atalhos a:hover, .atalhos a:focus-visible{transform:translateY(-3px) rotate(calc(var(--r) * -1.4))}
  .atalhos a:active{transform:translateY(1px) scale(.97) rotate(var(--r))}
}


/* ============ roteiro de conversa ============ */
.roteiro h2{margin-bottom:6px}
.rot-fixa{margin:.4em 0 14px; max-width:60ch; font-size:15px; line-height:1.5; font-weight:700}
.rot-temas{display:flex; flex-wrap:wrap; gap:8px}
.rot-tema-btn{
  min-height:44px; padding:6px 12px; font:900 13px/1.1 var(--fonte-corpo); letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  color:var(--tinta); background:var(--papel-3); border:3px solid var(--tinta); box-shadow:2px 3px 0 var(--tinta);
}
.rot-tema-btn[aria-expanded="true"]{color:var(--papel); background:var(--tinta); box-shadow:none; transform:translate(2px,3px)}
.rot-papel{margin-top:16px; padding:14px 16px 16px; background:var(--papel-3); border:3px solid var(--tinta); position:relative}
.rot-papel[hidden]{display:none}
.rot-tema{margin:0 0 8px; font:400 clamp(20px,5vw,26px)/1.05 var(--fonte-display); text-transform:uppercase; letter-spacing:.02em}
.rot-passos{list-style:none; margin:0; padding:0; counter-reset:passo}
.rot-passos li{counter-increment:passo; position:relative; padding:9px 0 9px 40px; border-top:2px dashed var(--risca)}
.rot-passos li:first-child{border-top:none}
.rot-passos li::before{
  content:counter(passo); position:absolute; left:0; top:9px; width:30px; height:30px; display:grid; place-items:center;
  font:400 20px/1 var(--fonte-display); color:var(--papel); background:var(--tinta);
}
.rot-rot{display:block; font:900 11px/1.2 var(--fonte-corpo); letter-spacing:.07em; text-transform:uppercase; color:var(--verm)}
.rot-passos p{margin:2px 0 0; font-size:15px; line-height:1.5}
.rot-passos b{font-weight:800}
.rot-passos .ficha{margin-left:2px}
.rot-papel .botoes{margin-top:12px}
.rot-status{min-height:1.2em; margin:8px 0 0; font:800 12px/1.2 var(--fonte-corpo); letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-2)}
@media (prefers-reduced-motion:no-preference){
  .rot-papel.colando{animation:colar-roteiro .42s cubic-bezier(.2,.85,.25,1.05) backwards}
  @keyframes colar-roteiro{
    from{opacity:0; transform:translateY(10px) rotate(-1.2deg); clip-path:inset(0 0 100% 0)}
    to{opacity:1; transform:none; clip-path:inset(-20px -20px -40px -20px)}
  }
  .rot-tema-btn{transition:transform .12s ease-out, box-shadow .12s ease-out}
  .rot-tema-btn:active{transform:translate(2px,3px); box-shadow:none}
}

/* ---------- simulador, perto de mim, perfil da cidade ---------- */
.so-leitor{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* "Usar onde eu estou" (home) e entrada do simulador */
.perto{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:8px 0 0}
.perto[hidden]{display:none}
.perto .btn{flex:none; min-height:44px; padding:0 16px}
.perto-priv{flex:1 1 100%; font-size:12px; line-height:1.35; color:var(--tinta-2)}
.sim-entrada{margin:8px 0 0; font-size:13.5px}
.sim-entrada a{display:inline-block; padding:12px 0; margin:-12px 0; font-weight:700; color:var(--verm); text-decoration:underline; text-underline-offset:3px}
body.com-resultado .sim-entrada{display:none}
/* botão com cara de link: chamar no zap sem competir com o botão principal da tela */
.zap-link{min-height:44px; padding:0; font:700 13.5px/1.2 var(--fonte-corpo); color:var(--verm); background:none; border:none; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.sim-entrada .zap-link{min-height:0; padding:14px 0; margin:-14px 0}

/* cidade: chamada para o simulador e quadro "Quem mora aqui" */
.sim-link{margin-top:18px}
.social .numeros{margin-top:10px}
.social-uso{max-width:68ch; border-left-color:var(--tinta); font-weight:inherit} /* com .nota-pt */

/* simulador */
.simulador{padding-bottom:clamp(26px,4vw,40px)}
.sim-intro{margin:.2em 0 0; max-width:52ch; font:600 clamp(16px,2.4vw,19px)/1.4 var(--fonte-corpo)}
.sim-honesto{max-width:68ch} /* com .nota-pt */
.sim-escopo{min-width:0; margin:18px 0 0; padding:0; border:0}
.sim-escopo legend, .sim-campo label, .sim-como summary{font:900 13px/1.2 var(--fonte-corpo); letter-spacing:.05em; text-transform:uppercase}
.sim-escopo legend{padding:0; margin-bottom:8px}
.sim-ops{display:flex; flex-wrap:wrap; gap:8px}
.sim-op{position:relative; display:inline-block}
.sim-op input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.sim-op span{
  display:inline-flex; align-items:center; min-height:44px; padding:6px 14px; font:900 13px/1.1 var(--fonte-corpo); letter-spacing:.04em; text-transform:uppercase;
  color:var(--tinta); background:var(--papel-3); border:3px solid var(--tinta); box-shadow:2px 3px 0 var(--tinta);
}
.sim-op input:checked + span{color:var(--papel); background:var(--tinta); box-shadow:none; transform:translate(2px,3px)}
.sim-op input:focus-visible + span{outline:3px solid var(--verm); outline-offset:3px}
.sim-campo:not(:empty){margin-top:14px}
.sim-campo label{display:block; margin-bottom:.45em}
.sim-campo label small{font-weight:400; text-transform:none; letter-spacing:0; color:var(--ficha-tinta)}
.sim-campo input[type=text], .sim-campo select{
  width:100%; min-height:52px; font:600 18px/1.2 var(--fonte-corpo); color:var(--tinta); background:var(--papel-3);
  border:none; border-bottom:3px solid var(--tinta); border-radius:0; padding:12px 12px 9px; caret-color:var(--verm);
}
.sim-campo .campo-cidade{margin-top:0}
.sim-conta{margin-top:18px}
.sim-espera{margin:18px 0; font:800 12.5px/1.25 var(--fonte-corpo); letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-2)}
.sim-corpo{position:relative}
/* o placar do cenário gruda abaixo da faixa: quem mexe nos controles lá embaixo continua vendo o resultado */
.sim-resultado{
  position:sticky; top:62px; z-index:5; margin:0 0 12px; padding:10px 12px 12px;
  background:var(--papel-3); border:3px solid var(--tinta); box-shadow:3px 4px 0 rgba(0,0,0,.35);
}
.sim-placar{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:0 8px}
.sim-lado{margin:0; display:flex; flex-direction:column; min-width:0}
.sim-lado.flavio{align-items:flex-end; text-align:right}
.sim-num{font:400 clamp(28px,9vw,54px)/.95 var(--fonte-display); letter-spacing:-.01em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.sim-placar[data-tam="m"] .sim-num{font-size:clamp(24px,7.4vw,48px)}
.sim-placar[data-tam="g"] .sim-num{font-size:clamp(20px,6.2vw,42px)}
.sim-lado.lula .sim-num{color:var(--verm)}
.sim-nome{margin-top:3px; font:900 clamp(10.5px,2.8vw,13px)/1.15 var(--fonte-corpo); text-transform:uppercase; letter-spacing:.03em}
.sim-x{display:flex; align-items:center; height:clamp(27px,8.5vw,51px); font:900 clamp(18px,5vw,32px)/1 var(--fonte-corpo); color:var(--tinta-2)}
.sim-frase{margin:8px 0 0; padding-top:8px; border-top:3px solid var(--tinta); font:400 clamp(22px,6.6vw,38px)/1 var(--fonte-display); text-transform:uppercase; letter-spacing:.01em; overflow-wrap:anywhere}
.sim-frase b{font-weight:400; color:var(--verm)}
.sim-onde{margin:0 0 4px; font-size:13px; line-height:1.4; color:var(--tinta-2)}
.sim-leitura{margin:8px 0 0; max-width:62ch}
.sim-leitura p{margin:.35em 0; font-weight:700; font-size:15.5px; line-height:1.45}
.sim-leitura p:first-child{font:900 clamp(17px,4.6vw,21px)/1.25 var(--fonte-corpo)}
.cartaz .sim-h{margin:1.2em 0 .2em; font-size:clamp(22px,4.4vw,32px)}
.sim-ajuda{margin-bottom:0; max-width:60ch} /* com .sub */
.sim-grupos{list-style:none; margin:10px 0 0; padding:0; border-top:3px solid var(--tinta)}
.sim-grupo{padding:12px 0 6px; border-bottom:2px dashed var(--risca)}
.sim-grupo label{display:block; font:900 16px/1.25 var(--fonte-corpo)}
.sim-tot{display:block; font:600 13.5px/1.3 var(--fonte-corpo); color:var(--tinta-2)}
.sim-ctl{display:flex; flex-direction:column; gap:2px; margin-top:4px}
.sim-saida{font:600 14.5px/1.3 var(--fonte-corpo); color:var(--tinta-2)}
.sim-saida b{margin-right:.15em; font:400 22px/1 var(--fonte-display); letter-spacing:.01em; color:var(--tinta)}
.sim-grupo input[type=range]{--p:0%; -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; background:transparent; cursor:pointer}
.sim-grupo input[type=range]::-webkit-slider-runnable-track{height:20px; border:3px solid var(--tinta); background:linear-gradient(to right, var(--verm) var(--p), var(--papel) var(--p))}
.sim-grupo input[type=range]::-moz-range-track{height:14px; border:3px solid var(--tinta); background:linear-gradient(to right, var(--verm) var(--p), var(--papel) var(--p))}
.sim-grupo input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:36px; margin-top:-9px; border:0; border-radius:0; background:var(--tinta); box-shadow:2px 3px 0 rgba(0,0,0,.4)}
.sim-grupo input[type=range]::-moz-range-thumb{width:26px; height:36px; border:0; border-radius:0; background:var(--tinta); box-shadow:2px 3px 0 rgba(0,0,0,.4)}
.sim-botoes{margin-top:20px}
.sim-status{min-height:1.2em; margin:10px 0 0; font:800 12px/1.2 var(--fonte-corpo); letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-2)}
.sim-como{margin-top:14px; padding-top:4px; border-top:2px dashed var(--risca)}
.sim-como summary{display:flex; align-items:center; min-height:44px; cursor:pointer}
.sim-como p{margin:.4em 0; max-width:68ch; font-size:14.5px; line-height:1.55}

/* ---------- novidades: cartaz colado por cima de tudo (<dialog>) ---------- */
.novidades{width:min(560px, calc(100vw - 24px)); max-height:none; margin:auto; padding:0; border:none; background:transparent; color:var(--tinta); overflow:visible}
.novidades::backdrop{background:rgba(20,16,12,.78)}
.nov-papel{display:flex; flex-direction:column; max-height:calc(100dvh - 40px); padding:clamp(18px,4vw,28px); background:var(--papel); border:3px solid var(--tinta); box-shadow:6px 8px 0 rgba(0,0,0,.5)}
.nov-papel h2{flex:none; margin:0 0 8px; font:400 clamp(28px,8vw,40px)/.98 var(--fonte-display); text-transform:uppercase; letter-spacing:-.01em}
.nov-lista{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; list-style:none; margin:0; padding:0 10px 0 0} /* o título e os botões ficam à vista; a lista rola */
.nov-lista li{padding:10px 0; border-top:2px dashed var(--risca); font-size:15px; line-height:1.45}
.nov-lista li:first-child{border-top:none}
.nov-lista b{font-weight:800}
.nov-lista a{display:flex; align-items:center; min-height:44px; font-weight:800; color:var(--verm); text-underline-offset:3px}
.novidades .botoes{flex:none; margin-top:12px}
@media (prefers-reduced-motion:no-preference){
  .novidades[open]{animation:colar-roteiro .42s cubic-bezier(.2,.85,.25,1.05) backwards}
}

/* rodapé: mandar o site e reabrir as novidades (papel sobre o muro escuro) */
.pe-acoes{display:flex; flex-wrap:wrap; gap:0 22px; margin:12px 0 0}
.pe-acoes .zap-link{color:var(--papel)}