/*
 * portada.css — Portada del centenario (sección 10.16 de PROMPT.md).
 *
 * Idea: los dos años que cierran el siglo de Suseso, 1927 y 2027, son el monumento tipográfico,
 * unidos por el hilo del siglo, que muestra dónde estamos hoy. Después de la portada la página
 * es sobria: columna estrecha, tabla empujada a la derecha, par escalonado y lista.
 *
 * Mobile-first desde 320 px. Ninguna altura fija sobre texto; las filas del hilo son "auto".
 * La disposición posicionada del hilo se usa solo desde 768 px y sin zoom propio amplio
 * (.zoom-amplio, ≥ 150 %); en otro caso las marcas se leen como lista bajo la línea.
 */

/* ---- Posición de cada marca en el siglo (porcentaje entre 1927 y 2027) ------------------- */
[data-anio="1927"] { --pos: 0%; }
[data-anio="1945"] { --pos: 18%; }
[data-anio="1953"] { --pos: 26%; }

.portada-hero,
.seccion {
  /* Un solo tamaño de título en la portada (h1 y h2), que en móvil cabe en dos líneas. */
  --portada-titulo: clamp(1.625rem, 1.1rem + 2.6vw, 3.052rem);
}

/* ---- Primer pantallazo ------------------------------------------------------------------ */
.portada-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
  min-height: calc(100vh - var(--cabecera-alto));
  min-height: calc(100svh - var(--cabecera-alto));
  padding-block: var(--s4) var(--s3);
}

.portada-hero__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--margen);
}

.portada-hero__titulo {
  font-size: var(--portada-titulo);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 22ch;
  margin: 0 0 var(--s3);
}

.portada-hero__bajada {
  margin: 0;
  max-width: 44ch;
  font-size: var(--paso-texto);
  line-height: 1.45;
}

.portada-hero__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}

.portada-hero__secundaria {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-weight: 500;
}

/* ---- El hilo del siglo --------------------------------------------------------------------- */
.siglo {
  --hilo-hueco: 0.75rem;   /* separación entre la línea y las etiquetas */
  --hilo-tic: 0.625rem;    /* largo de las marcas por década */
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding-inline: var(--margen);
}

.siglo__monumento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s3);
}

/* Los años: Roboto 700, interletra cerrada, cifras tabulares. Nunca se parten ni desbordan. */
.siglo__anio {
  margin: 0;
  max-width: none;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: clamp(3rem, 26vw, 9rem);
  line-height: var(--interlineado-monumento);
  letter-spacing: -0.05em;
  font-kerning: normal;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: var(--tinta);
}
/* La interletra negativa deja la última cifra fuera de su caja: se compensa en el borde. */
.siglo__anio--fin {
  justify-self: end;
  padding-inline-end: 0.05em;
}

.siglo__hilo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--hilo-hueco);
}

/* La línea se dibuja con border (no con background) para que exista en colores forzados. */
.siglo__decadas {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  border-block-start: var(--grosor-hilo) solid var(--linea);
}
.siglo__decada {
  height: var(--hilo-tic);
  border-inline-start: 2px solid var(--linea);
}
.siglo__decada:first-child {
  grid-column-start: 2;
}

/* Punto de cada marca sobre la línea: círculo hecho de borde, visible en colores forzados. */
.siglo__punto {
  position: absolute;
  top: calc(var(--grosor-hilo) / -2 - 0.5rem);
  left: var(--pos);
  width: 0;
  height: 0;
  margin-inline-start: -0.5rem;
  border: 0.5rem solid var(--linea);
  border-radius: 50%;
  outline: 3px solid var(--fondo);
}

/* Marcas: en móvil, lista bajo la línea; cada una con su tramo vertical, como una ficha. */
.siglo__marcas {
  grid-row: 3;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.siglo__marca {
  position: relative;
  max-width: none;
  padding-inline-start: 0.625rem;
  border-inline-start: var(--grosor-hilo) solid var(--linea);
}

.siglo__enlace {
  display: block;
  min-height: var(--objetivo-tactil);
  padding-block: 0.125rem;
  color: var(--tinta);
  text-decoration: none;
}
.siglo__marca-anio {
  display: block;
  font-weight: 700;
  font-size: var(--paso-destacado);
  line-height: 1.2;
}
.siglo__marca-texto {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.siglo__enlace:hover .siglo__marca-texto {
  color: var(--acento-hover);
  text-decoration-thickness: 2px;
}

/* Marca "Hoy": la posiciona countdown.js con --pos y la muestra quitando hidden. */
.siglo__hoy {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  margin: 0;
  max-width: none;
  /* El texto termina justo en la marca. */
  padding-inline-end: max(0px, calc(100% - var(--pos, 100%)));
  text-align: end;
  font-weight: 500;
  pointer-events: none;
}
.siglo__hoy[hidden] {
  display: none;
}
.siglo__hoy::before {
  content: "";
  position: absolute;
  left: var(--pos, 100%);
  top: calc(-1 * (var(--hilo-hueco) + var(--hilo-tic) + var(--grosor-hilo) + 0.5rem));
  height: calc(var(--hilo-hueco) + var(--hilo-tic) + var(--grosor-hilo) + 0.5rem);
  margin-inline-start: -1.5px;
  border-inline-start: var(--grosor-hilo) solid var(--tinta);
}

.siglo__leyenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  color: var(--tinta);
}
.siglo__contador {
  font-weight: 500;
}
.siglo__contador .badge {
  vertical-align: 0.1em;
}

/* ---- Secciones después del primer pantallazo ------------------------------------------------ */
.portada-origen__titulo,
.portada-nombres__titulo,
.portada-recorridos__titulo,
.portada-acceso__titulo {
  font-size: var(--portada-titulo);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s4);
}

/* Columna estrecha (intro) con el aviso global como segunda columna. */
.portada-origen__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}
.portada-origen__titulo {
  max-width: 18ch;
  margin: 0;
}
.portada-origen__columna p {
  max-width: 34rem;
}
.portada-origen__primero {
  font-weight: 500;
}
.portada-origen__aviso {
  margin: 0;
  max-width: 34rem;
  padding: var(--s3) var(--s4);
  background-color: var(--superficie);
  border-inline-start: var(--grosor-hilo) solid var(--tinta);
}

/* Título grande a la izquierda, tabla empujada a la derecha. */
.portada-nombres__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}
.portada-nombres__titulo {
  max-width: 14ch;
}
.portada-nombres__cabeza p {
  max-width: 32rem;
  margin: 0;
}

/* Es una tabla real: lleva líneas. */
.tabla-nombres {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
.tabla-nombres th,
.tabla-nombres td {
  padding: var(--s3) var(--s2);
  text-align: start;
  vertical-align: baseline;
  border-block-end: var(--borde-ancho) solid var(--borde);
}
.tabla-nombres th:first-child,
.tabla-nombres td:first-child {
  padding-inline-start: 0;
}
.tabla-nombres th:last-child,
.tabla-nombres td:last-child {
  padding-inline-end: 0;
}
.tabla-nombres thead th {
  padding-block: 0 var(--s2);
  font-size: var(--paso-pequeno);
  font-weight: 500;
  color: var(--tinta-suave);
  border-block-end: var(--grosor-hilo) solid var(--tinta);
}
.tabla-nombres tbody th {
  font-weight: 500;
}
.tabla-nombres__anio {
  font-weight: 700;
  font-size: var(--paso-destacado);
  white-space: nowrap;
}
.tabla-nombres .tabla-nombres__ficha {
  text-align: end;
}
.tabla-nombres th,
.tabla-nombres td {
  overflow-wrap: anywhere;
}
@media (min-width: 576px) {
  .tabla-nombres .tabla-nombres__ficha {
    white-space: nowrap;
  }
}
.tabla-nombres__ficha a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-weight: 500;
}

/* Par escalonado de los dos recorridos. */
.portada-recorridos__par {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}
.recorrido {
  width: 88%;
}
.recorrido--personas {
  justify-self: end;
}
.recorrido__img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--s4);
  background-color: var(--campo-oscuro);
}
.recorrido__titulo {
  margin: 0 0 var(--s2);
}
.recorrido p {
  max-width: 40rem;
}
.recorrido__enlace a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-weight: 500;
}

/* Lista de accesibilidad: cada función con su tramo de hilo, en tinta. */
.portada-acceso__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}
.portada-acceso__titulo {
  margin: 0;
}
.portada-acceso__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.portada-acceso__lista li {
  max-width: 34rem;
  padding-inline-start: var(--s3);
  border-inline-start: var(--grosor-hilo) solid var(--tinta);
}
.portada-acceso__termino {
  display: block;
  font-size: var(--paso-destacado);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--s1);
}
.portada-acceso__enlace {
  margin: 0;
}
.portada-acceso__enlace a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-weight: 500;
}

/* ---- Desde 768 px ------------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .portada-hero__cabeza {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s4);
    align-items: start;
  }
  .portada-hero__texto {
    grid-column: 1 / span 7;
  }
  .portada-hero__acciones {
    grid-column: 9 / span 4;
    align-items: flex-end;
    text-align: end;
  }
  .portada-hero__bajada {
    font-size: var(--paso-destacado);
  }

  .siglo__leyenda {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: baseline;
  }
  .siglo__contador {
    justify-self: end;
    text-align: end;
  }

  .recorrido {
    width: auto;
  }
  .portada-recorridos__par {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s4);
    align-items: start;
  }
  .recorrido--hitos {
    grid-column: 1 / span 5;
  }
  .recorrido--personas {
    grid-column: 7 / span 6;
    margin-top: clamp(6rem, 18vw, 16rem);
  }

  .portada-acceso__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Zoom propio amplio: el texto y las acciones del primer pantallazo se apilan. */
@media (min-width: 768px) {
  .zoom-amplio .portada-hero__texto,
  .zoom-amplio .portada-hero__acciones {
    grid-column: 1 / -1;
  }
  .zoom-amplio .portada-hero__acciones {
    align-items: flex-start;
    text-align: start;
  }
}

/*
 * Hilo posicionado: los años en los extremos bajo la línea y cada marca en su punto del siglo,
 * alternando arriba (1927, 1953) y abajo (1945). Las filas son "auto": si el texto crece
 * (zoom o espaciado de texto), la fila crece y nada se tapa.
 */
@media (min-width: 768px) {
  html:not(.zoom-amplio) .siglo__monumento {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "hilo hilo hilo"
      "inicio . fin";
    /* Aire suficiente para que la etiqueta de abajo no se lea como rótulo del año. */
    row-gap: var(--s5);
  }
  html:not(.zoom-amplio) .siglo__anio {
    font-size: var(--paso-monumento);
  }
  html:not(.zoom-amplio) .siglo__anio--inicio {
    grid-area: inicio;
  }
  html:not(.zoom-amplio) .siglo__anio--fin {
    grid-area: fin;
  }
  html:not(.zoom-amplio) .siglo__hilo {
    grid-area: hilo;
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  html:not(.zoom-amplio) .siglo__decadas {
    grid-row: 2;
  }
  html:not(.zoom-amplio) .siglo__marcas {
    grid-row: 1 / 4;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html:not(.zoom-amplio) .siglo__marca {
    grid-column: 1;
    margin-inline-start: calc(var(--pos) - var(--grosor-hilo) / 2);
  }
  /* Arriba de la línea: el tramo vertical llega hasta ella. */
  html:not(.zoom-amplio) .siglo__marca[data-anio="1927"],
  html:not(.zoom-amplio) .siglo__marca[data-anio="1953"] {
    grid-row: 1;
    align-self: end;
    margin-bottom: 0;
    padding-bottom: var(--hilo-hueco);
  }
  html:not(.zoom-amplio) .siglo__marca[data-anio="1927"] {
    max-width: calc(26% - var(--s4));
  }
  html:not(.zoom-amplio) .siglo__marca[data-anio="1953"] {
    max-width: 30%;
  }
  /* Abajo de la línea: el tramo sube hasta el borde inferior de la línea. */
  html:not(.zoom-amplio) .siglo__marca[data-anio="1945"] {
    grid-row: 3;
    align-self: start;
    max-width: 30%;
    margin-top: calc(-1 * var(--hilo-tic));
    padding-top: calc(var(--hilo-tic) + var(--hilo-hueco));
  }
  html:not(.zoom-amplio) .siglo__hoy {
    grid-row: 3;
    padding-top: var(--hilo-hueco);
  }
  html:not(.zoom-amplio) .siglo__hoy::before {
    top: calc(-1 * (var(--hilo-tic) + var(--grosor-hilo) + 0.5rem));
    height: calc(var(--hilo-tic) + var(--grosor-hilo) + 0.5rem + var(--hilo-hueco));
  }
}

/* Sin subgrid (navegadores antiguos): se conserva la lista bajo la línea. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    html:not(.zoom-amplio) .siglo__marcas {
      grid-row: 3;
      gap: var(--s3);
    }
    html:not(.zoom-amplio) .siglo__marca,
    html:not(.zoom-amplio) .siglo__marca[data-anio] {
      grid-row: auto;
      margin: 0;
      padding-block: 0;
      max-width: none;
    }
  }
}

/* ---- Desde 992 px ------------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .portada-origen__rejilla,
  .portada-nombres__rejilla,
  .portada-acceso__rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s4);
  }
  .portada-origen__titulo {
    grid-column: 3 / span 7;
  }
  .portada-origen__columna {
    grid-column: 3 / span 5;
  }
  .portada-origen__aviso {
    grid-column: 9 / span 4;
    align-self: end;
  }

  .portada-nombres__cabeza {
    grid-column: 1 / span 5;
  }
  .portada-nombres__tabla {
    grid-column: 7 / span 6;
  }
  .tabla-nombres tbody th {
    font-size: var(--paso-destacado);
    line-height: 1.3;
  }

  .portada-acceso__titulo,
  .portada-acceso__enlace {
    grid-column: 3 / span 8;
  }
  .portada-acceso__lista {
    grid-column: 3 / span 10;
  }
}

/* ---- Preferencias del sistema ------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .siglo__decada {
    border-inline-start-width: 3px;
  }
  .siglo__marca-texto {
    text-decoration-thickness: 2px;
  }
}

@media (forced-colors: active) {
  .siglo__decadas,
  .siglo__decada,
  .siglo__marca,
  .siglo__punto {
    border-color: CanvasText;
  }
  .siglo__punto {
    outline-color: Canvas;
  }
  .siglo__hoy::before {
    border-color: Highlight;
  }
  .siglo__marca-texto {
    color: LinkText;
  }
  .portada-origen__aviso {
    border: 1px solid CanvasText;
  }
}