/* ==========================================================================
   Páginas públicas de la plataforma (SPEC-V3 §14.2): portada de producto, registro y
   documentos legales. Complementa public/estilos.css (tokens, botones, campos, alertas);
   no los redefine. Todo lleva el prefijo p- para no chocar con la página de votación.

   Dirección: institucional y documental. Azul petróleo de la plataforma, papel blanco y
   una sola nota de color propia del tema: la tinta violeta del timbre del acta.
   Titulares en una serif del sistema (Palatino / Iowan / Georgia): voz de acta, sin
   fuentes externas. Móvil primero; claro y oscuro según el sistema.
   ========================================================================== */

:root {
  --p-tinta: #13212b;
  --p-petroleo: #0b5470;
  --p-hondo: #06344a;            /* franjas de apertura y cierre */
  --p-hondo-borde: #0d4a66;
  --p-sobre-hondo: #eef5f8;      /* texto sobre la franja (14:1) */
  --p-sobre-hondo-suave: #b7cfda;/* texto secundario sobre la franja (7,6:1) */
  --p-papel: #ffffff;
  --p-papel-borde: #d4dde3;
  --p-fondo: #ffffff;            /* fondo de la página: papel */
  --p-niebla: #edf2f5;           /* sección alterna */
  --p-timbre: #5b3e96;           /* tinta de timbre (7,9:1 sobre papel) */
  --p-foco-claro: #9fd0ff;       /* foco sobre la franja oscura */

  --p-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052,
    "Book Antiqua", Georgia, serif;
  --p-ancho: 1160px;
  --p-margen: 1rem;
  --p-seccion: 3.5rem;
}

@media (min-width: 600px) {
  :root {
    --p-margen: 1.5rem;
    --p-seccion: 4.5rem;
  }
}
@media (min-width: 1000px) {
  :root { --p-seccion: 6rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --p-tinta: #e6edf2;
    --p-petroleo: #6cc0e0;
    --p-hondo: #08202c;
    --p-hondo-borde: #16394a;
    --p-sobre-hondo: #e6f0f4;
    --p-sobre-hondo-suave: #a9c2ce;
    --p-papel: #e4ebef;          /* la papeleta sigue siendo papel, algo atenuado */
    --p-papel-borde: #2a3a46;
    --p-fondo: #0d151b;
    --p-niebla: #111c24;
    --p-timbre: #b9a3ee;
  }
}

/* --------------------------------------------------------------------------
   Base de la página
   -------------------------------------------------------------------------- */
.p-pagina {
  background: var(--p-fondo);
}
.p-principal {
  padding: 0;
}
.p-principal:focus {
  outline: none;
}
.p-ancho {
  width: 100%;
  max-width: calc(var(--p-ancho) + 2 * var(--p-margen));
  margin-inline: auto;
  padding-inline: var(--p-margen);
}

.p-saltar {
  position: absolute;
  top: -100px;
  left: var(--p-margen);
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-weight: 600;
}
.p-saltar:focus {
  top: 0.5rem;
  outline: 3px solid var(--color-foco);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.p-cabecera {
  background: var(--p-hondo);
  color: var(--p-sobre-hondo);
  border-bottom: 1px solid var(--p-hondo-borde);
}
.p-cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}
.p-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--alto-toque);
  color: inherit;
  font-family: var(--p-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.p-marca:hover {
  color: inherit;
}
.p-marca-emblema {
  flex: none;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
}
.p-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.p-nav-enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-toque);
  padding-inline: 0.75rem;
  border-radius: var(--radio);
  color: var(--p-sobre-hondo);
  font-weight: 600;
  text-decoration: none;
}
.p-nav-enlace:hover {
  color: #ffffff;
  background: rgb(255 255 255 / 0.08);
}
/* En la franja oscura el botón de la cabecera es claro (el primario se perdería).
   En móvil no cabe: la apertura ya ofrece «Crear cuenta de organización». */
.p-nav-registro {
  display: none;
  margin-left: 0.25rem;
  background: var(--p-sobre-hondo);
  border-color: var(--p-sobre-hondo);
  color: var(--p-hondo);
}
.p-nav-registro:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--p-hondo);
}
@media (min-width: 640px) {
  .p-nav-registro { display: inline-flex; }
}
.p-cabecera a:focus-visible,
.p-apertura a:focus-visible,
.p-cierre a:focus-visible {
  outline: 3px solid var(--p-foco-claro);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Apertura: franja petróleo con la papeleta y el acta
   -------------------------------------------------------------------------- */
.p-apertura {
  background: var(--p-hondo);
  color: var(--p-sobre-hondo);
  padding-block: 2.5rem 3rem;
  overflow-x: clip; /* la escena inclinada nunca provoca desplazamiento horizontal */
}
/* Móvil: texto, «¿Va a votar?» y la ilustración, en ese orden.
   Escritorio: texto | ilustración, y «¿Va a votar?» cruzando el borde inferior de la franja. */
.p-apertura-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "votar" "escena";
  gap: 2.5rem;
  align-items: center;
}
.p-apertura-texto { grid-area: texto; }
.p-escena { grid-area: escena; }
.p-votar { grid-area: votar; }
@media (min-width: 1000px) {
  .p-apertura { padding-block: 4.5rem 0; }
  .p-apertura-rejilla {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-areas: "texto escena" "votar votar";
    gap: 3rem 4rem;
  }
  .p-votar {
    position: relative;
    z-index: 1;
    margin-bottom: -3.5rem;
  }
}

.p-titular {
  max-width: 19ch;
  margin: 0 0 1.25rem;
  color: #ffffff;
  font-family: var(--p-serif);
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
@media (prefers-color-scheme: dark) {
  .p-titular { color: var(--p-sobre-hondo); }
}
.p-bajada {
  max-width: 36rem;
  margin: 0 0 2rem;
  color: var(--p-sobre-hondo-suave);
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (min-width: 600px) {
  .p-bajada { font-size: 1.1875rem; }
}

.p-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.p-acciones > .boton {
  flex: 1 1 15rem;
}
@media (min-width: 600px) {
  .p-acciones > .boton { flex: 0 0 auto; }
}

/* Botones sobre la franja oscura */
.p-boton-claro {
  background: var(--p-sobre-hondo);
  border-color: var(--p-sobre-hondo);
  color: var(--p-hondo);
}
.p-boton-claro:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--p-hondo);
}
.p-boton-contorno {
  background: transparent;
  border-color: rgb(238 245 248 / 0.72);
  color: var(--p-sobre-hondo);
}
.p-boton-contorno:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: #ffffff;
  color: #ffffff;
}

.p-nota-apertura {
  margin: 1rem 0 0;
  color: var(--p-sobre-hondo-suave);
  font-size: 0.9375rem;
}
.p-apertura a:not(.boton) {
  color: var(--p-sobre-hondo);
  text-decoration-thickness: 1px;
}
.p-apertura a:not(.boton):hover {
  color: #ffffff;
  text-decoration-thickness: 2px;
}

/* ---- La escena: papeleta + acta (ilustración construida con HTML y CSS) ---- */
.p-escena {
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding-bottom: 7.5rem;  /* espacio para el acta que se superpone */
  color: #13212b;          /* la escena es papel: tinta oscura también en modo oscuro */
  font-size: 0.9375rem;
  line-height: 1.4;
  user-select: none;
}
@media (min-width: 1000px) {
  .p-escena {
    margin-inline: auto 0;
    padding-bottom: 8rem;
  }
}

.p-papeleta {
  position: relative;
  width: calc(100% - 1.5rem);
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 4px;
  background: var(--p-papel);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 28px 50px -18px rgb(0 0 0 / 0.55);
  transform: rotate(-1.2deg);
}
:where(.p-papeleta, .p-acta) p {
  margin: 0;
}
.p-papeleta-org {
  color: #0b5470;
  font-size: 0.8125rem;
  font-weight: 700;
}
.p-papeleta-titulo {
  margin-top: 0.1rem;
  font-family: var(--p-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}
.p-papeleta-elector {
  margin-top: 0.85rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid #0b5470;
  background: #e8f1f5;
  font-size: 0.875rem;
}
.p-papeleta-instruccion {
  margin-top: 0.85rem;
  color: #4b5b68;
  font-size: 0.8125rem;
  font-weight: 600;
}
.p-papeleta-lista {
  margin: 0.4rem 0 0.9rem;
  padding: 0;
  list-style: none;
}
.p-opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.1rem;
  border-bottom: 1px solid #e3e9ed;
}
.p-opcion:last-child {
  border-bottom: 0;
}
.p-casilla {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #7a8995;
  border-radius: 4px;
  background: #ffffff;
}
.p-casilla svg {
  width: 18px;
  height: 18px;
}
.p-opcion-marcada .p-casilla {
  border-color: #0b5470;
  background: #0b5470;
}
.p-trazo {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.p-opcion-numero {
  flex: none;
  min-width: 1.1rem;
  color: #4b5b68;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.p-opcion-marcada .p-opcion-nombre {
  font-weight: 700;
}
.p-papeleta-boton {
  display: block;
  padding: 0.6rem;
  border-radius: 6px;
  background: #0b5470;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

.p-acta {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(80%, 17.5rem);
  padding: 1rem 1.1rem 0.9rem;
  border-radius: 3px;
  background: var(--p-papel);
  box-shadow: 0 22px 40px -14px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(19 33 43 / 0.06);
  transform: rotate(2.4deg);
}
.p-acta-titulo {
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #13212b;
  font-family: var(--p-serif);
  font-size: 1.05rem;
  font-weight: 700;
}
.p-acta-cifras {
  display: flex;
  gap: 1rem;
  margin: 0.6rem 0 0.55rem;
  color: #4b5b68;
  font-size: 0.75rem;
}
.p-acta-cifra {
  display: block;
  color: #13212b;
  font-family: var(--p-serif);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.p-acta-barras {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}
.p-acta-barras li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  gap: 0.4rem;
}
.p-acta-nombre {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p-barra {
  height: 6px;
  border-radius: 3px;
  background: #e3e9ed;
  overflow: hidden;
}
.p-barra-relleno {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #0b5470;
  transform-origin: left center;
}
.p-barra-86 { width: 100%; }
.p-barra-71 { width: 82.6%; }
.p-barra-64 { width: 74.4%; }
.p-acta-votos {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.p-acta-huella {
  color: #4b5b68;
  font-size: 0.6875rem;
}
.p-acta-hash {
  font-family: var(--fuente-mono);
  color: #13212b;
}

.p-timbre {
  position: absolute;
  top: -3rem;
  right: -0.6rem;
  width: 96px;
  height: 96px;
  color: #5b3e96;
  opacity: 0.88;
  transform: rotate(-14deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (max-width: 599px) {
  .p-timbre {
    top: -2.6rem;
    right: 0.1rem;
    width: 84px;
    height: 84px;
  }
}
.p-timbre-arco {
  fill: currentColor;
  font-family: var(--fuente);
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: 0.9px;
}
.p-timbre-centro {
  fill: currentColor;
  font-family: var(--fuente);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Un solo momento de movimiento: se marcan las dos casillas y luego cae el timbre.
   Sin preferencia de movimiento reducido; si no, todo aparece ya en su estado final. */
@media (prefers-reduced-motion: no-preference) {
  .p-opcion-marcada .p-casilla {
    animation: p-marcar 0.2s ease-out both;
  }
  .p-opcion-marcada:nth-child(1) .p-casilla { animation-delay: 0.55s; }
  .p-opcion-marcada:nth-child(3) .p-casilla { animation-delay: 0.95s; }
  .p-trazo {
    stroke-dasharray: 20;
    animation: p-trazar 0.32s ease-out both;
  }
  .p-trazo-1 { animation-delay: 0.62s; }
  .p-trazo-2 { animation-delay: 1.02s; }
  .p-barra-relleno {
    animation: p-crecer 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s both;
  }
  .p-timbre {
    animation: p-timbrar 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) 1.95s both;
  }
}
@keyframes p-marcar {
  from { border-color: #7a8995; background: #ffffff; }
  to { border-color: #0b5470; background: #0b5470; }
}
@keyframes p-trazar {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}
@keyframes p-crecer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes p-timbrar {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.45); }
  70% { opacity: 0.95; transform: rotate(-14deg) scale(0.96); }
  100% { opacity: 0.88; transform: rotate(-14deg) scale(1); }
}

@media (prefers-color-scheme: dark) {
  .p-timbre {
    color: #4a2f86;           /* la tinta está sobre papel: sigue siendo oscura */
    mix-blend-mode: normal;
  }
}

/* --------------------------------------------------------------------------
   ¿Va a votar?
   -------------------------------------------------------------------------- */
.p-votar {
  color: var(--color-texto);
}
.p-votar:focus {
  outline: none;
}
.p-votar-caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--color-borde);
  border-top: 4px solid var(--color-primario);
  border-radius: var(--radio-grande);
  background: var(--color-superficie);
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.5);
}
@media (min-width: 600px) {
  .p-votar-caja { padding: 1.5rem 1.75rem; }
}
@media (min-width: 900px) {
  .p-votar-caja {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}
.p-votar-titulo {
  margin: 0 0 0.35rem;
  font-family: var(--p-serif);
  font-size: 1.5rem;
  font-weight: 700;
}
.p-votar-texto p {
  margin: 0;
  color: var(--color-texto-suave);
}
.p-votar-formulario .campo {
  margin: 0;
}
.p-votar-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.p-votar-fila > input {
  flex: 1 1 16rem;
  min-width: 0;
}
.p-votar-fila > .boton {
  flex: 1 0 auto;
}
@media (min-width: 600px) {
  .p-votar-fila > .boton { flex: 0 0 auto; }
}
.campo > .p-votar-fila > input.entrada-enlace,
input.entrada-enlace {
  font-family: var(--fuente-mono);
  font-size: max(16px, 0.9375rem);
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */
.p-seccion {
  padding-block: var(--p-seccion) 0;
}
.p-seccion-quien {
  margin-top: var(--p-seccion);
  padding-bottom: var(--p-seccion);
  background: var(--p-niebla);
}
.p-titulo-seccion {
  max-width: 24ch;
  margin: 0 0 1.75rem;
  font-family: var(--p-serif);
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.p-entrada {
  max-width: 40rem;
  margin: -0.75rem 0 2rem;
  color: var(--color-texto-suave);
  font-size: 1.0625rem;
}

/* ---- Cómo funciona: tres pasos sobre una línea ---- */
.p-pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
@media (min-width: 860px) {
  .p-pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}
.p-paso {
  position: relative;
  padding-left: 3.5rem;
  counter-increment: paso;
}
.p-paso::before {
  content: counter(paso);
  position: absolute;
  top: -0.1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-primario);
  border-radius: 50%;
  background: var(--p-fondo);
  color: var(--color-primario);
  font-family: var(--p-serif);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: lining-nums;
}
/* Móvil: línea vertical que une los pasos */
.p-paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  bottom: -1.9rem;
  left: calc(1.25rem - 1px);
  border-left: 2px solid var(--color-borde);
}
@media (min-width: 860px) {
  .p-paso {
    padding-left: 0;
    padding-top: 3.75rem;
  }
  .p-paso:not(:last-child)::after {
    top: 1.2rem;
    bottom: auto;
    left: 3.25rem;
    right: -2.5rem;
    border-left: 0;
    border-top: 2px solid var(--color-borde);
  }
}
.p-paso-titulo {
  margin: 0 0 0.5rem;
  font-family: var(--p-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
}
:where(.p-paso) p {
  margin: 0 0 0.75rem;
  color: var(--color-texto-suave);
}
:where(.p-paso) p:last-child {
  margin-bottom: 0;
}
.p-ejemplo-link {
  display: inline-block;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radio);
  background: var(--color-primario-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-mono);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* ---- Modos de secreto: comparación en dos columnas ---- */
.p-modos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 760px) {
  .p-modos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    background: var(--color-superficie);
    overflow: hidden;
  }
}
.p-modo {
  padding: 1.25rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-superficie);
}
@media (min-width: 760px) {
  .p-modo {
    padding: 1.75rem 2rem;
    border: 0;
    border-radius: 0;
  }
  .p-modo + .p-modo {
    border-left: 1px solid var(--color-borde);
  }
}
.p-modo-titulo {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-texto);
  font-family: var(--p-serif);
  font-size: 1.4rem;
  font-weight: 700;
}
.p-modo-datos {
  margin: 0;
}
.p-modo-datos > div + div {
  margin-top: 1rem;
}
.p-modo-datos dt {
  color: var(--color-texto-suave);
  font-size: 0.875rem;
  font-weight: 600;
}
.p-modo-datos dd {
  margin: 0.15rem 0 0;
}

/* ---- Lo que incluye ---- */
.p-rasgos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .p-rasgos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .p-rasgos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.p-rasgo {
  padding-top: 1rem;
  border-top: 1px solid var(--color-borde-fuerte);
}
.p-rasgo-titulo {
  margin: 0 0 0.4rem;
  font-family: var(--p-serif);
  font-size: 1.2rem;
  font-weight: 700;
}
.p-rasgo p {
  margin: 0;
  color: var(--color-texto-suave);
}

/* ---- Para quién: una nómina ---- */
.p-nomina {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-texto);
}
.p-nomina-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem 2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-borde-fuerte);
}
@media (min-width: 760px) {
  .p-nomina-fila {
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
    align-items: baseline;
    padding-block: 1.25rem;
  }
}
.p-nomina-nombre {
  font-family: var(--p-serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}
.p-nomina-detalle {
  color: var(--color-texto-suave);
}

/* ---- Cierre ---- */
.p-cierre {
  padding-block: var(--p-seccion);
  background: var(--p-hondo);
  color: var(--p-sobre-hondo);
}
.p-cierre-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: end;
}
@media (min-width: 900px) {
  .p-cierre-rejilla {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }
  .p-cierre-rejilla > .p-acciones { justify-content: flex-end; }
}
.p-cierre .p-titulo-seccion {
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  .p-cierre .p-titulo-seccion { color: var(--p-sobre-hondo); }
}
.p-cierre p {
  max-width: 38rem;
  margin: 0 0 0.75rem;
  color: var(--p-sobre-hondo-suave);
  font-size: 1.0625rem;
}
.p-cierre .p-cierre-nota {
  margin: 0;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.p-pie {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  font-size: 0.9375rem;
}
.p-pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 3rem;
}
@media (min-width: 760px) {
  .p-pie-rejilla {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}
.p-pie p {
  max-width: 34rem;
  margin: 0 0 0.35rem;
}
.p-pie-marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-texto);
  font-family: var(--p-serif);
  font-size: 1.1rem;
  font-weight: 700;
}
.p-pie-marca .p-marca-emblema {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  box-shadow: none;
}
.p-pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-pie-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-toque);
  color: var(--color-texto);
}

/* --------------------------------------------------------------------------
   Documentos legales (/terminos, /privacidad)
   -------------------------------------------------------------------------- */
.p-documento {
  padding-block: 2.5rem var(--p-seccion);
}
.p-documento-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 3.5rem;
}
@media (min-width: 1000px) {
  .p-documento-rejilla {
    grid-template-columns: 15rem minmax(0, 46rem);
    align-items: start;
  }
}
.p-documento-titulo {
  max-width: 22ch;
  margin: 0 0 1rem;
  font-family: var(--p-serif);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
}
.p-aviso-revision {
  margin: 0 0 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--color-aviso);
  border-left-width: 5px;
  border-radius: var(--radio);
  background: var(--color-aviso-fondo);
}
.p-aviso-revision strong {
  display: block;
  margin-bottom: 0.2rem;
}
.p-aviso-revision p {
  margin: 0;
}
.p-indice {
  font-size: 0.9375rem;
}
@media (min-width: 1000px) {
  .p-indice {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}
.p-indice-titulo {
  margin: 0 0 0.5rem;
  color: var(--color-texto-suave);
  font-size: 0.875rem;
  font-weight: 700;
}
.p-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--color-borde);
}
.p-indice li a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.85rem;
  color: var(--color-texto);
  text-decoration: none;
  line-height: 1.35;
}
.p-indice li a:hover {
  color: var(--color-primario);
  text-decoration: underline;
}
.p-legal {
  font-family: var(--p-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.p-legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.45rem;
  font-weight: 700;
  scroll-margin-top: 1.5rem;
}
.p-legal h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.p-legal p,
.p-legal ul,
.p-legal ol {
  margin: 0 0 1rem;
}
.p-legal ul,
.p-legal ol {
  padding-left: 1.4rem;
}
.p-legal li + li {
  margin-top: 0.35rem;
}
.p-legal .p-incisos {
  padding-left: 0;
  list-style: none;
}
.p-legal .p-incisos li {
  padding-left: 1.6rem;
  text-indent: -1.6rem;
}
.p-legal .tabla-contenedor {
  margin: 0 0 1.25rem;
  font-family: var(--fuente);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.p-legal .tabla th,
.p-legal .tabla td {
  vertical-align: top;
}
.p-legal-intro {
  font-size: 1.125rem;
}

@media print {
  .p-cabecera,
  .p-pie,
  .p-indice,
  .p-saltar {
    display: none !important;
  }
  .p-documento-rejilla {
    display: block;
  }
  .p-aviso-revision {
    border: 1pt solid #000;
    background: #fff;
  }
}

/* Aviso de la caja «¿Va a votar?» (enlace antiguo sin votación, etc.) */
.p-votar-aviso {
  margin: 0 0 0.75rem;
}
.p-votar-aviso:focus {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}