/* ==========================================================================
   slide.css — Contenido de un hito
   ==========================================================================
   Es lo único que se vacía, se vuelve a pintar y se anima en cada cambio.

   Igual que la master, no lleva medidas escritas a mano: las lee de las
   variables que js/plantilla.js escribe sobre #hito a partir de
   PLANTILLA.texto / PLANTILLA.collage y de los retoques de cada hito.
   ========================================================================== */

#hito {
  position: absolute;
  inset: 0;
  /* El hito ocupa el lienzo entero y el texto va con z-index alto, así que si
     capturara clics se quedaría por delante del footer y no se podría navegar.
     Lo único interactivo del hito son los radios, que lo reactivan. */
  pointer-events: none;
}

/* ================================================= COLUMNA DE TEXTO ====== */
/* Cada bloque se posiciona por su cuenta en la `y` que dice el diseño. No hay
   flujo vertical entre ellos: así un subtítulo de dos líneas no empuja al
   cuerpo de texto y todos los hitos caen en la misma retícula. */

/* Envoltorio de la columna. Existe solo para poder fundir todo el texto de
   golpe en la salida; no aporta posición. */
.hito-columna {
  position: absolute;
  inset: 0;
  z-index: 20;           /* el texto siempre por encima del collage */
}

.hito-bloque {
  position: absolute;
  left: var(--col-x);
}

/* --- Radios: solo aparecen si el año tiene más de un hito ---------------- */

/* Los radios se dibujan con CSS, no con los SVG del footer: los del footer son
   grises y estos van en el azul de la marca, y así el grosor y el punto
   interior salen también de la plantilla. */

.hito-radios {
  left: var(--radio-x);
  top: var(--radio-y);
  display: flex;
  gap: var(--radio-gap);
}

.hito-radio {
  position: relative;
  width: var(--radio-size);
  height: var(--radio-size);
  border: var(--radio-grosor) solid var(--color-azul);
  border-radius: 50%;
  pointer-events: auto;   /* #hito los desactiva; estos sí se pulsan */
}

.hito-radio.activo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--radio-punto);
  height: var(--radio-punto);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-azul);
}

.hito-radio:focus-visible {
  outline: 2px solid var(--color-azul);
  outline-offset: 3px;
}

/* --- Año ----------------------------------------------------------------- */

/* Contenedor con máscara: el año entra subiendo desde abajo y el overflow
   oculto hace de cortina. */
.hito-anio-mascara {
  top: var(--anio-y);
  width: var(--anio-w);
  overflow: hidden;
}

.hito-anio {
  font-family: var(--serif);
  font-size: var(--anio-size);
  font-weight: var(--anio-peso);
  line-height: var(--anio-lh);
  color: var(--color-azul);
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: lining-nums proportional-nums;
}

/* --- Subtítulo ----------------------------------------------------------- */

.hito-subtitulo {
  top: var(--sub-y);
  width: var(--sub-w);

  font-family: var(--serif);
  font-style: italic;
  font-size: var(--sub-size);
  font-weight: var(--sub-peso);
  line-height: var(--sub-lh);
  color: var(--color-azul);
}

/* --- Cuerpo -------------------------------------------------------------- */

.hito-texto {
  top: var(--cuerpo-y);
  width: var(--cuerpo-w);

  font-family: var(--sans);
  font-size: var(--cuerpo-size);
  font-weight: 400;
  line-height: var(--cuerpo-lh);
  color: var(--color-texto);
}

.hito-texto p + p { margin-top: var(--cuerpo-gap); }

.hito-texto strong { font-weight: 600; }
/* --- Lista con viñetas ---------------------------------------------------- */
/* Solo la llevan 2013-2 y 2023, y se comporta como una tanda de párrafos más:
   mismo hueco entre elementos que entre párrafos. La viñeta se dibuja a mano
   porque `list-style` no deja colocarla a la distancia exacta que pide el
   diseño, y además así las líneas que siguen a la primera se alinean bajo el
   texto. */

/* El margen inferior solo lo estrena 2023, que es el único que sigue la lista
   con otro párrafo; en 2013-2 la lista cierra el cuerpo y no se notaba. */
.hito-texto ul {
  margin: var(--cuerpo-gap) 0;
  padding: 0;
  list-style: none;
}

.hito-texto li {
  position: relative;
  padding-left: var(--cuerpo-lista-sangria);
}

.hito-texto li + li { margin-top: var(--cuerpo-gap); }

.hito-texto li::before {
  content: "";
  position: absolute;
  left: var(--cuerpo-lista-vineta-x);
  /* Centrada en la primera línea, de ahí el alto de renglón. */
  top: calc((1em * var(--cuerpo-lh) - var(--cuerpo-lista-vineta)) / 2);
  width: var(--cuerpo-lista-vineta);
  height: var(--cuerpo-lista-vineta);
  border-radius: 50%;
  background: currentColor;
}
/* ==================================================== COLLAGE ============ */
/* El collage es un marco propio: las capas se colocan dentro de él, no sobre
   el lienzo. Así mover PLANTILLA.collage.x mueve el montaje entero y las
   coordenadas de cada capa siguen valiendo. */

.hito-collage {
  position: absolute;
  left: var(--collage-x);
  top: var(--collage-y);
  width: var(--collage-w);
  height: var(--collage-h);
  /* Las piezas pueden sobresalir del marco: es un encuadre, no un recorte. */
  overflow: visible;
}

/* Cada capa son dos elementos:
     .capa      posición dentro del marco + desplazamiento del parallax
     .capa-img  entrada, rotación y flotación idle
   Separarlos evita que el parallax y la flotación se peleen por el transform. */

.capa {
  position: absolute;
  will-change: transform;
}

.capa-img {
  width: 100%;
  height: auto;
  will-change: transform, opacity;
}