/* ==========================================================================
   VEGAS DEL VERDE — styles/sections/naturaleza.css  ·  v3.1 «se nota qué manda»
   UNA sola sección: #naturaleza (Sendero Ecovital + registro de aves +
   censo de fauna y flora + vídeo + muro del concurso). Las anclas #aves y
   #biodiversidad ya no existen y sus estilos se han fundido aquí.
   Prefijo propio: .nat-*   ·   Depende de tokens.css + base.css (cargar antes).

   QUÉ CAMBIÓ EN v3.1 — y por qué
   El defecto no era de color ni de detalle: era MÉTRICO. La sección más larga
   del sitio era una pila de cuatro bloques del mismo ancho, con el mismo aire
   entre ellos y un h3 centrado en el mismo sitio cada vez. Da igual lo bien
   escrito que esté: leído a un metro de distancia, ese ritmo constante es lo
   que delata una página generada. Lo que se hace aquí es romper el ritmo y
   repartir el peso:

     · La sección ya NO abre con un encabezado suelto. El encabezado se mete
       dentro de .nat-apertura, que va A SANGRE por la izquierda: la foto del
       camino toca el borde de la pantalla. Lo principal se ve que es principal
       porque es lo más grande y lo primero, no porque lo diga un rótulo.
     · .nat-registro pierde las dos cajas y pasa a tres columnas desiguales
       con un solo filete arriba: es una nota al margen, y pesa como tal.
     · .nat-vida va A SANGRE por la DERECHA, o sea al revés que la apertura, y
       mete una columna de vídeo vertical contra el borde. Los dos sangrados
       son opuestos a propósito: si los dos fueran por el mismo lado, el
       recurso se volvería otra plantilla.
     · .nat-conservacion pierde la caja y el relleno: es el pie de la sección.

   QUÉ AÑADE v4 — y por qué hacía falta
   v3.1 repartió el PESO y acertó: eso se conserva entero, no se toca ni un
   sangrado. Lo que seguía fallando era la FORMA. La sección que cuenta 347
   plantas y 101 aves estaba dibujada entera con rectángulos de radio cero:
   ocho fotos, cuatro fichas de ambiente, cincuenta y siete copias del muro y
   dos bandas, todas con la misma esquina. Un radio único repetido cincuenta
   veces —sea 0, sea 24 px— es lo que delata una plantilla, porque la
   naturaleza no tiene un solo radio. v4 introduce cuatro:

     · --nat-hoja-a..d: cuatro radios ASIMÉTRICOS derivados de la escala de
       tokens, repartidos de modo que dos piezas vecinas nunca coincidan.
     · El cauce entre la quebrada y el riachuelo pasa de filete recto a trazo
       SVG que serpentea. Era el único gráfico de la sección y era una raya.
     · La banda del muro entra por una cresta SVG irregular, no por un canto
       recto a todo lo ancho.
     · Capitular en la entrada del cuerpo y el «101» marcado dentro del propio
       titular: registro editorial, que es el que sabe contar cifras sin que
       parezcan una tabla.
     · Deriva de fondo (parallax) del 14 % en la ÚNICA foto que puede
       permitírsela: la del sangrado izquierdo, que es alta y está recortada.
       Con animation-timeline: view(), sin una línea de JS, sin barra de
       scroll robada y desactivada entera si se pide menos movimiento.
     · Vuelve una sola sombra a la sección: la del inserto de guadua, que es
       la única pieza que de verdad está ENCIMA de otra. v3 las quitó todas
       porque veinte sombras seguidas se leen como suciedad; una sola, donde
       hay solape real, se lee como profundidad. No hay ninguna más.
     · El muro del concurso conserva intactos su marcado, su orden y sus
       créditos: lo único que cambia es que las copias ya no comparten
       esquina, igual que no la comparten las copias de una pared de verdad.

   QUÉ AÑADE v5 — la curaduría del muro
   v4 varió la esquina de las cincuenta y siete copias, pero todas seguían
   colgando en la misma celda y al mismo tamaño: la mejor fotografía del
   concurso pesaba lo mismo que la más movida, y un muro sin jerarquía nivela
   la sección —y el sitio— hacia abajo. Se miraron las 57 una a una y:

     · Las NUEVE de mejor factura (nitidez, pose, luz) cuelgan en
       .nat-destacadas: una rejilla de doce carriles con UNA pieza dominante
       a media pared y dos filas de acompañamiento a tres tamaños distintos,
       colgadas al principio de su fila —no estiradas— y con dos descuelgues
       para que el canto inferior no haga regla. Cada pieza recorta su
       fotografía a un encuadre propio (aspect-ratio + object-fit), como se
       encuadra una copia para enmarcarla.
     · Las CUARENTA Y OCHO restantes pasan enteras al archivo plegado
       (.nat-muro), que se vuelve mosaico compacto: más columnas, celda
       pequeña, rótulo en cuerpo micro y el mismo sistema de hojas a escala
       menor (--nat-hoja-mini-*). Es el tratamiento callado de un archivo,
       no el de una galería.
     · Ninguna ficha pierde su crédito, el lightbox no cambia y las 57
       siguen publicadas: la curaduría reparte peso, no recorta el archivo.

   CÓMO SE SANGRA AQUÍ, Y POR QUÉ NO CON vw
   Los bloques a sangre son hijos DIRECTOS de <section>, no de .contenedor, así
   que ya nacen con el ancho de la página: no hace falta ningún truco de
   100vw / calc(50% - 50vw). Eso importa —100vw INCLUYE la barra de scroll y
   mete 15 px de desbordamiento real que el `overflow-x: hidden` del body tapa
   sin arreglar—. Para que el texto siga alineado con el resto de la página se
   usa --nat-margen, que reproduce el margen del .contenedor con un porcentaje
   del ancho del propio bloque. Sin vw en ninguna parte.

   Reglas que se respetan aquí:
   · Ningún valor literal de color, tamaño de fuente, radio, sombra o duración.
     Lo que la fundación no cubre se declara como token LOCAL, agrupado abajo
     y siempre derivado de la escala.
   · Ninguna regla pisa por especificidad un color de base.css. Sin !important.
   · Ningún titular declara font-family: heredan Fraunces de base.css.
   · Caps sólo donde los autoriza el §3 del CONTRATO-V2 (eyebrow, .btn,
     .pildora, .cifra-etiqueta y micro-etiquetas propias de esta hoja).
   · Esquina viva y sin sombra en toda fotografía y toda caja.
   ========================================================================== */

.nat {
  /* --- Tokens locales (lo que la fundación no cubre) ---------------------- */

  /* EL MARGEN DE PÁGINA, REPRODUCIDO SIN vw.
     .contenedor centra un ancho máximo de --ancho-contenedor dejando a cada
     lado, como mínimo, --padding-contenedor. Esto es exactamente esa cuenta,
     pero expresada como porcentaje del bloque a sangre —que mide toda la
     página—, para que el texto de un bloque a sangre caiga en la MISMA línea
     vertical que el texto de un bloque dentro del contenedor. Si se usara
     50vw, la barra de scroll (15 px en escritorio) desplazaría esa línea y
     además desbordaría. */
  --nat-margen: max(
    var(--padding-contenedor),
    calc((100% - var(--ancho-contenedor)) / 2)
  );

  --nat-solape: clamp(1.25rem, 7%, 3.25rem);      /* aire para el inserto    */
  --nat-alto-apertura: clamp(26rem, 46vw, 40rem); /* alto de la foto a sangre */
  --nat-alto-habitat: clamp(15rem, 30vw, 19rem);
  --nat-alto-habitat-ancho: clamp(17rem, 32vw, 23rem);
  --nat-col-video: clamp(15rem, 24vw, 21rem);     /* ancho de la columna 9:16 */

  /* LA PIEZA-CIFRA DOMINANTE: el cuerpo del «101» del titular. La fundación
     no tiene ningún paso por encima de --paso-6, y pedir un token nuevo para
     un solo uso ensuciaría la escala: se deriva del paso más alto, 1.7 veces.
     Da ~76 px en un móvil de 375 y ~143 px a ancho completo — más grande que
     cualquier otro texto de la página menos el hero, que es el encargo. */
  --nat-fs-cifra-dominante: calc(var(--paso-6) * 1.7);
  /* El hueco entre el «101» y «especies». Va en `em` y no en un --esp-* del
     sistema porque tiene que crecer CON la cifra: los pasos de espaciado son
     absolutos y a 143 px de número dejarían la unidad pegada, mientras que a
     76 px en móvil la dejarían suelta. Se declara aquí, como token de
     sección, en vez de escribirlo suelto en la regla: ningún literal vive
     dentro de una declaración (CONTRATO-V2 §7). */
  --nat-cifra-hueco: 0.22em;
  /* --nat-filete se retira en v4: los dos únicos sitios que lo usaban —el
     aviso de la Chachalaca y los nombres de los dos árboles— ya no cuelgan de
     un filete recto, sino de una superficie con radio de hoja y de la propia
     viñeta de hoja del sistema. */

  /* --- LA HOJA: el sistema de radios de esta sección ----------------------
     No son cuatro esquinas iguales, y ése es todo el asunto. Un radio único
     repetido en cincuenta cajas es lo que hace que una página parezca
     generada; dos esquinas abiertas y dos cerradas, alternando la diagonal,
     dan la silueta de una hoja y se leen como una decisión.

     Los valores salen de la escala de tokens.css sin inventar ninguno:
     --radio-xl (36 px) es la punta abierta, --radio-lg (24 px) el hombro y
     --radio-md (14 px) la esquina cerrada. Las cuatro variantes se reparten
     por la sección de modo que dos piezas vecinas NUNCA lleven la misma.
     Las esquinas que caen contra el borde de la pantalla —los dos bloques a
     sangre— se quedan a cero: una esquina redonda contra el canto del
     navegador se lee como un error de recorte, no como una forma.          */
  --nat-hoja-a: var(--radio-xl) var(--radio-md) var(--radio-xl) var(--radio-md);
  --nat-hoja-b: var(--radio-md) var(--radio-xl) var(--radio-md) var(--radio-xl);
  --nat-hoja-c: var(--radio-lg) var(--radio-md) var(--radio-lg) var(--radio-xl);
  --nat-hoja-d: var(--radio-md) var(--radio-lg) var(--radio-xl) var(--radio-lg);

  /* v5 · LA HOJA EN PEQUEÑO. El mosaico compacto del archivo repite el mismo
     sistema de radios pero a la escala de su celda: los valores bajan un
     escalón en la propia escala de tokens (xl→lg, lg→md, md→sm). Mismo
     gesto, menos voz — que es exactamente la diferencia entre la pieza
     enmarcada y la copia de archivo. */
  --nat-hoja-mini-a: var(--radio-lg) var(--radio-sm) var(--radio-lg) var(--radio-sm);
  --nat-hoja-mini-b: var(--radio-sm) var(--radio-lg) var(--radio-sm) var(--radio-lg);
  --nat-hoja-mini-c: var(--radio-md) var(--radio-sm) var(--radio-md) var(--radio-lg);
  --nat-hoja-mini-d: var(--radio-sm) var(--radio-md) var(--radio-lg) var(--radio-md);
}

/* ==========================================================================
   1. LA APERTURA — el Sendero Ecovital, a sangre por la izquierda
   Aquí vive el encabezado de la sección. Es deliberado: si el titular va en
   su propia franja centrada arriba y la foto empieza después, la sección
   abre igual que las otras ocho. Fundidos, abre como una portada.
   ========================================================================== */
.nat-apertura {
  display: grid;
  gap: var(--gap);
  /* En móvil no hay sangrado: una columna con los márgenes de la página. */
  padding-inline: var(--nat-margen);
}

@media (min-width: 62em) {
  .nat-apertura {
    /* DESIGUAL A PROPÓSITO. Ni 1fr/1fr ni la proporción áurea de manual: la
       foto es un vertical de 844×1500 y con más de un tercio del ancho se
       come el titular; con menos, deja de ser una portada y parece un icono. */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: stretch;
    gap: 0;
    padding-inline: 0;
  }

  .nat-apertura__texto {
    /* El texto recupera la línea del contenedor por la derecha y se separa de
       la foto por la izquierda. Ese hueco no es un `gap`: es padding, para
       que el inserto de guadua pueda invadirlo sin descuadrar la rejilla. */
    padding-inline: var(--gap-lg) var(--nat-margen);
  }
}

/* ---- Composición de fotos: principal a sangre + inserto solapado ---------- */
.nat-apertura__media {
  position: relative;
  /* El aire reservado permite que el inserto se solape SIN desbordar nunca */
  padding-inline-end: var(--nat-solape);
  padding-block-end: var(--nat-solape);
}

/* v3 dejó las dos fotografías a esquina viva porque llevaban el MISMO radio y
   la MISMA sombra: dos tarjetas apiladas, el rincón más genérico de la página.
   v4 no vuelve a aquello. Le da a cada una un radio distinto y asimétrico —la
   grande abre por arriba a la derecha, el inserto abre por la diagonal
   contraria—, y la sombra vuelve sólo al inserto, que es el único elemento de
   la sección que de verdad está encima de otro.
   En móvil la foto grande no está a sangre, así que puede redondear las cuatro
   esquinas; en escritorio sí lo está y las dos de la izquierda vuelven a cero
   (ver el bloque de 62em). */
.nat-apertura__principal .marco {
  border-radius: var(--nat-hoja-a);
  box-shadow: none;
}

@media (min-width: 62em) {
  /* A partir de aquí la foto deja de tener proporción fija y se estira a lo
     alto de la composición: es una banda vertical contra el borde, no una
     estampa. El recorte se hace por el pie del camino, que es donde está el
     suelo de hojarasca que nombra el alt. */
  .nat-apertura__media {
    padding-inline-end: 0;
  }

  .nat-apertura__principal,
  .nat-apertura__principal .marco {
    height: 100%;
  }

  .nat-apertura__principal .marco {
    aspect-ratio: auto;
    min-height: var(--nat-alto-apertura);
    /* A sangre por la izquierda: las dos esquinas de ese lado se apoyan en el
       canto del navegador y ahí un radio se lee como recorte fallido. Sólo
       redondea el lado que da al texto, y con dos valores distintos. */
    border-radius: 0 var(--radio-xl) var(--radio-lg) 0;
  }

  .nat-apertura__principal .marco > img {
    object-position: center 62%;
  }
}

/* ---- Deriva de fondo (parallax) ------------------------------------------
   Sólo aquí, y sólo en escritorio. Es la única fotografía de la sección que
   cumple las tres condiciones para permitírselo: es alta (844×1500), está
   recortada dentro de un marco con overflow y es FONDO —debajo no hay texto
   que se mueva—. El recorrido es del 14 % del alto del marco, dentro de la
   horquilla sutil; más que eso y el sendero «resbala».

   Va con animation-timeline: view(), no con JavaScript: el navegador la
   engancha al scroll compositor sin un solo listener, y donde no exista la
   propiedad simplemente no pasa nada —la foto se queda quieta y encuadrada—.
   Envuelto en prefers-reduced-motion: no-preference, así que quien pide menos
   movimiento no recibe ninguno; el `animation-duration !important` que
   base.css impone en el otro extremo de esa media query ni siquiera llega a
   tener nada que anular.
   -------------------------------------------------------------------------- */
@keyframes nat-deriva {
  from {
    transform: translate3d(0, -12%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 62em) {
  @supports (animation-timeline: view()) {
    .nat-apertura__principal .marco > img {
      /* 118 % de alto: el sobrante es lo que se recorre. Al final del
         recorrido la foto sigue tapando el marco entero, así que no hay
         ningún instante con una franja vacía debajo. */
      height: 118%;
      animation: nat-deriva linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* El inserto se descuelga del borde inferior de la foto grande y se mete en el
   hueco entre las dos columnas. Es el único elemento de la sección que cruza
   una línea de la rejilla, y por eso funciona: rompe la caja una vez. */
.nat-apertura__inset {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: min(46%, 13rem);
}

@media (min-width: 62em) {
  /* El inserto sale del carril de la foto y se mete en el hueco que separa
     las dos columnas. Ese hueco es padding del texto (var(--gap-lg), de 3,3
     a 4 rem) y el saliente nunca pasa de --nat-solape (3,25 rem como mucho),
     así que la solapa se ve y el texto no se toca.
     El borde INFERIOR sigue a cero: el pie «Guadua del predio» tiene que caer
     en el aire de crema que reserva padding-block-end, no encima de la foto,
     donde el gris del crédito quedaría ilegible. */
  .nat-apertura__inset {
    inset-inline-end: calc(var(--nat-solape) * -1);
    width: min(52%, 12rem);
  }
}

/* El filete de crema despega el inserto de la fotografía que tiene debajo, y
   la sombra —la ÚNICA de la sección— dice a qué distancia está. Es el único
   sitio donde una sombra cuenta algo verdadero: aquí hay dos planos de verdad,
   uno encima del otro. La diagonal del radio es la contraria a la de la foto
   grande, para que las dos hojas no queden calcadas. */
.nat-apertura__inset .marco {
  border: var(--esp-3xs) solid var(--color-fondo);
  border-radius: var(--nat-hoja-b);
  box-shadow: var(--sombra-lg);
}

.nat-apertura__pie {
  margin-top: var(--esp-3xs);
  text-align: end;
}

/* ---- Columna de texto ---------------------------------------------------- */
.nat-apertura__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Aire GRANDE entre los tres movimientos de la columna (encabezado, cuerpo,
     oferta) y aire pequeño dentro de cada uno: así se leen como tres cosas y
     no como nueve párrafos seguidos. */
  gap: var(--gap);
  justify-content: center;
}

.nat-apertura__encabezado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-xs);
  max-width: var(--medida);
}

/* LA PIEZA-CIFRA DOMINANTE.
   El titular de esta sección era el más grande de la página después del hero
   (subía entero a --fs-h1 en escritorio) y el «101» iba dentro de la frase,
   marcado con peso y terracota pero al mismo cuerpo que las palabras: como
   frase funcionaba; como DATO pesaba lo mismo que «cantan». Y es el único
   dato que ninguna finca de eventos del Anillo Vial puede copiar.

   Ahora el titular se compone alrededor de la cifra, como una portada compone
   su número: la frase en el cuerpo normal de sección (--fs-h2) y el 101 en
   cuerpo gigante debajo, con «especies» colgada de su línea base. La
   jerarquía la da la ESCALA, no una frase inflada — por eso desaparece
   también la regla que subía todo el h2 a --fs-h1: con la cifra gigante al
   lado ya no distinguía nada y sólo alargaba los renglones.

   Va en --peso-display (320) y no en el peso de cifra (600) a propósito: a
   140 px el trazo fino de Fraunces con el eje óptico alto es lo que da el
   aire editorial —la misma razón por la que los titulares adelgazaron en v3,
   ver tokens.css §3—; el 600, que en una cifra de estadística evita que el
   dato se desvanezca, aquí sería un bloque macizo de terracota, y el cálido
   de este sistema funciona por escasez, no por masa. A este cuerpo el
   terracota es texto grande de sobra para WCAG: 5.3:1 sobre crema cuando el
   umbral es 3:1.

   El contador es el MOTOR GLOBAL de js/app.js ([data-contador]): el mismo
   mecanismo del 347 y el 57, aquí sólo cambia el traje. min-width en `ch` y
   cifras tabulares hacen que la caja mida de entrada lo que va a medir al
   final, así que ni «especies» ni el párrafo de abajo se mueven un píxel
   mientras cuenta. El 101 está escrito en el HTML: sin JS no falta nada, y
   con prefers-reduced-motion el motor lo escribe de golpe, sin cuenta.      */
.nat-cifra-dominante {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3xs);
}

/* La frase presenta; la que manda es la cifra de debajo. */
.nat-cifra-dominante__frase {
  font-size: var(--fs-h2);
}

/* Cifra y unidad comparten línea base: se lee «101 especies», no un número
   suelto con un pie. En pantallas muy estrechas la unidad puede bajar de
   renglón sin romper la composición. */
.nat-cifra-dominante__linea {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--nat-cifra-hueco);
}

.nat-cifra-dominante__numero {
  min-width: 3ch;
  font-size: var(--nat-fs-cifra-dominante);
  font-weight: var(--peso-display);
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  line-height: var(--alto-linea-apretado);
  letter-spacing: var(--tracking-display);
  color: var(--color-acento-texto);
}

.nat-cifra-dominante__unidad {
  font-size: var(--fs-h2);
}

/* RED PARA EL index.html YA ENSAMBLADO (se retira cuando vuelva a correr
   herramientas/ensamblar.js). Hasta entonces esta hoja convive con el
   marcado anterior, donde el 101 no es la pieza-cifra sino un <span
   class="nat-titulo-cifra" data-contador="101"> DENTRO del titular. Sin esta
   regla, el contador de js/app.js sube de 0 a 101 con dígitos
   proporcionales y el renglón del titular se recompone en cada fotograma:
   exactamente el reflow que la regla existía para impedir. Misma decisión
   que el puente de .espacio__img--apoyo en espacios.css. */
.nat-titulo-cifra {
  display: inline-block;
  min-width: 3ch;
  text-align: center;
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  color: var(--color-acento-texto);
}

.nat-apertura__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-sm);
  max-width: var(--medida);
}

/* El subtítulo baja a --xs y se queda pequeño a propósito: entre el h2 grande
   y el cuerpo hace de bisagra, no de segundo titular. */
.nat-apertura__antetitulo {
  margin: 0;
}

/* CAPITULAR. Registro editorial, y de paso una jerarquía que no cuesta nada:
   marca dónde empieza a leerse de verdad la sección. Va sólo en el PRIMER
   párrafo del cuerpo —no en cada bloque, que sería otra plantilla— y en la
   serifa del display, que es la que tiene un ojo que aguanta el tamaño.     */
.nat-apertura__cuerpo > p:first-of-type::first-letter {
  float: left;
  margin-inline-end: 0.1em;
  font-family: var(--fuente-display);
  font-size: var(--paso-5);
  font-weight: var(--peso-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  line-height: 0.74;
  color: var(--color-acento-texto);
}

/* Donde exista `initial-letter` se usa: es la propiedad que sabe encajar la
   capitular en un número EXACTO de renglones, que es de lo que vive una
   capitular —una que sobresale o se queda corta respecto a la pauta se lee
   como un descuido, no como un remate—. El bloque de arriba es la
   aproximación a mano para los navegadores que aún no la tienen. */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .nat-apertura__cuerpo > p:first-of-type::first-letter {
    -webkit-initial-letter: 2;
    initial-letter: 2;
    float: none;
    margin-inline-end: 0.12em;
    font-size: inherit;
    line-height: inherit;
  }
}

.nat-apertura__lista {
  gap: var(--esp-3xs);
  margin-top: var(--esp-2xs);
}

/* ---- El único precio del sitio, y su botón ------------------------------- */
/* Dos columnas desiguales cerradas por filete arriba y abajo: la cifra manda
   y el botón la acompaña. Antes eran tres bloques apilados y el precio
   quedaba como un párrafo más. */
.nat-oferta {
  display: grid;
  gap: var(--esp-md);
  width: 100%;
  padding-block: var(--esp-md);
  border-block: 1px solid var(--color-borde-suave);
}

@media (min-width: 40em) {
  .nat-oferta {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--gap);
  }
}

.nat-oferta__accion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2xs);
  min-width: 0;
}

.nat-oferta__nota {
  margin: 0;
}

/* EL SELLO DEL PRECIO.
   Es el único importe publicado en todo el sitio y estaba escrito como tres
   párrafos sueltos entre dos filetes: se leía igual que la nota de al lado.
   Ahora es una pieza con cuerpo propio —fondo salvia, la misma banda que usa
   el muro, y radio de hoja—, o sea la única superficie tintada de la columna.
   No lleva sombra: no está encima de nada.

   Contraste comprobado sobre salvia (#dde5cd): terracota 4.55:1 (par
   verificado en CONTRATO-V2 §4) y --color-texto-suave 5.2:1. Los dos pasan AA
   y ninguno depende de una regla de esta hoja para conseguirlo.             */
.nat-precio {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3xs);
  min-width: 0;
  max-width: var(--medida-corta);
  padding: var(--esp-md) var(--esp-lg);
  border-radius: var(--nat-hoja-c);
  background-color: var(--color-fondo-alt);
}

.nat-precio__etiqueta {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--color-texto-suave);
}

.nat-precio__valor {
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--paso-4);
  font-weight: var(--peso-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  line-height: var(--alto-linea-apretado);
  letter-spacing: var(--tracking-display);
  color: var(--color-acento-texto);
}

.nat-precio__simbolo {
  font-size: 0.6em;
}

.nat-precio__moneda {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--color-texto-suave);
}

.nat-precio__unidad {
  margin: 0;
  font-size: var(--fs-pequeno);
  color: var(--color-texto-suave);
}

/* ---- Micro-gráfico de la ruta: quebrada → riachuelo ----------------------
   Va en vertical y no en horizontal a propósito: los dos rótulos en caja
   alta no caben seguidos ni en la columna de escritorio, y al partirse
   dejaban el filete colgando al final del primer renglón como un error.

   El color de los dos rótulos («Quebrada Aranzoque», «Riachuelo») se declara
   AQUÍ y lo heredan los .nat-ruta__punto; no hay ningún `color` más abajo.
   v3: gris neutro como .eyebrow (base.css §5) —el coral se reserva para el
   acento de verdad, no para cada micro-etiqueta—. La gota y el filete siguen
   en --color-borde-fuerte, que es lo que dibuja el gráfico. */
.nat-ruta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3xs);
  margin: 0;
  max-width: none;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--color-texto-suave);
}

.nat-ruta__punto {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

/* La gota: un cuadrado con dos esquinas redondeadas en diagonal */
.nat-ruta__punto::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0 var(--radio-full) 0 var(--radio-full);
  background-color: var(--color-borde-fuerte);
}

/* EL CAUCE. Era un filete recto de 1 px, o sea el borde de una tabla puesto
   de canto. Una quebrada no baja recta: ahora es un trazo SVG que serpentea
   dos veces y arranca justo bajo la gota del punto de arriba (de ahí el
   margen de 0.25em, el mismo que tenía el filete: es la mitad de la gota).
   `vector-effect: non-scaling-stroke` va en el marcado para que el grosor no
   se deforme cuando preserveAspectRatio="none" estira el viewBox.           */
.nat-ruta__cauce {
  flex: none;
  width: var(--esp-sm);
  height: var(--esp-xl);
  margin-inline-start: 0.25em;
  fill: none;
  stroke: var(--color-borde-fuerte);
}

/* ==========================================================================
   2. LA NOTA AL MARGEN — endémica + migratorias
   Sin foto a propósito: no existe fotografía propia de la Chachalaca, y
   ponerle al lado el retrato de otro pájaro sería mentir con una imagen.

   v3.1: SIN CAJAS. Eran dos tarjetas con borde, relleno y fondo, del mismo
   tamaño que todo lo demás de la sección; a esa altura de la página el
   visitante ya ha visto tres rejillas de tarjetas y ésta no aportaba ninguna
   jerarquía nueva. Ahora son tres columnas desiguales colgando de un único
   filete: el rótulo en un carril estrecho, la endémica ancha y el dato
   migratorio en un carril fino separado por su propio filete vertical.
   ========================================================================== */
.nat-registro {
  display: grid;
  gap: var(--gap);
  margin-top: var(--gap-lg);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde-fuerte);
}

@media (min-width: 62em) {
  .nat-registro {
    grid-template-columns:
      minmax(0, 0.55fr)
      minmax(0, 1.45fr)
      minmax(0, 0.85fr);
    align-items: start;
    gap: var(--gap-lg);
  }
}

/* El rótulo del bloque baja a --xs y se queda arriba del todo del carril: es
   un encabezado de margen, no un titular de sección. */
.nat-registro__titulo {
  margin: 0;
  max-width: var(--medida-corta);
}

.nat-ficha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2xs);
  min-width: 0;
}

/* El único acento de este bloque es la píldora ámbar de la endémica, que ya
   lleva su propio color en base.css. El fondo tintado sobraba: dos señales
   para el mismo hecho. Lo que sí distingue a la endémica de los dos apuntes es
   la ESCALA: su párrafo se queda en el cuerpo base y el del dato migratorio
   baja a --fs-pequeno. De los dos, el que manda es el primero. */
.nat-ficha--endemica .nat-ficha__texto {
  font-size: var(--fs-cuerpo);
}

.nat-ficha--dato {
  padding-left: var(--esp-md);
  border-left: 1px solid var(--color-borde-suave);
}

@media (max-width: 61.99em) {
  .nat-ficha--dato {
    padding-left: 0;
    padding-top: var(--esp-md);
    border-left: 0;
    border-top: 1px solid var(--color-borde-suave);
  }
}

.nat-ficha__titulo {
  margin: 0;
  font-size: var(--fs-h3);
}

.nat-ficha__cientifico {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-grande);
  font-weight: var(--peso-ligero);
  font-style: italic;
  color: var(--color-acento-alt);
}

.nat-ficha__texto {
  margin: 0;
  font-size: var(--fs-pequeno);
  line-height: var(--alto-linea-base);
  color: var(--color-texto-suave);
}

/* Aclaración honesta: el muro todavía no la tiene.
   Deja de ser un filete recto y pasa a ser la única superficie tintada del
   bloque, con radio de hoja. Sigue siendo el elemento más callado de la
   ficha —cuerpo micro y gris— pero ahora se ve que es un aparte y no la
   continuación del párrafo de arriba.
   Sólo lleva --color-texto-suave, que sobre salvia da 5.2:1 (AA). Aquí NO se
   tinta la ficha entera a propósito: el nombre científico va en oliva, y el
   oliva sobre salvia se queda en 4.29:1. Sobre la crema del fondo llega a
   4.51:1 y pasa; sobre salvia, no. Por eso el tinte se limita a este aparte. */
.nat-ficha__aviso {
  margin: 0;
  padding: var(--esp-sm) var(--esp-md);
  border-radius: var(--nat-hoja-d);
  background-color: var(--color-fondo-alt);
  font-size: var(--fs-micro);
  line-height: var(--alto-linea-base);
  color: var(--color-texto-suave);
}

.nat-ficha .cifra + .cifra-etiqueta {
  margin-bottom: var(--esp-2xs);
}

/* ==========================================================================
   3. LA VIDA — el censo a la izquierda, la columna de vídeo a sangre derecha
   ========================================================================== */
.nat-vida {
  display: grid;
  gap: var(--gap-lg);
  margin-top: var(--esp-seccion);
  padding-inline: var(--nat-margen);
}

/* El sangrado entra tarde (72em) porque por debajo de ese ancho la columna de
   vídeo dejaría al censo menos de 32rem y sus fichas de ambiente se
   estrangulan. Hasta ahí, apilado: censo y después vídeo. */
@media (min-width: 72em) {
  .nat-vida {
    grid-template-columns: minmax(0, 1fr) var(--nat-col-video);
    align-items: start;
    gap: var(--gap-lg);
    padding-inline-end: 0;
  }
}

.nat-censo {
  min-width: 0;
}

.nat-censo__titulo {
  margin: 0 0 var(--gap);
}

.nat-habitats {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .nat-habitats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nat-habitat--ancho {
    grid-column: span 2;
  }
}

/* A dos columnas sobran cuatro fichas para tres huecos y la última se quedaba
   sola ocupando media fila, con el otro medio vacío: el hueco leía como un
   error de maquetación. Se le deja cruzar entera y el censo pasa a ser
   ancha-dos-ancha, que además alterna el ritmo en vez de repetirlo. */
@media (min-width: 40em) and (max-width: 77.99em) {
  .nat-habitat:nth-child(4) {
    grid-column: span 2;
  }
}

/* El paso a tres columnas se retrasa de 64em a 78em: con la columna de vídeo
   a la derecha, el censo mide bastante menos que la página y a 64em las tres
   fichas caían por debajo de 15rem cada una. */
@media (min-width: 78em) {
  .nat-habitats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* SIN `stretch`. Éste es el cambio que desmonta la tabla: por defecto las
       tres fichas de la segunda fila se igualaban al alto de la más alta y
       salían tres rectángulos idénticos en fila, que es exactamente el aspecto
       de una ficha técnica. Alineadas al principio, cada una puede medir lo
       suyo y colgar a su altura. */
    align-items: start;
  }

  .nat-habitat--ancho {
    grid-column: span 3;
  }

  /* Tres alturas distintas y dos descuelgues: el bloque deja de ser una banda
     recta y pasa a ser una composición colgada. Los desfases son múltiplos
     del propio ritmo de la rejilla (--gap-sm / --gap-lg), no números sueltos,
     así que se mueven con ella al cambiar el ancho. */
  .nat-habitat:nth-child(2) {
    min-height: calc(var(--nat-alto-habitat) * 1.22);
  }

  .nat-habitat:nth-child(3) {
    margin-top: var(--gap-lg);
  }

  .nat-habitat:nth-child(4) {
    min-height: calc(var(--nat-alto-habitat) * 1.1);
    margin-top: var(--gap-sm);
  }
}

.nat-habitat {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--nat-alto-habitat);
  overflow: hidden;
  /* Los cuatro ambientes siguen siendo fotografía con el dato encima, no
     tarjetas: sin sombra, y el límite contra la crema lo sigue dando el velo
     de bosque hondo del ::after. Lo que cambia en v4 es la esquina. Cuatro
     rectángulos de radio cero, del mismo alto y en fila, se leen como las
     cuatro celdas de una tabla —y esto es justamente lo que NO puede parecer
     una tabla—. Cada ficha lleva ahora una hoja distinta; las cuatro se
     asignan una a una porque son cuatro y el orden importa: la ancha abre
     hacia dentro y las tres pequeñas alternan la diagonal. */
  border-radius: var(--nat-hoja-c);
  box-shadow: none;
  isolation: isolate;
}

.nat-habitat:nth-child(2) {
  border-radius: var(--nat-hoja-a);
}

.nat-habitat:nth-child(3) {
  border-radius: var(--nat-hoja-b);
}

.nat-habitat:nth-child(4) {
  border-radius: var(--nat-hoja-d);
}

/* El jardín (347 plantas) es el dato grande del censo y ocupa toda la fila:
   se le da más alto que a los otros tres para que la diferencia se vea antes
   de leer la cifra. */
.nat-habitat--ancho {
  min-height: var(--nat-alto-habitat-ancho);
}

.nat-habitat__foto {
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-suave);
}

/* Velo de bosque hondo: donde va el texto la veladura llega al 88-94 %, así
   que la crema queda por encima de 8:1 y el amarillo por encima de 6:1 sea
   cual sea la fotografía de debajo.                                         */
.nat-habitat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background-image: linear-gradient(
    to top,
    rgb(var(--verde-bosque-hondo-rgb) / 0.94) 0%,
    rgb(var(--verde-bosque-hondo-rgb) / 0.88) 45%,
    rgb(var(--verde-bosque-hondo-rgb) / 0.35) 78%,
    rgb(var(--verde-bosque-hondo-rgb) / 0.1) 100%
  );
}

/* Encuadre: las fotos son verticales y la tarjeta es apaisada, así que hay
   que decirle a cada una qué franja del original tiene que enseñar. Sin
   esto el recorte por el centro deja fuera justo lo que nombra el rótulo. */
.nat-habitat--foco-alto .nat-habitat__foto {
  object-position: center 25%;
}

.nat-habitat--foco-medio .nat-habitat__foto {
  object-position: center 58%;
}

.nat-habitat--foco-bajo .nat-habitat__foto {
  object-position: center 72%;
}

.nat-habitat:hover .nat-habitat__foto {
  transform: scale(var(--escala-hover));
}

.nat-habitat__cuerpo {
  position: relative;
  z-index: var(--z-elevado);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3xs);
  width: 100%;
  padding: var(--esp-md);
  color: var(--color-texto-inverso);
}

@media (min-width: 40em) {
  .nat-habitat--ancho .nat-habitat__cuerpo {
    padding: var(--esp-lg);
    max-width: var(--ancho-xs);
  }
}

/* Rótulo sobre foto oscurecida: la variante inversa del gris de .eyebrow, no
   el coral claro. Es el mismo token que ya usa .eyebrow bajo .seccion--oscura
   y .seccion--carbon (base.css §5) —crema al 78 %—, así que el rótulo de «El
   jardín» y el de #momentos hablan igual. --color-texto-suave no sirve aquí:
   es gris de fondo claro y sobre el velo quedaría ilegible. */
.nat-habitat__lugar {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--color-texto-inverso-suave);
}

.nat-habitat__cifra {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--paso-4);
  font-weight: var(--peso-fuerte);
  /* El 347 lo cuenta js/app.js al entrar en pantalla; con cifras de ancho
     fijo el número no baila mientras sube. */
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  line-height: var(--alto-linea-apretado);
  letter-spacing: var(--tracking-display);
  color: var(--color-destacado);
}

.nat-habitat--ancho .nat-habitat__cifra {
  font-size: var(--paso-5);
}

.nat-habitat__etiqueta {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  color: var(--color-texto-inverso);
}

.nat-habitat__texto {
  margin: 0;
  font-size: var(--fs-micro);
  line-height: var(--alto-linea-base);
  color: var(--color-texto-inverso-suave);
}

.nat-censo__aclaracion {
  margin-top: var(--esp-md);
  max-width: var(--medida);
}

/* ---- LA COLUMNA DE VÍDEO -------------------------------------------------
   Metraje propio, vertical (720×1280) y sin pista de audio. No es un
   reproductor: no lleva controles, no lleva icono de play y no se puede
   pausar a mano. Es una fotografía que respira, y por eso se trata con las
   mismas reglas que una foto: esquina viva, sin sombra y pie debajo.

   El width/height del atributo reserva la caja antes de que baje un byte, así
   que el layout no salta. El póster es el suelo: si la red falla, si el
   navegador bloquea la reproducción automática o si el visitante pide menos
   movimiento, lo que queda es esa imagen fija y la composición no cambia.
   -------------------------------------------------------------------------- */
.nat-video {
  min-width: 0;
  /* En móvil el vertical no puede ocupar el ancho entero: a 375 px daría
     667 px de alto y se comería la pantalla. Se acota y se queda a la
     izquierda, alineado con el texto, no centrado. */
  width: min(100%, 17rem);
}

@media (min-width: 72em) {
  .nat-video {
    width: auto;
    /* Se queda a la vista mientras se recorre el censo, que es largo. No es
       una animación: es posición. Con el header fijo descontado. */
    position: sticky;
    top: calc(var(--alto-header) + var(--esp-md));
  }
}

.nat-video__pieza {
  display: block;
  width: 100%;
  height: auto;
  /* La columna de vídeo cae al lado de la ficha 4, que lleva --nat-hoja-d:
     ésta abre por la diagonal contraria para que las dos piezas vecinas no
     compartan silueta. Sigue sin sombra: no está encima de nada. */
  border-radius: var(--nat-hoja-a);
  box-shadow: none;
  /* Mientras el póster carga, el hueco es del mismo gris verdoso que usa
     .marco para las fotos: nunca un rectángulo negro. */
  background-color: rgb(var(--gris-verde-rgb) / 0.3);
  object-fit: cover;
}

.nat-video__pie {
  margin-top: var(--esp-2xs);
  font-size: var(--fs-micro);
  color: var(--color-texto-suave);
}

/* ==========================================================================
   4. CONSERVACIÓN — Cedro y Guayacán Amarillo (CITES III)
   v3.1: era una caja con borde, fondo propio y --esp-xl de relleno, o sea la
   pieza con MÁS presencia visual de la sección… para el dato más pequeño que
   contiene. Ahora es lo que es: el pie de la sección. Un filete, tres
   columnas y nada más.
   ========================================================================== */
.nat-conservacion {
  display: grid;
  gap: var(--gap);
  margin-top: var(--gap-lg);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde-suave);
}

@media (min-width: 54em) {
  .nat-conservacion {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: start;
    gap: var(--gap-lg);
  }
}

.nat-conservacion__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-xs);
}

.nat-conservacion__intro h3 {
  margin: 0;
}

.nat-conservacion__intro .nota {
  margin: 0;
}

.nat-especies {
  display: grid;
  gap: var(--esp-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Los dos nombres van uno al lado del otro en cuanto hay sitio: son dos
   rótulos cortos y apilados dejaban un carril medio vacío. */
@media (min-width: 30em) {
  .nat-especies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
}

/* Los dos nombres cuelgan de una hoja, no de un filete. La forma es la MISMA
   que base.css le da a la viñeta de .lista-hojas —dos esquinas a --radio-full
   en diagonal—, sólo que a mayor tamaño y espejada entre los dos: es el gesto
   orgánico que ya tiene el sistema, reutilizado en vez de inventado. */
.nat-especie {
  position: relative;
  padding-left: var(--esp-lg);
  font-family: var(--fuente-display);
  font-size: var(--fs-h4);
  font-weight: var(--peso-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  line-height: var(--alto-linea-titulo);
  color: var(--color-texto);
}

.nat-especie::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 0 var(--radio-full) 0 var(--radio-full);
  background-color: var(--color-acento-alt);
}

/* La segunda hoja se gira: dos iguales seguidas volverían a ser una lista. */
.nat-especie:nth-child(2)::before {
  border-radius: var(--radio-full) 0 var(--radio-full) 0;
}

.nat-conservacion__pie {
  grid-column: 1 / -1;
  margin: 0;
}

/* ==========================================================================
   5. EL MURO DEL CONCURSO — curado en v5
   Banda salvia a todo el ancho que llega hasta el borde inferior de la
   sección (de ahí el margen negativo, que compensa el padding de .seccion).
   Dos movimientos: .nat-destacadas (nueve piezas en grande, con jerarquía
   real) y .nat-muro (el archivo completo en mosaico compacto, plegado).
   Los créditos de los fotógrafos no se mueven de donde están: visibles
   siempre, debajo de cada copia, en las dos escalas.
   ========================================================================== */
.nat-muro-banda {
  position: relative;
  margin-top: var(--esp-seccion);
  margin-bottom: calc(var(--esp-seccion) * -1);
  /* El relleno superior crece para dejar pasar la cresta: el canto ondulado
     mide hasta 5rem y el contenido no puede meterse debajo. */
  padding-block: calc(var(--esp-seccion) + var(--esp-xl)) var(--esp-seccion);
  background-color: var(--color-fondo-alt);
}

/* LA CRESTA. El canto de la banda era una recta de borde a borde: el gesto
   más de plantilla que quedaba en la sección, y encima en la transición más
   importante —de la crema al archivo del concurso—. Ahora la salvia entra por
   una curva irregular de tres senos, ninguno del mismo ancho, dibujada en
   crema encima de la banda. Es puro adorno: va aria-hidden en el marcado y si
   el SVG no pintara volvería el canto recto de siempre, sin pérdida.
   pointer-events: none porque se superpone al principio de la banda y no
   puede robar ni un clic al muro que hay debajo. */
.nat-cresta {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  height: clamp(2.25rem, 5vw, 5rem);
  fill: var(--color-fondo);
  pointer-events: none;
}

.nat-galeria__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-sm) var(--gap);
  margin-bottom: var(--gap);
}

.nat-galeria__titulos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2xs);
  max-width: var(--medida);
}

.nat-galeria__titulos h3 {
  margin: 0;
}

.nat-galeria__nota {
  margin: 0;
  font-size: var(--fs-pequeno);
  color: var(--color-texto-suave);
}

.nat-galeria__dato {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--esp-3xs);
  margin: 0;
  text-align: end;
}

.nat-galeria__cifra {
  /* min-width en `ch` + cifras tabulares: el contador de js/app.js sube de 0
     a 57 y el bloque está alineado a la derecha, así que sin ancho reservado
     el rótulo de debajo se desplazaría en cada fotograma. */
  display: inline-block;
  min-width: 2ch;
  text-align: end;
  font-family: var(--fuente-display);
  font-size: var(--fs-h2);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-acento-texto);
}

.nat-galeria__cifra-pie {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--color-texto-suave);
}

/* ---- LA CURADURÍA: las nueve destacadas ----------------------------------
   Rejilla de doce carriles con UNA pieza dominante (la primera: media pared
   y dos filas de alto) y ocho piezas de acompañamiento a tres anchos
   distintos. `align-items: start` es la misma decisión que desmontó la tabla
   del censo: cada pieza cuelga a su altura en vez de estirarse a la de la
   más alta, y dos descuelgues (6ª y 9ª) evitan que el canto inferior de
   cada fila haga regla.

   Aquí cada fotografía SÍ se recorta a un encuadre fijo (aspect-ratio +
   object-fit: cover): es lo que se hace al enmarcar una copia en grande, y
   es lo que permite que la rejilla componga en vez de apilarse. La caja
   queda reservada por el aspect-ratio antes de que baje un byte de imagen,
   así que no hay salto de maquetación. El archivo de abajo, en cambio,
   conserva la proporción real de cada copia: allí mandan las fotos.
   -------------------------------------------------------------------------- */
.nat-destacadas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* `dense` sólo trabaja en móvil: la 8ª pieza es apaisada y cruza las dos
     columnas, y sin él la 9ª dejaría un hueco al lado de la 7ª. */
  grid-auto-flow: row dense;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-lg);
}

.nat-destacadas .nat-obra {
  margin: 0;
}

/* El encuadre por defecto de la galería es vertical 3:4; las piezas que
   piden otro (las apaisadas, la dominante) lo declaran más abajo. */
.nat-destacadas .nat-obra__disparador {
  aspect-ratio: 3 / 4;
}

.nat-destacadas .nat-obra__disparador > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* En móvil, la dominante y las dos apaisadas cruzan el par de columnas;
   el resto va en parejas. */
.nat-destacadas .nat-obra:nth-child(1),
.nat-destacadas .nat-obra:nth-child(4),
.nat-destacadas .nat-obra:nth-child(8) {
  grid-column: 1 / -1;
}

.nat-destacadas .nat-obra:nth-child(4) .nat-obra__disparador,
.nat-destacadas .nat-obra:nth-child(8) .nat-obra__disparador {
  aspect-ratio: 3 / 2;
}

/* El barranquero dominante: el encuadre se apoya abajo para que la raqueta
   de la cola —lo que hace inconfundible a la especie— no se recorte nunca;
   lo que cede es el follaje de la parte alta. */
.nat-destacadas .nat-obra:nth-child(1) .nat-obra__disparador > img {
  object-position: center 60%;
}

/* El gavilán va en celda 4:5 sobre un original 2:3: el encuadre sube para
   que el recorte coma cielo y ramas por abajo, no la cabeza. */
.nat-destacadas .nat-obra:nth-child(9) .nat-obra__disparador > img {
  object-position: center 30%;
}

/* La ficha dominante habla un punto más alto que las demás: sólo el nombre
   de la especie sube a cuerpo base. El crédito no cambia: el crédito es
   crédito en todas las escalas. */
.nat-destacadas .nat-obra:nth-child(1) .nat-obra__especie {
  font-size: var(--fs-cuerpo);
}

/* Las hojas de las destacadas se asignan una a una —son nueve y el orden
   importa— de modo que dos piezas vecinas, en horizontal o en vertical,
   nunca compartan silueta. La 1ª y la 6ª heredan la hoja A del propio
   .nat-obra__disparador; la 9ª NO puede heredarla, aunque no toque a la 1ª:
   en escritorio cae bajo la 6ª (solapan en los carriles 8 y 9) y en móvil
   queda justo debajo de ella cuando `dense` la sube junto a la 7ª. Se le da
   la B, que no choca ni con la 7ª (C) ni con la 8ª (D) en ninguno de los
   dos modos. */
.nat-destacadas .nat-obra:nth-child(2) .nat-obra__disparador {
  border-radius: var(--nat-hoja-b);
}

.nat-destacadas .nat-obra:nth-child(3) .nat-obra__disparador {
  border-radius: var(--nat-hoja-c);
}

.nat-destacadas .nat-obra:nth-child(4) .nat-obra__disparador {
  border-radius: var(--nat-hoja-d);
}

.nat-destacadas .nat-obra:nth-child(5) .nat-obra__disparador {
  border-radius: var(--nat-hoja-b);
}

.nat-destacadas .nat-obra:nth-child(7) .nat-obra__disparador {
  border-radius: var(--nat-hoja-c);
}

.nat-destacadas .nat-obra:nth-child(8) .nat-obra__disparador {
  border-radius: var(--nat-hoja-d);
}

.nat-destacadas .nat-obra:nth-child(9) .nat-obra__disparador {
  border-radius: var(--nat-hoja-b);
}

@media (min-width: 62em) {
  .nat-destacadas {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: start;
    gap: var(--gap);
  }

  /* 1 · LA DOMINANTE. Media pared, dos filas de alto. Necesita estirarse
     ella sola (align-self) porque la rejilla alinea todo al principio, y
     su botón crece a lo que midan las dos filas de al lado. */
  .nat-destacadas .nat-obra:nth-child(1) {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    align-self: stretch;
  }

  .nat-destacadas .nat-obra:nth-child(1) .nat-obra__disparador {
    flex: 1;
    aspect-ratio: auto;
    min-height: var(--nat-alto-apertura);
  }

  /* 2 y 3 · las dos escoltas verticales, arriba a la derecha. */
  .nat-destacadas .nat-obra:nth-child(2) {
    grid-column: 7 / 10;
  }

  .nat-destacadas .nat-obra:nth-child(3) {
    grid-column: 10 / 13;
  }

  /* 4 · la apaisada bajo las escoltas, casi en su proporción real
     (1300×1039 ≈ 5:4): aquí no hace falta recortar casi nada. */
  .nat-destacadas .nat-obra:nth-child(4) {
    grid-column: 7 / 13;
    grid-row: 2;
  }

  .nat-destacadas .nat-obra:nth-child(4) .nat-obra__disparador {
    aspect-ratio: 5 / 4;
  }

  /* Segunda fila de acompañamiento: tres anchos distintos (5, 4 y 3
     carriles), no tres celdas iguales. La mediana se descuelga un paso. */
  .nat-destacadas .nat-obra:nth-child(5) {
    grid-column: 1 / 6;
  }

  .nat-destacadas .nat-obra:nth-child(5) .nat-obra__disparador {
    aspect-ratio: 4 / 5;
  }

  .nat-destacadas .nat-obra:nth-child(6) {
    grid-column: 6 / 10;
    margin-top: var(--esp-md);
  }

  .nat-destacadas .nat-obra:nth-child(7) {
    grid-column: 10 / 13;
  }

  /* Cierre: la apaisada grande (3:2 es su proporción real exacta) y el
     gavilán descolgado a su lado. */
  .nat-destacadas .nat-obra:nth-child(8) {
    grid-column: 1 / 8;
  }

  .nat-destacadas .nat-obra:nth-child(8) .nat-obra__disparador {
    aspect-ratio: 3 / 2;
  }

  .nat-destacadas .nat-obra:nth-child(9) {
    grid-column: 8 / 13;
    margin-top: var(--esp-lg);
  }

  .nat-destacadas .nat-obra:nth-child(9) .nat-obra__disparador {
    aspect-ratio: 4 / 5;
  }
}

/* ---- EL ARCHIVO: mosaico compacto de columnas ----------------------------
   Cada copia conserva su proporción real, como en una hoja de contactos —
   aquí ya no se enmarca: se archiva—. Más columnas y menos aire que en v4:
   el archivo es secundario a propósito, y su celda pequeña es lo que hace
   grande a la curaduría de arriba. Los créditos siguen visibles siempre.  */
.nat-muro {
  columns: 2;
  column-gap: var(--esp-xs);
}

@media (min-width: 40em) {
  .nat-muro {
    columns: 3;
  }
}

@media (min-width: 62em) {
  .nat-muro {
    columns: 4;
  }
}

/* Seis columnas de tope, y no cinco: el ciclo de hojas es de longitud
   cinco, y con cinco columnas cada columna repetiría su silueta. */
@media (min-width: 78em) {
  .nat-muro {
    columns: 6;
  }
}

.nat-obra {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
  margin: 0 0 var(--gap-sm);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* La copia colgada en la pared sigue SIN sombra: son cincuenta y siete
   fotografías y cincuenta y siete sombras suaves seguidas no se leen como
   profundidad, se leen como suciedad. El filete del ::after es lo que da el
   canto de la copia, en las dos escalas.
   La esquina por defecto es la hoja A (la heredan las destacadas 1ª, 6ª y
   9ª); el archivo compacto la rebaja a su escala mini más abajo.           */
.nat-obra__disparador {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--nat-hoja-a);
  background-color: rgb(var(--verde-bosque-rgb) / 0.06);
  box-shadow: none;
  cursor: pointer;
  transition: transform var(--transicion);
}

/* El ciclo de hojas del archivo, en escala mini y acotado a .nat-muro para
   que no pise la asignación a mano de las destacadas. Sigue siendo de
   longitud CINCO a propósito: cinco es primo con las 2, 3, 4 o 6 columnas
   del mosaico, así que ninguna columna repite la misma silueta dos veces
   seguidas y la pared se lee colgada a mano. El ::after hereda el radio. */
.nat-muro .nat-obra__disparador {
  border-radius: var(--nat-hoja-mini-a);
}

.nat-muro .nat-obra:nth-child(5n + 2) .nat-obra__disparador {
  border-radius: var(--nat-hoja-mini-b);
}

.nat-muro .nat-obra:nth-child(5n + 3) .nat-obra__disparador {
  border-radius: var(--nat-hoja-mini-c);
}

.nat-muro .nat-obra:nth-child(5n + 4) .nat-obra__disparador {
  border-radius: var(--nat-hoja-mini-d);
}

.nat-muro .nat-obra:nth-child(5n + 5) .nat-obra__disparador {
  border-radius: var(--radio-md);
}

/* En el archivo, el nombre de la especie baja a cuerpo micro (12,8 px de
   suelo real: sigue siendo legible, ver la escala de tokens.css). El
   crédito ya vive en micro y no baja de ahí: es la letra pequeña que
   nunca se vuelve invisible. */
.nat-muro .nat-obra__especie {
  font-size: var(--fs-micro);
}

.nat-obra__disparador::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--color-borde-suave);
  pointer-events: none;
}

.nat-obra__disparador > img {
  width: 100%;
  height: auto;
  transition: transform var(--dur-lenta) var(--ease-suave);
}

/* El único gesto al pasar por encima es que la copia se acerca dentro de su
   recorte; ya no se eleva. Sin sombra no hay nada que elevar. */
.nat-obra__disparador:hover > img,
.nat-obra__disparador:focus-visible > img {
  transform: scale(var(--escala-hover));
}

.nat-obra__pie {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  line-height: var(--alto-linea-titulo);
}

.nat-obra__especie {
  font-size: var(--fs-pequeno);
  color: var(--color-texto);
}

.nat-obra__especie--anonima {
  color: var(--color-texto-suave);
}

/* Nombres científicos en cursiva, como manda la nomenclatura binomial */
.nat-cientifico {
  font-style: italic;
}

/* El crédito del fotógrafo es obligatorio: siempre visible, nunca en hover.
   Terracota sobre salvia = 4.55:1 (par verificado en CONTRATO-V2 §4).     */
.nat-obra__autor {
  font-size: var(--fs-micro);
  color: var(--color-acento-texto);
}

/* ---- Resto del archivo, plegado ------------------------------------------ */
.nat-mas {
  margin-top: var(--esp-sm);
  text-align: center;
}

.nat-mas__boton {
  list-style: none;
}

.nat-mas__boton::-webkit-details-marker {
  display: none;
}

.nat-mas__boton::after {
  content: "+";
  font-size: var(--fs-cuerpo);
  line-height: 1;
}

.nat-mas[open] .nat-mas__boton::after {
  content: "–";
}

.nat-muro--resto {
  margin-top: var(--gap);
  text-align: start;
}

.nat-muro-banda__pie {
  margin-top: var(--esp-xl);
  margin-bottom: 0;
  text-align: center;
}

/* ==========================================================================
   AJUSTES MÓVIL
   ========================================================================== */
@media (max-width: 30em) {
  .nat-galeria__dato {
    align-items: flex-start;
    text-align: start;
  }
}