/* Portada del Diccionario Geográfico de Colombia
 *
 * Implementación de Landing.dc.html (Claude Design · «Rediseño de sitio sin buscador»).
 * Vanilla: sin preprocesador, sin utilidades, sin build. Todo color, tamaño, espacio y
 * duración sale de tokens.css; aquí no debería aparecer ni un valor de color escrito
 * a mano.
 *
 * Solo las franjas de esta página. El reinicio, las primitivas y el cromo del sitio
 * —barra del Estado, cabecera y pie— están en base.css, que cargan todas las páginas.
 *
 * macroestructura: héroe con carrusel · cifras · tres entradas · qué es · usos · noticias · normativa · aporte
 * tono: editorial ilustrado · línea gráfica: láminas planas, cobalto / coral / verdes
 */

/* ══ Héroe ══════════════════════════════════════════════════════════════ */
.heroe {
  position: relative;
  min-height: 520px;
  display: grid;
  overflow: hidden;
  /* El azul de las láminas: mientras cargan, el héroe ya está en su color y no
     parpadea de blanco a azul. */
  background: var(--color-cobalto);
  color: var(--color-texto-claro);
  isolation: isolate;
}
.heroe :focus-visible { outline-color: var(--color-foco); }

/* La lámina deja de crecer a partir de --heroe-lamina-max y se ancla a la
   derecha; lo que sobra a la izquierda lo cubre el cobalto de fondo del héroe,
   y el degradado —que vive dentro de esta misma caja— cose la unión sin que se
   vea un canto.
   Dos motivos. Uno: estirar una lámina de 3:2 en una franja de 3840×620 la
   recorta a una tira delgadísima y se desperdicia el dibujo. Dos: cada píxel de
   más es ampliación, que es exactamente lo que la vuelve borrosa. Por debajo
   del tope no cambia nada respecto al boceto. */
.heroe__laminas, .heroe__velo {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(100%, var(--heroe-lamina-max));
}

.heroe__lamina {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* El relevo: un solo ciclo de 25 s con retardos negativos escalonados. Sin
     JavaScript, sin estado, sin nada que se pueda desincronizar. */
  animation: releva var(--dur-carrusel) linear infinite;
}
/* El retardo negativo coloca cada lámina en su turno, en el mismo orden en que
   aparecen en el documento: la 1 entra en 0 s, la 2 a los 5 s, y así cada 5 s
   hasta cerrar la vuelta.
   OJO CON EL SIGNO, que no es intuitivo y ya se hizo mal una vez. Un retardo
   negativo no retrasa: adelanta. Pone la animación arrancada, con -D segundos
   ya corridos, y como el turno de cada lámina está al PRINCIPIO de su ciclo, lo
   que se espera hasta verla es lo que le falta para cerrar la vuelta, o sea
   ciclo − D. Para que la lámina 2 entre a los 5 s hace falta −35 s, no −5.
   Escritos al derecho —2 en −5, 3 en −10…— la vuelta sale invertida: entra la
   1 y después la 8, la 7, la 6, y el indicador de avance camina hacia atrás.
   Pasó el 3 de septiembre de 2026 al pasar de 7 láminas a 8 y se vio al probar
   el enlace de un crédito, no antes. Los tres juegos de retardos de esta hoja
   —lámina, guion y crédito— llevan el mismo signo y el mismo orden.
   object-position centra lo que no se puede perder al recortar: en el héroe la
   franja es ancha y baja, así que lo que sobra se va por arriba y por abajo. */
/* El pescador y la atarraya quedan dentro en cualquier ancho (foto nueva del
   3 de septiembre de 2026; reemplazó a una con menos resolución). */
.heroe__lamina[data-lamina="1"] { object-position: 48% 58%; animation-delay:   0s; }
/* El cráter y su fumarola están por debajo del centro de la lámina. */
.heroe__lamina[data-lamina="2"] { object-position: 50% 55%; animation-delay: -35s; }
/* El domo de granito pierde la cima en cuanto la franja se achata.
   Este comentario decía «los cerros de Mavicure» y no lo son: en el BNNG el
   cerro Mavicure está en 3,45 N / −67,96 W y los registros de la reserva
   Puinawai van de 1,80 a 2,92 N y de −68,95 a −69,41 W, entre 120 y 190 km más
   al sur y en otra cuenca. La lámina es la que publica Parques como Puinawai
   —confirmado con la fuente el 3 de septiembre de 2026—, así que el crédito
   siempre estuvo bien y lo que estaba mal era esta línea. */
.heroe__lamina[data-lamina="3"] { object-position: 50% 25%; animation-delay: -30s; }
/* La única de 3:2 que queda: es la que más pierde por arriba y por abajo.
   Foto nueva del 3 de septiembre de 2026, misma razón que la de arriba. */
.heroe__lamina[data-lamina="4"] { object-position: 50% 45%; animation-delay: -25s; }
/* Foto nueva del 3 de septiembre de 2026, y aquí sí cambió el fotograma, no
   solo la resolución: en el nuevo el mayor está más arriba en el cuadro. Con
   el 40% de antes la franja le cortaba la coronilla, así que baja a 18%: la
   franja del héroe es mucho más ancha que 16:9 y se come una cuarta parte del
   alto, de modo que un asunto que esté cerca del borde superior obliga a pegar
   el encuadre al techo de la lámina. */
.heroe__lamina[data-lamina="5"] { object-position: 52% 18%; animation-delay: -20s; }
.heroe__lamina[data-lamina="6"] { object-position: 50% 45%; animation-delay: -15s; }
.heroe__lamina[data-lamina="7"] { object-position: 50% 48%; animation-delay: -10s; }
/* Las malocas quedan abajo; arriba solo hay cordillera y el cielo del atardecer.
   Foto nueva del 3 de septiembre de 2026, misma razón que las dos de arriba. */
.heroe__lamina[data-lamina="8"] { object-position: 50% 66%; animation-delay:  -5s; }

/* Solo opacity y transform: son las dos únicas propiedades que el navegador
   puede animar sin volver a calcular la maquetación en cada fotograma. */
/* Solo fundido, sin acercamiento.
   El zoom estaba en el boceto y se retira a proposito: transform: scale() sobre
   una imagen a sangre hace que el compositor rasterice la capa una vez y estire
   esa textura por GPU. Emborrona ademas de lo que ya emborrona la ampliacion
   matematica, y aqui la nitidez pesa mas que un acercamiento que casi no se ve.
   Si vuelve algun dia, tiene que escalar HACIA ABAJO desde una caja mayor, nunca
   hacia arriba. */
/* Los porcentajes van en octavos de la vuelta: con 8 láminas cada una manda
   durante el 12,5 % del ciclo. Los tres juegos de fotogramas de esta hoja
   —lámina, guion y crédito— comparten ese reparto, y si el número de láminas
   cambia hay que reescalarlos todos por igual: son N láminas de 5 s cada una,
   así que el ciclo dura 5×N segundos y cada punto de este fotograma es
   (segundos ÷ 5N) × 100. En segundos son 5 s de lámina quieta y 0,6 s de
   fundido de entrada; el de salida es un poco más largo, 0,8 s, para que el
   fundido de la que entra ya esté a medias cuando empieza a irse la anterior. */
@keyframes releva {
  0%          { opacity: 0; }
  1.5%, 12.5% { opacity: 1; }
  14.5%       { opacity: 0; }
  100%        { opacity: 0; }
}

/* En vertical el texto va abajo, así que el velo cae de arriba; en horizontal
   va a la izquierda y el velo entra de lado. */
.heroe__velo {
  background: linear-gradient(180deg,
    var(--cobalto-15) 0%,
    var(--cobalto-75) 42%,
    var(--color-cobalto) 78%);
}

.heroe__interior {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  /* El relleno vertical se mide contra el visor, no contra la escala tipográfica:
     en un portátil de 720 px de alto —un panel 1080p al 150 % de Windows— los
     64 px de arriba y abajo son 128 px que el héroe le está quitando a las cifras.
     En pantalla alta el héroe ya llega a su tope de alto y el centrado manda, así
     que este valor no se nota; solo actúa donde estorba. */
  padding: clamp(var(--esp-6), 5vh, var(--esp-16)) var(--sangria) var(--esp-8);
}

.heroe__dicho {
  display: grid;
  gap: var(--esp-4);
  max-width: 40rem;
}

.heroe__sello {
  justify-self: start;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--crema-38);
  border-radius: var(--radio-pastilla);
  background: var(--crema-18);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.heroe__titulo {
  font-family: var(--fuente-cartel);
  font-weight: var(--peso-negro);
  /* El cartel se medía solo contra el ancho, y por eso en un portátil 16:9 salía
     con el cuerpo de un monitor de escritorio dentro de la mitad de alto: dos
     líneas a 78 px son 153, y ahí empezaba el atasco que dejaba las cifras fuera de
     pantalla. El min() lo ata también al alto —el 9,5 % del visor por línea—, que
     es la dimensión que escasea. En un monitor de 1080 hacia arriba manda el ancho,
     como hasta ahora. */
  font-size: clamp(2.75rem, min(7vw + 0.5rem, 9.5vh), 4.875rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.heroe__bajada {
  font-size: var(--texto-lg);
  line-height: 1.5;
  max-width: 33rem;
  color: var(--crema-90);
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}
.heroe__acciones .boton { flex: 1 1 auto; }

.heroe__creditos {
  position: absolute;
  left: var(--sangria);
  top: var(--esp-4);
  display: flex;
  align-items: center;
  gap: var(--esp-6);
}

/* En vertical no cabe el crédito escrito sin apretar el héroe, así que quedan
   solo los guiones y el texto se va a lector de pantalla. */
.heroe__credito {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  /* El turno del crédito corre desde que carga la página, EN CUALQUIER ANCHO,
     aunque aquí no se vea. Hasta el 19 de septiembre de 2026 la animación solo
     se declaraba dentro de la consulta de escritorio: quien abría la portada en
     angosto y después ensanchaba —girar la tableta, soltar el zoom, estirar la
     ventana— ponía en marcha el reloj del crédito en ese momento, no al cargar,
     y quedaba atrasado respecto de las láminas para el resto de la visita: la
     foto del pueblo wiwa firmada como «Nevado del Ruiz · SGC». Una animación
     arranca cuando se le aplica, no cuando carga el documento. */
  animation: releva-credito var(--dur-carrusel) linear infinite;
}
.heroe__credito[data-lamina="1"] { animation-delay:   0s; }
.heroe__credito[data-lamina="2"] { animation-delay: -35s; }
.heroe__credito[data-lamina="3"] { animation-delay: -30s; }
.heroe__credito[data-lamina="4"] { animation-delay: -25s; }
.heroe__credito[data-lamina="5"] { animation-delay: -20s; }
.heroe__credito[data-lamina="6"] { animation-delay: -15s; }
.heroe__credito[data-lamina="7"] { animation-delay: -10s; }
.heroe__credito[data-lamina="8"] { animation-delay:  -5s; }
@keyframes releva-credito {
  0%,   0.3%  { opacity: 0; visibility: hidden;  }
  0.5%        { opacity: 0; visibility: visible; }
  2.5%, 12%   { opacity: 1; visibility: visible; }
  14%         { opacity: 0; visibility: visible; }
  14.2%, 100% { opacity: 0; visibility: hidden;  }
}
/* En angosto el crédito sigue como estaba: los ocho escritos para el lector de
   pantalla y cada uno visible al recibir el foco. La animación corre solo por su
   reloj; !important es lo único del autor que le gana a una animación. */
@media (max-width: 61.99rem) {
  .heroe__credito { opacity: 1 !important; visibility: visible !important; }
}

/* Aquí dentro hay ahora un enlace a la fuente, y un enlace recortado a 1 px es
   una parada de tabulación invisible: se pulsa Tab, el foco desaparece de la
   pantalla y no hay forma de saber dónde está. Ocho seguidas, justo debajo del
   menú.
   La salida es la misma que usa «Saltar al contenido» en base.css: lo que está
   escondido y puede recibir el foco, al recibirlo se muestra. Así la parada deja
   de ser invisible y de paso el crédito aparece para quien navega con teclado,
   que en vertical no lo tenía de ninguna manera.

   VA DENTRO DE SU PROPIA CONSULTA DE MEDIOS, y no suelta como el resto de este
   bloque, porque solo tiene sentido donde el crédito está escondido. Escrita
   fuera duraba lo que tardaba alguien en pulsar el enlace en escritorio: una
   consulta de medios no añade especificidad, así que .heroe__credito:focus-within
   (0,2,0) le ganaba a la regla de escritorio .heroe__credito (0,1,0) y el
   crédito saltaba fuera de la placa —que quedaba vacía— en cuanto el enlace
   recibía el foco, que es lo que pasa al hacer clic. */
@media (max-width: 61.99rem) {
  .heroe__credito:focus-within {
    position: absolute;
    left: 0;
    top: calc(100% + var(--esp-3));
    width: max-content;
    max-width: calc(100vw - 2 * var(--sangria));
    height: auto;
    margin: 0;
    padding: var(--esp-2) var(--esp-3);
    overflow: visible;
    clip-path: none;
    white-space: normal;
    z-index: 5;
    border-radius: var(--radio-sm);
    background: var(--tinta-72);
    color: var(--color-texto-claro);
    font-size: var(--texto-sm);
    line-height: 1.4;
    text-align: left;
  }
}

/* El enlace a la fuente. Va suelto en su renglón y del ancho de su texto, no del
   de la columna: con display:block a secas, la zona pulsable se estiraba hasta
   el ancho del crédito más largo y se podía hacer clic en un sitio donde no hay
   nada escrito. */
.heroe__fuente {
  width: fit-content;
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-rapida) var(--curva-salida);
}
.heroe__fuente:hover,
.heroe__fuente:focus-visible {
  color: var(--color-texto-claro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* El anillo de foco general va a 3 px de separación y otros 3 de grosor, y aquí
   eso son 6 px de los 12 que la placa deja por debajo: el anillo queda pegado al
   canto. A 2 px de separación respira sin dejar de leerse como el mismo anillo
   del resto del sitio. El redondeo lo hereda de la regla general. */
.heroe__fuente:focus-visible { outline-offset: 2px; }
.heroe__guiones { display: flex; gap: 6px; }
.heroe__guiones span {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--crema-38);
  animation: releva-guion var(--dur-carrusel) linear infinite;
}
.heroe__guiones span[data-lamina="1"] { animation-delay:   0s; }
.heroe__guiones span[data-lamina="2"] { animation-delay: -35s; }
.heroe__guiones span[data-lamina="3"] { animation-delay: -30s; }
.heroe__guiones span[data-lamina="4"] { animation-delay: -25s; }
.heroe__guiones span[data-lamina="5"] { animation-delay: -20s; }
.heroe__guiones span[data-lamina="6"] { animation-delay: -15s; }
.heroe__guiones span[data-lamina="7"] { animation-delay: -10s; }
.heroe__guiones span[data-lamina="8"] { animation-delay:  -5s; }

@keyframes releva-guion {
  0%, 12.5%   { background: var(--color-acento); }
  13%, 100%   { background: var(--crema-38); }
}

/* El carrusel espera a quien esté usando el crédito.
   Desde que el crédito lleva un enlace, quien llega a él con el teclado tiene
   cinco segundos antes de que su turno acabe: el crédito pasa a visibility
   hidden, y con él se va el elemento que tenía el foco. Se pulsa Tab, se lee, y
   a media lectura el foco desaparece sin que nadie lo haya movido.
   Se pausan las tres animaciones a la vez —lámina, crédito y guion— porque
   comparten reloj: pausar solo el crédito lo dejaría escrito sobre la
   fotografía siguiente.
   Con :focus-visible y no :focus, para que un clic de ratón no congele el
   carrusel hasta que a esa persona se le ocurra pulsar en otro sitio. */
.heroe:has(.heroe__fuente:focus-visible) .heroe__lamina,
.heroe:has(.heroe__fuente:focus-visible) .heroe__credito,
.heroe:has(.heroe__fuente:focus-visible) .heroe__guiones span {
  animation-play-state: paused;
}

/* ══ Cifras ═════════════════════════════════════════════════════════════ */
.cifras { background: var(--color-fondo-hondo); color: var(--color-texto-claro); }
.cifras :focus-visible { outline-color: var(--color-foco); }

/* Seis cifras en dos pesos, no seis cajas iguales. Las dos grandes —nombres y
   registros— son lo que el Diccionario describe; las cuatro menudas son el
   territorio que cubre. El peso lo dan dos cosas a la vez: el cuerpo y el color.
   Solo las grandes van en amarillo; las menudas van en crema, que sobre el azul
   hondo se lee igual de bien pero no compite. Sin cartas ni fondos: el reparto
   lo hace la rejilla y un filete.

   En el teléfono, dos columnas y el orden del documento: las dos grandes arriba
   y las cuatro menudas debajo en dos filas. */
.cifras__lista {
  list-style: none;
  margin: 0;
  padding: clamp(var(--esp-4), 3vh, var(--esp-6)) var(--sangria);
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6);
}
.cifra { display: grid; gap: var(--esp-1); align-content: start; }
/* El territorio es una sublista dentro de la lista: cuatro cifras que forman
   un grupo, y así lo anuncia también un lector de pantalla. En el teléfono ocupa
   las dos columnas de la franja y reparte las suyas igual, dos a dos. */
.cifras__territorio { grid-column: 1 / -1; }
.cifras__pares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6);
}
.cifra__valor {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-negro);
  font-size: var(--texto-xl);
  line-height: 1;
  /* Un numeral de cartel se compone cerrado, como el titular del héroe. A este
     cuerpo el espacio normal entre cifras abre huecos entre el 1 y el punto. */
  letter-spacing: -0.02em;
  color: var(--color-texto-claro);
  font-variant-numeric: tabular-nums;   /* las cifras no bailan al actualizarse */
}
.cifra--grande .cifra__valor {
  font-size: var(--texto-2xl);
  color: var(--color-acento);
}
/* El nombre a --texto-sm mientras la franja va a dos columnas: en un teléfono de
   375 px cada columna mide 160 y a 16 px «Nombres geográficos descritos» se
   partía en tres líneas. A 14 px cabe en dos. En escritorio, con más columna,
   el de las grandes sube a --texto-md. */
.cifra__dice {
  margin-top: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  line-height: 1.3;
  color: var(--color-texto-claro);
}
.cifra--menuda .cifra__dice {
  margin-top: 0;
  font-weight: var(--peso-normal);
  color: var(--crema-75);
}
/* Sin tope de medida propio: la columna ya la acota. Se probó con 26ch y en
   escritorio partía una nota en tres líneas, que son los 14 px que dejaban la
   franja cortada por el pliegue en un visor de 720. */
.cifra__nota {
  font-size: var(--texto-sm);
  line-height: 1.45;
  color: var(--crema-75);
}

/* ══ Tres entradas ══════════════════════════════════════════════════════ */
.entradas { padding-block: var(--esp-16); }

.entradas__encabezado {
  display: grid;
  gap: var(--esp-6);
  margin-bottom: var(--esp-8);
}
.entradas__titulo {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-negro);
  max-width: 20ch;
}
.puertas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-6);
}

.puerta__enlace {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: oklch(100% 0 0);
  border: var(--trazo);
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-texto);
  transition: border-color var(--dur-rapida) var(--curva-salida),
              box-shadow   var(--dur-media)  var(--curva-salida);
}
.puerta__enlace:hover {
  border-color: var(--color-cobalto);
  box-shadow: var(--sombra-tarjeta);
  color: var(--color-texto);
}
.puerta__enlace:focus-visible { outline-offset: 2px; }

.puerta__lamina {
  display: block;
  height: 132px;
  overflow: hidden;
  background: var(--color-cobalto);
  position: relative;   /* la caja de referencia del revelado */
}
.puerta__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  /* La opacidad solo la usa el revelado; en la foto de base es inerte. Va en la
     misma declaración para que las dos capas se acerquen con el mismo tiempo y
     la misma curva: si el revelado tuviera su propia transición abreviada,
     perdería la de transform y su acercamiento daría un salto. */
  transition: transform var(--dur-media) var(--curva-salida),
              opacity   var(--dur-media) var(--curva-salida);
}

/* La segunda fotografía, encima de la primera y apagada. No lleva object-position
   propio a propósito: hereda el de su tarjeta, y las tres están comprobadas en
   ese encuadre. */
.puerta__revelo {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.puerta__enlace:hover .puerta__revelo,
.puerta__enlace:focus-visible .puerta__revelo { opacity: 1; }
/* La lámina se agranda un pelo al señalarla. Solo transform: animar alto o ancho
   obliga al navegador a recalcular la página en cada fotograma.
   Este 1.06 es también el punto del que sale la lámina al entrar la sección
   (js/puertas.js): la entrada y el hover son el mismo gesto en dos sentidos. Si
   cambia aquí, cambia allá. */
.puerta__enlace:hover .puerta__lamina img,
.puerta__enlace:focus-visible .puerta__lamina img { transform: scale(1.06); }

/* Mientras dura la entrada, el motor de animación escribe un transform nuevo en
   cada fotograma y esta transición intentaría interpolar hacia un blanco que ya
   se movió: se ve pastoso. La clase la pone y la quita puertas.js, y solo
   existe durante esos 510 ms. */
.puertas--entrando .puerta__lamina img { transition: none; }

/* Los encuadres salen del diseño: cada lámina tiene su asunto en un sitio
   distinto y un centrado automático los decapitaría. */
/* El 60% de antes le cortaba la coronilla al mayor con el fotograma nuevo de
   Bordoncillo, igual que pasaba en el héroe. Aquí el recorte es mucho menor
   —la tarjeta es 2,05:1 contra 1,78 de la lámina, unos 30 px de sobra— pero
   basta para decapitarlo, que es justo lo que este bloque de reglas existe
   para evitar. */
.puerta:nth-child(1) .puerta__lamina img { object-position: 44% 30%; }
.puerta:nth-child(2) .puerta__lamina img { object-position: 50% 42%; }
.puerta:nth-child(3) .puerta__lamina img { object-position: 56% 55%; }

.puerta__ficha {
  display: grid;
  align-content: start;
  gap: var(--esp-3);
  padding: var(--esp-6) var(--sangria);
}
.puerta__nombre {
  font-family: var(--fuente-titular);
  font-size: var(--texto-xl);
  font-weight: var(--peso-negro);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.puerta__dice {
  font-size: var(--texto-md);
  line-height: 1.55;
  color: var(--color-texto-suave);
}
.puerta__cifra {
  margin-top: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-cobalto);
}
.puerta__cifra b { font-variant-numeric: tabular-nums; }

/* ══ Qué es ═════════════════════════════════════════════════════════════ */
/* Sin fondo propio desde el 15 de septiembre de 2026. Iba en crema
   (--color-fondo-crema) para marcar el cambio de franja, y junto al cobalto y
   al papel se leía amarillento: el usuario lo quitó de aquí y de las noticias.
   Lo que separa ahora las franjas claras seguidas —módulos, qué es, para qué
   sirve y noticias— es un filete al ancho del contenedor y el mismo aire de
   arriba. Ver «Franjas claras seguidas», al final de las secciones. */
.quees { padding-block: var(--esp-16); }
.quees__interior {
  display: grid;
  gap: var(--esp-12);
  align-items: start;
}
.quees__titulo {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-negro);
  margin-bottom: var(--esp-6);
}
.quees__texto p { max-width: 40rem; font-size: var(--texto-lg); line-height: 1.65; color: var(--azul-800); }
.quees__texto p + p { margin-top: var(--esp-6); }

.ficha {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-8);
  /* Blanco y no papel: sin el crema detrás, una ficha en papel sobre papel solo
     se distinguía por el borde. Es el mismo blanco de las tres puertas. */
  background: oklch(100% 0 0);
  border: var(--trazo);
  border-radius: var(--radio-lg);
}
.ficha__titulo { font-size: var(--texto-lg); font-weight: var(--peso-fuerte); }
.ficha__dice { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.ficha__filo { width: 100%; height: 1px; margin: 0; border: 0; background: var(--color-borde); }
.ficha__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.ficha__enlace::after { content: " →"; white-space: pre; }
.ficha__enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Video institucional ────────────────────────────────────────────────
   La caja de YouTube tal cual, dentro de la ficha «Cómo se mantiene». Sin pie
   ni envoltorio propio: el reproductor ya dice qué es y lleva su título en el
   atributo, que es de donde lo toma un lector de pantalla. */
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radio-md);
  display: block;
  background: var(--azul-900);
}

/* ══ Para qué sirve ═════════════════════════════════════════════════════
   La sección más grande del cuerpo, y a propósito: es la que responde a la
   pregunta con la que llega casi todo el mundo —qué puedo hacer yo aquí—. Antes
   pesaba lo mismo que cualquier otra franja y se leía como una nota al pie. */
.usos { padding-block: var(--esp-24); }
.usos__titulo {
  font-size: var(--texto-3xl);
  font-weight: var(--peso-negro);
  margin-bottom: var(--esp-12);
  max-width: 20ch;
}
.usos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-12);
}
.uso {
  display: grid;
  gap: var(--esp-4);
  align-content: start;
}

/* El filete era un border-top y ahora es un elemento. El motivo es que se pueda
   dibujar: el ancho de un borde no se anima sin rehacer la maquetación en cada
   fotograma, y un bloque con scaleX sí, que el navegador lo compone sin tocar el
   flujo. De paso engorda de 3 a 6 px, que a este tamaño de sección se lee como
   un trazo y no como una raya. */
.uso__filete {
  height: 6px;
  border-radius: 3px;
  background: var(--color-borde);
  transform-origin: left center;
}

.uso h3 {
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
}
.uso p  {
  color: var(--color-texto-suave);
  font-size: var(--texto-md);
  line-height: 1.65;
}

/* Los cuatro filetes recorren la línea gráfica completa: cobalto, verde,
   amarillo y coral. No codifican estado, solo ordenan la lectura. */
.uso--cobalto  .uso__filete { background: var(--color-cobalto); }
.uso--verde    .uso__filete { background: var(--verde-hondo); }
.uso--amarillo .uso__filete { background: var(--color-acento); }
.uso--coral    .uso__filete { background: var(--coral); }

/* ── Entrada de los cuatro usos ──────────────────────────────────────────
   No hay nada de la animación en esta hoja, y es a propósito. La mueve anime.js
   desde js/usos.js, atada al scroll.

   Lo que importa aquí es lo que NO está: ninguna regla pone opacity: 0. Si el
   JavaScript no llega —anime.js son 82 KB de petición aparte, y en la red de una
   entidad pública eso puede fallar—, las cuatro tarjetas se pintan enteras y sin
   animación. Lo contrario, ocultar en CSS y confiar en que el script revele, deja
   la sección en blanco el día que no llega.

   Antes esto se hizo dos veces sin librería: con animation-timeline: view() y
   con IntersectionObserver más fotogramas CSS. Las dos funcionaban; se sustituyen
   por encargo. La curva que usa anime.js es cubicBezier(0.16, 0.84, 0.44, 1),
   que es --curva-salida escrita en la sintaxis de la librería: comprobado
   fotograma a fotograma que da los mismos valores. */

/* ══ Aporte ciudadano ═══════════════════════════════════════════════════ */
.aporte {
  display: grid;
  background: var(--color-cobalto);
  color: var(--color-texto-claro);
}
.aporte :focus-visible { outline-color: var(--color-foco); }

/* La franja va a sangre, pero su texto tiene que arrancar en la misma vertical
   que el resto de la página. De ahí el max(): el canto interior del contenedor
   centrado cuando la pantalla es ancha, y la sangría normal cuando no lo es. */
.aporte__dicho {
  display: grid;
  gap: var(--esp-4);
  align-content: center;
  justify-items: start;
  padding-block: var(--esp-12);
  padding-inline-start: max(var(--sangria), calc(50vw - var(--ancho-maximo) / 2 + var(--sangria)));
  padding-inline-end: var(--sangria);
}
.aporte__titulo {
  font-family: var(--fuente-cartel);
  font-weight: var(--peso-negro);
  font-size: var(--texto-2xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.aporte__bajada {
  font-size: var(--texto-lg);
  line-height: 1.55;
  max-width: 32rem;
  color: var(--crema-90);
}
/* El hueco de la lámina guarda la proporción del archivo —1672 × 941—, no un alto
   inventado. La diferencia no es de estilo: con un alto fijo, el recorte de
   object-fit lo decide la casualidad de cuánto mide la columna ese día. Con la
   proporción nativa el recorte es siempre el mismo y es el que se eligió.
   En un teléfono de 390 px de ancho da 219 px de alto, que es exactamente el 220
   que estaba escrito a mano: la regla no cambia lo que se veía, lo explica. */
.aporte__lamina {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1672 / 941;
}
.aporte__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
/* El ave se funde con el fondo de la franja por el lado del texto, para que no
   quede un corte recto entre la ilustración y el azul plano. */
.aporte__lamina::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--color-cobalto) 0%,
    var(--cobalto-50) 10%,
    var(--cobalto-00)  34%);
}

/* ══ Noticias ═══════════════════════════════════════════════════════════
   Las cinco noticias del documento de la Dirección, de la más reciente a la
   más antigua, cada una en su tarjeta. Entraron el 15 de septiembre de 2026
   junto con la franja de normativa, entre «Para qué sirve» y el llamado a
   aportar: la portada cuenta qué es, para qué sirve, qué ha pasado y con qué
   respaldo, y el aporte sigue cerrando.

   Una tira y no una lista, a propósito: está pensada para ir sumando noticias
   sin rehacer nada. Cada noticia es un <li> con la misma anatomía —año, título,
   dos líneas y, si lo hay, el enlace al documento—, y añadir una es copiar un
   bloque. Es un carrusel a cualquier ancho: la tira se desplaza de lado, con
   encaje por tarjeta y dos flechas que noticias.js enseña solo cuando
   desborda. Hubo una rejilla fija de cinco en pantalla ancha y el usuario la
   devolvió el mismo día, porque quería el carrusel de la maqueta. Con más
   noticias la tira crece sin cambiar de alto; pasadas las ocho, conviene un
   tope en la portada y una página de archivo.

   La primera tarjeta va en cobalto: es la noticia de la Base misma, la que
   trae las cifras. Esas dos cifras llevan data-indicador y las repinta
   cifras.js con el dato del servicio, igual que en la franja de arriba, así
   que la noticia no envejece aunque el texto diga 2026. El documento traía
   95.256 nombres; el HTML lleva el último valor conocido del servicio, que es
   el que manda desde 2024 (ver la memoria del proyecto). */
.noticias {
  padding-block: var(--esp-16);
  /* La tira se sale del contenedor por los lados para que las tarjetas lleguen
     al canto de la pantalla al desplazarse; esto evita que asome una barra
     horizontal en la página. */
  overflow: hidden;
}
.noticias :focus-visible { outline-color: var(--color-foco); }
.noticias__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--esp-4) var(--esp-8);
  margin-bottom: var(--esp-8);
}
.noticias__titulo {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-negro);
}
.noticias__bajada {
  margin-top: var(--esp-3);
  font-size: var(--texto-lg);
  line-height: 1.55;
  color: var(--azul-800);
  max-width: 40ch;
}
/* Las flechas: 44 px pulsables, redondas, con el trazo en tinta. Ocultas por
   [hidden] hasta que noticias.js mida que la tira desborda, y ocultas siempre
   en pantalla ancha, donde las cinco caben y no hay nada que recorrer. */
.noticias__mandos { display: flex; gap: var(--esp-2); }
.noticias__mando {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-borde-firme);
  border-radius: 50%;
  background: var(--color-fondo);
  color: var(--color-texto);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--curva-salida),
              background   var(--dur-rapida) var(--curva-salida);
}
.noticias__mando:hover { border-color: var(--color-cobalto); background: var(--azul-100); }
.noticias__mando:disabled { opacity: 0.4; cursor: default; }
.noticias__mando:disabled:hover { border-color: var(--color-borde-firme); background: var(--color-fondo); }

/* La tira: rejilla en columnas que se desplaza de lado. El relleno lateral es
   la sangría del contenedor, compensada con margen negativo, para que la
   primera tarjeta arranque en la vertical del título y la última pueda llegar
   al canto. El relleno de abajo deja sitio a la barra de desplazamiento sin
   que roce las tarjetas. */
.noticias__tira {
  list-style: none;
  margin: 0 calc(-1 * var(--sangria));
  padding: var(--esp-1) var(--sangria) var(--esp-6);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(22rem, 82%);
  gap: var(--esp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sangria);
  scrollbar-width: thin;
  scrollbar-color: var(--color-borde-firme) transparent;
}
.noticia {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--esp-3);
  padding: var(--esp-6);
  background: oklch(100% 0 0);
  border: var(--trazo);
  border-radius: var(--radio-lg);
  transition: border-color var(--dur-rapida) var(--curva-salida),
              box-shadow   var(--dur-media)  var(--curva-salida);
}
.noticia:hover { border-color: var(--color-cobalto); box-shadow: var(--sombra-tarjeta); }
.noticia--principal {
  background: var(--color-cobalto);
  border-color: var(--color-cobalto);
  color: var(--color-texto-claro);
}
.noticia--principal:hover { border-color: var(--color-cobalto); }
.noticia__anio {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-negro);
  font-size: var(--texto-2xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-cobalto);
}
.noticia--principal .noticia__anio { color: var(--color-acento); }
.noticia__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  text-wrap: balance;
}
.noticia__dice {
  font-size: var(--texto-sm);
  line-height: 1.5;
  color: var(--color-texto-suave);
}
.noticia--principal .noticia__dice { color: var(--crema-90); }
/* Las cifras de la noticia principal, en titular y amarillo: son las mismas
   de la franja de arriba y se visten igual. */
.noticia--principal .noticia__dice b {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-negro);
  font-size: 1.1em;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-acento);
}
/* Protagonismo de la principal: desde 48rem ocupa dos columnas de la tira, con el año y
   el título a un lado y el texto al otro. A una sola columna, el texto más grande la hacía
   tan alta que las demás tarjetas, que se estiran a su alto, quedaban medio vacías. En
   celular conserva el ancho de las demás, para que el carrusel siga enseñando que hay más
   tarjetas a la derecha. */
@media (min-width: 48rem) {
  .noticia--principal {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr auto;
    gap: var(--esp-3) var(--esp-8);
    padding: var(--esp-8);
  }
  .noticia--principal .noticia__anio { grid-column: 1; grid-row: 1; font-size: var(--texto-3xl); }
  .noticia--principal .noticia__titulo { grid-column: 1; grid-row: 2; font-size: var(--texto-xl); }
  .noticia--principal .noticia__dice { grid-column: 2; grid-row: 1 / 3; font-size: var(--texto-md); line-height: 1.6; }
  .noticia--principal .noticia__dice b { font-size: 1.25em; line-height: 1; }
  .noticia--principal .noticia__enlace { grid-column: 2; grid-row: 3; font-size: var(--texto-md); }
}
.noticia__docs { display: flex; flex-wrap: wrap; gap: 0 var(--esp-4); align-self: end; }
.noticia__enlace {
  align-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.noticia__enlace::after { content: " →"; white-space: pre; }
/* Enlace que sale del sitio y abre otra pestaña: la flecha cambia a ↗. Es la marca que
   se ve; lo que oye el lector de pantalla es el texto de .solo-lectura dentro del enlace,
   así que la flecha no se anuncia (texto alternativo vacío tras la barra). */
.noticia__enlace[target="_blank"]::after { content: " ↗" / ""; }
/* El aviso oculto va en posición absoluta: sin un contenedor propio se ubica respecto de la
   página, se sale del carrusel de noticias y abre desborde horizontal. */
.noticia__enlace[target="_blank"], .norma { position: relative; }
.noticia__enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.noticia--principal .noticia__enlace { color: var(--color-texto-claro); }
.noticia--principal .noticia__enlace:hover { color: var(--color-acento); }

/* ══ Marco normativo ════════════════════════════════════════════════════
   Las doce normas, estándares y procedimientos del documento de la Dirección,
   en cuatro bloques plegables, sobre el azul hondo de la franja de cifras.
   Propuesta C con la variante honda, elegidas por el usuario el 15 de
   septiembre de 2026: la página queda enmarcada por las dos bandas oficiales,
   las cifras al principio y la norma al final, y las franjas claras de en
   medio van sin fondo.

   Compacta a propósito, y medida. El título y la frase arriba, y el acordeón a
   todo el ancho: cada bloque reparte sus normas en filas que se llenan solas
   (flex con base de 17rem), así que a 1400 px de visor cada bloque es UNA fila
   —tres, tres, cuatro y dos tarjetas—. Con todos los bloques abiertos la franja
   mide 969 px, contra 1.072 de la versión a dos columnas.
   Se probó antes con el título en una columna a la izquierda y las normas a
   dos columnas: la columna quedaba vacía bajo el título y cada bloque ocupaba
   dos o tres filas. Con flex no queda hueco nunca: la última tarjeta de una
   fila incompleta se estira hasta el canto, así que un bloque puede crecer o
   encoger sin tocar esta hoja. En el teléfono va una por fila.

   Por defecto solo va abierto «Constitución y leyes», que trae la Ley 1447, y los
   otros tres bloques plegados: lo pidió el usuario el 15 de septiembre de 2026,
   después de verlos todos abiertos. Es <details> nativo: se abre sin JavaScript
   y un lector de pantalla anuncia el estado. Para cambiar cuál arranca abierto
   basta con mover el atributo open en el marcado.

   Un bloque nuevo es un details.normas más; una norma nueva, un a.norma más
   dentro del suyo. La cuenta del <small> va a mano: son doce enlaces y
   calcularla por script sería más maquinaria que dato.

   El documento traía trece filas; dos eran el mismo procedimiento PC-GEG-09
   con el mismo PDF, y aquí van fundidas. */
.normativa {
  background: var(--color-fondo-hondo);
  color: var(--color-texto-claro);
  padding-block: var(--esp-12);
}
.normativa :focus-visible { outline-color: var(--color-foco); }
.normativa__interior { display: grid; gap: var(--esp-6); }
.normativa__cabeza { display: grid; gap: var(--esp-3); align-content: start; }
.normativa__titulo {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-negro);
  color: var(--color-texto-claro);
}
.normativa__dice {
  font-size: var(--texto-md);
  line-height: 1.55;
  color: var(--crema-75);
  max-width: 60ch;
}

/* El acordeón: trazo amarillo arriba, que es el acento del sistema y el único
   color fuerte de la franja; filete crema translúcido entre bloques. */
.normativa__acordeon { display: grid; border-top: 2px solid var(--color-acento); }
.normas { border-bottom: 1px solid var(--crema-18); }
.normas__titulo {
  list-style: none;
  cursor: pointer;
  display: grid;
  /* minmax(0, 1fr) y no 1fr: el título no puede empujar la cuenta ni la cruz
     fuera de la franja por larga que sea una palabra. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--esp-3);
  align-items: center;
  min-height: 44px;
  padding-block: var(--esp-2);
  font-family: var(--fuente-titular);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-claro);
  transition: color var(--dur-rapida) var(--curva-salida);
}
.normas__titulo::-webkit-details-marker { display: none; }
.normas__titulo:hover { color: var(--color-acento); }
.normas__titulo small {
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-75);
}
/* El «+» que gira a «×» al abrir. Solo transform: se compone sin tocar el flujo.
   Caja cuadrada de 1em con un cuarto de em de margen: girada 45° mide 1,41em de
   diagonal y, sin el margen, sobresalía 7 px del borde de la franja a 390 px
   (medido con scrollWidth en los cuatro bloques). */
.normas__titulo::after {
  content: "+";
  width: 1em;
  height: 1em;
  margin-inline-end: 0.25em;
  text-align: center;
  font-family: var(--fuente-texto);
  font-weight: var(--peso-normal);
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-acento);
  transition: transform var(--dur-media) var(--curva-salida);
}
.normas[open] .normas__titulo::after { transform: rotate(45deg); }
.normas__cuerpo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  padding-bottom: var(--esp-4);
}
/* Cada norma es un enlace entero: nombre y tipo arriba, la línea de para qué
   sirve debajo. Tarjeta en el azul del texto sobre crema (--azul-800), un
   escalón por encima del fondo hondo, sin transparencias: el crema translúcido
   no está en los tokens y un color sólido no depende de lo que haya detrás. */
.norma {
  /* 17rem de base: a 1400 px caben cuatro por fila, a 1000 px tres y en un
     teléfono una. Crece hasta llenar la fila y no encoge por debajo de la base. */
  flex: 1 1 17rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--esp-1) var(--esp-3);
  align-items: baseline;
  align-content: start;
  padding: var(--esp-3) var(--esp-4);
  background: var(--azul-800);
  border: 1px solid var(--crema-14);
  border-radius: var(--radio-md);
  text-decoration: none;
  color: var(--color-texto-claro);
  transition: border-color var(--dur-rapida) var(--curva-salida);
}
.norma:hover { border-color: var(--color-acento); color: var(--color-texto-claro); }
.norma__nombre { font-weight: var(--peso-fuerte); font-size: var(--texto-md); line-height: 1.3; }
.norma__nombre::after { content: " ↗" / ""; white-space: pre; color: var(--color-acento); }
.norma:hover .norma__nombre { text-decoration: underline; text-underline-offset: 3px; }
.norma__tipo {
  justify-self: end;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: var(--radio-sm);
  background: var(--crema-14);
  color: var(--color-acento);
  white-space: nowrap;
}
.norma__dice {
  grid-column: 1 / -1;
  font-size: var(--texto-sm);
  line-height: 1.45;
  color: var(--crema-75);
}

/* ── Franjas claras seguidas ─────────────────────────────────────────────
   Módulos, qué es, para qué sirve y noticias van sobre el mismo papel. Cada
   una, salvo la primera, arranca con un filete al ancho del contenedor: el
   relleno de arriba se muda de la sección al contenedor para que el filete
   quede pegado al canto y el aire vaya debajo de él. Los módulos no llevan:
   vienen después de la franja honda de cifras, que ya marca el corte. */
.quees, .usos, .noticias { padding-top: 0; }
.quees > .contenedor,
.usos > .contenedor,
.noticias > .contenedor {
  border-top: var(--trazo);
  padding-top: var(--esp-16);
}
.usos > .contenedor { padding-top: var(--esp-24); }

/* ── Entrada de las dos franjas ──────────────────────────────────────────
   Como en «Para qué sirve»: nada de la animación vive aquí. La mueven
   noticias.js y normativa.js con anime.js, creada al entrar, y ninguna regla
   pone opacity: 0: si el script no llega, las dos franjas se pintan enteras. */

/* ══ Pantallas medianas ═════════════════════════════════════════════════ */
@media (min-width: 48rem) {
  .usos__lista    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .puertas        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .puerta__lamina { height: 200px; }
}

/* ══ Escritorio ═════════════════════════════════════════════════════════
   62rem = 992 px. Por encima de aquí cabe el menú completo y el héroe pasa
   de tener el texto abajo a tenerlo al costado. */
@media (min-width: 62rem) {


  /* El héroe se mide contra lo que queda de pantalla, no contra un número suelto.
     620 px es su alto de diseño y sigue siendo el techo: en un monitor de 1080
     hacia arriba nada cambia. Lo que cambia es el portátil —un panel 1080p al
     150 % de Windows deja un visor de 720 px de css—, donde 119 px de cromo más
     620 de héroe dejaban la franja de cifras entera del otro lado del pliegue.
     Restando el cromo y el alto de la franja, las cuatro cifras entran con el
     héroe, que es el orden en que hay que leerlas.
     El suelo de 22rem es la medida por debajo de la cual el titular a dos líneas y
     los dos botones ya no respiran; por debajo de ahí vuelve a haber pliegue, y es
     preferible eso a un héroe aplastado. Bajó de 26 a 22rem cuando el titular pasó
     a medirse también contra el alto: con 9,5vh por línea el bloque cabe en menos,
     y el suelo anterior era el que dejaba las cifras cortadas en un visor de 660. */
  .heroe {
    /* Lo que hay que reservarle a la franja de cifras, escrito con su misma
       fórmula de relleno para que las dos se muevan juntas: si mañana cambia el
       relleno de .cifras__lista, cambia aquí. Los 8rem son el alto de la cifra más
       alta de la franja: la de registros, con su nombre a dos líneas y su nota;
       medida, 7,9rem. Eran 7,5 con cuatro cifras de una fila. */
    --cifras-h: calc(2 * clamp(var(--esp-4), 3vh, var(--esp-8)) + 8rem);
    min-height: clamp(22rem, calc(100svh - var(--cromo-h) - var(--cifras-h)), 620px);
  }
  /* En escritorio el logotipo ya está a la vista, arriba, junto al menú. */
  .heroe__sello { display: none; }
  .heroe__lamina[data-lamina="1"] { object-position: 48% 62%; }
  .heroe__lamina[data-lamina="2"] { object-position: 55% 55%; }

  .heroe__velo {
    background: linear-gradient(100deg,
      var(--color-cobalto) 0%,
      var(--cobalto-94) 34%,
      var(--cobalto-55) 50%,
      var(--cobalto-00)    66%);
  }

  .heroe__interior { align-items: center; padding-block: clamp(var(--esp-6), 5vh, var(--esp-16)); }
  .heroe__dicho    { gap: clamp(var(--esp-3), 2.4vh, var(--esp-6)); }
  .heroe__acciones .boton { flex: 0 0 auto; }

  .heroe__creditos {
    left: auto;
    top: auto;
    /* Al canto de la página, no al del contenedor centrado. Iba alineada con la
       columna de texto —max(sangría, 50% − ancho-máximo/2 + sangría)—, que en
       un monitor ancho la metía 76 px hacia dentro y le robaba a la placa el
       aire que necesitan los topónimos largos. La lámina es de ancho completo,
       así que la referencia honesta aquí es el margen de la página: la firma va
       al pie de la fotografía, no de la columna. */
    right: var(--sangria);
    bottom: var(--esp-6);
    /* Rejilla de dos columnas: los créditos van todos en la primera celda,
       apilados uno encima de otro, y los guiones en la segunda, al costado.
       Apilar con la misma celda y no con position:absolute mantiene la fila
       midiéndose sola, así que el crédito más largo define el ancho y nada
       se solapa.
       La placa es ancha y baja a propósito: es una firma al pie de la lámina,
       y apilar los guiones debajo del texto la volvía una pastilla alta que
       competía con el héroe. Se probó apilada el 3 de septiembre de 2026 y se
       devolvió el mismo día.
       El tope de 34rem en el crédito sigue para que el departamento más largo
       quepa sin partirse en dos líneas.
       fit-content y no minmax(0, 34rem): esta caja se posiciona con right y
       bottom, así que su ancho lo decide el contenido, y bajo esa medida un
       minmax con tope fijo se planta directamente en el tope —medido: 544 px de
       pista para un texto de 455—. fit-content mide el contenido y solo se topa
       si se pasa, que es lo que hace falta para que la placa no sea más ancha
       que el crédito más largo. */
    display: grid;
    grid-template-columns: fit-content(34rem) auto;
    align-items: center;
    column-gap: var(--esp-6);

    /* La placa. El crédito y los guiones van sobre la ilustración desnuda —el
       velo ya no llega hasta aquí— y sin ella dependen de qué haya detrás: se
       leen sobre el agua oscura del manglar y desaparecen sobre la nieve del
       Nevado. Con la placa el contraste ya no depende de la lámina.
       Va del ancho del crédito más largo y no del de turno: una placa que
       cambiara de tamaño cada 7 segundos llamaría más la atención que el
       propio héroe.
       El relleno era 8/16 px y con los topónimos largos el texto quedaba
       tocando el borde redondeado. A 12/24 —los dos escalones siguientes de la
       escala, sin inventar un valor intermedio— la pastilla respira. */
    padding: var(--esp-3) var(--esp-6);
    border-radius: var(--radio-pastilla);
    background: var(--tinta-72);
  }
  /* Aquí sí cabe escrito: los ocho se turnan con el mismo ciclo que las láminas.
     Sube de --texto-sm a --texto-md y de --crema-85 a crema entero. Eran 14 px
     translúcidos sobre una ilustración: el tamaño mínimo del sistema, con el
     color más flojo, encima del fondo menos previsible que hay en la página.
     Las tres cosas a la vez. Ahora son 16 px opacos sobre la placa. */
  .heroe__credito {
    grid-area: 1 / 1;
    position: static;
    width: auto; height: auto;
    margin: 0;
    clip-path: none;
    white-space: normal;
    text-align: right;
    font-size: var(--texto-md);
    color: var(--color-texto-claro);
    opacity: 0;
  }
  /* La fuente va debajo del topónimo, en su propio renglón y en tinta más
     floja: es la firma, no el dato que ubica el lugar. En lector de pantalla
     no se separa —el párrafo se lee corrido, «…Magdalena IGAC · ACT»—, que
     sigue siendo honesto aunque no lea tan bien como se ve. */
  .heroe__fuente {
    display: block;
    /* Del ancho de su texto y pegada al canto derecho, no estirada por la
       columna: la zona pulsable coincide con lo que se ve escrito. */
    margin: 2px 0 0 auto;
    font-size: var(--texto-xs);
    font-weight: 400;
    color: var(--crema-75);
  }
  .heroe__guiones { grid-area: 1 / 2; }

  /* Escritorio angosto: la placa ancha no cabe al lado de los botones.
     Las dos cajas se acercan a distinto ritmo: la placa va pegada al canto
     derecho, así que su borde izquierdo avanza casi tan rápido como el visor,
     y los botones van pegados al izquierdo y solo se mueven lo que crece la
     sangría. El aire entre ambas gana algo menos de 1 px por cada píxel de
     visor. Medido con la placa en 706 px: 14 px de aire a 1.232, 79 a 1.300 y
     136 a 1.360; por debajo de ~1.218 se cruzan, y a 992 el crédito se monta
     encima de «Ver el mapa del BNNG». El corte va en 79rem (1.264 px), donde
     hay unos 45 px de aire —y deja del lado ancho los 1.280 de la mayoría de
     los portátiles—. Si cambia el relleno de la placa, el ancho del crédito
     más largo o el de los botones, este número hay que volver a medirlo.
     Por debajo no hay pista para una sola fila: el texto tendría que bajar a
     unos 155 px de ancho para que la placa entrara al lado del botón. Así que
     ahí, y solo ahí, los guiones pasan a su propio renglón: la placa se vuelve
     alta y angosta, pero cabe. */
  @media (max-width: 78.99rem) {
    .heroe__creditos {
      grid-template-columns: fit-content(34rem);
      grid-template-rows: auto auto;
      justify-items: end;
      align-items: initial;
      column-gap: 0;
      row-gap: var(--esp-2);
    }
    .heroe__guiones { grid-area: 2 / 1; }
  }

  /* El crédito entra un pelo después que su lámina y se va un pelo antes: así
     nunca hay dos leyéndose a la vez durante el cruce de fundidos.
     ── Y la visibilidad, que aquí no es un adorno ──────────────────────────
     Los ocho créditos comparten la celda 1/1 de la rejilla, apilados. opacity:0
     NO saca un elemento de la zona de clics ni del orden de tabulación: solo lo
     hace transparente. Con los créditos convertidos en enlaces, el último del
     documento se llevaba todos los clics de la placa —pasó el 3 de septiembre
     de 2026 con un enlace a Wikipedia, y costó la lámina entera— y los ocho
     eran paradas de tabulación, siete de ellas invisibles.
     visibility resuelve las dos cosas de una vez: quita el elemento del clic,
     del foco y del árbol de accesibilidad. Y sí se puede animar, comprobado en
     este motor con elementFromPoint y con focus(): el 41 % del ciclo de prueba
     dejaba de recibir los dos. (Se había dado por imposible ese mismo día a
     partir de una prueba mal montada.)
     Los cambios van en parejas de fotogramas muy juntos —0,3/0,5 y 14/14,2—
     porque una propiedad que no se interpola salta a mitad del tramo entre dos
     fotogramas: separados, el salto caería en cualquier sitio; pegados, cae
     donde toca. Los dos saltos ocurren con el crédito ya en opacidad 0, así que
     no se ve nada. En segundos son 80 ms de margen a cada lado. */
  /* Los fotogramas (releva-credito) están arriba, junto a la regla base del
     crédito, fuera de esta consulta: ver allí por qué. */

  /* Tres grupos en una fila, apoyados en los cantos del contenedor: la primera
     cifra arranca en la misma vertical que el titular del héroe y el territorio
     termina donde termina el botón del menú. Es la retícula del resto de la
     página; una franja centrada a su contenido se salía de ella y se leía como
     un bloque pegado en medio.
     Cada grupo mide lo suyo —las grandes con un tope de 19rem, que es lo que
     pide su nombre a dos líneas; el territorio, lo que miden sus rótulos— y el
     sobrante se reparte en los dos huecos entre grupos, que es donde separar
     significa algo. Antes las columnas eran fracciones del ancho y en 1920 el
     hueco caía dentro del territorio: 180 px entre «Departamentos» y «1.092».
     De 992 a 1200 px los topes no caben y las grandes ceden hasta llenar el
     ancho; el territorio, a max-content, no cede. */
  .cifras__lista {
    grid-template-columns: minmax(0, 19rem) minmax(0, 19rem) max-content;
    justify-content: space-between;
    align-items: start;
    column-gap: var(--esp-8);
    padding-block: clamp(var(--esp-4), 3vh, var(--esp-8));
  }
  .cifras__territorio { grid-column: auto; }
  /* El territorio por dentro: intervalos cortos, una fila de 1rem y una columna
     de 2rem, para que se lea como un grupo y no como cuatro cifras sueltas. */
  .cifras__pares {
    grid-template-columns: max-content max-content;
    gap: var(--esp-4) var(--esp-8);
  }

  /* Dos filetes, uno por hueco: entre las dos grandes y entre las grandes y el
     territorio. Un borde, no un elemento vacío. */
  .cifra--grande:nth-child(2),
  .cifras__territorio {
    padding-inline-start: var(--esp-8);
    border-inline-start: 1px solid var(--crema-18);
  }

  /* Las grandes se quedan en --texto-2xl, 40 px, el cuerpo que tenía la franja
     de cuatro cifras. Se probó un escalón más, 52 px, y en un monitor de 1920
     se leía como un segundo titular debajo del héroe. La jerarquía frente a las
     menudas, que van a 28, ya la dan doce píxeles y el color. */
  .cifra--grande .cifra__valor { font-size: var(--texto-2xl); }
  .cifra--grande .cifra__dice  { font-size: var(--texto-md); }
  /* Las menudas se quedan en --texto-xl, el cuerpo del teléfono: probé subirlas
     a --texto-2xl y a 40 px junto a 52 ya no había dos pesos sino uno y medio, y
     además la pila de dos filas se pasaba del alto reservado. */

  .quees__interior { grid-template-columns: minmax(0, 1fr) 30rem; }

  .usos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-8); }

  /* Tres columnas: canto, texto y lámina. La primera es la misma sangría que
     calcula .contenedor, así que el texto arranca exactamente en la vertical
     del resto de la página mientras la lámina sigue saliendo a sangre por la
     derecha. El 50% se mide contra la franja, que ocupa el ancho de
     maquetación real —a diferencia de 50vw, que cuenta la barra de
     desplazamiento y desalinearía por unos píxeles. */
  /* La tercera columna era 35rem fijos. En un monitor ancho eso dejaba unos 440 px
     de cobalto vacío entre el final del texto y el principio de la lámina: el
     texto se plantaba en su medida de lectura, la lámina en sus 560 px, y el
     sobrante se lo quedaba entero el hueco del medio.
     Ahora crece con la franja. El 42% reparte el sobrante en vez de acumularlo a
     un lado, y el suelo son los mismos 35rem de antes: así en un portátil de
     1280 la lámina mide exactamente lo que medía —el porcentaje solo puede
     mejorarla, nunca encogerla—. El techo de 60rem es para que en un monitor muy
     ancho la franja no se coma la pantalla de alto. */
  .aporte {
    grid-template-columns:
      minmax(var(--sangria), calc(50% - var(--ancho-maximo) / 2 + var(--sangria)))
      minmax(0, 1fr)
      clamp(35rem, 42%, 60rem);
    /* El alto de la franja se calcula para que case con el ancho de esa tercera
       columna dividido por la proporción de la lámina: 42% ÷ 1,777 ≈ 23,5% del
       ancho de la franja. Así la escena entra entera y el recorte queda en unos
       pocos píxeles en vez de en un tercio del cielo.
       El suelo de 320 px es el alto mínimo con el que el bloque de texto respira;
       el techo de 32rem, el punto en que la franja empezaría a comerse la
       pantalla en un monitor muy ancho. */
    min-height: clamp(320px, 23.5vw, 32rem);
  }
  .aporte__dicho {
    grid-column: 2;
    padding-block: var(--esp-12);
    padding-inline-start: 0;
  }
  /* La lámina llena el alto de la franja, no se posa dentro de ella. Probé a
     pegarla al canto de abajo y deja cobalto plano por encima del cielo de la
     escena: el azul de la lámina es #2E61DD y el de la franja #2B4FD1, y esos
     dos azules juntos dejan una costura horizontal a la vista —el mismo motivo
     por el que la 404 va sobre papel crema y no sobre franja azul—.
     La proporción se suelta aquí a propósito. En cuanto un elemento tiene
     aspect-ratio, el navegador da su alto por resuelto y align-self: stretch deja
     de aplicarse —medido: la lámina se quedaba en 315 px dentro de una fila de
     340, y esos 25 px eran justo la costura—. Un height: 100% tampoco lo arregla,
     porque un porcentaje de alto contra una fila de alto automático se resuelve a
     auto. Soltándola, la lámina vuelve a estirarse hasta el alto de la fila, que
     es el que se acaba de calcular para ella arriba. La proporción sigue mandando
     en el móvil, que es donde no hay fila que llenar. */
  .aporte__lamina {
    grid-column: 3;
    aspect-ratio: auto;
    height: auto;
  }
}

/* ══ Menos movimiento ═══════════════════════════════════════════════════
   Las duraciones ya caen a 1 ms en tokens.css. Aquí se apagan del todo las
   animaciones de ciclo infinito, que son las que marean: una animación de
   1 ms repetida sin fin sigue siendo un parpadeo.
   El carrusel se detiene en la primera lámina, que es la que el navegador ya
   descargó; las otras tres quedan ocultas. */
@media (prefers-reduced-motion: reduce) {
  .heroe__lamina,
  .heroe__credito,
  .heroe__guiones span { animation: none !important; }

  .heroe__lamina { opacity: 0; transform: none; }
  .heroe__lamina[data-lamina="1"] { opacity: 1; }

  .heroe__credito { opacity: 0; }
  .heroe__credito[data-lamina="1"] { opacity: 1; }

  .heroe__guiones span[data-lamina="1"] { background: var(--color-acento); }

  /* Lo que se quita es el desplazamiento, no la retroalimentacion. El
     acercamiento de la lamina al senalar una tarjeta es movimiento y se va; el
     cambio de color de un enlace o del anillo de foco no marea a nadie y es lo
     que avisa de que algo respondio.
     Antes habia aqui un `* { transition-duration: 1ms !important }` que
     apagaba las dos cosas por igual. Reducir el movimiento no es apagar la
     interfaz. */
  .puerta__enlace:hover .puerta__lamina img,
  .puerta__enlace:focus-visible .puerta__lamina img { transform: none; }
  /* Solo la foto de base. El revelado conserva su fundido: cambiar de fotografía
     es la respuesta a haber señalado la tarjeta, y un corte seco sería más
     brusco que el fundido, no menos. Lo que se quita es el desplazamiento. */
  .puerta__foto { transition: none; }
}