/* El Niño crece · la página */

:root {
  --papel: #f7f8fa;
  --tinta: #26282b;
  --gris: #5f6368;
  --claro: #686d73;
  --texto: #33373c;
  --agua: #2f62a6;
  --calor: #b4462c;
  --sepia: #8a6a48;
  --rojo: #d0473f;
  --ambar: #b98222;
  /* para letras chicas: los mismos colores, más oscuros (contraste de 4,5 a 1 o más sobre el papel) */
  --rojo-texto: #b83a32;
  --ambar-texto: #8a5f12;
  --linea: #e3e6ea;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Chivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: var(--agua);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: 2px solid var(--agua);
  outline-offset: 3px;
  border-radius: 2px;
}

/* para lectores de pantalla: el texto está, pero no se ve */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* atajos: aparecen solo al llegar con el teclado */
.atajos a {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: var(--tinta);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.atajos a:focus {
  transform: none;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ---------- escenas: un escenario fijo mientras se baja ---------- */
.escena {
  position: relative;
}
.escenario {
  position: relative;
  overflow: hidden;
  background: var(--papel);
}
.js .escena {
  height: calc(var(--largo, 300) * var(--u, 0.82vh) + 100vh);
}
.js .escenario {
  position: sticky;
  top: 0;
  height: 100vh;
}
.js .foto {
  display: none;
}
.lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lienzo-escena {
  z-index: 0;
}
.lienzo-nubes {
  z-index: 1;
}
/* el borde de la escena se esfuma en la hoja; el fundido va pegado a la página y lo mueve pagina.js */
.fundido {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 40%;
  pointer-events: none;
  will-change: transform;
}
.fundido-arriba {
  top: 0;
  background: linear-gradient(var(--papel), rgba(247, 248, 250, 0.97) 10%, rgba(247, 248, 250, 0.9) 20%, rgba(247, 248, 250, 0.78) 30%, rgba(247, 248, 250, 0.65) 40%, rgba(247, 248, 250, 0.5) 50%, rgba(247, 248, 250, 0.35) 60%, rgba(247, 248, 250, 0.22) 70%, rgba(247, 248, 250, 0.1) 80%, rgba(247, 248, 250, 0.03) 90%, rgba(247, 248, 250, 0));
}
.fundido-abajo {
  bottom: 0;
  background: linear-gradient(to top, var(--papel), rgba(247, 248, 250, 0.97) 10%, rgba(247, 248, 250, 0.9) 20%, rgba(247, 248, 250, 0.78) 30%, rgba(247, 248, 250, 0.65) 40%, rgba(247, 248, 250, 0.5) 50%, rgba(247, 248, 250, 0.35) 60%, rgba(247, 248, 250, 0.22) 70%, rgba(247, 248, 250, 0.1) 80%, rgba(247, 248, 250, 0.03) 90%, rgba(247, 248, 250, 0));
}
.lienzo-garza {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 280px;
  height: 280px;
  pointer-events: none;
  will-change: transform;
}

/* las frases, debajo de la ventana; con la tormenta (--oscuro) pasan a claro */
.leyendas {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--bajo, 78vh);
  z-index: 3;
  pointer-events: none;
}
.leyenda {
  margin: 0 auto;
  padding: 0 5vw;
  max-width: 66rem;
  text-align: center;
  color: rgb(calc(38 + 208 * var(--oscuro, 0)) calc(40 + 207 * var(--oscuro, 0)) calc(43 + 206 * var(--oscuro, 0)));
  text-shadow: 0 0 22px rgba(247, 248, 250, calc(0.75 - 0.75 * var(--oscuro, 0)));
}
.js .leyenda {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
}
.frase {
  display: block;
  font-weight: 400;
  font-size: clamp(1.2rem, 0.85rem + 1.25vw, 2.05rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.dato {
  display: block;
  margin-top: 0.55em;
  font-weight: 300;
  font-size: clamp(0.92rem, 0.78rem + 0.5vw, 1.3rem);
  line-height: 1.4;
  color: rgb(calc(95 + 132 * var(--oscuro, 0)) calc(99 + 132 * var(--oscuro, 0)) calc(104 + 132 * var(--oscuro, 0)));
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.dato b {
  font-weight: 500;
  color: rgb(calc(38 + 217 * var(--oscuro, 0)) calc(40 + 215 * var(--oscuro, 0)) calc(43 + 212 * var(--oscuro, 0)));
}
.fuente {
  margin-left: 0.9em;
  font-size: 0.74em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(calc(104 + 103 * var(--oscuro, 0)) calc(109 + 104 * var(--oscuro, 0)) calc(115 + 105 * var(--oscuro, 0)));
}
@media (max-height: 520px) and (orientation: landscape) {
  .frase {
    font-size: 1.05rem;
  }
  .dato {
    font-size: 0.82rem;
    margin-top: 0.35em;
  }
}

/* ---------- la tapa ---------- */
/* el dibujo asoma detrás del título: un velo de papel suave y un halo en cada letra, como los nombres de un mapa */
.tapa {
  --halo: 0 0 1px rgba(247, 248, 250, 0.95), 0 0 6px rgba(247, 248, 250, 0.9), 0 0 16px rgba(247, 248, 250, 0.75);
  /* lo que se deja libre abajo: corre el bloque hacia el centro de la ventana de nubes */
  --pie: 8vh;
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 7vw var(--pie);
  text-align: center;
  text-shadow: var(--halo);
  pointer-events: none;
}
.tapa::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(50% - var(--pie) / 2);
  width: min(62rem, 104vw);
  height: min(28rem, 70%);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(247, 248, 250, 0.52), rgba(247, 248, 250, 0.4) 45%, rgba(247, 248, 250, 0.18) 75%, rgba(247, 248, 250, 0));
}
.volanta {
  max-width: 34rem;
  margin: 0 0 1.3rem;
  line-height: 1.5;
  text-wrap: balance;
  font-weight: 500;
  font-size: clamp(0.78rem, 0.68rem + 0.35vw, 0.98rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a4e53;
  opacity: 0.55;
}
.tapa h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.7rem, 1.2rem + 5.6vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tinta);
  text-wrap: balance;
}
.bajada {
  max-width: 33rem;
  margin: 1.7rem auto 0;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.34rem);
  line-height: 1.5;
  font-weight: 400;
  color: #2f3337;
  text-wrap: pretty;
}
.firma {
  margin: 2.2rem 0 0;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gris);
}
.volanta span {
  white-space: nowrap;
}
.gancho {
  max-width: 30rem;
  margin: 1.6rem auto 0;
  font-weight: 400;
  font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.38rem);
  line-height: 1.4;
  color: #2f3337;
  text-wrap: balance;
}
/* parado, la ventana está más arriba y es angosta: el bloque sube y el enlace va en su propio renglón */
@media (orientation: portrait) {
  .tapa {
    --pie: 24vh;
  }
}

.bajar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5vh;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  pointer-events: none;
}
/* parpadea el texto de adentro: la opacidad del párrafo la maneja el scroll y una animación la pisaría */
.bajar span {
  display: inline-block;
  animation: parpadeo 1.6s ease-in-out infinite;
}
@keyframes parpadeo {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

/* celular acostado: la tapa más compacta, sin la indicación de bajar */
@media (max-height: 520px) and (orientation: landscape) {
  .tapa {
    --pie: 2vh;
  }
  .volanta {
    margin-bottom: 0.7rem;
  }
  .tapa h1 {
    font-size: clamp(2.2rem, 1rem + 4vw, 3.4rem);
  }
  .bajada {
    margin-top: 0.9rem;
    font-size: 0.98rem;
    line-height: 1.4;
  }
  .firma {
    margin-top: 0.8rem;
  }
  .bajar {
    display: none;
  }
}

/* sin JavaScript: la escena queda como una foto con sus frases debajo */
html:not(.js) .escenario {
  padding-bottom: 8vh;
}
html:not(.js) .foto {
  width: 100%;
  height: auto;
}
html:not(.js) .tapa {
  position: static;
  padding: 10vh 7vw 6vh;
}
html:not(.js) .tapa::before {
  display: none;
}
html:not(.js) .bajar,
html:not(.js) .lienzo,
html:not(.js) .lienzo-garza,
html:not(.js) .fundido {
  display: none;
}
html:not(.js) .leyendas {
  position: static;
}
html:not(.js) .leyenda {
  margin-top: 2.2rem;
}

/* ---------- texto ---------- */
.texto {
  padding: clamp(5rem, 15vh, 10rem) 6vw clamp(4rem, 12vh, 8rem);
}
.columna {
  max-width: 37rem;
  margin: 0 auto;
}
.texto h2,
.fuentes h2 {
  margin: 0 0 1.4rem;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.15rem + 2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.texto h3,
.fuentes h3 {
  margin: 2.8rem 0 1rem;
  font-weight: 600;
  font-size: 1.2rem;
}
.texto p {
  margin: 0 0 1.1em;
  font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.24rem);
  line-height: 1.68;
  color: var(--texto);
  text-wrap: pretty;
}
.texto p.remate {
  margin: 2.2rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--agua);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--tinta);
  text-wrap: balance;
}
.texto p.remate b {
  font-weight: 600;
}
.texto b {  font-weight: 600;
  color: var(--tinta);
}
.mirar {
  margin: 0;
  padding-left: 1.2rem;
}
.mirar li {
  margin-bottom: 0.6rem;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.12rem);
  line-height: 1.6;
  color: var(--texto);
}

/* la pregunta, sola en la hoja */
.pregunta {
  padding: 20vh 6vw 10vh;
  text-align: center;
}
.pregunta p {
  max-width: 16ch;
  margin: 0 auto;
  font-weight: 300;
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* ---------- gráficos ---------- */
.grafico {
  max-width: 58rem;
  margin: clamp(3rem, 9vh, 6rem) auto;
}
.grafico.ancho {
  max-width: 64rem;
}
/* el río lleva la anotación a la derecha (m.r = 190 de 920): se corre 64 para que la parte con datos quede centrada bajo el texto */
.grafico.rio .g-ancho {
  transform: translateX(6.96%);
}
.grafico.rio .nota {
  max-width: 37rem;
  margin-left: auto;
  margin-right: auto;
}
.grafico figcaption {
  max-width: 40rem;
  margin: 0 0 1rem;
}
.grafico h3 {
  margin: 0 0 0.4rem;
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.36rem);
  line-height: 1.25;
}
.grafico figcaption p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gris);
  text-wrap: pretty;
}
.grafico .sub-grafico {
  max-width: 40rem;
  margin: 2.6rem 0 1rem;
}
.grafico .sub-grafico p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gris);
  text-wrap: pretty;
}
.grafico .nota {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--claro);
}
#memoria .nota {
  text-align: center;
  text-wrap: balance;
}.nota a {
  color: inherit;
}
.g-par svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
/* la variante sale del lugar real que tiene el gráfico: la ancha solo cuando se lee casi en tamaño natural */
.g-par {
  container-type: inline-size;
}
.g-angosto {
  display: none;
}
@container (max-width: 859px) {
  .g-par .g-ancho {
    display: none;
  }
  .g-par .g-angosto {
    display: block;
    max-width: 34rem;
    margin: 0 auto;
  }
}
/* en la angosta, las letras un poco más grandes: se ven achicadas en los celulares chicos */
.g.g-angosto .eje {
  font-size: 14.5px;
}
.g.g-angosto .eje-chico {
  font-size: 14px;
}
.g.g-angosto .dato,
.g.g-angosto .dato-chico {
  font-size: 15px;
}
.g.g-angosto .nivel {
  font-size: 14px;
}
.clave-franjas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin: 0.4rem 0 1.4rem;
  font-size: 0.84rem;
  color: var(--gris);
}
.clave-franjas > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.clave-franjas .grad {
  width: 6rem;
  height: 12px;
  border-radius: 2px;
}
.clave-franjas .rojo {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.clave-franjas .evac {
  font-weight: 500;
  color: var(--rojo-texto);
}
/* lo que hay dentro de cada gráfico */
.g text {
  font-family: Chivo, system-ui, sans-serif;
  font-weight: 300;
  fill: var(--gris);
}
.g .eje {
  font-size: 13px;
  fill: var(--claro);
  font-variant-numeric: tabular-nums;
}
.g .eje-chico {
  font-size: 13px;
  fill: var(--claro);
}
.g .dato {
  font-size: 14px;
  fill: var(--gris);
}
.g .dato-chico {
  font-size: 13px;
  fill: var(--gris);
}
.g .fuerte {
  font-weight: 600;
  fill: var(--tinta);
}
.g .halo {
  paint-order: stroke fill;
  stroke: var(--papel);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.g .anot {
  font-family: Kalam, 'Comic Sans MS', cursive;
  font-weight: 700;
  font-size: 21px;
}
.g .calor,
.g .anot.calor,
.g .con {
  fill: var(--calor);
}
.g .anot.agua,
.g .agua-t {
  fill: var(--agua);
}
.g .sepia-t {
  fill: var(--sepia);
}
.g .gris-t,
.g .sin {
  fill: var(--claro);
}
.g .grilla {
  stroke: var(--linea);
  stroke-width: 1;
}
.g .cero {
  stroke: #b9bec4;
  stroke-width: 1.2;
}
.g .linea-evac {
  stroke: var(--rojo);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}
.g .linea-alerta {
  stroke: var(--ambar);
  stroke-width: 1.4;
  stroke-dasharray: 2 4;
}
.g .nivel {
  font-size: 13px;
  font-weight: 500;
}
.g .nivel.evac {
  fill: var(--rojo-texto);
}
.g .nivel.alerta {
  fill: var(--ambar-texto);
}
.g .serie {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.g .serie.agua {
  stroke: var(--agua);
  stroke-width: 3;
}
.g .guia {
  stroke: #9aa0a6;
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.g .punto {
  stroke: #fff;
  stroke-width: 2;
}
.g .punto.agua {
  fill: var(--agua);
}
.g .punto.sepia {
  fill: var(--sepia);
}
.g .mano {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.g .mano.calor {
  stroke: var(--calor);
}
.g .area-calor {
  fill: #eba680;
}
.g .area-frio {
  fill: #abc9e3;
}
.g .serie-nino {
  fill: none;
  stroke: #8c3b26;
  stroke-width: 1;
  stroke-linejoin: round;
}
.g .serie-nino.gruesa {
  stroke-width: 2;
}
.g .corte {
  stroke: var(--calor);
  stroke-width: 1.4;
  stroke-dasharray: 7 5;
}
/* el texto de la raya sale al margen solo cuando el margen alcanza (figura de 58rem centrada) */
.g .corte-fuera {
  display: none;
}
@media (min-width: 1240px) {
  .g .corte-fuera {
    display: inline;
  }
  .g .corte-dentro {
    display: none;
  }
}.g .umbral {
  stroke: var(--calor);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  stroke-opacity: 0.7;
}
.g .pronostico {
  fill: none;
  stroke: var(--calor);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}
.g .punto-pron {
  fill: #fff;
  stroke: var(--calor);
  stroke-width: 1.5;
}
.g .pico {
  fill: #8c3b26;
}
.g .pico-anio {
  fill: #b9bec4;
}
.g .pico-anio.con,
.g .pico-anio.sin,
.g .pico-anio.hoy {
  stroke: #fff;
  stroke-width: 1.5;
}
.g .pico-anio.con {
  fill: var(--calor);
}
.g .pico-anio.sin {
  fill: #6f757c;
}
.g .pico-anio.hoy {
  fill: var(--agua);
  stroke-width: 2;
}
.g .pico-hoy {
  fill: var(--calor);
  stroke: #fff;
  stroke-width: 2;
}
.g .region {
  font-size: 15px;
  font-weight: 400;
  fill: var(--tinta);
}
.g .barra.mas {
  fill: #3f74b5;
}
.g .barra.menos {
  fill: var(--ambar);
}
.g .anio {
  fill: #fff;
  stroke: var(--tinta);
  stroke-width: 1.2;
}
.g .valor {
  font-size: 15px;
  font-weight: 600;
  fill: var(--tinta);
}
.g .sup-agua {
  stroke: #6f9bd0;
  stroke-width: 1.5;
}
.g .regla {
  fill: #fbf6e6;
  stroke: #c9b98f;
  stroke-width: 1;
}
.g .tick {
  stroke: #a8946a;
  stroke-width: 1;
}
.g .tick-m {
  stroke: #5a4a2a;
  stroke-width: 1.5;
}
.g .anio-max {
  stroke: #6f757c;
  stroke-width: 1.2;
  stroke-opacity: 0.45;
}
.g .marca {
  fill: none;
  stroke-width: 2;
}
.g .marca.con {
  stroke: var(--calor);
}
.g .marca.sin {
  stroke: #9aa0a6;
}
.g .marca.hoy {
  stroke: var(--agua);
  stroke-width: 2.6;
}
.g .marca-anio {
  font-size: 19px;
}
.g .fuerte-agua {
  fill: var(--agua);
  font-weight: 600;
}
.g .sobre-evac {
  fill: var(--rojo);
  fill-opacity: 0.13;
}
.g .serie-otra {
  fill: none;
  stroke: #c6cace;
  stroke-width: 1.5;
}
.g .serie-83 {
  fill: none;
  stroke: var(--sepia);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.g .serie-26 {
  fill: none;
  stroke: var(--agua);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.g .clave {
  font-size: 14px;
  font-weight: 500;
}
.g .anot.chica {
  font-size: 17px;
}
.g .llave {
  fill: none;
  stroke: var(--sepia);
  stroke-width: 1.4;
}
.g .tick-dest {
  stroke: #8b9096;
  stroke-width: 1;
}

/* los gráficos se dibujan cuando llegan a la pantalla */
@media (prefers-reduced-motion: no-preference) {
  .js .grafico .trazo {
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
  }
  .js .grafico.visto .trazo {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s);
  }
  .js .grafico .trazo.pronostico {
    stroke-dasharray: 5 5;
    stroke-dashoffset: 0;
    opacity: 0;
  }
  .js .grafico.visto .trazo.pronostico {
    opacity: 1;
    transition: opacity 0.9s ease var(--d, 0s);
  }
  .js .grafico .aparece {
    opacity: 0;
  }
  .js .grafico.visto .aparece {
    opacity: 1;
    transition: opacity 0.7s ease var(--d, 0s);
  }
  .js .grafico .crece {
    transform: scaleX(0);
  }
  .js .grafico.visto .crece {
    transform: none;
    transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
  }
  .js .grafico .sube {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: 50% 100%;
  }
  .js .grafico.visto .sube {
    transform: none;
    transition: transform 1.6s cubic-bezier(0.3, 0.6, 0.2, 1) var(--d, 0s);
  }
  .js .grafico .barrido {
    clip-path: inset(0 100% 0 0);
  }
  .js .grafico.visto .barrido {
    clip-path: inset(0 0 0 0);
    transition: clip-path 2.6s cubic-bezier(0.45, 0, 0.25, 1) 0.1s;
  }
  .js .grafico .relleno {
    opacity: 0;
  }
  .js .grafico.visto .relleno {
    opacity: 1;
    transition: opacity 1.2s ease 1.1s;
  }
  .js .grafico .franjas-img {
    clip-path: inset(0 0 100% 0);
  }
  .js .grafico.visto .franjas-img {
    clip-path: inset(0 0 0 0);
    transition: clip-path 2.6s cubic-bezier(0.45, 0, 0.25, 1) 0.2s;
  }
  .js .revela {
    opacity: 0;
    transform: translateY(18px);
  }
  .js .revela.visto {
    opacity: 1;
    transform: none;
    transition:
      opacity 1.2s ease,
      transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bajar span {
    animation: none;
  }
}

/* ---------- video ---------- */
.texto.video {
  padding-bottom: clamp(3rem, 10vh, 7rem);
}
.pantalla {
  max-width: 60rem;
  margin: 2.4rem auto 0;
}
.nota-video {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--claro);
}
.nota-video a {
  color: inherit;
}
.guion {
  margin-top: 2rem;
  font-size: 1rem;
}
.guion summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--agua);
}
.guion ol {
  margin: 1rem 0 0;
  padding-left: 1.4rem;
}
.guion li {
  margin-bottom: 0.7rem;
  line-height: 1.5;
  color: var(--texto);
}
.guion-dato {
  display: block;
  font-size: 0.9rem;
  color: var(--gris);
}
.pantalla video {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #dde2e8;
  box-shadow: 0 22px 60px -30px rgba(20, 40, 70, 0.5);
}

/* ---------- fuentes ---------- */
.fuentes {
  padding: clamp(4rem, 12vh, 8rem) 6vw clamp(3rem, 8vh, 6rem);
  border-top: 1px solid var(--linea);
}
.fuentes p {
  margin: 0 0 1em;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--texto);
}
.lista-fuentes {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7rem 2rem;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}
.lista-fuentes dt {
  font-weight: 600;
}
.lista-fuentes dd {
  margin: 0;
  color: #45494e;
}
@media (max-width: 560px) {
  .lista-fuentes {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lista-fuentes dt {
    margin-top: 1rem;
  }
  .lista-fuentes dt:first-child {
    margin-top: 0;
  }
  .lista-fuentes dd {
    margin-top: 0.2rem;
  }
}

/* ---------- pie ---------- */
.pie {
  padding: 8vh 6vw 12vh;
  text-align: center;
  font-size: 0.9rem;
  color: var(--claro);
}
.pie p {
  margin: 0;
}
.pie-titulo {
  margin-bottom: 0.6rem !important;
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
}