/* ------------------------------------------------------------------ */
/* Serie «Huella tóxica»: pesticidas, salud y controles                */
/* CSS plano, sin compilación. Prefijo: .pst-                          */
/* Estética editorial: fondo oscuro, superficies planas, líneas finas. */
/* ------------------------------------------------------------------ */

.pst-serie-page {
  /* Base neutra y oscura. El color no se reparte por gusto: el rosa es la
     identidad de la serie y los otros dos solo aparecen donde significan
     algo —los tres orígenes del esquema y los tres tipos de hito—. */
  --pst-pink: #f5479d;
  --pst-mustard: #f0b429;
  --pst-green: #45d9a0;
  --pst-accent: var(--pst-pink);

  --pst-bg: #0d0d0f;
  --pst-surface: #17171a;
  --pst-ink: #f4f2f3;
  --pst-ink-soft: #a8a4a8;
  --pst-line: rgba(244, 242, 243, 0.12);
  --pst-line-accent: color-mix(in srgb, var(--pst-accent) 40%, transparent);

  /* Texto que va sobre una foto con velo (portada, las dos caras, leyendas
     de la galería): no sigue al tema, porque debajo siempre hay un velo
     oscuro. En el tema oscuro coincide con la tinta normal. */
  --pst-on-media: #f4f2f3;
  --pst-on-media-soft: rgba(244, 242, 243, 0.82);
  --pst-on-media-accent: #ff8ac4;

  background-color: var(--pst-bg);
  color: var(--pst-ink);
}

/* ------------------------------------------------------------------ */
/* Tema claro                                                          */
/*                                                                     */
/* Los tres colores bajan de tono para seguir sirviendo de texto sobre  */
/* blanco. Lo que va sobre foto con velo no cambia: usa los tokens      */
/* `--pst-on-media`, que son claros siempre.                            */
/* ------------------------------------------------------------------ */

.pst-serie-page--light {
  --pst-pink: #b30f66;
  --pst-mustard: #8a5a06;
  --pst-green: #0f6b4a;

  /* Fondo hueso, no blanco frío: el papel tiene temperatura y las fotos del
     campo —tierra, paja, plástico sucio— se apoyan mejor sobre él. */
  --pst-bg: #f6f4ee;
  --pst-surface: #efebe2;
  --pst-ink: #1a1916;
  --pst-ink-soft: #6b665f;
  --pst-line: rgba(26, 25, 22, 0.1);

  /* En claro el filete de acento deja de tener color. Una retícula de
     líneas rosadas separando cada fila se comía la página: la separación la
     hacen el aire y una hairline que casi no se ve. */
  --pst-line-accent: rgba(26, 25, 22, 0.1);
}

/* Retícula de rombos, apenas visible: da grano al papel sin dibujar nada.
   Solo se ve en las secciones que dejan pasar el fondo —la introducción,
   las dos caras, el contador, el archivo, los créditos—; las que traen
   superficie o foto propia la tapan, y así el ritmo no se vuelve monótono. */
.pst-serie-page--light .pst-page {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 23px,
      rgba(255, 253, 247, 0.5) 23px 24px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 23px,
      rgba(255, 253, 247, 0.5) 23px 24px
    );
}

/* Las tarjetas dejan de ser "una superficie más clara que el fondo" y
   pasan a distinguirse por el borde, como el resto del sitio en claro.
   El blanco es cálido: un #fff puro sobre el papel hueso se ve azulado. */
.pst-serie-page--light .pst-voice {
  background: #fdfbf6;
}

.pst-serie-page--light .pst-diagram__stage {
  background: #fdfbf6;
}

/* La franja de hitos, en claro: algo más profunda que el papel para que se
   despegue, con las tarjetas en blanco cálido y una hairline que las separa
   —en oscuro el contraste basta, aquí no—. */
.pst-serie-page--light .pst-milestones {
  --pst-card: #fdfbf6;
  /* La bajada va directa sobre la franja, que es más oscura que el papel:
     con el gris de página se quedaba en 4,48:1. Este da 4,76:1. */
  --pst-ink-soft: #67625b;

  background: #e9e4d8;
}

.pst-serie-page--light .pst-milestone-card {
  border: 1px solid var(--pst-line);
}

.pst-serie-page--light .pst-voice__portrait,
.pst-serie-page--light .pst-voice__player {
  background: var(--pst-surface);
}

.pst-serie-page main {
  overflow-x: clip;
}

/* El loop de la portada es `position: fixed`, así que sigue pintándose en el
   viewport durante toda la página. Lo tapa `.pst-page`, pero el footer del
   sitio es hermano de `<main>` y, al no estar posicionado, su fondo se pinta
   por debajo del video: al llegar al final aparecía el campo verde detrás de
   los enlaces. Con esto el footer entra en la misma capa que el contenido. */
.pst-serie-page > .scl-footer {
  position: relative;
  z-index: 1;
}

/* El envoltorio de todo lo que va tras la portada: opaco y por encima de
   ella, que es lo que produce el efecto de tapado. */
.pst-page {
  position: relative;
  z-index: 1;
  background: var(--pst-bg);
}

/* Contenedores ------------------------------------------------------ */

.pst-container {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

.pst-container--narrow {
  max-width: 760px;
}

/* Utilidades -------------------------------------------------------- */

.pst-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pst-serie-page a:focus-visible,
.pst-serie-page button:focus-visible {
  outline: 2px solid var(--pst-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Color con oficio ---------------------------------------------------
 *
 * El rosa es el acento por defecto en toda la página. Los otros dos solo
 * salen donde distinguen algo: los tres orígenes de la infografía y los
 * tres tipos de hito. Fuera de ahí no se reparte color por sección ni se
 * turnan colores entre tarjetas.
 */

.pst-origin-trabajo {
  --pst-accent: var(--pst-pink);
}

.pst-origin-fuera {
  --pst-accent: var(--pst-mustard);
}

.pst-origin-ambiente {
  --pst-accent: var(--pst-green);
}

/* Títulos de sección ------------------------------------------------ */

.pst-section-title {
  font-family: var(--scl-font-sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pst-accent);
  margin: 0 0 2.5rem;
}

/* Ajuste de línea ----------------------------------------------------
 *
 * Dos reglas, según lo que sea el texto:
 *
 * `balance` reparte las líneas de forma pareja y se usa en lo corto —titulares,
 * rótulos, las casillas del esquema—, donde una línea huérfana de dos palabras
 * canta. El navegador solo lo aplica hasta unas seis líneas, así que en un
 * párrafo no haría nada.
 *
 * `pretty` es para el texto corrido: no equilibra, solo evita que la última
 * línea quede con una palabra suelta. Firefox todavía lo ignora, y no pasa
 * nada: sin él se ve como se veía antes.
 */

.pst-hero__name,
.pst-hero__subtitle,
.pst-section-title,
.pst-split__title,
.pst-archive__title,
.pst-milestone-card__title,
.pst-milestone-card__figure dt,
.pst-closing__lead,
.pst-node,
.pst-voice__quote {
  text-wrap: balance;
}

.pst-intro__text,
.pst-split__excerpt,
.pst-countdown__lead,
.pst-countdown__note,
.pst-diagram__lead,
.pst-diagram__source,
.pst-diagram__legend-item,
.pst-stats__label,
.pst-gallery__caption,
.pst-milestones__lead,
.pst-milestone-card__row dd,
.pst-closing__text {
  text-wrap: pretty;
}

/* Animación de aparición -------------------------------------------- */

.pst-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.pst-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 1. Portada --------------------------------------------------------- */

.pst-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

/* Lo único que se queda quieto es el loop: el título, la bajada y la sombra
   suben con el scroll como cualquier otro bloque, y al llegar la
   introducción —opaca, por encima— el video deja de verse. */
.pst-hero__video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botón de pausa del video: pequeño, en una esquina, pero siempre
   disponible —un fondo en movimiento sin forma de pararlo es una barrera—. */
.pst-hero__video-toggle {
  position: absolute;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 242, 243, 0.4);
  border-radius: 50%;
  background: rgba(13, 13, 15, 0.5);
  color: var(--pst-on-media);
  cursor: pointer;
  transition:
    background 300ms ease,
    border-color 300ms ease;
}

.pst-hero__video-toggle:hover {
  background: rgba(13, 13, 15, 0.8);
  border-color: var(--pst-on-media);
}

.pst-hero__video-toggle-icon {
  display: block;
  width: 12px;
  height: 12px;
}

.pst-hero__video-toggle-icon--pause {
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.pst-hero__video-toggle-icon--play {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}

/* Campo de partículas: puntos a la deriva que se enlazan cuando se acercan,
   como el rastro de una fumigación. Lo dibuja el JS en un canvas que él mismo
   inserta, así que sin JS la portada se ve igual de bien. */
.pst-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* El velo estaba calibrado para el loop anterior, que venía corregido y era
   oscuro. El montaje nuevo trae cielo abierto y cañas secas muy claras justo
   detrás del título, y el blanco caía a 1,6:1 contra esos píxeles. La rampa
   arranca antes y sube más desde la mitad —que es donde va el texto—, y el
   cielo de arriba se deja casi limpio. Sin `opacity` de más: los valores
   están en el propio degradado, que es más fácil de calibrar. */
.pst-hero__overlay {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 15, 0.32) 0%,
    rgba(13, 13, 15, 0.12) 28%,
    rgba(13, 13, 15, 0.58) 62%,
    rgba(13, 13, 15, 0.88) 100%
  );
}

.pst-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 13svh;
  width: 92%;
  max-width: 900px;
}

.pst-hero__title {
  margin: 0;
}

.pst-hero__name {
  display: block;
  font-family: var(--scl-font-heading);
  /* El mínimo es 2,75rem y no 3: a 48px «Huella tóxica» medía justo los 92%
     del ancho de un teléfono de 390 px —el titular tocaba los dos bordes— y a
     360 px ya se partía en dos renglones. */
  font-size: clamp(2.75rem, 12vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--pst-on-media);
  /* Con el velo al 50% el video respira, pero detrás del título hay cañas
     secas muy claras y el blanco se quedaba en 1,96:1 contra esos píxeles.
     La sombra resuelve el contraste ahí donde hace falta en vez de volver a
     oscurecer la imagen entera: es lo que hace legible el titular, no el
     velo. */
  text-shadow: 0 2px 24px rgba(13, 13, 15, 0.75);
}

.pst-hero__subtitle {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--scl-font-sans-serif);
  font-size: clamp(15px, 2.2vw, 21px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--pst-on-media-soft);
  text-shadow: 0 1px 12px rgba(13, 13, 15, 0.8);
}

/* Indicador de scroll: una gota que cae */

.pst-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pst-hero__drop {
  width: 10px;
  height: 10px;
  border-radius: 50% 50% 50% 0;
  background: var(--pst-on-media-accent);
  transform: rotate(-45deg);
  animation: pst-drop 1.9s ease-in-out infinite;
}

@keyframes pst-drop {
  0% {
    transform: rotate(-45deg) translate(0, -6px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(0, 8px);
    opacity: 0;
  }
}

/* 2. Introducción ----------------------------------------------------- */

.pst-intro {
  padding: 4.5rem 0 3.5rem;
}

.pst-intro__text,
.pst-intro__text p {
  font-family: var(--scl-font-serif);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.7;
  color: var(--pst-ink);
  margin: 0 0 1.75rem;
}

/* Capitular.
 *
 * `initial-letter` es lo único que la alinea de verdad: el navegador
 * calcula la altura de mayúscula y la cuadra con las tres primeras líneas.
 * Lo soportan Chrome y Safari; para el resto queda el float de siempre, con
 * la caja ajustada a tres líneas exactas (3 x 1,7em de interlínea = 5,1em,
 * repartidos entre el cuerpo de la letra y su relleno superior). */
/* Dos selectores porque el texto puede venir de dos sitios: el párrafo de
   la plantilla, o el richtext del CMS, que llega envuelto en un div con sus
   propios <p> dentro. */
.pst-intro__text--lead::first-letter,
.pst-intro__text--lead > p:first-child::first-letter {
  float: left;
  font-family: var(--scl-font-heading);
  font-weight: var(--scl-font-heading-weight, 700);
  font-size: 4.4em;
  line-height: 1;
  padding: 0.7em 0.12em 0 0;
  color: var(--pst-accent);
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .pst-intro__text--lead::first-letter,
  .pst-intro__text--lead > p:first-child::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    margin-right: 0.7em;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

/* Y si la editora marca la capitular con el botón del editor, que se vea
   igual que la nuestra (el hook de richtext emite `capital-letter`; en
   producción hay contenido guardado con la variante `scl-capital-letter`). */
.pst-intro .capital-letter,
.pst-intro .scl-capital-letter {
  color: var(--pst-accent);
  font-family: var(--scl-font-heading);
  font-weight: var(--scl-font-heading-weight, 700);
}

.pst-intro strong,
.pst-intro b {
  color: var(--pst-accent);
  font-weight: 700;
}

.pst-intro a {
  color: var(--pst-accent);
}

/* Los párrafos entran uno detrás de otro, no todos a la vez */
.pst-intro__text.pst-reveal {
  transition-duration: 900ms;
}

.pst-intro__text + .pst-intro__text.pst-reveal {
  transition-delay: 160ms;
}

/* 3. Los dos reportajes que abren la serie ------------------------------
 *
 * Uno debajo del otro, foto a un lado y texto al otro, invertido en el
 * segundo. La foto se ve entera, sin velo encima.
 */

/* 1 rem abajo dejaba la foto del segundo reportaje casi pegada al rótulo del
   bloque siguiente. 3,5 rem es lo mismo que cierra la introducción, así que
   el corte entre secciones se lee igual en toda la página. */
.pst-features {
  padding: 3rem 0 3.5rem;
}

/* Opción C: zigzag ------------------------------------------------------- */

.pst-splits {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Antes un solo `<a>` envolvía la tarjeta entera y todo era zona de clic,
   incluido el hueco entre columnas. Ahora la retícula vive en el `<article>`
   y solo son enlace la foto, el titular y la llamada. */
.pst-split {
  display: grid;
  gap: 1.5rem;
}

.pst-split__media {
  display: block;
  overflow: hidden;
}

.pst-split__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 900ms ease;
}

.pst-split__media:hover img {
  transform: scale(1.04);
}

.pst-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pst-split__kicker {
  font-family: var(--scl-font-sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pst-accent);
  margin-bottom: 1rem;
}

/* Es un `<h3>`: sin el 400 heredaría la negrita del navegador */
.pst-split__title {
  font-family: var(--scl-font-heading);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.12;
  margin: 0 0 1rem;
}

.pst-split__title-link {
  color: var(--pst-ink);
  text-decoration: none;
  transition: color 300ms ease;
}

.pst-split__title-link:hover {
  color: var(--pst-accent);
}

.pst-split__excerpt {
  font-family: var(--scl-font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--pst-ink-soft);
  margin: 0 0 1.5rem;
}

.pst-split__cta-row {
  margin: 0;
}

.pst-split__cta {
  display: inline-block;
  text-decoration: none;
  font-family: var(--scl-font-sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pst-accent);
  border-bottom: 1px solid var(--pst-accent);
  padding-bottom: 2px;
  width: fit-content;
}

/* 4. Contador regresivo -----------------------------------------------
 *
 * Reloj en fila y bloque centrado: cuatro columnas, la cifra arriba y la
 * unidad debajo. `min-width` en cada unidad para que los renglones no bailen
 * al cambiar de una cifra a dos. */

/* `svh` y no `vh`: en un teléfono `100vh` mide con la barra del navegador
   retraída, así que el bloque salía más alto que lo que se ve y nunca cabía
   entero en pantalla. */
.pst-countdown {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  text-align: center;
  overflow: hidden;
}

.pst-countdown > .pst-container {
  position: relative;
  width: 92%;
}

.pst-countdown__icon {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--pst-accent);
  margin: 0 auto 1.25rem;
}

/* También `<h3>`, con el mismo 400 */
.pst-countdown__lead {
  font-family: var(--scl-font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.2;
  margin: 0 0 2.5rem;
}

.pst-countdown__clock {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.pst-countdown__unit {
  min-width: 88px;
}

.pst-countdown__value {
  display: block;
  font-family: var(--scl-font-heading);
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  line-height: 1;
  color: var(--pst-ink);
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

.pst-countdown__clock.is-expired .pst-countdown__value {
  color: var(--pst-mustard);
}

.pst-countdown__unit-label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--scl-font-sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pst-accent);
}

.pst-countdown__deadline {
  font-family: var(--scl-font-sans-serif);
  font-size: 16px;
  color: var(--pst-ink-soft);
  margin: 0;
}

.pst-countdown__deadline b {
  color: var(--pst-ink);
  font-weight: 700;
}

/* La «i» del cómputo va en la línea de la fecha, pero el globo se centra bajo
   la línea entera y no bajo la «i»: la fecha puede partirse en dos renglones
   en un teléfono y un globo colgado del botón se saldría por un costado. */
.pst-countdown__deadline {
  position: relative;
}

.pst-countdown__deadline .pst-info__button {
  display: inline-grid;
  vertical-align: middle;
  margin-left: 0.35rem;
  position: relative;
  top: -1px;
}

.pst-countdown__deadline .pst-info__panel {
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, 100%);
  font-size: 13px;
  line-height: 1.6;
}

.pst-countdown__flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--pst-line-accent);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pst-accent);
}

.pst-countdown__note {
  font-family: var(--scl-font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--pst-ink-soft);
  margin: 1rem auto 0;
  max-width: 620px;
}

/* El segundo plazo no mueve el reloj: es texto, y va separado para que no se
   confunda con la cuenta de arriba. */
.pst-countdown__next {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--pst-line);
}

.pst-countdown__next-label {
  font-family: var(--scl-font-sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pst-accent);
  margin: 0 0 0.6rem;
}

.pst-countdown__next-note {
  font-family: var(--scl-font-heading);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.35;
  color: var(--pst-ink);
  margin: 0 0 0.5rem;
}

/* 5. Cifras ------------------------------------------------------------
 *
 * Cuatro columnas en una fila: número arriba, frase debajo. No ocupa la
 * pantalla entera —es un dato de paso, no una parada— y por eso tampoco
 * lleva el escalón en zigzag que tenía cuando iba en dos columnas: con
 * cuatro, desplazar una sí y otra no se lee como un error de maquetación.
 *
 * Mantiene su propio fondo: el papel se oscurece un punto y la retícula de
 * rombos deja paso a una trama de puntos, para que el bloque se distinga de
 * lo que tiene encima y debajo. */

.pst-stats {
  position: relative;
  padding: clamp(6rem, 12vw, 10rem) 0;
  overflow: hidden;
  background-color: var(--pst-surface);
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--pst-ink) 7%, transparent) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
}

.pst-stats__panel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem);
}

/* Centradas: en cuatro columnas estrechas, alinear a la izquierda dejaba
   cuatro banderas irregulares y el número descolgado del texto. */
.pst-stats__item {
  margin: 0;
  text-align: center;
}

/* Cifra y frase son un solo párrafo con dos `<span>` en bloque: así la frase
   conserva su medida de 30ch sin encajonar el número, que es más ancho. */
.pst-stats__fact {
  margin: 0;
}

.pst-stats__value {
  display: block;
  font-family: var(--scl-font-heading);
  font-weight: var(--scl-font-heading-weight, 700);
  /* Cabe menos que en dos columnas, pero sigue siendo lo primero que se ve */
  font-size: clamp(2.75rem, 4.6vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--pst-ink);
  margin: 0 0 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Las etiquetas son frases completas, no rótulos: van en caja baja y con
   medida de lectura, no en versalitas apretadas. */
.pst-stats__label {
  display: block;
  font-family: var(--scl-font-sans-serif);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: var(--pst-ink-soft);
  max-width: 30ch;
  margin: 0 auto;
}

/* Las fuentes van todas juntas en un globo que abre la «i» de la esquina, no
   colgando de cada cifra: así el bloque queda limpio y quien quiera
   verificar tiene un solo sitio al que ir. */
.pst-stats__info {
  position: absolute;
  top: clamp(1.75rem, 3.5vw, 3rem);
  right: max(4vw, 1.5rem);
  z-index: 3;
}

.pst-stats__info .pst-info__panel {
  top: calc(100% + 0.6rem);
  right: 0;
}

/* Globo informativo ---------------------------------------------------
 *
 * Una «i» que abre una aclaración: las fuentes de las cifras y el cómputo de
 * la fecha del contador. El botón y el globo van siempre como hermanos; dónde
 * se coloca el globo lo decide cada bloque. */

.pst-info__button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--pst-ink-soft) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--pst-ink-soft);
  font-family: var(--scl-font-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition:
    color 200ms ease,
    border-color 200ms ease;
}

.pst-info__button:hover,
.pst-info__button:focus-visible {
  color: var(--pst-accent);
  border-color: var(--pst-accent);
}

/* Globo colgado del botón. Que tape lo de debajo no importa: se abre solo si
   alguien se posa en la «i», y se va al salir.

   Se oculta con `opacity`, no con `visibility` ni `display`: así sigue en el
   árbol de accesibilidad y `aria-describedby` lo puede leer. */
.pst-info__panel {
  position: absolute;
  z-index: 3;
  display: block;
  width: min(380px, 80vw);
  padding: 1.1rem 1.35rem;
  background: var(--pst-bg);
  border: 1px solid var(--pst-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  text-align: left;
  font-family: var(--scl-font-sans-serif);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pst-ink-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.pst-info__button:hover ~ .pst-info__panel,
.pst-info__button:focus-visible ~ .pst-info__panel {
  opacity: 1;
}

.pst-info__title {
  margin: 0 0 0.6rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pst-accent);
}

.pst-info__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pst-info__panel b {
  color: var(--pst-ink);
  font-weight: 700;
}

@media (max-width: 900px) {
  .pst-stats__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.75rem;
  }
}

@media (max-width: 520px) {
  .pst-stats__panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* 10. Archivo: filas de titular, foto y flecha -------------------------- */

.pst-timeline {
  padding: 4.5rem 0 3rem;
}

.pst-archive {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pst-line-accent);
}

.pst-archive__empty {
  font-family: var(--scl-font-serif);
  color: var(--pst-ink-soft);
  padding: 1.5rem 0;
}

.pst-archive__empty code {
  color: var(--pst-accent);
}

.pst-archive__row {
  border-bottom: 1px solid var(--pst-line-accent);
}

.pst-archive__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: 1.5rem 0;
  text-decoration: none;
  color: inherit;
}

.pst-archive__kicker {
  display: block;
  font-family: var(--scl-font-sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pst-ink-soft);
  margin-bottom: 0.6rem;
}

/* El titular manda, pero sin gritar: caja baja y tamaño de titular, no de
   cartel, para que entren cuatro entradas sin que el bloque pese. */
.pst-archive__title {
  display: block;
  font-family: var(--scl-font-heading);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.15;
  color: var(--pst-ink);
  transition: color 300ms ease;
}

.pst-archive__link:hover .pst-archive__title {
  color: var(--pst-accent);
}

.pst-archive__media {
  display: block;
  overflow: hidden;
  grid-column: 1;
}

/* 4/3 como en las dos caras y en los testimonios: un solo formato de foto
   en todo el landing. */
.pst-archive__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms ease;
}

.pst-archive__link:hover .pst-archive__media img {
  transform: scale(1.05);
}

/* Suelta y a 44 px la flecha se leía como un dibujo perdido en la fila. En
   un disco se lee como lo que es: el botón de la fila. */
.pst-archive__arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pst-accent) 35%, transparent);
  color: var(--pst-accent);
  transition:
    background 300ms ease,
    border-color 300ms ease,
    color 300ms ease;
}

.pst-archive__arrow svg {
  display: block;
  width: 18px;
  height: auto;
  stroke-width: 1.6;
}

.pst-archive__link:hover .pst-archive__arrow {
  background: var(--pst-accent);
  border-color: var(--pst-accent);
  color: var(--pst-bg);
}

/* Mientras llega la página siguiente. El bloque no se vacía ni cambia de
   alto: solo se atenúa, así el scroll no da un salto bajo el cursor. */
[data-pst-archive].is-loading {
  opacity: 0.45;
  transition: opacity 200ms ease;
  pointer-events: none;
}

/* Al llevar el foco al título para anunciar el cambio, sin anillo: el lector
   ya está mirando ahí y no es un control. */
.pst-timeline .pst-section-title:focus {
  outline: none;
}

/* Paginación */

.pst-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.pst-pagination__link {
  font-family: var(--scl-font-sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pst-accent);
  text-decoration: none;
}

.pst-pagination__link:hover {
  color: var(--pst-ink);
}

.pst-pagination__link.is-disabled {
  color: var(--pst-ink-soft);
  opacity: 0.35;
}

.pst-pagination__status {
  font-family: var(--scl-font-sans-serif);
  font-size: 13px;
  color: var(--pst-ink-soft);
}

.pst-timeline__archive {
  margin: 1.75rem 0 0;
  font-family: var(--scl-font-sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pst-timeline__archive a {
  color: var(--pst-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--pst-accent);
  padding-bottom: 2px;
}

.pst-timeline__archive a:hover {
  color: var(--pst-ink);
  border-color: var(--pst-ink);
}

/* 6. Hitos: carril horizontal movido por el scroll vertical ------------- */

/* La franja sigue al tema. Antes imponía el esquema oscuro con el tema
   claro puesto, y el resultado era un rectángulo negro a media página con
   las tarjetas casi indistinguibles del fondo. El patrón es el mismo en los
   dos temas: la franja se despega del papel y las tarjetas se despegan de la
   franja; lo que cambia es en qué dirección. */
.pst-milestones {
  --pst-card: var(--pst-bg);

  position: relative;
  background: #1c1c20;
  color: var(--pst-ink);
  padding: 4rem 0 3.5rem;
}

.pst-milestones__lead {
  font-family: var(--scl-font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--pst-ink-soft);
  max-width: 680px;
  margin: -1.5rem 0 2.5rem;
}

/* Base: una columna de tarjetas. Es lo que se ve sin JS, en pantallas
   angostas y con movimiento reducido. */
.pst-milestones__track {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pst-milestone-card {
  position: relative;
  background: var(--pst-card);
}

/* Los cinco monitoreos son lo único que se destaca; el resto va en neutro.
   Sin tipos de colores no hace falta leyenda. */
.pst-milestone-card.is-key .pst-milestone-card__date {
  color: var(--pst-accent);
}

.pst-milestone-card__body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.pst-milestone-card__date {
  font-family: var(--scl-font-sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pst-ink-soft);
  margin: 0 0 0.75rem;
}

.pst-milestone-card__title {
  font-family: var(--scl-font-heading);
  font-size: 22px;
  line-height: 1.2;
  color: var(--pst-ink);
  margin: 0 0 1rem;
}

/* Ficha de datos, no párrafo: cada monitoreo se lee como una etiqueta de
   producto —qué se compró, dónde, cuántas muestras y cuántas fallaron—, así
   que los cinco se pueden comparar de un vistazo. */
.pst-milestone-card__icon {
  /* `flex: none` es lo que lo mantiene a 30 px: como item flex de la columna
     del cuerpo, el navegador lo encogía para hacer sitio al resto y algunos
     iconos salían diminutos. */
  flex: none;
  width: 30px;
  height: 30px;
  margin-bottom: 0.75rem;
  color: var(--pst-accent);
}

/* Las dos cifras del monitoreo, en columnas: son lo que se compara de una
   ficha a otra, así que van juntas y arriba, antes del detalle. */
.pst-milestone-card__figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
  margin: 0.25rem 0 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--pst-line);
  font-family: var(--scl-font-sans-serif);
}

.pst-milestone-card__figure dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--pst-ink-soft);
  min-height: 2.6em;
  margin-bottom: 0.35rem;
}

.pst-milestone-card__figure dd {
  margin: 0;
  font-family: var(--scl-font-heading);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.05;
  color: var(--pst-ink);
  font-variant-numeric: tabular-nums;
}

/* De las dos, solo el porcentaje que no cumple lleva color: es el dato que
   importa. El total de muestras es contexto. */
.pst-milestone-card__figure:last-child dd {
  color: var(--pst-accent);
}

.pst-milestone-card__data {
  margin: 0;
  font-family: var(--scl-font-sans-serif);
  font-size: 13px;
  line-height: 1.4;
}

.pst-milestone-card__row {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--pst-line);
}

.pst-milestone-card__row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* El rótulo de «no aptas» es largo y el de «muestras» corto: alineados por
   abajo, las dos cifras arrancan a la misma altura. */
.pst-milestone-card__figure {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pst-milestone-card__row dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pst-ink-soft);
}

.pst-milestone-card__row dd {
  margin: 0;
  color: var(--pst-ink);
}

/* Lo que falta por confirmar se ve, no se disimula. */
.pst-milestone-card__row dd b {
  color: var(--pst-accent);
  font-weight: 600;
}

/* Al pie de la tarjeta, no pegados al texto: con tarjetas de alto distinto
   los enlaces quedaban a alturas distintas y el carril se leía desigual. */
.pst-milestone-card__links {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.pst-milestone-card__links a {
  font-family: var(--scl-font-sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pst-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--pst-accent);
  padding-bottom: 2px;
}

.pst-milestone-card__links a:hover {
  color: var(--pst-ink);
  border-color: var(--pst-ink);
}

/* Modo carril (lo activa el JS) ------------------------------------------
 *
 * La franja se queda pegada ocupando la pantalla y el scroll vertical
 * empuja las tarjetas de lado. Al llegar a la última, la sección termina y
 * el scroll sigue como si nada.
 */

.pst-milestones.is-rail {
  padding: 0;
}

.pst-milestones.is-rail .pst-milestones__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  overflow: hidden;
  padding: 3rem 0 2rem;
}

.pst-milestones.is-rail .pst-milestones__lead {
  margin-bottom: 0;
}

.pst-milestones.is-rail .pst-milestones__track {
  flex-direction: row;
  align-items: stretch;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 max(4vw, 2rem);
  gap: 1.75rem;
  will-change: transform;
}

.pst-milestones.is-rail .pst-milestone-card {
  flex: 0 0 340px;
  display: flex;
}

.pst-milestones.is-rail .pst-milestone-card.is-key {
  flex-basis: 380px;
}

/* Barra de avance del carril: en un recorrido de lado orienta saber cuánto
   queda. Solo aparece en modo carril. */

.pst-milestones__bar {
  display: none;
  height: 2px;
  margin-top: 1.25rem;
  background: var(--pst-line);
  overflow: hidden;
}

.pst-milestones.is-rail .pst-milestones__bar {
  display: block;
}

.pst-milestones__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pst-ink);
  transform: scaleX(0);
  transform-origin: left center;
}

/* 7. Infografía interactiva -------------------------------------------- */

/* El bloque respiraba de más: entre la bajada, la instrucción de uso y el
   escenario, el esquema no cabía entero en una pantalla normal. */
.pst-diagram {
  padding: 2.5rem 0 2rem;
}

/* El título de sección lleva 2,5rem por debajo en toda la página; aquí, con
   la bajada y la instrucción encima del esquema, eran cuarenta píxeles de
   nada justo donde hacen falta. */
.pst-diagram .pst-section-title {
  margin-bottom: 1.25rem;
}

.pst-diagram__lead {
  font-family: var(--scl-font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--pst-ink-soft);
  max-width: 680px;
  margin: -1rem 0 1.5rem;
}

/* La instrucción de uso va dentro de la bajada, en su propio renglón: como
   párrafo aparte se llevaba treinta píxeles y un salto de más. */
.pst-diagram__hint {
  display: block;
  font-family: var(--scl-font-sans-serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--pst-accent);
  margin-top: 0.5rem;
}

/* Los íconos viven una sola vez en un `<svg>` sin dibujo propio: solo guarda
   los `<symbol>` que invocan las casillas. */
.pst-diagram__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Tres bandas apiladas —abanico, fila de casillas, vías de entrada— y ninguna
   posición absoluta: el alto del escenario sale de lo que hay dentro. Antes
   las casillas iban colocadas con `--x`/`--y` sobre un escenario de altura
   fija de 780 px, y entre eso y los títulos el esquema no entraba en pantalla.
   De paso, el mismo marcado sirve para el móvil: la fila pasa a columna. */
.pst-diagram__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  padding: clamp(1.25rem, 2vw, 1.5rem) clamp(0.75rem, 2.4vw, 2rem);
  background: var(--pst-surface);
  border: 1px solid var(--pst-line);
}

/* La fila de casillas: tres racimos, uno por origen. Si no entran de una
   pieza, el racimo que sobra baja de línea en vez de encogerse. */
.pst-diagram__origins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem clamp(1rem, 3vw, 2.75rem);
  width: 100%;
}

.pst-diagram__origin {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

/* En columna cada racimo necesita decir de cuál de los tres orígenes cuelga:
   arriba el abanico los nombra, pero queda lejos. En fila sobra, porque cada
   racimo sale de su sector. */
.pst-diagram__group-label {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--scl-font-sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--pst-ink-soft);
}

/* Abanico: «Pesticidas» en el medio y los tres orígenes a su alrededor. El
   `<svg>` no recibe el ratón —es un rectángulo y taparía media zona alta—;
   solo lo reciben los sectores. */
.pst-diagram__fan {
  line-height: 0;
}

.pst-diagram__fan svg {
  width: clamp(240px, 21vw, 300px);
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.pst-fan__core {
  fill: var(--pst-ink);
}

.pst-fan__core-label {
  fill: var(--pst-bg);
  font-family: var(--scl-font-sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-anchor: middle;
}

.pst-fan__sector {
  fill: color-mix(in srgb, var(--pst-accent) 20%, var(--pst-surface));
  stroke: var(--pst-accent);
  stroke-width: 1;
  transition:
    fill 300ms ease,
    opacity 300ms ease;
}

/* Los rótulos van horizontales, en el centro de cada sector. Curvados sobre el
   arco quedaban girados —el de la izquierda casi de cabeza— y había que ladear
   la cabeza para leerlos. */
.pst-fan__label {
  fill: var(--pst-ink);
  font-family: var(--scl-font-sans-serif);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-anchor: middle;
  dominant-baseline: middle;
  transition: fill 300ms ease;
}

.pst-node--source {
  pointer-events: auto;
  cursor: pointer;
}

.pst-node--source:hover .pst-fan__sector,
.pst-node--source:focus-visible .pst-fan__sector {
  fill: var(--pst-accent);
}

.pst-node--source:hover .pst-fan__label,
.pst-node--source:focus-visible .pst-fan__label {
  fill: var(--pst-bg);
}

/* Las casillas: un círculo con el rótulo arriba y el ícono debajo, como en la
   infografía original. El tamaño es uno solo para todas y el rótulo se aprieta
   hasta tres líneas: «Limpiar equipos de fumigación» es la más larga y es la
   que fija la medida. */
.pst-node {
  --pst-node-size: clamp(80px, 7.6vw, 96px);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: var(--pst-node-size);
  height: var(--pst-node-size);
  padding: 0.4rem;
  border: 1.5px solid var(--pst-line-accent);
  border-radius: 50%;
  background: var(--pst-bg);
  color: var(--pst-ink);
  font-family: var(--scl-font-sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  /* El reparto de líneas (`text-wrap: balance`) va con el resto de lo corto,
     al principio de la hoja: dentro de un círculo un renglón largo y otro
     corto se ve torcido. El corte silábico automático se queda fuera —partía
     «Manipular cul-tivos» pudiendo cambiar de línea—; la única palabra que no
     entra de una pieza, «transplacentaria», lleva su guion blando escrito. */
  cursor: pointer;
  transition:
    background 300ms ease,
    color 300ms ease,
    border-color 300ms ease,
    opacity 300ms ease;
}

.pst-node--vector,
.pst-node--route {
  background: color-mix(in srgb, var(--pst-accent) 14%, var(--pst-bg));
  border-color: color-mix(in srgb, var(--pst-accent) 55%, transparent);
}

/* El trazo va aquí y no en el `<symbol>`: `<use>` clona el dibujo en un árbol
   sombra, donde solo entra lo que se hereda. `fill` y `stroke` se heredan; una
   regla que apunte al `<symbol>` del sprite no llega. */
.pst-node__icon {
  flex: none;
  /* A 21 px los dibujos con más de una pieza —el balde, la mochila, la
     embarazada— se volvían una mancha; la casilla tiene sitio de sobra. */
  width: 26px;
  height: 26px;
  color: var(--pst-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 300ms ease;
}

/* La casilla que la serie mira de cerca: mismo color, borde entero */
.pst-node--key {
  border-width: 2.5px;
  border-color: var(--pst-accent);
}

/* Las vías de entrada no se pintan con el color de un origen: a ellas llega
   todo. El original las separa en rojo y amarillo, pero aquí eso serían dos
   colores nuevos compitiendo con los tres de los orígenes; la diferencia la
   hace el relleno —la principal va llena, las otras solo perfiladas—. */
.pst-node--route {
  --pst-node-size: clamp(84px, 7.8vw, 98px);
  --pst-accent: var(--pst-ink-soft);
  background: color-mix(in srgb, var(--pst-ink) 8%, var(--pst-bg));
  border-color: var(--pst-ink-soft);
}

.pst-node--route .pst-node__icon {
  color: var(--pst-ink);
}

.pst-node--route-major {
  --pst-accent: var(--pst-pink);
  background: color-mix(in srgb, var(--pst-pink) 30%, var(--pst-bg));
  border-color: var(--pst-pink);
}

.pst-node--route-major .pst-node__icon {
  color: var(--pst-pink);
}

.pst-node:hover,
.pst-node:focus-visible {
  background: var(--pst-accent);
  border-color: var(--pst-accent);
  color: var(--pst-bg);
}

.pst-node:hover .pst-node__icon,
.pst-node:focus-visible .pst-node__icon {
  color: var(--pst-bg);
}

/* El rótulo de la última banda hace lo que antes hacía el halo con la silueta
   del cuerpo detrás del racimo: decir que de aquí para abajo ya es el cuerpo.
   Las dos figuras del original se quedan, en el ícono. */
.pst-diagram__tier-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--scl-font-sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pst-ink-soft);
}

.pst-diagram__tier-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Las tres primeras vías en una fila y la transplacentaria sola debajo: no es
   una entrada más, es la que recibe lo que ya entró por las otras tres. Es una
   rejilla y no un flex porque el `flex-basis: 100%` no rompía la línea —el
   ancho fijo de `.pst-node` recorta esa base—; con `grid-column: 1 / -1` sí. */
.pst-diagram__routes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 0.5rem clamp(0.75rem, 4vw, 3rem);
}

.pst-diagram__routes .pst-node:last-child {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Un halo tenue detrás del racimo, lo que queda de la silueta del cuerpo */
.pst-diagram__routes::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--pst-ink) 10%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* Las líneas se ven siempre, tenues y en el color de su origen: el dibujo
   entero es parte de lo que se cuenta. Al posarse en una casilla, su cadena se
   enciende y el resto se apaga casi del todo. */
.pst-diagram__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* En columna el trazado cruza los racimos sin contar nada: ahí las líneas
     solo salen al elegir una casilla. En fila se ven siempre. */
  opacity: 0;
  transition: opacity 200ms ease;
}

.pst-diagram__stage.is-selecting .pst-diagram__links {
  opacity: 1;
}

.pst-link {
  fill: none;
  /* El color sale del origen del tramo, no de `--pst-line-accent`: en el tema
     claro ese filete pierde el color a propósito, y aquí sí lo necesita. */
  stroke: color-mix(in srgb, var(--pst-accent) 45%, transparent);
  stroke-width: 1.4;
  opacity: 0.55;
  transition:
    stroke 300ms ease,
    opacity 300ms ease,
    stroke-width 300ms ease;
}

.pst-link--minor {
  stroke-dasharray: 5 5;
  opacity: 0.35;
}

.pst-diagram__stage.is-selecting .pst-link {
  opacity: 0.08;
}

/* La línea encendida tiene que cantar sobre las apagadas: más gruesa y en el
   color de la serie. Las secundarias pierden el punteado al encenderse, que
   a este grosor se leía como una línea rota. */
.pst-diagram__stage.is-selecting .pst-link.is-active {
  opacity: 1;
  stroke: var(--pst-accent);
  stroke-width: 3;
  stroke-dasharray: none;
}

/* Los tramos a los que confluye más de un origen no llevan `pst-origin-*` y
   se quedarían con el rosa de la página aunque la cadena encendida sea otra:
   se encienden en neutro, que es lo que dicen. */
.pst-diagram__stage.is-selecting
  .pst-link.is-active:not([class*="pst-origin-"]) {
  stroke: var(--pst-ink);
}

/* Al posarse, lo demás se apaga pero no desaparece: el esquema se tiene que
   poder leer entero en todo momento. */
.pst-diagram__stage.is-selecting .pst-node {
  opacity: 0.3;
}

.pst-diagram__stage.is-selecting .pst-node.is-connected {
  opacity: 1;
  border-color: var(--pst-accent);
  background: color-mix(in srgb, var(--pst-accent) 22%, var(--pst-bg));
}

.pst-diagram__stage.is-selecting .pst-node.is-selected {
  opacity: 1;
  background: var(--pst-accent);
  border-color: var(--pst-accent);
  color: var(--pst-bg);
}

.pst-diagram__stage.is-selecting .pst-node.is-selected .pst-node__icon {
  color: var(--pst-bg);
}

/* Los sectores del abanico son casillas, pero se pintan con `fill`: las reglas
   de fondo y borde de arriba no les llegan. */
.pst-diagram__stage.is-selecting
  .pst-node--source.is-connected
  .pst-fan__sector {
  fill: color-mix(in srgb, var(--pst-accent) 45%, var(--pst-surface));
}

.pst-diagram__stage.is-selecting
  .pst-node--source.is-selected
  .pst-fan__sector {
  fill: var(--pst-accent);
}

.pst-diagram__stage.is-selecting .pst-node--source.is-selected .pst-fan__label {
  fill: var(--pst-bg);
}

/* La leyenda: cuatro claves cortas. Las descripciones largas del original
   —«vía de exposición menor para la población general, principal para grupos
   específicos (como embarazadas y bebés)»— ocupaban cuatro renglones para
   decir lo que se entiende en uno. */
.pst-diagram__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  width: 100%;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--pst-line);
  font-family: var(--scl-font-sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--pst-ink-soft);
}

.pst-diagram__legend-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pst-diagram__legend-item::before {
  content: "";
  flex: none;
  margin-top: 0.55em;
  width: 22px;
  height: 0;
  border-top: 2px solid var(--pst-ink-soft);
}

.pst-diagram__legend-item--minor::before {
  border-top-style: dashed;
  opacity: 0.6;
}

/* Las dos severidades de vía de entrada se distinguen por relleno: la
   principal va rellena y la menor solo perfilada. */
.pst-diagram__legend-item--route::before,
.pst-diagram__legend-item--route-minor::before {
  margin-top: 0.15em;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--pst-pink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pst-pink) 30%, transparent);
}

.pst-diagram__legend-item--route-minor::before {
  border-color: var(--pst-ink-soft);
  background: color-mix(in srgb, var(--pst-ink) 8%, transparent);
}

@media (min-width: 900px) {
  .pst-diagram__links {
    opacity: 1;
  }

  .pst-diagram__group-label {
    display: none;
  }

  /* La leyenda se va a la esquina de abajo a la izquierda, que en este reparto
     queda libre: en el flujo se llevaba otro renglón de alto. */
  .pst-diagram__legend {
    position: absolute;
    left: 1.5rem;
    bottom: 1.25rem;
    flex-direction: column;
    width: clamp(200px, 20vw, 250px);
    padding-top: 0;
    border-top: 0;
  }
}

/* Sin medida corta: es una línea de crédito, no de lectura, y partida en dos
   se veía como un párrafo a medio hacer. */
.pst-diagram__source {
  font-family: var(--scl-font-sans-serif);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pst-ink-soft);
  margin: 1.25rem 0 0;
}

.pst-diagram__source b {
  color: var(--pst-ink);
  font-weight: 700;
}

/* 8. Galería: pila fija de fotos, leyendas que suben con el scroll ------ */

/* Base (sin JS, o con movimiento reducido): un listado vertical honesto */

.pst-gallery {
  position: relative;
  padding: 3.5rem 0;
}

.pst-gallery__steps {
  width: 92%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.pst-gallery__figure {
  margin: 0;
}

.pst-gallery__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.pst-gallery__caption {
  font-family: var(--scl-font-sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pst-ink-soft);
  margin-top: 0.85rem;
}

/* Modo scrollytelling (lo activa el JS) ---------------------------------
 *
 * La capa de fotos se queda pegada ocupando la pantalla y los recuadros
 * siguen en el flujo normal: entran por abajo, cruzan y se van por arriba.
 * Cuando el último termina, la sección acaba y todo vuelve a scrollear.
 */

.pst-gallery.is-scrolly {
  padding: 0;
}

.pst-gallery.is-scrolly > .pst-container {
  position: absolute;
  top: 3.5rem;
  left: 0;
  right: 0;
  z-index: 3;
}

.pst-gallery__deck {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
}

/* Los pasos se superponen a la capa fija */
.pst-gallery.is-scrolly .pst-gallery__steps {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: none;
  margin: -100vh auto 0;
  display: block;
  padding-bottom: 15vh;
}

.pst-gallery.is-scrolly .pst-gallery__step {
  display: flex;
  align-items: center;
  min-height: 100vh;
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Los recuadros no caen siempre en el mismo sitio: se turnan izquierda,
   derecha y centro, para que la lectura no se vuelva mecánica. */
.pst-gallery.is-scrolly .pst-gallery__step:nth-child(3n + 1) {
  justify-content: flex-start;
}

.pst-gallery.is-scrolly .pst-gallery__step:nth-child(3n + 2) {
  justify-content: flex-end;
}

.pst-gallery.is-scrolly .pst-gallery__step:nth-child(3n + 3) {
  justify-content: center;
}

/* La foto del flujo se esconde a la vista pero sigue ahí para el lector de
   pantalla: su `alt` y su leyenda se anuncian en orden. */
.pst-gallery.is-scrolly .pst-gallery__figure img {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sigue siendo oscura —debajo hay una foto, no el papel—, pero deja de ser
   un rectángulo opaco: se vela el fondo y la marca del color queda en un
   filete al costado. */
/* Recuadro claro sobre la foto: fondo blanco velado con desenfoque y texto
   en negro. El 0,66 deja ver la foto por detrás y aun así el contraste está
   garantizado: sobre negro puro el recuadro no baja de rgb(166), que con el
   texto en #16151a da 7,5:1. */
.pst-gallery.is-scrolly .pst-gallery__caption {
  width: min(380px, 84%);
  margin: 0;
  padding: 1.15rem 1.35rem;
  background: rgba(252, 251, 249, 0.66);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  color: #16151a;
  font-size: 14px;
  line-height: 1.5;
}

/* Las fotos clonadas dentro de la capa fija */

.pst-gallery__photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w, 50%);
  /* `--x`, `--y` y `--r` colocan la foto en el montón; `--shift` y
     `--scale` son lo único que mueve el scroll. */
  transform: translate(
      calc(-50% + var(--x, 0%)),
      calc(-50% + var(--y, 0%) + var(--shift, 0%))
    )
    rotate(var(--r, 0deg)) scale(var(--scale, 1));
  will-change: transform, opacity;
}

.pst-gallery__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Tope de alto: al agrandar las fotos, la más ancha llegaba a tapar el
     rótulo del bloque. Con 80vh el montón siempre deja aire arriba y abajo. */
  max-height: 80vh;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Cada foto con su tamaño, su sitio y su inclinación: el montón se ve como
   un montón y no como una baraja alineada. */
.pst-gallery__photo:nth-child(1) {
  --w: 84%;
  --x: 0%;
  --y: -3%;
  --r: -2.5deg;
}

.pst-gallery__photo:nth-child(2) {
  --w: 76%;
  --x: 10%;
  --y: 6%;
  --r: 2deg;
}

.pst-gallery__photo:nth-child(3) {
  --w: 88%;
  --x: -3%;
  --y: 2%;
  --r: -1.5deg;
}

.pst-gallery__photo:nth-child(4) {
  --w: 74%;
  --x: 12%;
  --y: -7%;
  --r: 3.5deg;
}

.pst-gallery__photo:nth-child(5) {
  --w: 82%;
  --x: -6%;
  --y: 6%;
  --r: 2deg;
}

.pst-gallery__photo:nth-child(6) {
  --w: 78%;
  --x: 8%;
  --y: -3%;
  --r: -2.5deg;
}

.pst-gallery__photo:nth-child(7) {
  --w: 86%;
  --x: -1%;
  --y: 4%;
  --r: 1.5deg;
}

.pst-gallery__photo:nth-child(8) {
  --w: 74%;
  --x: 11%;
  --y: -5%;
  --r: -3.5deg;
}

.pst-gallery__photo:nth-child(9) {
  --w: 80%;
  --x: -5%;
  --y: 3%;
  --r: 2.5deg;
}

.pst-gallery__photo:nth-child(10) {
  --w: 78%;
  --x: 7%;
  --y: -6%;
  --r: -2deg;
}

/* 9. Testimonios ------------------------------------------------------- */

.pst-voices {
  padding: 3rem 0 4rem;
}

/* Tres tarjetas en grilla: nada de arrastrar de lado para leerlas */
/* La grilla iba a sangre y las tarjetas tocaban el borde de la pantalla:
   ahora respeta el mismo ancho que el resto de los bloques. */
.pst-voices__grid {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
}

/* Sin filete: era el único sitio del landing donde una foto quedaba
   enmarcada, y al lado del archivo —fotos a hueso— se notaba. La tarjeta se
   distingue por el fondo, que ya es más claro que el papel. */
.pst-voice {
  margin: 0;
  background: var(--pst-surface);
  display: flex;
  flex-direction: column;
}

.pst-voice__media {
  position: relative;
}

.pst-voice__portrait,
.pst-voice__player {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pst-bg);
}

.pst-voice__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--pst-accent);
  background: rgba(13, 13, 15, 0.72);
  color: var(--pst-accent);
  font-size: 18px;
  cursor: pointer;
  transition:
    background 300ms ease,
    color 300ms ease;
}

.pst-voice__play:hover {
  background: var(--pst-accent);
  color: var(--pst-bg);
}

.pst-voice__body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  flex: 1;
}

.pst-voice--quote .pst-voice__body {
  padding-top: 2.25rem;
}

.pst-voice--quote .pst-voice__body::before {
  content: "\201C";
  font-family: var(--scl-font-heading);
  font-size: 72px;
  line-height: 0.4;
  color: var(--pst-accent);
}

.pst-voice__quote {
  font-family: var(--scl-font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--pst-ink);
  margin: 0;
  border: 0;
  padding: 0;
}

.pst-voice__cite {
  margin: 0;
}

.pst-voice__name {
  display: block;
  font-family: var(--scl-font-sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--pst-accent);
}

.pst-voice__place {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--scl-font-sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--pst-ink-soft);
}

/* 10. Créditos ----------------------------------------------------------- */

.pst-credits {
  padding: 4rem 0 5rem;
  border-top: 1px solid var(--pst-line);
  text-align: center;
}

.pst-credits p {
  font-family: var(--scl-font-sans-serif);
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 2.5rem;
}

.pst-credits b {
  color: var(--pst-ink);
}

.pst-credits__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem 4.5rem;
  margin-bottom: 2.5rem;
}

.pst-credits__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pst-credits__logo-label {
  font-family: var(--scl-font-sans-serif);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pst-ink-soft);
}

.pst-credits__logo .scl-logo {
  width: 230px;
  height: auto;
}

/* En claro el logo va con sus colores de marca —índigo y rosa—, que es como
   debe verse. En oscuro el índigo se pierde contra el fondo, así que ahí sí
   se cambia por la tinta de la página. */
.pst-serie-page--dark .pst-credits__logo .scl-logo {
  --scl-logo-color-1: var(--pst-ink);
  --scl-logo-color-2: var(--pst-accent);
}

.pst-credits__logo img {
  width: 190px;
  height: auto;
}

.pst-credits__note {
  font-size: 14px !important;
  color: var(--pst-ink-soft);
  margin-bottom: 0 !important;
}

/* 12. Cierre: apoyo y boletín -------------------------------------------
 *
 * Reutiliza los componentes del sitio —el botón primario y el formulario
 * compacto del boletín—; aquí solo va la caja que los coloca. */

/* Sin fondo: detrás asoma el loop de la portada, que sigue fijo en el
   viewport. El bloque va fuera de `.pst-page` —cuyo fondo opaco lo taparía— y
   con `z-index` para pintarse encima del video, como el resto del contenido. */
.pst-closing {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  overflow: hidden;
  background: transparent;
  color: var(--pst-on-media);
}

/* El velo carga con todo el contraste: el video va a plena luz y trae cielo y
   cañas secas muy claras. El punto más claro es el centro (0,62), calculado
   para el peor caso —un píxel blanco puro detrás— : el fondo no pasa de
   rgb(104) y el blanco del texto se queda por encima de 5:1. Bajarlo de 0,6
   deja el texto por debajo de 4,5:1 en ese caso. */
.pst-closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 11, 13, 0.75) 0%,
    rgba(11, 11, 13, 0.62) 50%,
    rgba(11, 11, 13, 0.82) 100%
  );
}

/* Composición centrada: sobre una foto, dos columnas desiguales dejaban una
   esquina vacía. Todo en una columna estrecha, y el bloque se lee como el
   cierre que es. */
.pst-closing__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  text-align: center;
}

.pst-closing__lead {
  font-family: var(--scl-font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  color: var(--pst-on-media);
  margin: 0 0 1rem;
}

.pst-closing__text {
  font-family: var(--scl-font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--pst-on-media-soft);
  margin: 0 auto 2rem;
  max-width: 46ch;
}

/* Separado del botón por una hairline: son dos gestos distintos y no conviene
   que se lean como uno solo. */
.pst-closing__newsletter {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(244, 242, 243, 0.2);
}

.pst-closing__newsletter .scl-newsletter-subscribe {
  max-width: 460px;
  margin: 0 auto;
}

/* El formulario del boletín viene del bundle global, pensado para fondo
   claro: sobre la foto hay que devolverle el contraste al rótulo, al borde de
   la caja y al texto que se escribe dentro. */
.pst-closing__newsletter .scl-eyebrow {
  color: var(--pst-on-media-accent);
}

.pst-closing__newsletter .scl-newsletter-box {
  border-color: rgba(244, 242, 243, 0.4);
  background-color: rgba(11, 11, 13, 0.55);
}

.pst-closing__newsletter .scl-newsletter-box input[type="email"] {
  color: var(--pst-on-media);
}

.pst-closing__newsletter .scl-newsletter-box input[type="email"]::placeholder {
  color: rgba(244, 242, 243, 0.6);
}

/* Responsive -------------------------------------------------------------- */

@media (min-width: 768px) {
  .pst-split {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }

  .pst-split--reverse .pst-split__media {
    grid-column: 2;
    grid-row: 1;
  }

  /* Desde tablet, el titular y la foto van uno al lado del otro */
  .pst-archive__link {
    grid-template-columns: 1fr 260px auto;
  }

  .pst-archive__media {
    grid-column: 2;
  }

  .pst-archive__arrow {
    grid-column: 3;
  }

  .pst-voices__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .pst-hero__video-toggle {
    right: 2rem;
  }
}

@media (max-width: 767px) {
  /* La galería se mide en `svh` ------------------------------------------
   *
   * El alto de la capa fija, el desplazamiento que lo compensa y el alto de
   * cada paso son el mismo número y tienen que seguir siéndolo. En un
   * teléfono `100vh` mide con la barra del navegador retraída, así que el
   * montón quedaba centrado en una caja más alta que la pantalla y se salía
   * por abajo. Con `svh` el reparto es el que se ve.
   */
  .pst-gallery__deck {
    height: 100svh;
  }

  /* El botón de pausa del cierre va en la esquina de abajo, y en una columna
     el formulario del boletín llega hasta el borde: sin este aire el botón
     se montaba sobre «Enviar». */
  .pst-closing {
    padding-bottom: 6.5rem;
  }

  .pst-gallery.is-scrolly .pst-gallery__steps {
    margin-top: -100svh;
  }

  .pst-gallery.is-scrolly .pst-gallery__step {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: 9svh;
  }

  /* Los covers se adaptan a la pantalla vertical: recortados a 4/5 llenan más
     de la mitad del alto. Apaisadas medían 200 px y el recuadro de leyenda
     —que cruza la pantalla con el scroll— las tapaba enteras al pasar. El
     recorte necesita alto definido: sin `aspect-ratio`, `object-fit` no tiene
     nada que recortar y la foto se queda con su proporción original.

     El selector lleva `.is-scrolly` delante para ganarle a las reglas
     `nth-child` que reparten tamaño y sitio en el montón: son (0,2,0) y una
     regla suelta `.pst-gallery__photo` —lo que había aquí— perdía contra
     ellas, así que este bloque no llegaba a aplicarse nunca. La inclinación
     (`--r`) sí se deja venir de cada `nth-child`: es lo que hace que el montón
     parezca un montón. */
  .pst-gallery.is-scrolly .pst-gallery__photo {
    /* 90 % y no más: la foto se agranda un 2 % al pasar al frente y va
       inclinada, y con eso una de 96 % se salía por el costado y quedaba
       cortada por el borde de la pantalla. */
    --w: 90%;
    --x: 0%;
    --y: -6%;
  }

  .pst-gallery__photo img {
    aspect-ratio: 4 / 5;
    max-height: 62svh;
    object-fit: cover;
  }

  .pst-gallery.is-scrolly .pst-gallery__caption {
    width: 100%;
  }

  /* Archivo: la foto a su propia fila -------------------------------------
   *
   * La foto vivía en la columna del titular y dejaba 76 px muertos al lado de
   * la flecha, como si estuviera a medio cargar. En teléfono baja a una fila
   * suya a todo el ancho —que es el ancho que ya pide el `sizes` de la
   * plantilla— y la flecha se queda arriba, con el titular. */
  .pst-archive__arrow {
    grid-row: 1;
  }

  .pst-archive__media {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* El contador deja de reservar una pantalla entera: su contenido mide unos
     550 px y el `min-height` dejaba 290 px de aire muerto repartidos arriba y
     abajo, que en un teléfono se leen como un salto de maquetación. */
  .pst-countdown {
    min-height: 0;
    padding: 3.5rem 0;
  }
}

@media (max-width: 640px) {
  /* En una fila los cuatro no entran y el cuarto queda solo: 2×2 */
  .pst-countdown__clock {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
  }

  .pst-countdown__unit {
    min-width: 0;
  }
}

/* Objetivos táctiles ------------------------------------------------------
 *
 * Los enlaces de texto de la página miden entre 16 y 19 px de alto —la llamada
 * de cada reportaje, los enlaces de las fichas de monitoreo, la paginación—,
 * la mitad de los 44 px que necesita un dedo. La zona de toque se agranda con
 * un pseudoelemento y no con relleno: así el subrayado sigue pegado al texto y
 * no se mueve nada de sitio. El ensanche lateral es de 6 px por lado y los
 * enlaces más juntos —los de una ficha— van a 20 px, así que no se pisan.
 */
@media (pointer: coarse) {
  .pst-split__cta,
  .pst-milestone-card__links a,
  .pst-pagination__link,
  .pst-timeline__archive a,
  .pst-info__button {
    position: relative;
  }

  .pst-split__cta::after,
  .pst-milestone-card__links a::after,
  .pst-pagination__link::after,
  .pst-timeline__archive a::after,
  .pst-info__button::after {
    content: "";
    position: absolute;
    inset: -13px -6px;
  }

  .pst-info__button::after {
    inset: -9px;
  }

  /* Los enlaces de una ficha son los únicos que pueden caer en dos renglones,
     y con 8 px de separación las dos zonas de toque se solapaban: al tocar
     entre ambas se abría la de arriba. 28 px es lo que ocupa el ensanche. */
  .pst-milestone-card__links {
    gap: 1.75rem 1.25rem;
  }

  .pst-hero__video-toggle {
    width: 44px;
    height: 44px;
  }
}

/* Con el dedo no hay `hover` que valga y `:focus-visible` no siempre casa al
   tocar: el globo de fuentes se abría con el ratón y no con el toque. */
.pst-info__button:focus ~ .pst-info__panel {
  opacity: 1;
}

/* Reducción de movimiento -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pst-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pst-hero__drop {
    animation: none;
    opacity: 1;
  }

  .pst-archive__media img,
  .pst-node,
  .pst-link {
    transition: none;
  }

  .pst-split__media img,
  .pst-info__panel,
  .pst-info__button {
    transition: none;
  }
}