/* Consulta Padrón — hoja pública. DISEÑO MÓVIL PRIMERO.
 *
 * Entre el 95 % y el 99 % de la gente entra desde el celular, y en Paraguay el
 * 77,44 % de los celulares son Android (StatCounter, julio 2026). Por eso la
 * base es **Material Design 3**, el sistema de Google: no es una preferencia,
 * es la interfaz que ocho de cada diez votantes ya usan todos los días. Lo que
 * les resulta familiar es intuitivo sin que nadie se lo explique.
 *
 * Del sistema se toman los NÚMEROS, no el aire:
 *   · escala tipográfica M3 (display / headline / title / body / label);
 *   · retícula de 4 dp — todo espaciado es múltiplo de 4;
 *   · 48 dp de alto mínimo en cualquier cosa que se toque, y 8 dp de
 *     separación entre dos blancos táctiles;
 *   · radios y elevación de las tarjetas M3.
 *
 * La regla que ordena la pantalla: UNA sola tarea. El buscador y su botón
 * tienen que entrar sin scrollear hasta en un teléfono de 360×640. Todo lo
 * demás —foto, movimiento, partido, cuenta regresiva— es contexto y va después.
 *
 * Los colores de la campaña llegan como variables desde el HTML:
 * --fondo, --panel, --acento.
 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --fondo: #091333;
  --panel: #11214E;
  --acento: #3C82FF;

  --tinta: #ffffff;
  --tinta-2: rgba(255, 255, 255, .80);
  --tinta-3: rgba(255, 255, 255, .62);
  --linea: rgba(255, 255, 255, .13);
  --ok: #4ADE80;
  --error: #FCA5A5;
  --alerta: #FBBF24;
  --foco: #FFDD00;

  /* Tipografía: títulos con serif, cuerpo con Arial.
     Las dos son fuentes del propio teléfono, así que el sitio ya no descarga
     nada de Google Fonts: entra más rápido con datos móviles y desaparece la
     última conexión a un servidor ajeno.
     El orden importa. Android —el 77 % de los celulares del país— no trae ni
     Times New Roman ni Georgia: cae en Noto Serif, que es del mismo estilo y
     está dibujada para pantalla. En iPhone, Windows y Mac sí usa Times. */
  --serif: "Times New Roman", Times, Georgia, "Noto Serif", "Liberation Serif", serif;
  --sans: Arial, "Helvetica Neue", Helvetica, Roboto, "Liberation Sans", sans-serif;

  /* Retícula de 4 dp de Material 3. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 40px; --e8: 48px;

  /* Escala tipográfica de Material 3, con sus interlineados. */
  --display-s: 40px;   --display-s-lh: 46px;
  --headline-m: 30px;  --headline-m-lh: 38px;
  --headline-s: 26px;  --headline-s-lh: 32px;
  --title-l: 22px;     --title-l-lh: 28px;
  --title-m: 16px;     --title-m-lh: 24px;
  --body-l: 16px;      --body-l-lh: 24px;
  --body-m: 14px;      --body-m-lh: 20px;
  --label-l: 14px;
  --label-m: 12px;

  /* Radios de Material 3. */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 28px;

  --toque: 48px;   /* alto táctil mínimo */

  /* ---------------------------------------------------------------------
     NO BORRAR. Nombres de la hoja anterior, mantenidos como alias.
     En este proyecto trabaja más de una terminal a la vez y hay CSS escrito
     contra estos nombres (por ejemplo el bloque "Tu gente"). Cuando la hoja
     pasó a Material 3 estos tokens desaparecieron y esas reglas quedaron con
     `var()` sin valor: el borde de la tarjeta directamente no se dibujaba y el
     bloque se veía suelto contra el fondo.
     Si escribís CSS nuevo usá los nombres de arriba; estos son sólo el puente.
     --------------------------------------------------------------------- */
  --linea-fuerte: rgba(255, 255, 255, .24);
  --t-m: var(--title-m);
  --t-s: var(--body-l);
  --t-body: var(--body-l);
  --t-l: var(--headline-s);
  --t-xl: var(--headline-m);
  --t-rotulo: var(--label-l);
  --radio: var(--r-l);
  --sombra: 0 12px 32px rgba(0, 0, 0, .32);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--body-l); line-height: var(--body-l-lh);
  color: var(--tinta);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.oculto { display: none !important; }
.oculto-total { position: absolute; left: -99999px; top: 0; }

.saltar {
  position: absolute; left: -9999px;
  background: var(--foco); color: #0b0c0c;
  padding: var(--e3) var(--e4); border-radius: 0 0 var(--r-s) 0;
  font-weight: 700; font-size: var(--body-l); text-decoration: none; z-index: 50;
}
.saltar:focus { left: 0; top: 0; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.marco { width: 100%; max-width: 480px; margin: 0 auto; }

/* --- Cinta de demostración -----------------------------------------------
   Sólo aparece en la ficha de muestra (candidatos.demo = 1). Va antes de la
   barra y no se puede cerrar: abajo hay datos reales del padrón nacional y
   esto es lo único que avisa que el candidato no existe.

   Deliberadamente NO usa --acento: tiene que leerse como una nota del sistema
   y no como parte del diseño de la campaña, porque justamente lo que dice es
   que el diseño de la campaña todavía no es el de nadie. Dos renglones cortos,
   para no empujar el buscador abajo del pliegue. */

.demo-cinta {
  padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .07);
  border-bottom: 1px solid var(--linea);
}
.demo-titulo {
  font-size: var(--label-m); line-height: 16px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--alerta);
}
.demo-texto {
  margin-top: var(--e1);
  font-size: var(--label-m); line-height: 17px;
  color: var(--tinta-3);
}
.demo-texto a {
  color: var(--tinta-2); text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}

/* --- Barra superior (M3 top app bar) -------------------------------------
   La identidad de la campaña ocupaba media pantalla y empujaba el buscador
   abajo del pliegue. Estuvo un tiempo en los 64 dp de una barra de Material,
   que resolvía el pliegue pero dejaba la foto en 44 px: a ese tamaño la
   candidata era una mancha verde y la barra no la presentaba, sólo la citaba.
   Ahora es una barra grande —96 px, foto de 68 y el nombre en 22— y el
   buscador de abajo se ajustó en la misma medida para compensarla. El trato
   sigue siendo el mismo que en la versión chica: campo y botón tienen que
   verse sin scrollear en un teléfono de 360×640. Si esta barra vuelve a
   crecer, hay que medir eso otra vez. */

.barra {
  display: flex; align-items: center; gap: var(--e4);
  min-height: 96px; padding: var(--e3) var(--e4);
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}
.barra-foto {
  width: 68px; height: 68px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: top center;
  border: 2px solid var(--acento); background: var(--fondo);
}
.barra-foto-iniciales {
  display: grid; place-items: center;
  font-family: var(--serif); font-size: var(--title-l); font-weight: 700; color: var(--acento);
}
.barra-textos { min-width: 0; flex: 1; }
.barra-nombre {
  font-family: var(--serif);
  font-size: var(--title-l); line-height: var(--title-l-lh); font-weight: 700;
  letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-cargo {
  font-size: var(--label-l); line-height: 20px; color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Buscador: la única tarea de la pantalla ----------------------------- */

/* Material 3 Expressive: formas grandes y un plano propio para la tarea
   principal. La tarjeta separa el buscador del fondo en vez de dejarlo suelto
   sobre una superficie plana, que era lo que se veía pobre.

   Los aires se recortaron para devolverle a la barra superior los píxeles que
   ésta ganó. Se achican los márgenes y el titular, nunca el campo ni el botón:
   los dos siguen en 56 px, que es el blanco táctil, y encogerlos sería cambiar
   holgura por errores de tipeo en la única tarea de la pantalla. */
.buscador {
  margin: var(--e4) var(--e4) 0;
  padding: var(--e5) var(--e4) var(--e4);
  background: linear-gradient(170deg, color-mix(in srgb, var(--panel) 92%, #fff 8%), var(--panel));
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .32);
  text-align: center;
}

.pregunta {
  font-family: var(--serif);
  font-size: var(--headline-s); line-height: var(--headline-s-lh);
  font-weight: 700; letter-spacing: .01em;
  display: block; margin-bottom: var(--e3);
  text-wrap: balance;
}

/* La ayuda queda para quien usa lector de pantalla. En la pantalla la dice el
   propio marcador de posición del campo, y repetirla era ruido. */
.ayuda {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Campo de texto relleno de M3: fondo propio, sin borde en los cuatro lados,
   subrayado que se enciende con el color de la campaña al enfocar. */
#cedula {
  display: block; width: 100%;
  min-height: 56px; padding: var(--e2) var(--e4);
  font-family: var(--sans); font-size: var(--headline-s); font-weight: 700;
  letter-spacing: .08em; text-align: center;
  color: var(--tinta);
  background: rgba(0, 0, 0, .30);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-l);
  transition: background .15s ease, border-color .15s ease;
}
#cedula::placeholder { color: rgba(255, 255, 255, .38); font-weight: 500; letter-spacing: .04em; }
#cedula:focus { outline: none; background: rgba(0, 0, 0, .4); border-color: var(--acento); }
#cedula:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Botón relleno de M3, ancho completo. Es la acción principal: no comparte
   fila con nadie ni se achica. */
.btn-buscar {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; margin-top: var(--e3);
  font-family: var(--sans); font-size: var(--title-m); font-weight: 700;
  letter-spacing: .01em;
  color: #fff; background: var(--acento);
  border: none; border-radius: var(--r-xl); cursor: pointer;
  transition: filter .15s ease;
}
.btn-buscar:hover { filter: brightness(1.08); }
.btn-buscar:active { filter: brightness(.94); }
.btn-buscar[disabled] { opacity: .6; cursor: progress; }

.turnstile { margin-top: var(--e3); display: flex; justify-content: center; }
.turnstile:empty { display: none; }

.nota-privacidad {
  margin-top: var(--e4);
  font-size: var(--body-m); line-height: var(--body-m-lh); color: var(--tinta-3);
}

/* Cuenta regresiva: contexto, no titular. Una línea discreta. */
/* Centrada y en forma de ficha: como barra de borde a borde partía la página
   en dos y competía con el buscador. */
.cuenta-regresiva {
  display: flex; justify-content: center;
  padding: var(--e4) var(--e4) 0;
}
.cuenta-ficha {
  display: inline-block;
  padding: var(--e2) var(--e5);
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius: var(--r-xl);
  font-size: var(--body-m); line-height: var(--body-m-lh); color: var(--tinta-2);
  text-align: center; text-wrap: balance;
}
.cuenta-num {
  font-family: var(--sans); font-size: var(--title-m); font-weight: 700;
  color: var(--acento); font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

.mensaje {
  margin-top: var(--e4); padding: var(--e3) var(--e4);
  font-size: var(--body-m); line-height: var(--body-m-lh);
  background: rgba(255, 255, 255, .06);
  border-left: 4px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-s);
  color: var(--tinta-2);
}
.mensaje.error { color: var(--error); border-left-color: var(--error); }
.mensaje.exito { color: var(--ok); border-left-color: var(--ok); }
.mensaje-enlace {
  display: inline-flex; align-items: center;
  min-height: var(--toque); margin-top: var(--e1);
  color: var(--tinta); font-weight: 700; font-size: var(--body-m);
}

/* --- La respuesta -------------------------------------------------------- */

.resultado { padding: var(--e4) var(--e4) var(--e5); animation: aparecer .25s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }

/* Quién es: confirmación breve, no una tabla.
   Estuvo en 14 px y al 62 % de opacidad, y a ese tamaño no cumplía su trabajo:
   es la línea que le dice a la persona "sí, sos vos" antes de que se fíe del
   local y la mesa que vienen abajo, y si hay que acercar el ojo a la pantalla
   para leerla, no confirma nada. El nombre sube a 22 px en blanco pleno y la
   cédula a 16 px; sigue debajo de la tarjeta del local en jerarquía, que va en
   26 px sobre su propio plano elevado. */
.quien {
  padding: var(--e3) 0;
  font-size: var(--title-l); line-height: var(--title-l-lh); color: var(--tinta);
}
.quien b { display: block; color: var(--tinta); font-weight: 700; }
/* Si el padrón devolviera un registro sin nombre, el renglón en bloque dejaría
   28 px vacíos arriba de la cédula. Hoy no pasa —el bloque se pinta sólo tras
   una coincidencia—, pero el día que pase conviene que no se note. */
.quien b:empty { display: none; }
.quien-doc {
  display: block; margin-top: var(--e1);
  font-size: var(--body-l); line-height: var(--body-l-lh);
  color: var(--tinta-3); font-variant-numeric: tabular-nums;
}

/* Tarjeta 1 — DÓNDE. Es la respuesta: tarjeta elevada de M3, con el color de
   la campaña. */
.tarjeta-local {
  padding: var(--e5) var(--e4);
  background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 30%, var(--panel)), var(--panel));
  border-radius: var(--r-l);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
}
.rotulo {
  font-size: var(--label-m); line-height: 16px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.local-nombre {
  margin-top: var(--e1);
  font-family: var(--serif);
  font-size: var(--headline-s); line-height: var(--headline-s-lh);
  font-weight: 700; letter-spacing: .01em;
}
.local-sub { margin-top: var(--e1); font-size: var(--body-m); color: var(--tinta-2); }

/* Mesa y orden: dos datos, no dos monumentos. En `display-small` de M3 (36 px)
   se leen de un vistazo y no empujan media pantalla, como pasaba con 72 px. */
.numeros { display: flex; gap: var(--e2); margin-top: var(--e4); }
.numero {
  flex: 1; min-width: 0;
  padding: var(--e3) var(--e2);
  background: rgba(0, 0, 0, .32);
  border-radius: var(--r-m);
  text-align: center;
}
.numero-rotulo {
  display: block;
  font-size: var(--label-m); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.numero-valor {
  display: block; margin-top: 2px;
  font-family: var(--sans);
  font-size: var(--display-s); line-height: var(--display-s-lh);
  font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* Botón con contorno de M3. */
.btn-mapa {
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque); margin-top: var(--e3);
  font-size: var(--title-m); font-weight: 700; text-decoration: none;
  color: #fff; background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-xl);
}
.btn-mapa:hover { background: rgba(255, 255, 255, .1); }

/* Cuándo: una línea, con la fecha corta. "Domingo 4 de octubre de 2026, de
   07:00 a 17:00" ocupaba tres renglones y decía lo mismo. */
.cuando {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e1);
  font-size: var(--body-m); color: var(--tinta-2);
}
.cuando svg { color: var(--acento); flex: none; }

/* Recuadro de aviso (otro distrito). */
.recuadro {
  margin-top: var(--e3); padding: var(--e3) var(--e4);
  border-left: 4px solid var(--alerta);
  background: rgba(255, 255, 255, .06);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: var(--body-m); line-height: var(--body-m-lh); color: var(--tinta-2);
}
.recuadro b { color: var(--tinta); }

/* Tarjeta 2 — A QUIÉN. Antes eran dos cajas cuadradas idénticas a las de mesa
   y orden, y se confundían: parecían el mismo dato. Ahora es otra forma —una
   fila con la foto y dos fichas— y se lee distinto de un vistazo. */
.vota-asi {
  display: flex; align-items: center; gap: var(--e3);
  margin-top: var(--e4); padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
}
/* Acá la foto se muestra más cerca que en la barra. Son dos lecturas
   distintas de la misma imagen y por eso el recorte lo hace el CSS y no un
   archivo aparte: la barra presenta a la candidata entera, y este bloque
   —que es la instrucción de voto— la muestra de la cabeza al medio del brazo,
   que es donde la cara se reconoce sin dudar en 64 px.
   El escalado está calculado, no tanteado: con origen en el 13 % del alto,
   scale(1.43) deja a la vista la franja que va del 4 % al 74 % de la imagen.
   El 74 % es la mitad del antebrazo cruzado. Si algún día cambia la foto de
   la campaña, estos dos números hay que volver a sacarlos sobre la foto
   nueva: son de ésta, no del diseño. */
.vota-foto {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--acento); background: var(--fondo);
}
.vota-foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.43); transform-origin: 50% 13%;
}
.vota-textos { min-width: 0; flex: 1; }
.vota-titulo { font-size: var(--label-m); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.vota-nombre {
  font-family: var(--serif); font-size: var(--title-m); line-height: var(--title-m-lh);
  font-weight: 700; margin-top: 2px; letter-spacing: .02em;
}
.vota-fichas { display: flex; gap: var(--e2); margin-top: var(--e2); }
.ficha {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px var(--e3);
  background: var(--acento); color: #fff;
  border-radius: var(--r-xl);
  font-size: var(--label-m); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ficha b { font-family: var(--sans); font-size: var(--title-l); letter-spacing: 0; }

/* --- Acciones ------------------------------------------------------------ */

.acciones { display: grid; gap: var(--e2); margin-top: var(--e4); }
.acciones-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.acciones-fila:has(> :only-child) { grid-template-columns: 1fr; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 56px; padding: var(--e2) var(--e3);
  font-family: var(--sans); font-size: var(--title-m); font-weight: 700;
  border-radius: var(--r-xl); border: none; cursor: pointer; text-decoration: none;
  text-align: center;
}
.btn:active { filter: brightness(.94); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-principal { background: #25D366; color: #06301a; }
.btn-secundario {
  min-height: var(--toque);
  background: transparent; color: var(--tinta);
  border: 1px solid rgba(255, 255, 255, .4);
  font-size: var(--body-m);
}
.btn-secundario:hover { background: rgba(255, 255, 255, .08); }

@keyframes girar { to { transform: rotate(360deg); } }
.girando { animation: girar .8s linear infinite; }

/* --- Lo demás, a un toque ------------------------------------------------
   Revelación progresiva (Jakob Nielsen, NN/g): mostrar sólo lo que hace falta
   para la tarea de ahora y dejar el resto disponible a pedido. Medido: baja el
   tiempo de tarea entre un 20 % y un 40 % y mejora la comprensión.
   Acá la tarea es UNA: saber dónde votar. Todo lo demás —los pasos de la
   máquina, el plan del día, las dudas, buscar por otros— es bueno y se queda,
   pero plegado: cuatro renglones en vez de tres pantallas de scroll.
   Se usa <details> nativo: funciona sin JavaScript, el buscador del navegador
   encuentra el texto adentro y los lectores de pantalla lo anuncian solos. */

.mas {
  border-top: 1px solid var(--linea);
}
.mas:last-of-type { border-bottom: 1px solid var(--linea); }

.mas > summary {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 56px; padding: var(--e3) var(--e1);
  font-family: var(--serif);
  font-size: var(--title-m); line-height: var(--title-m-lh); font-weight: 700;
  color: var(--tinta);
  cursor: pointer; list-style: none;
}
.mas > summary::-webkit-details-marker { display: none; }

/* La flecha gira al abrir: dice si hay algo más abajo sin necesidad de texto. */
.mas > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--tinta-3);
  border-bottom: 2px solid var(--tinta-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.mas[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mas > summary:hover { color: var(--acento); }

/* El cuerpo se oculta EXPLÍCITAMENTE cuando el acordeón está cerrado.
   Parece redundante —<details> ya lo hace solo— pero no lo es: al cuerpo se le
   había puesto una `animation`, y eso anula el `content-visibility: hidden`
   con el que el navegador esconde el contenido. Resultado: los cuatro
   acordeones figuraban cerrados (`open === false`) y mostraban sus 620 px
   igual. La reducción de la página era pura ilusión. Si alguna vez se le
   quiere animar la apertura, hay que hacerlo sin tocar el `display`. */
.mas:not([open]) > .mas-cuerpo { display: none; }
.mas-cuerpo { padding: 0 var(--e1) var(--e4); }

/* Los bloques que ya traían su propio marco pierden el doble borde adentro
   del acordeón: el acordeón ya los separa. */
.mas-cuerpo > .familia,
.mas-cuerpo > .plan,
.mas-cuerpo > .dudas,
.mas-cuerpo > .votar-asi {
  margin: 0; padding: 0; border: none; background: none;
}

/* --- Captura de contacto ------------------------------------------------- */

.lead {
  margin-top: var(--e4); padding: var(--e4);
  background: rgba(255, 255, 255, .06);
  border-radius: var(--r-l);
}
.lead-titulo {
  font-family: var(--serif);
  font-size: var(--title-m); line-height: var(--title-m-lh); font-weight: 700;
}
.lead-bajada { margin-top: var(--e1); font-size: var(--body-m); line-height: var(--body-m-lh); color: var(--tinta-3); }
.lead-campos { display: grid; gap: var(--e2); margin-top: var(--e3); }
#lead-tel {
  width: 100%; min-height: 56px; padding: var(--e2) var(--e4);
  font-family: var(--sans); font-size: var(--body-l); color: var(--tinta);
  background: rgba(255, 255, 255, .08);
  border: none; border-bottom: 2px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-s) var(--r-s) 0 0;
}
#lead-tel::placeholder { color: rgba(255, 255, 255, .38); }
#lead-tel:focus { outline: none; border-bottom-color: var(--acento); }
.btn-lead {
  width: 100%; min-height: 56px;
  font-family: var(--sans); font-size: var(--title-m); font-weight: 700; color: #fff;
  background: var(--acento); border: none; border-radius: var(--r-xl); cursor: pointer;
}
.btn-lead[disabled] { opacity: .6; }
/* Aparece recién cuando la persona escribió su número: antes era un párrafo
   más de letra chica que nadie pidió leer. */
.lead-consentimiento {
  display: flex; gap: var(--e3); margin-top: var(--e3);
  animation: aparecer .2s ease both;
  font-size: var(--body-m); line-height: var(--body-m-lh); color: var(--tinta-3); cursor: pointer;
}
.lead-consentimiento input {
  margin-top: 2px; flex: none; accent-color: var(--acento); width: 24px; height: 24px;
}

.contacto {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; margin-top: var(--e2);
  font-size: var(--title-m); font-weight: 700; text-decoration: none; color: var(--tinta);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-xl);
}

/* --- Afiche de campaña ---------------------------------------------------
   La pieza impresa, tal cual, al final de la página. Es clara y el sitio es
   oscuro, así que se trata como una lámina apoyada encima —radio, borde fino y
   la misma sombra que el buscador— en vez de dejarla a sangre, que contra el
   navy se leería como un error de carga. Los `width`/`height` del HTML son los
   reales (900×1350): con ellos el navegador reserva el alto antes de bajar la
   imagen y el pie no salta cuando entra. */

.afiche {
  margin: var(--e6) var(--e4) 0;
}
.afiche img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-l);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}

/* --- Eslogan de campaña ---------------------------------------------------
   Cierra la página con la voz de la campaña, entre el afiche y el pie legal.
   Va en la serif y en el color de acento porque es lo único de esta zona que
   habla por el candidato: el pie de abajo es de Vertex. La rayita de arriba lo
   despega del afiche, que termina en un borde duro. */

.eslogan {
  margin: var(--e6) var(--e4) 0;
  text-align: center;
  font-family: var(--serif);
  font-size: var(--body-m); line-height: 1.5; font-weight: 700;
  letter-spacing: .07em;
  color: var(--acento);
  /* Sin `text-wrap: balance`. Un eslogan con separadores —"CAPACIDAD -
     EXPERIENCIA - DINAMISMO"— es justo el caso donde emparejar renglones sale
     mal: parte por el medio y deja el guion huérfano abriendo el segundo.
     Llenando el renglón, el separador queda pegado a la palabra que cierra. */
}
.eslogan::before {
  content: ""; display: block;
  width: 44px; height: 2px; border-radius: 2px;
  margin: 0 auto var(--e4);
  background: var(--acento); opacity: .45;
}

/* El eslogan dibujado. Va en blanco y chico a propósito: el acento se reserva
   para lo que se toca —el botón, los números de mesa y orden— y un sello del
   tamaño de un logo, no de un cartel, es lo que deja el final de la página
   tranquilo. 232 px es poco más de la mitad del ancho útil en un teléfono. */
.eslogan-sello { line-height: 0; }
.eslogan-sello img {
  display: block; margin: 0 auto;
  width: 232px; max-width: 62%; height: auto;
  opacity: .93;
}

/* --- Pie ----------------------------------------------------------------- */

/* Pie de una sola línea. El bloque anterior —eslogan, párrafo legal, enlace al
   sitio y marca— pesaba más que el resultado y ensuciaba el final de la
   página. Queda lo mínimo: de dónde salen los datos y quién lo hizo. */
.pie {
  padding: var(--e6) var(--e4) var(--e5);
  text-align: center;
}
.pie-legal {
  font-size: var(--label-m); line-height: 18px; color: rgba(255, 255, 255, .42);
}
.pie-legal a { color: rgba(255, 255, 255, .55); }

/* --- Pantallas grandes ---------------------------------------------------
   El teléfono manda. En una pantalla ancha la misma columna se centra y sólo
   se le da aire: no se inventa un segundo diseño que después nadie prueba. */

@media (min-width: 600px) {
  body { padding: var(--e6) var(--e4); background: var(--fondo); }
  .marco {
    max-width: 520px;
    border-radius: var(--r-l); overflow: hidden;
    background: color-mix(in srgb, var(--fondo) 93%, #fff 7%);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .45);
  }
  .pregunta { font-size: var(--headline-m); line-height: var(--headline-m-lh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Plan de voto ---------------------------------------------------------
   Tres preguntas de a una. Las opciones son blancos táctiles de 44 px, como
   todo lo demás, y la elegida se marca con el acento de la campaña. */

.plan {
  margin-top: var(--e5);
  padding: var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-radius: 14px;
}
.plan-titulo {
  font-family: var(--serif);
  font-size: var(--t-m, 18px);
  font-weight: 700;
  margin-bottom: var(--e3);
}
.plan-pregunta + .plan-pregunta { margin-top: var(--e4); }
.plan-label { font-size: var(--t-s, 16px); color: var(--tinta-2); margin-bottom: var(--e2); }
.plan-opciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.plan-opciones button {
  min-height: 44px;
  padding: 0 var(--e3);
  font-family: var(--sans);
  font-size: var(--t-s, 16px);
  font-weight: 600;
  color: var(--tinta);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  cursor: pointer;
}
.plan-opciones button:hover { background: rgba(255, 255, 255, .14); }
.plan-opciones button.elegida {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.plan-listo {
  margin-top: var(--e3);
  font-size: var(--t-s, 16px);
  font-weight: 600;
  color: var(--ok);
}

/* --- Dudas del día --------------------------------------------------------
   <details> nativo: sin JavaScript, accesible desde el teclado y plegado por
   defecto para no empujar el resultado fuera de la pantalla. */

.dudas { margin-top: var(--e6); }
.dudas-titulo {
  font-family: var(--serif);
  font-size: var(--t-m, 18px);
  font-weight: 700;
  margin-bottom: var(--e3);
}
.dudas details {
  border-top: 1px solid var(--linea);
}
.dudas details:last-of-type { border-bottom: 1px solid var(--linea); }
.dudas summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) 0;
  font-size: var(--t-s, 16px);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::after {
  content: "+";
  margin-left: auto;
  font-size: 22px;
  font-weight: 400;
  color: var(--tinta-3);
}
.dudas details[open] summary::after { content: "−"; }
.dudas details p {
  padding: 0 0 var(--e3);
  font-size: var(--t-s, 16px);
  color: var(--tinta-2);
  line-height: 1.55;
}
.dudas details p b { color: var(--tinta); }

/* --- Tu gente -------------------------------------------------------------
   La lista de las personas que ya buscó. Aparece recién con la segunda: con
   una sola sería mostrarle a la persona lo que ya está viendo arriba. */

.familia {
  margin-top: var(--e5);
  padding: var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-radius: 14px;
}
.familia-titulo {
  font-family: var(--serif);
  font-size: var(--t-m, 18px);
  font-weight: 700;
}
.familia-bajada {
  font-size: var(--t-s, 16px);
  color: var(--tinta-2);
  margin: var(--e1) 0 var(--e3);
}
.familia-lista { list-style: none; margin-bottom: var(--e3); }
.familia-lista li {
  padding: var(--e2) 0;
  border-top: 1px solid var(--linea);
  font-size: var(--t-s, 16px);
}
.familia-lista li b { display: block; }
.familia-lista li span { color: var(--tinta-2); }
.familia-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.familia-acciones .btn { flex: 1 1 auto; }

/* --- Cómo votarla en la máquina -------------------------------------------
   Con listas desbloqueadas hay que tocar dos cosas, no una. Los dos números
   van arriba y grandes porque son lo único que hay que llevarse de memoria;
   los pasos, abajo, en el orden real de la máquina. */

.votar-asi {
  margin-top: var(--e5);
  padding: var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-radius: 14px;
}
.votar-titulo {
  font-family: var(--serif);
  font-size: var(--t-m, 18px);
  font-weight: 700;
}
.votar-bajada {
  font-size: var(--t-s, 16px);
  color: var(--tinta-2);
  margin: var(--e1) 0 var(--e3);
}
.votar-numeros {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.votar-numeros div {
  flex: 1;
  padding: var(--e3) var(--e2);
  text-align: center;
  border-radius: 12px;
  background: var(--acento);
  color: #fff;
}
.votar-numeros span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}
.votar-numeros b {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.votar-pasos {
  list-style: none;
  counter-reset: paso;
  display: grid;
  gap: var(--e3);
}
.votar-pasos li {
  counter-increment: paso;
  /* El número va posicionado, no como celda de una retícula: con `grid` cada
     <b> del texto se convertía en una celda aparte y el paso salía cortado en
     columnas de dos letras. */
  position: relative;
  padding-left: 38px;
  min-height: 26px;
  font-size: var(--t-s, 16px);
  color: var(--tinta-2);
  line-height: 1.5;
}
.votar-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 700;
}
.votar-pasos b { color: var(--tinta); }
.votar-ojo {
  display: block;
  margin-top: 3px;
  font-weight: 600;
  color: var(--alerta);
}
.votar-asi .btn { margin-top: var(--e4); }