/* ==========================================================================
   paginas.css — composiciones propias de cada página.
   Lo genérico vive en components.css; aquí solo lo que no se reutiliza.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inicio · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-8) var(--e-9);
  background: linear-gradient(180deg, var(--blanco) 0%, var(--papel) 100%);
}

.hero__fondo {
  position: absolute;
  inset: -12% -20% auto -20%;
  height: 130%;
  background:
    radial-gradient(58% 46% at 22% 8%, rgba(200, 32, 47, 0.07), transparent 62%),
    radial-gradient(48% 42% at 88% 32%, rgba(53, 125, 67, 0.1), transparent 60%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Inicio · Capa de naturaleza

   Un follaje de veinte hojas flotando detrás de todo el héroe, sin recibir
   clics.

   Solo se anima `transform`: es de las pocas propiedades que el navegador
   puede mover en el compositor sin volver a calcular la página, así que
   veinte hojas a la vez no cuestan nada. Animar `top` o `left` aquí habría
   obligado a rehacer la maquetación en cada fotograma, con el carrusel al
   lado.
   -------------------------------------------------------------------------- */
.naturaleza {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.naturaleza__lienzo { width: 100%; height: 100%; }

.hoja {
  fill: var(--v5);
  /* El tope lo pone el contraste, no el gusto: el texto del héroe va encima y
     a 0,2 el párrafo se quedaba en 4,31:1, por debajo del 4,5:1 de la WCAG
     AA. Y como las hojas se mueven, el peor caso cambia de sitio con el
     tiempo, así que conviene margen y no rozar el mínimo. Si hacen falta más
     presentes, el camino es agrandarlas, no subir esto. */
  opacity: 0.14;
  transform-box: fill-box;
  /* El giro es desde el rabillo, que es por donde una hoja se sujeta. */
  transform-origin: 0 50%;
}

.hoja .nervio { stroke: var(--v6); stroke-width: 1.6; opacity: 0.5; }

/* Ocho temperamentos: duración, desfase, tamaño y recorrido. Repartidos entre
   las veinte hojas —y con cada una en un sitio distinto— el ojo no encuentra
   el patrón, que es lo que delata un bucle. Los desfases son negativos para
   que al cargar la página cada hoja esté ya a media animación y ninguna
   arranque desde el mismo punto. */
.hoja--a { animation: flotar   14s ease-in-out infinite  -1s; }
.hoja--b { animation: flotar-b 19s ease-in-out infinite  -5s; scale: 0.72; }
.hoja--c { animation: flotar   17s ease-in-out infinite  -9s; scale: 1.22; }
.hoja--d { animation: flotar-b 12s ease-in-out infinite  -3s; scale: 0.88; }
.hoja--e { animation: flotar   21s ease-in-out infinite -13s; scale: 0.62; }
.hoja--f { animation: flotar-b 16s ease-in-out infinite  -7s; scale: 1.05; }
.hoja--g { animation: flotar   11s ease-in-out infinite -16s; scale: 0.8; }
.hoja--h { animation: flotar-b 24s ease-in-out infinite -10s; scale: 1.35; }

/* `scale` va en su propia propiedad y no dentro de `transform`: así el tamaño
   no compite con el `transform` que anima el recorrido. Si se pusiera en
   `transform`, cada fotograma lo sobrescribiría y todas volverían a 1. */

@keyframes flotar {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(30px, -22px) rotate(11deg); }
  50%  { transform: translate(10px, -40px) rotate(-7deg); }
  75%  { transform: translate(-24px, -19px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* La segunda deriva al otro lado y gira al revés, para que dos hojas vecinas
   con el mismo temperamento no se muevan en paralelo. */
@keyframes flotar-b {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-26px, -16px) rotate(-10deg); }
  50%  { transform: translate(-6px, -36px) rotate(6deg); }
  75%  { transform: translate(22px, -14px) rotate(-8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* En pantallas estrechas el lienzo se recorta con `slice`, así que las hojas
   salen bastante más grandes y el follaje queda mucho más denso justo donde
   ya no hay columna libre: todo el texto le pasa por encima. Con la misma
   opacidad que en escritorio el párrafo bajaba a 4,39:1. */
@media (max-width: 760px) {
  .hoja { opacity: 0.085; }
}

/* Hay gente a la que el movimiento de fondo le molesta o le marea. El follaje
   se queda, quieto. */
@media (prefers-reduced-motion: reduce) {
  .hoja { animation: none; }
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: var(--e-8);
  align-items: center;
}

/* El rojo de marca sobre las hojas se quedaba en 3,90:1, y es texto pequeño
   en mayúsculas, que es de lo peor que se lee. El rojo oscuro es el mismo de
   la paleta y sube el contraste sin cambiar de color. */
.hero__texto .eyebrow { color: var(--rojo-osc); }

.hero__texto h1 {
  margin-block: var(--e-4) var(--e-5);
}

.hero__texto h1 em {
  font-style: normal;
  color: var(--rojo);
}

.hero__texto .lead { max-width: 46ch; }

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.hero__cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: 1px solid var(--linea);
}

.hero__cifras .estadistica__valor { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.hero__cifras .estadistica__etiqueta { font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   Inicio · Montaje del héroe

   Dos tarjetas cruzadas en diagonal, del ángulo superior izquierdo al inferior
   derecho, que es el sentido en el que se lee: arriba la fotografía de
   ambiente y, montada encima y ligeramente inclinada, la del carrusel con las
   especies registradas. La inclinación es lo que separa un montaje de dos
   recuadros pegados.
   -------------------------------------------------------------------------- */
/* Envuelve el resplandor y el montaje. Existe para que el resplandor tenga
   contra qué colocarse sin entrar en el bloque que se anima. */
.hero__derecha { position: relative; }

.hero__montaje {
  position: relative;
  /* Las dos tarjetas van colocadas en absoluto, así que el bloque no puede
     deducir su alto del contenido y hay que dárselo. */
  aspect-ratio: 1 / 0.94;
}

/* El resplandor tras el montaje, para que las tarjetas no floten sobre papel
   liso. Antes era la misma fotografía desenfocada; con la fotografía ahora
   nítida justo encima, repetirla borrosa detrás solo ensuciaba. Un degradado
   hace el mismo trabajo y no pesa nada. */
.hero__selva {
  position: absolute;
  inset: -9% -12%;
  /* Radios desiguales: un círculo se nota artificial y una hoja no tiene
     ejes de simetría. */
  border-radius: 46% 54% 59% 41% / 53% 44% 56% 47%;
  background:
    radial-gradient(56% 50% at 30% 26%, rgba(99, 169, 94, 0.5), transparent 68%),
    radial-gradient(52% 48% at 74% 74%, rgba(31, 74, 46, 0.4), transparent 66%);
  filter: blur(26px);
  opacity: 0.75;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(72% 66% at 50% 50%, #000 30%, transparent 76%);
  mask-image: radial-gradient(72% 66% at 50% 50%, #000 30%, transparent 76%);
}

@media (max-width: 760px) {
  .hero__selva { opacity: 0.45; }
}

/* La fotografía de ambiente, en el sitio que ocupaba el mapa. */
.hero__ambiente {
  position: absolute;
  top: 0;
  left: 0;
  width: 74%;
  margin: 0;
  z-index: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-2);
}

.hero__ambiente img {
  display: block;
  width: 100%;
  height: clamp(280px, 30vw, 420px);
  object-fit: cover;
}

.hero__pista {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.hero__pista svg { width: 15px; height: 15px; color: var(--rojo); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Inicio · ¿Cómo funciona?
   -------------------------------------------------------------------------- */
.como {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--e-8);
  align-items: start;
}

.como__intro { position: sticky; top: calc(var(--alto-header) + var(--e-6)); }
.como__intro h2 { margin-block: var(--e-3) var(--e-4); }
.como__intro .enlace-flecha { margin-top: var(--e-5); }

/* Encabezado de sección con acción a la derecha */
.sec-cabeza-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  margin-bottom: var(--e-6);
}

.sec-cabeza-fila .sec-cabeza { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Inicio · Líneas de acción
   -------------------------------------------------------------------------- */
.acciones .accion {
  display: grid;
  gap: var(--e-3);
  text-align: center;
  justify-items: center;
  padding-block: var(--e-6);
}

.accion h5 { letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   Inicio · Cifras de impacto
   -------------------------------------------------------------------------- */
.cifras-impacto__caja {
  background: var(--tinta);
  border-radius: var(--r-xl);
  padding: var(--e-8) var(--e-6);
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  overflow: hidden;
}

.cifras-impacto__caja::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 32, 47, 0.35), transparent 68%);
  pointer-events: none;
}

.cifras-impacto__caja h2 { color: #fff; }
.cifras-impacto__caja .eyebrow--tenue { color: rgba(255, 255, 255, 0.45); }
.cifras-impacto .icono-circulo { background: rgba(255, 255, 255, 0.09); color: #fff; }

/* --------------------------------------------------------------------------
   Inicio · Cierre
   -------------------------------------------------------------------------- */
/* Separaciones que antes iban como `style="..."` en el HTML. Escritas en el
   marcado eran frágiles: cualquier animación que limpie los estilos en línea
   del elemento se las lleva y el bloque se recoloca de golpe. */
.cierre .lead { margin-top: var(--e-4); }

/* Logotipo completo. Solo se usa donde hay sitio para que se lea la palabra;
   en la cabecera y el pie va únicamente el símbolo (ver `.marca__logo`). */
.logo-je {
  display: block;
  width: 132px;
  height: auto;
  margin: var(--e-6) auto 0;
}
.cierre__centro { text-align: center; margin-top: var(--e-7); }
.pildoras--filtro { margin-bottom: var(--e-5); }
.franja-cifras--cabecera { margin-bottom: var(--e-6); }
.pasos--cuatro { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) {
  .pasos--cuatro { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .pasos--cuatro { grid-template-columns: 1fr; }
}

.cierre__acciones {
  display: flex;
  gap: var(--e-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--e-6);
}

/* --------------------------------------------------------------------------
   Mapa
   -------------------------------------------------------------------------- */
.mapa-pagina {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--e-5);
  align-items: start;
}

.mapa-lateral {
  display: grid;
  gap: var(--e-4);
  position: sticky;
  top: calc(var(--alto-header) + var(--e-4));
}

.mapa-lateral__caja {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra-1);
}

.mapa-lateral__caja h4 { font-size: var(--t-md); margin-bottom: var(--e-4); }

.ranking { display: grid; gap: var(--e-1); max-height: 340px; overflow-y: auto; }

.ranking__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-2) var(--e-2);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color var(--dur-rapida);
}

.ranking__item:hover { background: var(--papel); }
.ranking__item.es-activo { background: var(--rojo-tinte); color: var(--rojo); }

.ranking__pos {
  font-size: var(--t-xs);
  font-weight: var(--peso-black);
  color: var(--gris-3);
  font-variant-numeric: tabular-nums;
}

.ranking__nombre { font-weight: var(--peso-semi); }

.ranking__valor {
  font-weight: var(--peso-black);
  font-variant-numeric: tabular-nums;
  color: var(--rojo);
}

/* --------------------------------------------------------------------------
   Especies · listado
   -------------------------------------------------------------------------- */
.listado-barra {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}

.listado-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-tenue);
}

.listado-resumen b { color: var(--tinta); }

/* --------------------------------------------------------------------------
   Especies · ficha
   -------------------------------------------------------------------------- */
.ficha-pagina { padding-block: var(--e-6) var(--e-9); }

.ficha__tabs-envoltura {
  position: sticky;
  top: calc(var(--alto-header) + var(--e-3));
  z-index: 60;
  margin-bottom: var(--e-5);
}

.ficha__contenido { display: grid; gap: var(--e-5); }

.bloque-titulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.bloque-titulo__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--rojo-tinte);
  color: var(--rojo);
  font-size: var(--t-xs);
  font-weight: var(--peso-black);
  flex-shrink: 0;
}

.bloque-titulo h3 { font-size: var(--t-lg); }

.ficha__dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5);
  align-items: start;
}

.ficha__linea-tiempo {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--e-5);
  align-items: start;
}

.lista-proyectos { display: grid; gap: var(--e-1); }

.lista-proyectos__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea-sutil);
  font-size: var(--t-sm);
}

.lista-proyectos__item:last-child { border-bottom: none; }
.lista-proyectos__item svg { width: 16px; height: 16px; color: var(--rojo); flex-shrink: 0; }
.lista-proyectos__item span:first-of-type { flex: 1; font-weight: var(--peso-semi); }

.lista-proyectos__valor {
  font-weight: var(--peso-bold);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chips-dpto { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3); }

.chip-dpto {
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--papel-2);
}

.chip-dpto b { display: block; font-size: var(--t-sm); }
.chip-dpto span { font-size: var(--t-xs); color: var(--texto-tenue); }

.amenazas-lista { display: grid; gap: var(--e-3); }

.amenaza {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--t-sm);
  line-height: 1.5;
}

.amenaza svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--rojo); }
.amenaza--ok svg { color: var(--ok); }

/* Aporte de campo: texto escrito por quien reportó el avistamiento.
   Se acredita siempre, para distinguirlo del dato taxonómico verificado. */
.aporte {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  border-radius: var(--r-md);
  background: var(--papel-2);
  border: 1px solid var(--linea-sutil);
}

.aporte svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--rojo);
}

.aporte p {
  font-size: var(--t-sm);
  line-height: 1.65;
  white-space: pre-line;
}

.aporte__credito {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--gris-2);
}

/* Pestañas de multimedia */
.multimedia-tabs {
  display: flex;
  gap: var(--e-4);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e-4);
}

.multimedia-tab {
  position: relative;
  padding: var(--e-2) 0 var(--e-3);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: var(--gris-2);
  cursor: pointer;
}

.multimedia-tab.es-activo { color: var(--rojo); }

.multimedia-tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-suave);
}

.multimedia-tab.es-activo::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Proyectos
   -------------------------------------------------------------------------- */
.proyecto-tarjeta { display: grid; gap: var(--e-4); }

.proyecto-tarjeta__cabeza { display: flex; gap: var(--e-3); align-items: flex-start; }
.proyecto-tarjeta__cabeza h4 { font-size: var(--t-md); }

/* Selector acotado a propósito: `.proyecto-tarjeta__cabeza span` alcanzaría
   también al `<span class="icono-circulo">` del icono y le impondría
   `inline-flex` y un `svg` de 13 px, dejando el icono descentrado y fuera de
   su círculo. Cualquier regla dentro de un bloque que contenga iconos redondos
   debe apuntar a una clase, nunca a la etiqueta. */
.proyecto-tarjeta__lugar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.proyecto-tarjeta__lugar svg { width: 13px; height: 13px; color: var(--rojo); }
.proyecto-tarjeta__desc { line-height: 1.6; }

.proyecto-tarjeta__cifras {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea-sutil);
}

.proyecto-tarjeta__cifras b {
  display: block;
  font-size: var(--t-md);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}

.proyecto-tarjeta__cifras > div:last-child b {
  font-size: var(--t-sm);
  color: var(--tinta);
  letter-spacing: -0.01em;
}

.proyecto-tarjeta__cifras span {
  font-size: var(--t-xs);
  /* gris-2 daba 3,17:1 sobre la tarjeta, por debajo del minimo de 4,5:1 de
     WCAG AA para texto de este tamano. Es la etiqueta que dice que significa
     cada numero, asi que conviene que se lea. */
  color: var(--gris-1);
  font-weight: var(--peso-semi);
}

/* --------------------------------------------------------------------------
   Glosario
   -------------------------------------------------------------------------- */
.glosario-pagina {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: var(--e-6);
  align-items: start;
}

.glosario-lateral {
  position: sticky;
  top: calc(var(--alto-header) + var(--e-4));
  display: grid;
  gap: var(--e-4);
}

.categorias { display: grid; gap: 2px; }

.categoria {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-tenue);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}

.categoria svg { width: 17px; height: 17px; opacity: 0.7; }
.categoria:hover { background: var(--papel); color: var(--tinta); }

.categoria.es-activo {
  background: var(--rojo);
  color: #fff;
}

.categoria.es-activo svg { opacity: 1; }
.categoria small { margin-left: auto; opacity: 0.7; font-weight: var(--peso-bold); }

.glosario-lista { display: grid; gap: var(--e-3); }

.glosario-barra {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

.glosario-sugerir {
  background: var(--v1);
  border: 1px solid var(--v2);
  border-radius: var(--r-lg);
  padding: var(--e-5);
}

.glosario-sugerir h5 { color: var(--v6); margin-bottom: var(--e-2); }
.glosario-sugerir p { font-size: var(--t-sm); color: var(--v6); opacity: 0.85; margin-bottom: var(--e-4); }

/* --------------------------------------------------------------------------
   Reportes
   -------------------------------------------------------------------------- */
.reportes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5);
  align-items: start;
}

.reportes-grid .ancho-total { grid-column: 1 / -1; }

.tarjeta-grafico { display: grid; gap: var(--e-4); }

.tarjeta-grafico__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
}

.tarjeta-grafico__cabeza h4 { font-size: var(--t-md); }
.tarjeta-grafico__cabeza p { font-size: var(--t-sm); color: var(--texto-tenue); margin-top: 3px; }

.uicn-barras { display: grid; gap: var(--e-3); }

.uicn-barra {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--e-3);
  align-items: center;
}

.uicn-barra__pista {
  display: block;
  height: 12px;
  border-radius: var(--r-full);
  background: var(--papel);
  overflow: hidden;
}

.uicn-barra__relleno {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Cuando una gráfica se reduce a un solo valor, decirlo en palabras informa
   más que dibujar una barra al 100 %, que parece un error de renderizado. */
.dato-unico {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  padding: var(--e-5);
  border-radius: var(--r-md);
  background: var(--papel-2);
  border: 1px solid var(--linea);
}

.dato-unico b {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.55;
  margin-bottom: var(--e-2);
}

/* --------------------------------------------------------------------------
   Conservación
   -------------------------------------------------------------------------- */
.linea-accion {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--e-5);
  padding: var(--e-6) 0;
  border-bottom: 1px solid var(--linea);
  align-items: start;
}

.linea-accion:last-child { border-bottom: none; }
.linea-accion h3 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.linea-accion p { color: var(--texto-tenue); line-height: 1.7; max-width: 68ch; }

.linea-accion__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* --------------------------------------------------------------------------
   Acerca de
   -------------------------------------------------------------------------- */
.acerca-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--e-8);
  align-items: start;
}

.acerca-intro p { margin-bottom: var(--e-4); line-height: 1.75; }

.acerca-datos { display: grid; gap: var(--e-3); }

.principio {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea-sutil);
}

.principio:last-child { border-bottom: none; }
.principio b { display: block; font-size: var(--t-sm); }
.principio span { font-size: var(--t-sm); color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   Registro
   -------------------------------------------------------------------------- */
.registro-pagina { padding-block: var(--e-7) var(--e-9); }

.registro-intro {
  max-width: 620px;
  margin: 0 auto var(--e-6);
  text-align: center;
}

.registro-intro h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.registro-intro p { margin-top: var(--e-4); }

.asistente-envoltura { max-width: 820px; margin-inline: auto; }

/* --- Buscador de especies del catálogo --- */
#bloque-buscador { position: relative; }

.buscador-especie > svg {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--gris-2);
  pointer-events: none;
  z-index: 1;
}

.buscador-especie .entrada { padding-left: 42px; }

.sugerencias {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin-top: 6px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-3);
}

/* La lista vive colgada del `body` para escapar del `overflow: hidden` del
   asistente, así que se posiciona contra la ventana y JS le fija
   left/top/width/max-height. Por encima de la cabecera pegajosa (900) y por
   debajo de la transición entre páginas (9999). */
.sugerencias--flotante {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  z-index: 950;
  margin-top: 0;
}

.sugerencia {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: var(--e-3) var(--e-4);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--linea-sutil);
  transition: background-color var(--dur-rapida);
}

.sugerencia:last-child { border-bottom: none; }

/* `es-activa` es el recorrido con flechas; se pinta igual que el hover para
   que teclado y ratón no den dos lenguajes distintos. */
.sugerencia:hover,
.sugerencia.es-activa { background: var(--rojo-tinte); }
.sugerencia.es-activa { box-shadow: inset 3px 0 0 var(--rojo); }

/* Nombre científico a la izquierda y grupo a la derecha, en una sola línea. */
.sugerencia__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.sugerencia b {
  font-size: var(--t-sm);
  color: var(--tinta);
  min-width: 0;
}

.sugerencia mark {
  background: transparent;
  color: var(--rojo);
  font-weight: inherit;
}

.sugerencia__grupo {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  font-size: 0.625rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris-1);
}

.sugerencia__meta {
  font-size: var(--t-xs);
  color: var(--gris-1);
}

/* Aviso de que la especie ya tiene ficha: evita duplicar registros a ciegas. */
.sugerencia__atlas {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--v4, #1f4a2e);
}

.sugerencia__atlas svg { width: 13px; height: 13px; flex-shrink: 0; }

.sugerencia--vacia { cursor: default; }
.sugerencia--vacia:hover { background: transparent; }
.sugerencia--vacia span { font-size: var(--t-xs); color: var(--gris-1); }

/* --- Especie confirmada --- */
.especie-elegida {
  padding: var(--e-4);
  border-radius: var(--r-md);
  background: var(--v1);
  border: 1px solid var(--v2);
}

.especie-elegida__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.especie-elegida__cabeza > div { flex: 1; min-width: 180px; }
.especie-elegida__cabeza b { display: block; font-size: var(--t-md); color: var(--v6); }
.especie-elegida__cabeza > div > span { display: block; }
.especie-elegida .icono-circulo { background: var(--v6); color: #fff; }

/* --- Lo que el Atlas ya sabe de la especie --- */
.ya-sabemos {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  background: var(--papel-2);
  border: 1px solid var(--linea);
}

.ya-sabemos__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: var(--tinta);
  margin-bottom: var(--e-3);
}

.ya-sabemos__titulo svg { width: 16px; height: 16px; color: var(--rojo); }
.ya-sabemos__bloque { margin-bottom: var(--e-3); }
.ya-sabemos__bloque b { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-2); }

.ya-sabemos__bloque ul {
  margin-top: var(--e-2);
  display: grid;
  gap: var(--e-2);
}

.ya-sabemos__bloque li {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--texto-tenue);
  padding-left: var(--e-4);
  position: relative;
}

.ya-sabemos__bloque li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v4);
}

/* --- Interruptor de especie no catalogada --- */
.interruptor {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  cursor: pointer;
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
}

.interruptor:hover { border-color: var(--rojo-borde); }
.interruptor input { width: 17px; height: 17px; accent-color: var(--rojo); cursor: pointer; }
.interruptor:has(input:checked) { background: var(--rojo-tinte); border-color: var(--rojo-borde); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  /* minmax(0, 1fr) y no 1fr: una columna «1fr» nunca baja del ancho mínimo de
     su contenido, y la pista del carrusel —cuarenta láminas en fila— lo hace
     enorme. Sin esto la columna se plantaba en 720 px dentro de una pantalla
     de 390 y el héroe se salía por la derecha. */
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }
  .hero__texto .lead { max-width: none; }
  /* El héroe pasa a una columna y el montaje se quedaría con todo el ancho de
     la página: a ese tamaño la diagonal se estira y pierde la gracia. Se le
     pone techo y se centra, así conserva las proporciones. */
  .hero__derecha { max-width: 720px; margin-inline: auto; width: 100%; }
  .como { grid-template-columns: 1fr; gap: var(--e-6); }
  .como__intro { position: static; }
  .mapa-pagina { grid-template-columns: 1fr; }
  .mapa-lateral { position: static; grid-template-columns: repeat(2, 1fr); }
  .glosario-pagina { grid-template-columns: 1fr; }
  .glosario-lateral { position: static; }
  .acerca-intro { grid-template-columns: 1fr; gap: var(--e-6); }
}

@media (max-width: 940px) {
  .ficha__dos,
  .ficha__linea-tiempo,
  .reportes-grid { grid-template-columns: 1fr; }
}

/* Por debajo de este ancho el montaje en diagonal deja de funcionar: las dos
   tarjetas se quedan tan estrechas que ni el mapa ni la fotografía se leen.
   Se apilan, y la fotografía se endereza para ocupar todo el ancho. */
@media (max-width: 760px) {
  /* Columna en vez de bloque para poder reordenar: apilado sin más, la
     tarjeta de especies caía detrás del titular, el texto, los botones, las
     cuatro cifras y la fotografía de ambiente, o sea muy por debajo de lo que
     se ve al entrar. Puesta primero es lo que engancha. */
  .hero__montaje {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }

  .hero__ambiente { position: static; width: 100%; order: 2; }
  .hero__ambiente img { height: clamp(220px, 38vh, 320px); }

  .carrusel--montaje {
    position: static;
    order: 1;
    width: 100%;
    margin-bottom: var(--e-5);
    transform: none;
  }
  .carrusel--montaje:hover,
  .carrusel--montaje:focus-within { transform: translateY(-4px); }
  .carrusel--montaje .carrusel__lamina { aspect-ratio: 16 / 11; }
  .carrusel--montaje .carrusel__tiempo { width: min(140px, 30vw); }
}

@media (max-width: 860px) {
  .hero { padding-block: var(--e-6) var(--e-7); }
  .hero__cifras { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
  .mapa-lateral { grid-template-columns: 1fr; }
  .linea-accion { grid-template-columns: 1fr; gap: var(--e-4); padding: var(--e-5) 0; }
  .ficha__tabs-envoltura { top: calc(var(--alto-header) + 4px); }
}

/* Campo de reserva de las listas taxonómicas: aparece bajo la lista cuando se
   elige «Otro…». Va separado y no dentro del mismo control para que se lea
   como un segundo paso y no como un adorno del desplegable. */
.campo__otro {
  margin-top: var(--e-2);
}