/* Centenarios que votan — mismo lenguaje visual que el Observatorio JEM (Caso Rivas),
   tomado de abc.com.py: titulares en slab (Zilla Slab), interfaz en Lato, tinta #282828,
   acento amarillo #ffe500 en filetes, etiquetas y hovers. Se suma un verde «zombi»
   sólo para marcar a los electores con acta de defunción. Sin marca de ningún medio. */
:root{
  --papel:#ffffff; --crema:#fbf6ef; --tinta:#282828; --negro:#0f0f0f; --tenue:#6b6b6b; --linea:#e5e5e5;
  --amarillo:#ffe500; --amarillo-osc:#ccb700; --rojo:#d7263d; --zombi:#7fb83a; --zombi-osc:#4d7a1c;
  --slab:"Zilla Slab", Rockwell, Georgia, serif;
  --sans:"Lato", Arial, sans-serif;
  --lado:clamp(16px,5vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.envol{max-width:1180px;margin:0 auto;padding-left:var(--lado);padding-right:var(--lado)}

/* ── cabecera ── */
.cabecera{background:var(--papel);position:sticky;top:0;z-index:2000;box-shadow:0 1px 0 var(--linea)}
.cabecera .in{max-width:1180px;margin:0 auto;padding:12px var(--lado);display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cabecera .marca{font:700 26px/1 var(--slab);text-decoration:none;letter-spacing:-.01em}
.cabecera .marca b{background:var(--amarillo);padding:2px 8px 3px}
.cabecera nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.cabecera nav a{font:700 14px/1 var(--sans);text-decoration:none;padding:10px 12px;position:relative}
.cabecera nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;background:var(--amarillo);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.cabecera nav a:hover::after{transform:scaleX(1)}
.filete{height:4px;background:var(--amarillo)}

.volanta{display:inline-block;background:var(--amarillo);color:var(--negro);font:900 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px 4px}

/* ── hero ── */
.hero{background:var(--negro);color:#f2efe9;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 460px at 78% 40%,rgba(127,184,58,.16),transparent 62%);z-index:-1}
.niebla{position:absolute;left:-10%;right:-10%;bottom:-40px;height:180px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,210,190,.16),transparent);filter:blur(10px);animation:niebla 14s ease-in-out infinite alternate}
@keyframes niebla{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.hero .in{max-width:1180px;margin:0 auto;padding:56px var(--lado) 44px;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:end;min-height:560px}
.hero h1{font:700 clamp(36px,5.2vw,66px)/1.04 var(--slab);margin:.35em 0 .35em;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--negro);background:var(--amarillo);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .bajada{font:400 20px/1.55 var(--slab);color:#dcd7cf;max-width:36em;margin:0 0 28px}
.hero .bajada b{color:#fff}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14);margin-top:34px}
.cifra{padding:22px 16px 26px 0;border-right:1px solid rgba(255,255,255,.12)}
.cifra + .cifra{padding-left:16px}
.cifra:last-child{border-right:0}
.cifra .n{font:700 clamp(32px,4vw,54px)/1 var(--slab);color:#fff;font-variant-numeric:tabular-nums}
.cifra.roja .n{color:var(--amarillo)}
.cifra.zombi .n{color:var(--zombi);font-family:"Creepster",var(--slab);font-weight:400;letter-spacing:.03em}
.cifra .t{font:700 13px/1.35 var(--sans);color:#aaa49c;margin-top:8px;max-width:15em}
.escena{position:relative;align-self:end;margin-bottom:-44px}
.ilustra{width:100%;max-width:440px;display:block;margin:0 auto}
.ilustra .rip{font:700 15px var(--slab);fill:#777}
.ilustra .rip-f{font:700 14px var(--sans);fill:#777}
.ilustra .urna-t{font:900 30px var(--sans);fill:#0f0f0f;letter-spacing:.12em}
.mano{animation:emerger 2.4s cubic-bezier(.2,.8,.2,1) .3s both,temblor 3.5s ease-in-out 2.8s infinite;transform-origin:220px 330px}
@keyframes emerger{from{transform:translateY(190px)}to{transform:translateY(0)}}
@keyframes temblor{0%,100%{transform:rotate(0)}40%{transform:rotate(-2deg)}60%{transform:rotate(1.5deg)}}
.hero .sello{position:absolute;left:0;top:4%;transform:rotate(-6deg);background:var(--amarillo);color:var(--negro);
  font:900 22px/1.1 var(--sans);letter-spacing:.04em;padding:10px 14px;text-transform:uppercase;text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.45);animation:sello .5s cubic-bezier(.3,1.6,.5,1) 1.8s both}
.hero .sello small{display:block;font:700 11px var(--sans);letter-spacing:.06em;margin-top:4px}
@keyframes sello{from{transform:rotate(-6deg) scale(2.2);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}

/* ── secciones ── */
.seccion{padding-top:60px;padding-bottom:24px;scroll-margin-top:80px}
.seccion h2{font:700 36px/1.12 var(--slab);margin:.5em 0 .7em;letter-spacing:-.01em}
.seccion h2::after{content:"";display:block;width:35px;height:3px;background:var(--amarillo);margin-top:12px}
.seccion .intro{color:#4a4a4a;max-width:46em;margin:0 0 26px;font:400 18px/1.6 var(--slab)}

.boton{display:inline-flex;align-items:center;gap:8px;background:var(--amarillo);color:var(--negro);text-decoration:none;border:0;cursor:pointer;
  font:900 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:12px 16px;transition:background .2s,color .2s,transform .2s}
.boton:hover{background:var(--negro);color:var(--amarillo);transform:translateX(3px)}
.boton.sec{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta);margin-top:16px}
.boton.sec:hover{background:var(--tinta);color:#fff}

/* ── control de edad ── */
.control-edad{background:var(--negro);color:#fff;padding:22px 24px;display:grid;gap:18px}
.atajos{display:flex;flex-wrap:wrap;gap:8px}
.atajos button{font:900 14px/1 var(--sans);padding:11px 14px;border:2px solid #555;background:transparent;color:#fff;cursor:pointer;transition:all .15s}
.atajos button:hover{border-color:var(--amarillo)}
.atajos button.activo{background:var(--amarillo);border-color:var(--amarillo);color:var(--negro)}
.atajos button.record{border-color:var(--zombi);color:var(--zombi)}
.atajos button.record.activo{background:var(--zombi);color:var(--negro)}
.barra-edad{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.barra-edad label{font:900 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#aaa}
.barra-edad input{flex:1;min-width:200px;accent-color:var(--amarillo);height:28px}
.barra-edad output{font:700 46px/1 var(--slab);color:var(--amarillo);font-variant-numeric:tabular-nums;min-width:2.2em;text-align:right}
.barra-edad .anos{font:700 15px var(--sans);color:#aaa;margin-left:-8px}

.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--linea);border-top:0;margin-bottom:34px}
.metrica{padding:18px 18px 20px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.metrica .n{font:700 30px/1.05 var(--slab);font-variant-numeric:tabular-nums}
.metrica .t{font:700 12.5px/1.35 var(--sans);color:var(--tenue);margin-top:8px}
.metrica.destaca{background:var(--crema)}
.metrica.destaca .n{box-shadow:inset 0 -10px 0 var(--amarillo);display:inline}
.metrica.muerto .n{color:var(--zombi-osc)}

.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.grafico{margin:0;min-width:0}
.grafico figcaption{font:14px/1.4 var(--sans);color:var(--tenue);margin-bottom:12px}
.grafico figcaption b{color:var(--tinta)}
.hist{display:flex;align-items:flex-end;gap:2px;height:220px;border-bottom:2px solid var(--tinta);position:relative}
.hist .b{flex:1;background:#d9d4cc;position:relative;min-width:2px;transition:background .2s,height .3s}
.hist .b.on{background:var(--amarillo)}
.hist .b.muerto{background:var(--zombi)}
.hist .b:hover{outline:2px solid var(--tinta)}
.hist .b .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--negro);color:#fff;
  font:700 12px/1.3 var(--sans);padding:6px 8px;white-space:nowrap;z-index:5;pointer-events:none}
.hist .b:hover .tip{display:block}
.eje{display:flex;justify-content:space-between;font:700 11.5px var(--sans);color:var(--tenue);margin-top:6px}
.nota-graf{font:400 15px/1.5 var(--slab);color:#3a3a3a;border-left:4px solid var(--amarillo);padding-left:12px;margin-top:16px}

/* ── localidades ── */
.dep-barras{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 28px;margin-bottom:30px}
.dep-fila{display:grid;grid-template-columns:120px 1fr 54px;align-items:center;gap:10px;font:700 13px var(--sans);cursor:pointer;padding:3px 0}
.dep-fila:hover .dep-n{text-decoration:underline}
.dep-fila .pista-b{height:14px;background:#eee}
.dep-fila .pista-b i{display:block;height:100%;background:var(--tinta)}
.dep-fila.sel .pista-b i{background:var(--amarillo)}
.dep-fila .v{text-align:right;font-variant-numeric:tabular-nums}
.filtros{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end;margin:0 0 16px}
.filtros label{display:flex;flex-direction:column;gap:5px;font:900 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.filtros label.check{flex-direction:row;align-items:center;gap:8px;font-size:12px;padding-bottom:10px}
.filtros select,.filtros input[type=search]{font:15px var(--sans);padding:9px 10px;border:2px solid var(--tinta);background:#fff;color:var(--tinta);min-width:180px;border-radius:0}
.filtros .busca input{min-width:260px}
.filtros input[type=checkbox]{accent-color:var(--tinta);width:17px;height:17px}
.tabla-marco{overflow-x:auto;border-top:2px solid var(--tinta)}
.tabla{width:100%;border-collapse:collapse;font:15px/1.4 var(--sans)}
.tabla th{text-align:left;font:900 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);border-bottom:1px solid var(--tinta);padding:10px 8px;white-space:nowrap}
.tabla td{border-bottom:1px solid var(--linea);padding:10px 8px;vertical-align:top}
.tabla tr:hover td{background:var(--crema)}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla td.fuerte{font-weight:900}
.tabla .barra-col{width:22%}
.tabla .mini{height:10px;background:var(--amarillo);min-width:1px}
.tabla tr.con-acta td{background:#f1f8e8}
.tabla .nombre{font:700 16px/1.3 var(--slab)}
.tabla .sub{display:block;font:12.5px var(--sans);color:var(--tenue)}
.etq{display:inline-block;padding:4px 7px 3px;font:900 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--tinta);color:#fff;margin-left:6px;vertical-align:2px}
.etq.acta{background:var(--zombi);color:var(--negro)}
.etq.dup{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta)}
.etq.record{background:var(--negro);color:var(--zombi)}

/* ── mapa ── */
#mapa-lienzo{height:560px;border:1px solid var(--linea);background:var(--crema)}
#mapa-lienzo .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.06)}
.leaflet-popup-content{font:14px/1.45 var(--sans)}
.leaflet-popup-content b{font-family:var(--slab);font-size:16px}

/* ── actas ── */
.pestanas{display:flex;gap:0;border-bottom:2px solid var(--tinta);margin-bottom:18px;flex-wrap:wrap}
.pestanas button{font:900 13px var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:13px 18px;border:0;background:transparent;cursor:pointer;color:var(--tenue)}
.pestanas button span{background:var(--linea);color:var(--tinta);padding:2px 7px;margin-left:6px}
.pestanas button.activo{background:var(--tinta);color:#fff}
.pestanas button.activo span{background:var(--amarillo)}
.aviso-grado{font:400 16px/1.5 var(--slab);color:#3a3a3a;max-width:50em}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.tarjeta{border:1px solid var(--linea);border-top:4px solid var(--zombi);padding:18px 20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .25s,transform .25s;background:#fff}
.tarjeta:hover{box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-3px)}
.tarjeta.probable{border-top-color:var(--amarillo)}
.tarjeta.dudoso{border-top-color:#bbb}
.tarjeta h3{font:700 21px/1.2 var(--slab);margin:0}
.tarjeta .edad-g{font:700 15px var(--sans);color:var(--tenue)}
.tarjeta .edad-g b{font:700 30px/1 var(--slab);color:var(--tinta)}
.tarjeta dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}
.tarjeta dt{font:900 10.5px/1.9 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--tenue)}
.tarjeta dd{margin:0}
.tarjeta .acta{background:var(--negro);color:#e9e5dd;padding:12px 14px;font-size:14px;line-height:1.45}
.tarjeta .acta b{color:var(--zombi)}
.tarjeta .acta .difer{color:var(--amarillo)}
.destacado{margin-top:34px;background:var(--crema);border-left:6px solid var(--zombi);padding:22px 26px;font:400 18px/1.55 var(--slab)}
.destacado:empty{display:none}
.destacado h3{font:700 24px/1.2 var(--slab);margin:0 0 8px}

.conteo{font:700 14px var(--sans);color:var(--tenue)}
.paginador{display:flex;gap:6px;align-items:center;margin:18px 0;flex-wrap:wrap}
.paginador button{font:900 13px var(--sans);padding:9px 13px;border:2px solid var(--tinta);background:#fff;cursor:pointer}
.paginador button:disabled{opacity:.3;cursor:default}
.paginador span{font:700 14px var(--sans);color:var(--tenue);margin:0 8px}

.metodo .texto h3{font:700 22px/1.2 var(--slab);margin:0 0 10px}
.metodo .texto p,.metodo .texto li{font:400 17px/1.6 var(--slab);color:#3a3a3a}
.metodo .texto ul{padding-left:20px}
.metodo .texto li{margin-bottom:8px}
.pie-sitio{margin-top:60px;background:var(--negro);color:#9a958d;font:700 13px var(--sans);padding:26px 0}

@media (max-width:980px){
  .hero .in{grid-template-columns:1fr;min-height:0}
  .escena{max-width:340px;margin:0 auto -44px}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra:nth-child(2){border-right:0}
  .cifra:nth-child(3){padding-left:0}
  .dos-col{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cabecera nav{display:none}
  .seccion h2{font-size:28px}
  .filtros select,.filtros .busca input{min-width:0;width:100%}
  .filtros label{flex:1 1 100%}
  #mapa-lienzo{height:420px}
  .tabla .barra-col{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── ANR ── */
.grafico.ancho{margin-bottom:18px}
.hist.anr{height:200px}
.hist.anr .b{background:var(--tinta)}
.hist.anr .b.corte{background:var(--amarillo)}
.hist .media{position:absolute;left:0;right:0;border-top:2px dashed var(--rojo);pointer-events:none}
.hist .media span{position:absolute;right:0;top:-20px;font:900 11px var(--sans);color:var(--rojo);background:#fff;padding:0 4px}
.sub-h{font:700 26px/1.2 var(--slab);margin:48px 0 8px}
.etq.anr{background:var(--rojo);color:#fff}
.etq.fndif{background:var(--amarillo);color:var(--negro)}
.tarjeta .anr-l{font:13.5px/1.45 var(--sans);border-left:4px solid var(--rojo);padding:4px 0 4px 10px}
.tarjeta .anr-l.pm{background:#fdecee}
.tarjeta .anr-l b{font-weight:900}
.siglo td{background:#fff9c4}

.hist.futuro{height:200px}
.hist.futuro .b{background:#d9d4cc}
.hist.futuro .b.muerto{background:var(--zombi)}
.hist.futuro .b.post{background:#d9d4cc;opacity:.7}
.hist.futuro .b.margen{background:var(--amarillo)}

/* ── capa zombi ── */
.volanta.z{background:var(--zombi);color:var(--negro);position:relative;padding-left:24px}
.volanta.z::before{content:"";position:absolute;left:7px;top:50%;width:11px;height:13px;transform:translateY(-55%);
  background:var(--negro);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 110'%3E%3Cpath d='M22 110 C21 80 19 60 25 44 C27 38 31 33 35 31 L39 24 C40 20 45 21 44 26 L42 31 L48 18 C49 14 54 15 53 20 L49 32 L55 21 C56 17 61 19 60 23 L55 35 L60 28 C62 25 66 28 64 31 L56 46 C54 62 52 85 51 110 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 110'%3E%3Cpath d='M22 110 C21 80 19 60 25 44 C27 38 31 33 35 31 L39 24 C40 20 45 21 44 26 L42 31 L48 18 C49 14 54 15 53 20 L49 32 L55 21 C56 17 61 19 60 23 L55 35 L60 28 C62 25 66 28 64 31 L56 46 C54 62 52 85 51 110 Z'/%3E%3C/svg%3E") center/contain no-repeat}
.goteo{display:block;width:100%;height:46px;margin-top:-1px}
.goteo path{fill:var(--negro)}
.ojos circle{fill:#d6ff7a;filter:drop-shadow(0 0 4px #b6ff3a)}
.ojos .par{animation:parpadeo 5s infinite;transform-box:fill-box;transform-origin:center}
.ojos .p2{animation-delay:1.7s}.ojos .p3{animation-delay:3.1s}
@keyframes parpadeo{0%,44%,52%,100%{transform:scaleY(1);opacity:.9}48%{transform:scaleY(.1)}70%{opacity:.25}}
.carga{position:fixed;inset:0;z-index:5000;background:var(--negro);display:grid;place-items:center;transition:opacity .5s}
.carga.fuera{opacity:0;pointer-events:none}
.carga-in{text-align:center;color:#d8d3ca;font:400 26px "Creepster",var(--slab);letter-spacing:.04em}
.carga-mano{width:60px;display:block;margin:0 auto 10px;animation:emerger-c 1.6s ease-in-out infinite alternate}
@keyframes emerger-c{from{transform:translateY(16px)}to{transform:translateY(-4px)}}
.barra-edad output.zz{color:var(--zombi);font-family:"Creepster",var(--slab);font-weight:400}
.hist .b.zz{background:var(--zombi)}
.zona-z{position:absolute;top:4px;right:0;font:400 15px "Creepster",var(--slab);color:var(--zombi-osc);letter-spacing:.04em;pointer-events:none}
.tarjeta{position:relative}
.tarjeta.confirmado{border-top:0;border-radius:90px 90px 0 0/34px 34px 0 0;padding-top:26px;box-shadow:inset 0 5px 0 var(--zombi)}
.qepd{position:absolute;top:16px;right:16px;font:900 10.5px/1.1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--zombi-osc);
  border:2px solid var(--zombi-osc);padding:5px 7px;transform:rotate(4deg);text-align:center;background:#fff}
.qepd b{display:block;font:700 13px var(--slab);letter-spacing:0}
.vota-aun{font:900 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--negro);background:var(--zombi);align-self:flex-start;padding:4px 7px}
.pie-z{font-family:"Creepster",var(--slab);font-weight:400;color:var(--zombi);font-size:16px;letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){.carga-mano,.ojos .par{animation:none}}

/* ── banner ANR ── */
.banner-anr{margin-top:34px}
.banner-anr a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;text-decoration:none;
  background:var(--amarillo);color:var(--negro);padding:18px 22px;border-left:8px solid var(--zombi);transition:transform .2s,box-shadow .2s}
.banner-anr a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.banner-anr .volanta.z{background:var(--negro);color:var(--zombi)}
.banner-anr .volanta.z::before{background:var(--zombi)}
.banner-t{font:400 18px/1.45 var(--slab)}
.banner-t b{font-weight:700;font-size:21px}
.banner-v{font:900 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (max-width:700px){.banner-anr a{grid-template-columns:1fr}}
.fuentes{background:var(--crema);padding:22px 26px;margin-bottom:30px;border-left:6px solid var(--amarillo)}
.fuentes h3{font:700 22px/1.2 var(--slab);margin:0 0 10px}
.fuentes ol{margin:0;padding-left:22px}
.fuentes li{font:400 16.5px/1.55 var(--slab);color:#3a3a3a;margin-bottom:6px}
.fuentes a{font:900 12px var(--sans);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 -3px 0 var(--amarillo);white-space:nowrap}