/* Vototeca — blanco y negro con crema, tipografía redondeada y gruesa, tarjetas con borde negro y acentos pastel por bloque.
   La papeleta (casilla y aspa) y Voti, la urna, son el motivo propio. */
:root{
  --bg:#FFFFFF; --soft:#F5F5F3; --surface:#FFFFFF; --ink:#191919; --ink-2:#3F3F3B; --muted:#6B6B64;
  --line:#191919; --line-soft:#E4E3DD; --cream:#FFFDF0;
  --coral:#E9774F; --coral-soft:#FCE6DC;
  --teal:#8FD3CF; --yellow:#F7D35C; --lilac:#B9A6E0; --pink:#F3A6C4; --mint:#9ED9A5;
  --ok:#1F7A4D; --ok-soft:#DFF3E7; --ko:#B3392F; --ko-soft:#FBE3E0; --focus:#2F5BD3;
  --display:'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --body:'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r:18px; --r-s:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121212; --soft:#1B1B1A; --surface:#1B1B1A; --ink:#FFFDF0; --ink-2:#E6E4D6; --muted:#A8A79E;
  --line:#FFFDF0; --line-soft:#33332F; --cream:#26251F;
  --coral:#F2916E; --coral-soft:#3A2219; --ok:#6CC08F; --ok-soft:#16301F; --ko:#EE8A80; --ko-soft:#3A1E1B; --focus:#8FB0FF; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121212; --soft:#1B1B1A; --surface:#1B1B1A; --ink:#FFFDF0; --ink-2:#E6E4D6; --muted:#A8A79E;
  --line:#FFFDF0; --line-soft:#33332F; --cream:#26251F;
  --coral:#F2916E; --coral-soft:#3A2219; --ok:#6CC08F; --ok-soft:#16301F; --ko:#EE8A80; --ko-soft:#3A1E1B; --focus:#8FB0FF; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17.5px;line-height:1.6}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-color:var(--coral)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:clamp(2.4rem,7.5vw,4.4rem)}
h2{font-size:clamp(1.6rem,4vw,2.1rem)}
h3{font-size:1.3rem}
p{margin:0}
img{max-width:100%;height:auto}
.saltar{position:absolute;left:-999px}
.saltar:focus{left:16px;top:16px;background:var(--surface);padding:8px 12px;z-index:30}

/* Cabecera */
.cabecera{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-inline:16px;padding-block:12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.marca{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;text-decoration:none;line-height:1}
.marca img{width:34px;height:34px}
.cabecera nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-weight:800;font-size:.95rem}
.cabecera nav a{text-decoration:none;padding:8px 10px;border-radius:10px}
.cabecera nav a:hover{background:var(--soft)}
.cabecera nav a.cta{background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:var(--r-s);font-family:var(--display);font-weight:700}
.cabecera nav a.cta:hover{background:var(--ink)}

.contenedor{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:40px 72px;display:flex;flex-direction:column;gap:56px}
.estrecho{max-width:720px;width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:32px}

/* Pie */
.pie{background:#191919;color:#FFFDF0;padding-inline:16px;padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
.pie-in{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.pie .marca{color:#FFFDF0}
.pie p{color:#CFCDBF;font-size:.95rem;max-width:62ch}
.pie nav{display:flex;gap:18px;flex-wrap:wrap;font-weight:700;font-size:.92rem}
.enlace{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}

/* Tipos de texto */
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;text-decoration:none}
.lead{font-size:1.2rem;color:var(--ink-2);max-width:56ch}
.muted{color:var(--muted)}
.meta{font-size:.85rem;color:var(--muted);font-weight:700}
.modhead{display:flex;flex-direction:column;gap:14px}
.chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:99px;border:1.5px solid #191919;color:#191919;text-decoration:none;background:var(--b,var(--soft))}
.bloque-basico{--b:var(--teal)} .bloque-venimos{--b:var(--yellow)} .bloque-debates{--b:var(--coral)} .bloque-votar{--b:var(--lilac)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--bg);border:1.5px solid var(--ink);border-radius:var(--r-s);padding:14px 22px;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.1;cursor:pointer;text-decoration:none;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.claro{background:#FFFDF0;color:#191919;border-color:#FFFDF0}
.btn:disabled{opacity:.35;cursor:default;transform:none}
.link-fuerte{font-weight:800}
.fila{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.reparto{justify-content:space-between}

/* Tarjetas */
.tarjeta{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px}
.tarjeta.suave{background:var(--soft);border-color:transparent}
.tarjeta.oscura{background:#191919;color:#FFFDF0;border-color:#191919}
.tarjeta.oscura h2,.tarjeta.oscura h3{color:#FFFDF0}
.tarjeta.oscura .muted,.tarjeta.oscura p{color:#CFCDBF}

/* Portada */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.hero-txt{display:flex;flex-direction:column;gap:22px}
.hero-img{background:var(--soft);border-radius:28px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14%;position:relative}
.hero-img img{width:100%;animation:flota 5s ease-in-out infinite}
.bocadillo{position:absolute;top:9%;right:7%;background:var(--surface);border:1.5px solid var(--line);border-radius:16px 16px 16px 4px;padding:8px 14px;font-family:var(--display);font-weight:700;font-size:1rem;max-width:60%}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.cifra{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:22px 8px}
.cifra b{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums}
.cifra span{font-size:.9rem;color:var(--muted)}
.caminos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.camino{justify-content:space-between}
.camino .btn{align-self:stretch;margin-top:10px}
.preguntas{display:flex;flex-direction:column;gap:10px}
.preguntas details{border:1.5px solid var(--line);border-radius:var(--r-s);padding:16px 18px;background:var(--surface)}
.preguntas summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:'+';font-size:1.4rem;line-height:1}
.preguntas details[open] summary::after{content:'–'}
.preguntas details p{margin-top:10px;color:var(--ink-2)}
.banda{background:var(--soft);border-radius:28px;padding:32px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.banda > div{display:flex;flex-direction:column;gap:12px}
.banda img{width:120px}

/* Prosa de los módulos */
.prosa{display:flex;flex-direction:column;gap:20px}
.prosa p,.prosa li{color:var(--ink-2)}
.prosa strong{color:var(--ink)}
.prosa h2{margin-top:22px;font-size:1.75rem}
.prosa h3{margin-top:8px}
.prosa ul,.prosa ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prosa .clave{background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.prosa .clave::before{content:'La idea clave';font-family:var(--display);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--coral)}
.prosa .clave p{color:var(--ink);font-weight:700}
.prosa .dato{background:var(--soft);border-radius:var(--r);padding:18px 20px}
.prosa .dato p{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.3;color:var(--ink)}
.fuente{display:block;font-size:.82rem;color:var(--muted);margin-top:6px}
.prosa .ejemplo{border:1.5px dashed var(--line);border-radius:var(--r);padding:16px 20px}
.prosa .ejemplo::before{content:'Ejemplo';display:block;font-family:var(--display);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--muted);margin-bottom:6px}
.tabla{overflow-x:auto;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.tabla table{border-collapse:collapse;width:100%;font-size:.95rem}
.tabla th,.tabla td{padding:11px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.tabla td{color:var(--ink-2)}
.tabla th{font-family:var(--display);font-size:.95rem;color:var(--ink);font-weight:800;background:var(--soft)}
.tabla tr:last-child td{border-bottom:0}
.linea-tiempo{list-style:none;padding:0;margin:0 0 0 8px;display:flex;flex-direction:column;border-left:3px solid var(--line)}
.linea-tiempo li{position:relative;padding:0 0 20px 22px;color:var(--ink-2)}
.linea-tiempo li::before{content:'';position:absolute;left:-10px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--yellow);border:2.5px solid #191919}
.linea-tiempo b{font-family:var(--display);font-weight:800;color:var(--ink);display:block;font-size:1.05rem}

/* Lectura */
.barra-lectura{position:fixed;left:0;top:0;height:4px;background:var(--coral);width:0;z-index:20}

/* Test de comprensión */
.quiz{background:var(--soft);border-radius:28px;padding:28px 22px;display:flex;flex-direction:column;gap:16px}
.quiz-cab{display:flex;align-items:center;gap:14px}
.quiz-cab img{width:60px;flex:none}
.quiz-body{display:flex;flex-direction:column;gap:26px}
.pregunta{display:flex;flex-direction:column;gap:12px}
.pregunta > b{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.25}
.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;text-align:left;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;font-weight:600;line-height:1.4;cursor:pointer;transition:transform .1s,box-shadow .1s}
.opcion:hover:not(:disabled){box-shadow:0 3px 0 var(--line);transform:translateY(-2px)}
.casilla{width:22px;height:22px;border:2px solid var(--line);border-radius:5px;position:relative;margin-top:1px;background:var(--surface)}
.opcion[aria-pressed="true"]{box-shadow:0 3px 0 var(--line)}
.opcion[aria-pressed="true"] .casilla::before,.opcion[aria-pressed="true"] .casilla::after{content:'';position:absolute;left:50%;top:50%;width:21px;height:3px;background:var(--coral);border-radius:2px}
.opcion[aria-pressed="true"] .casilla::before{transform:translate(-50%,-50%) rotate(45deg)}
.opcion[aria-pressed="true"] .casilla::after{transform:translate(-50%,-50%) rotate(-45deg)}
.opcion.bien{border-color:var(--ok);background:var(--ok-soft);box-shadow:none}
.opcion.mal{border-color:var(--ko);background:var(--ko-soft);box-shadow:none}
.opcion:disabled{cursor:default}
.explica{font-size:.95rem;color:var(--ink-2);background:var(--surface);border-radius:12px;padding:12px 14px}
.resultado-quiz{font-family:var(--display);font-weight:800;font-size:1.15rem}
.resultado-quiz.ok{color:var(--ok)}
.resultado-quiz.ko{color:var(--ko)}

/* Índice de módulos */
.bloque{display:flex;flex-direction:column;gap:16px}
.lista-mod{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.lista-mod a{height:100%;display:grid;grid-template-columns:44px 1fr 26px;gap:14px;align-items:start;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;transition:transform .12s,box-shadow .12s}
.lista-mod a:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--line)}
.lista-mod .n{font-family:var(--display);font-weight:800;font-size:1.3rem;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--b);color:#191919;border:1.5px solid #191919}
.lista-mod .t{display:flex;flex-direction:column;gap:4px;min-width:0}
.lista-mod .t b{font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.2}
.lista-mod small{color:var(--muted);font-size:.9rem;line-height:1.4}
.lista-mod .estado{width:24px;height:24px;border:2px solid var(--line-soft);border-radius:6px;position:relative}
.lista-mod li.hecho .estado{border-color:var(--ok);background:var(--ok-soft)}
.lista-mod li.hecho .estado::before,.lista-mod li.hecho .estado::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:3px;background:var(--ok);border-radius:2px}
.lista-mod li.hecho .estado::before{transform:translate(-50%,-50%) rotate(45deg)}
.lista-mod li.hecho .estado::after{transform:translate(-50%,-50%) rotate(-45deg)}
.progreso-global{display:flex;flex-direction:column;gap:8px;max-width:520px}
.pista{height:12px;background:var(--soft);border:1.5px solid var(--line);border-radius:99px;overflow:hidden}
.pista i{display:block;height:100%;background:var(--coral);width:0;transition:width .4s}
.contador{font-weight:800;font-size:.95rem}
.modnav{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modnav a{border:1.5px solid var(--line);border-radius:var(--r-s);padding:14px 16px;text-decoration:none;font-family:var(--display);font-weight:700;display:flex;flex-direction:column;gap:2px}
.modnav a small{font-family:var(--body);font-weight:700;color:var(--muted);font-size:.8rem}
.modnav a.sig{text-align:right;grid-column:2}

/* Anuncios: hueco reservado para que no salte el contenido */
.ad-slot{display:none}
.ad-slot.activo{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:140px;padding-block:12px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ad-slot.activo::before{content:'Publicidad';font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}

/* Test de afinidad */
.codigo{font-family:var(--display);font-weight:800;background:var(--yellow);color:#191919;padding:0 .25em;border-radius:12px;white-space:nowrap}
.ejes{display:flex;flex-direction:column;gap:20px}
.eje{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px}
.eje > .fila b{font-family:var(--display);font-size:1.25rem}
.eje-barra{position:relative;margin-inline:18px}
.eje-barra::before{content:'';position:absolute;left:0;right:0;top:12px;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--soft) 50%,var(--pink));border:1.5px solid var(--line)}
.eje-barra::after{content:'';position:absolute;left:50%;top:6px;height:24px;border-left:2px dotted var(--muted)}
.eje-tu{position:absolute;top:0;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-family:var(--display);font-weight:800;font-size:.85rem;padding:3px 10px;border-radius:99px;z-index:2;white-space:nowrap}
.eje-partido{position:absolute;transform:translateX(-50%);font-size:.75rem;font-weight:800;color:var(--ink-2);white-space:nowrap;padding:1px 7px;border:1.5px solid var(--line-soft);border-radius:8px;background:var(--surface)}
.ranking{display:flex;flex-direction:column;gap:10px}
.rank{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(80px,40%) 52px;gap:12px;align-items:center}
.rank .pista{height:14px}
.rank:not(.top) .pista i{background:var(--muted)}
.rank .meta{font-family:var(--display);font-size:1rem;color:var(--ink)}
.rank.off{opacity:.45}
.qrev{display:flex;flex-direction:column;gap:6px;padding-block:14px;border-bottom:1px solid var(--line-soft)}
.qrev ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:.95rem}
.qrev li.mia{color:var(--coral);font-weight:800}
details.tarjeta summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.15rem}
select,.campo input{font:inherit;font-weight:600;padding:12px 14px;border-radius:var(--r-s);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);max-width:100%}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--coral);flex:none;margin-top:3px}
.campo{display:flex;flex-direction:column;gap:8px;font-weight:800}

/* Carnet */
.carnet-lienzo{width:100%;max-width:420px;height:auto;border-radius:20px;border:1.5px solid var(--line);align-self:center}
.lista-pend{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero-img{max-width:340px;justify-self:center;width:100%}
  .caminos{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .banda{grid-template-columns:1fr}
}
@media (max-width:480px){
  body{font-size:17px}
  .cabecera nav a:not(.cta){padding:8px 6px}
  .rank{grid-template-columns:22px minmax(0,1fr) 34% 44px;gap:8px}
  .modnav{grid-template-columns:1fr}
  .modnav a.sig{grid-column:1}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* Calendario */
.calendario{gap:20px}
.cal-cab{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cal-cab > div:first-child{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 280px}
.cuenta{display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;background:var(--yellow);border:1.5px solid #191919;color:#191919;flex:none}
.cuenta b{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1}
.cuenta span{font-weight:800;font-size:.9rem}
.cal-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cal-lista li{border:1.5px solid var(--line-soft);border-radius:var(--r-s);padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:.92rem}
.cal-lista li b{font-family:var(--display);font-weight:800;font-size:1rem}
.cal-lista li.pasado{opacity:.45}
.cal-lista li.actual{border-color:var(--line);background:var(--cream)}

/* Tu provincia y hemiciclo */
.hemiciclo{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;max-width:520px}
.hemiciclo i{aspect-ratio:1;border-radius:3px;background:var(--line-soft)}
.hemiciclo i.si{background:var(--ink)}
.prov-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.marca img{background:#FFFDF0;border-radius:50%}
.guardar{gap:8px;max-width:640px}
.enlace-caja{flex:1 1 240px;min-width:0;font:inherit;font-size:.9rem;padding:10px 12px;border-radius:var(--r-s);border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.carnet-ver{align-items:center;text-align:center}
.carnet-ver .numero{font-family:var(--display);font-weight:800;font-size:1.6rem;background:var(--yellow);color:#191919;padding:2px 14px;border-radius:12px}
.chip-edicion{background:var(--soft);border-style:dashed}
[hidden]{display:none!important}
/* Cuenta (usuario y contraseña, sin correo) */
.form-cuenta{display:flex;flex-direction:column;gap:14px}
.campo input{width:100%}
.campo small{font-weight:600;color:var(--muted);font-size:.88rem}
.nota{font-size:.95rem;font-weight:700;margin:0}
.nota.ok{color:var(--ok)} .nota.ko{color:var(--ko)}
.aviso-voti{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-s);padding:12px 14px}
.aviso-voti img{width:40px;flex:none}
.aviso-voti p{margin:0;font-weight:700}
.rec-codigo{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,6vw,1.9rem);letter-spacing:.06em;background:var(--yellow);color:#191919;border:1.5px solid #191919;border-radius:var(--r-s);padding:10px 16px;text-align:center;user-select:all}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:700}