/* ==========================================================================
   components.css — botones, tarjetas, insignias, tabs, formularios, mapa,
   estadísticas, galería, glosario, gráficos y asistente de registro
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.8rem 1.4rem;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--dur-rapida) var(--ease-salida),
    background-color var(--dur-rapida) var(--ease-salida),
    border-color var(--dur-rapida) var(--ease-salida);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.btn > span { position: relative; z-index: 1; }

/* Capa animada por GSAP en hover */
.btn__capa {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scale(0, 1);
  transform-origin: left center;
  z-index: 0;
}

.btn--primario {
  background: var(--rojo);
  color: #fff;
  box-shadow: var(--sombra-rojo);
}

.btn--primario .btn__capa { background: var(--rojo-osc); }

.btn--secundario {
  background: var(--blanco);
  color: var(--tinta);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
}

.btn--secundario .btn__capa { background: var(--papel); }

.btn--fantasma {
  color: var(--rojo);
  border: 1.5px solid var(--rojo-borde);
}

.btn--fantasma .btn__capa { background: var(--rojo-tinte); }

.btn--oscuro {
  background: var(--tinta);
  color: #fff;
}

.btn--oscuro .btn__capa { background: var(--rojo); }

.btn--sm { padding: 0.55rem 1rem; font-size: var(--t-xs); }
.btn--lg { padding: 1rem 1.9rem; font-size: var(--t-base); }
.btn--bloque { width: 100%; }

.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: var(--rojo);
}

.enlace-flecha svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-media) var(--ease-suave);
}

.enlace-flecha:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra-1);
  will-change: transform;
}

.tarjeta--plana { box-shadow: none; }
.tarjeta--papel { background: var(--papel-2); }

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

.tarjeta__titulo h4,
.tarjeta__titulo h3 { flex: 1; }

/* Cabecera roja tipo panel de las referencias */
.panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}

.panel__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  background: var(--rojo);
  color: #fff;
}

.panel__cabeza svg { width: 18px; height: 18px; }

.panel__cabeza h3,
.panel__cabeza h4 {
  color: #fff;
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel__cuerpo { padding: var(--e-5); }

/* Icono circular */
.icono-circulo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  background: var(--rojo-tinte);
  color: var(--rojo);
  flex-shrink: 0;
}

.icono-circulo svg { width: 21px; height: 21px; }
.icono-circulo--rojo { background: var(--rojo); color: #fff; }
.icono-circulo--verde { background: var(--v1); color: var(--v6); }
.icono-circulo--sm { width: 36px; height: 36px; }
.icono-circulo--sm svg { width: 17px; height: 17px; }
.icono-circulo--lg { width: 62px; height: 62px; }
.icono-circulo--lg svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   Insignias
   -------------------------------------------------------------------------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.32rem 0.72rem;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.insignia svg { width: 13px; height: 13px; }
.insignia--rojo { background: var(--rojo-tinte); border-color: var(--rojo-borde); color: var(--rojo); }
.insignia--verde { background: var(--v1); border-color: var(--v2); color: var(--v6); }
.insignia--solida { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* Estados UICN */
.uicn {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
}

.uicn__punto {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--peso-black);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.uicn__punto--LC { background: var(--uicn-lc); }
.uicn__punto--NT { background: var(--uicn-nt); }
.uicn__punto--VU { background: var(--uicn-vu); }
.uicn__punto--EN { background: var(--uicn-en); }
.uicn__punto--CR { background: var(--uicn-cr); }

.uicn__punto--lg {
  width: 44px;
  height: 44px;
  font-size: var(--t-sm);
}

.uicn-escala {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.uicn-escala__item {
  flex: 1;
  min-width: 62px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  opacity: 0.35;
  transition: opacity var(--dur-media) var(--ease-salida);
}

.uicn-escala__item.es-actual { opacity: 1; }

.uicn-escala__item > span:last-child {
  font-size: 0.625rem;
  font-weight: var(--peso-semi);
  line-height: 1.25;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------------------
   Estadísticas
   -------------------------------------------------------------------------- */
.estadistica {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
}

.estadistica__valor {
  font-size: clamp(1.9rem, 3.6vw, var(--t-2xl));
  font-weight: var(--peso-black);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}

.estadistica__valor--oscuro { color: var(--tinta); }
.estadistica__valor--blanco { color: #fff; }

.estadistica__etiqueta {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  line-height: 1.3;
  color: var(--texto-tenue);
}

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

/* Franja de cifras. Se usa tanto sobre papel como sobre fondo oscuro, así que
   el color claro de las etiquetas solo se aplica dentro de un bloque oscuro:
   de lo contrario quedarían en blanco sobre blanco. */
.franja-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-5);
  /* Estas franjas las rellena el JS. Reservar el alto de una fila evita que
     todo lo que hay debajo se desplace cuando aparecen las cifras. */
  min-height: 62px;
}

.seccion--oscura .franja-cifras .estadistica__etiqueta,
.cifras-impacto__caja .franja-cifras .estadistica__etiqueta {
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   Mapa (Leaflet)
   -------------------------------------------------------------------------- */
.mapa-envoltura {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(160deg, #eef3ef, #dfe8e1);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-2);
}

.mapa {
  width: 100%;
  height: clamp(420px, 62vh, 660px);
  background: transparent;
  z-index: 1;
}

.mapa--alto { height: clamp(480px, 74vh, 820px); }
.mapa--mini { height: 300px; border-radius: var(--r-md); }

/* Neutraliza el marco de Leaflet */
.leaflet-container {
  font-family: var(--fuente);
  background: transparent;
  outline: none;
}

.leaflet-container a.leaflet-popup-close-button { display: none; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { display: none; }

.leaflet-control-attribution {
  font-size: 9px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--gris-2) !important;
  border-radius: var(--r-sm) 0 0 0;
}

.leaflet-control-attribution a { color: var(--gris-1) !important; }

.leaflet-bar {
  border: none !important;
  box-shadow: var(--sombra-2) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden;
}

.leaflet-bar a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  color: var(--tinta) !important;
  border-bottom-color: var(--linea) !important;
  font-weight: var(--peso-bold);
}

.leaflet-bar a:hover { background: var(--papel) !important; color: var(--rojo) !important; }

/* Trazo de departamentos */
.dpto {
  cursor: pointer;
  transition: fill-opacity var(--dur-rapida) var(--ease-salida);
}

/* Al pinchar un departamento el navegador enfoca el `<path>` y dibuja su
   anillo de foco. En un SVG ese anillo es la CAJA ENVOLVENTE del trazado, no
   su silueta: de ahí los rectángulos negros que aparecían sobre el mapa.
   Se quita, y quien lo sustituye es el borde rojo del departamento elegido,
   que sí sigue la forma real y se ve igual con ratón que con teclado. */
.leaflet-container path.leaflet-interactive:focus,
.leaflet-container path.leaflet-interactive:focus-visible,
.leaflet-container .leaflet-interactive:focus {
  outline: none;
}


/* Panel flotante del departamento */
.mapa-panel {
  position: absolute;
  top: var(--e-5);
  right: var(--e-5);
  z-index: 500;
  width: 268px;
  background: var(--blanco);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

/* Cierra la tarjeta y devuelve el mapa a Colombia entera. Al elegir un
   departamento el mapa se acerca a él, y sin esta salida había que alejar a
   mano con los controles. Va sobre la fotografía, así que lleva su propio
   fondo: sin él se pierde sobre las imágenes claras. */
.mapa-panel__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--tinta);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  transition: background var(--t-rapida), transform var(--t-rapida);
}

.mapa-panel__cerrar svg { width: 15px; height: 15px; }

.mapa-panel__cerrar:hover {
  background: var(--blanco);
  transform: scale(1.08);
}

.mapa-panel__cerrar:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

.mapa-panel.es-visible { visibility: visible; }

.mapa-panel__figura {
  height: 118px;
  background: linear-gradient(150deg, var(--v3), var(--v6));
  position: relative;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
}

/* La silueta ocupa la figura entera, no como un icono de 34 px: es el contorno
   real del departamento y hay que poder reconocerlo. Se deja aire alrededor
   para que el nombre de abajo no se le monte encima. */
.mapa-panel__silueta {
  width: 100%;
  height: 100%;
  padding: var(--e-4) var(--e-4) var(--e-6);
  opacity: 0.9;
}

.mapa-panel__silueta path {
  fill: rgba(255, 255, 255, 0.9);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.2;
  stroke-linejoin: round;
  /* Sin esto, en departamentos con islas el relleno se «come» los huecos. */
  fill-rule: evenodd;
  filter: drop-shadow(0 3px 8px rgba(12, 28, 18, 0.28));
}

.mapa-panel__figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo inferior. Hace falta con fotografía —el nombre va en blanco y sobre un
   paisaje claro desaparecería— y también con la silueta, que es blanca y le
   quitaba contraste al nombre justo donde se cruzan. */
.mapa-panel__figura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 24, 16, 0.55), transparent 58%);
  pointer-events: none;
}

.mapa-panel__figura--foto::after {
  background: linear-gradient(to top, rgba(12, 24, 16, 0.75), transparent 62%);
}

/* Crédito de la fotografía. Pequeño y discreto, pero presente: las licencias
   libres lo exigen y omitirlo invalidaría el permiso de uso. */
/* Crédito de la fotografía: debajo del nombre y a todo el ancho.
   Alineado a la derecha y con la mitad del ancho se solapaba con el nombre en
   cuanto el texto era largo —«Foto: Actividad Cultural Banco de la República ·
   CC BY-SA 2.0», de Bogotá, saltaba a dos líneas y se le montaba encima—.
   Ocupando su propia franja no puede chocar, mida lo que mida. */
.mapa-panel__credito {
  position: absolute;
  z-index: 2;
  left: var(--e-4);
  right: var(--e-3);
  bottom: 4px;
  font-size: 0.4375rem;
  line-height: 1.3;
  text-align: left;
  /* Dos líneas como mucho: la más larga de las actuales cabe de sobra, y un
     crédito futuro desmedido no puede comerse la fotografía. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Es un dato legal obligatorio, no información del Atlas: tiene que estar,
     pero sin pesar en la lectura. */
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.mapa-panel__nombre {
  position: absolute;
  /* Por encima del velo de la fotografía; si no, quedaría debajo. */
  z-index: 2;
  left: var(--e-4);
  /* Espacio suficiente para las dos líneas del crédito que va debajo. */
  bottom: 20px;
  font-size: var(--t-lg);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.mapa-panel__cuerpo { padding: var(--e-4); }

.mapa-panel__fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-block: var(--e-2);
}

.mapa-panel__fila svg { width: 17px; height: 17px; color: var(--rojo); flex-shrink: 0; }

/* La cifra y su etiqueta van pegadas en el HTML, sin espacio entre etiquetas.
   Sin esto se leía «0Especies registradas» en el panel de cada departamento. */
.mapa-panel__fila > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mapa-panel__fila b {
  font-size: var(--t-md);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.mapa-panel__fila span {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  line-height: 1.2;
}

.mapa-panel .btn { margin-top: var(--e-3); }

/* Leyenda de densidad */
.leyenda {
  position: absolute;
  left: var(--e-5);
  bottom: var(--e-5);
  z-index: 500;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-radius: var(--r-md);
  padding: var(--e-4);
  box-shadow: var(--sombra-2);
  min-width: 176px;
}

.leyenda__titulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  line-height: 1.3;
  margin-bottom: var(--e-3);
  color: var(--texto-tenue);
}

.leyenda__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  padding-block: 3px;
  font-variant-numeric: tabular-nums;
}

.leyenda__muestra {
  width: 26px;
  height: 13px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

/* Filtros flotantes sobre el mapa */
.mapa-filtros {
  position: absolute;
  top: var(--e-5);
  left: var(--e-5);
  z-index: 500;
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  max-width: 60%;
}

/* Grupos taxonómicos */
.grupos {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  justify-content: center;
  /* Igual que la franja de cifras: los chips los pinta el JS. */
  min-height: 96px;
}

.grupo-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  background: var(--blanco);
  border: 1px solid var(--linea);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  color: var(--texto-tenue);
  min-width: 92px;
  cursor: pointer;
  transition: border-color var(--dur-rapida), color var(--dur-rapida), background-color var(--dur-rapida);
}

.grupo-chip svg {
  width: 26px;
  height: 26px;
  color: var(--rojo);
  transition: transform var(--dur-media) var(--ease-suave);
}

.grupo-chip:hover { border-color: var(--rojo-borde); color: var(--tinta); }
.grupo-chip:hover svg { transform: translateY(-3px) scale(1.08); }

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

.grupo-chip.es-activo svg { color: #fff; }

.grupo-chip small {
  font-size: 0.625rem;
  font-weight: var(--peso-semi);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Grupos · fichas desplegables (portada)

   Una ficha por grupo con su logo en grande y sus cifras. Al pulsarla se
   despliega con más datos y se anima una escena propia: las aves vuelan, los
   mamíferos dejan huellas, los reptiles trazan su estela, los anfibios hacen
   ondas. La escena va detrás del contenido y solo se mueve al abrir.
   -------------------------------------------------------------------------- */
.grupos--fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  /* Cada ficha crece hacia abajo al abrirse; sin esto las demás de la fila
     estirarían con ella y quedarían con un hueco blanco enorme. */
  align-items: start;
  gap: var(--e-4);
  flex-wrap: nowrap;
  min-height: 0;
}

.grupo-ficha {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--blanco);
  border: 1px solid var(--linea);
  overflow: hidden;
  transition: border-color var(--t-media, 0.3s), box-shadow var(--t-media, 0.3s);
}

.grupo-ficha:hover { border-color: var(--rojo-borde); box-shadow: var(--sombra-2); }

.grupo-ficha.es-abierta {
  border-color: var(--rojo);
  box-shadow: 0 18px 44px rgba(26, 36, 32, 0.14);
}

/* --- La cara visible ------------------------------------------------------ */
.grupo-ficha__frente {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-6) var(--e-4) var(--e-5);
  background: none;
  border: 0;
  text-align: center;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.grupo-ficha__frente:focus-visible { outline: 3px solid var(--rojo); outline-offset: -3px; }

/* El logo, que es lo que manda en la ficha. */
.grupo-ficha__logo {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: var(--e-2);
  border-radius: var(--r-full, 999px);
  background: var(--rojo-tinte);
  border: 1px solid var(--rojo-borde);
  transition: transform var(--t-media, 0.3s), background var(--t-media, 0.3s),
              border-color var(--t-media, 0.3s);
}

.grupo-ficha__logo svg { width: 42px; height: 42px; color: var(--rojo); transition: color var(--t-media, 0.3s); }

.grupo-ficha:hover .grupo-ficha__logo { transform: translateY(-3px) scale(1.04); }

.grupo-ficha.es-abierta .grupo-ficha__logo {
  background: var(--rojo);
  border-color: var(--rojo);
}

.grupo-ficha.es-abierta .grupo-ficha__logo svg { color: #fff; }

.grupo-ficha__nombre {
  font-family: 'Archivo Narrow', var(--fuente, sans-serif);
  font-size: 1.1875rem;
  font-weight: var(--peso-bold);
  line-height: 1.1;
  color: var(--texto);
}

/* Con el gris tenue esta línea se quedaba en 2,88:1 cuando una figura de la
   escena le pasaba por detrás, por debajo del 4,5:1 de la WCAG AA. El color
   normal de texto la sube a 7:1 y la jerarquía se mantiene igual, porque son
   los números en negrita los que la marcan, no el gris. */
.grupo-ficha__resumen {
  font-size: 0.8125rem;
  color: var(--texto);
}

.grupo-ficha__resumen b { font-weight: var(--peso-bold); }

.grupo-ficha__flecha {
  display: grid;
  place-items: center;
  margin-top: var(--e-2);
  color: var(--gris-2);
  transition: transform var(--t-media, 0.3s), color var(--t-media, 0.3s);
}

.grupo-ficha__flecha svg { width: 18px; height: 18px; }
.grupo-ficha.es-abierta .grupo-ficha__flecha { transform: rotate(180deg); color: var(--rojo); }

/* --- El desplegable ------------------------------------------------------- */

/* `grid-template-rows` de 0fr a 1fr anima el alto sin que nadie tenga que
   medirlo en JS, que es lo que obliga a hacer `height: auto`. El hijo necesita
   `min-height: 0` o no se deja encoger. */
.grupo-ficha__caja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.grupo-ficha.es-abierta .grupo-ficha__caja { grid-template-rows: 1fr; }

.grupo-ficha__detalle {
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--e-5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grupo-ficha.es-abierta .grupo-ficha__detalle {
  padding-bottom: var(--e-5);
  opacity: 1;
  transition: opacity 0.4s ease 0.15s;
}

.grupo-ficha__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  margin: 0 0 var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.grupo-ficha__cifras div { text-align: center; }
.grupo-ficha__cifras dt { font-size: var(--t-xs); color: var(--texto-tenue); }

.grupo-ficha__cifras dd {
  margin: 2px 0 0;
  font-family: 'Archivo Narrow', var(--fuente, sans-serif);
  font-size: 1.375rem;
  font-weight: var(--peso-bold);
  color: var(--rojo);
}

.grupo-ficha__titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.grupo-ficha__lista {
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
  display: grid;
  gap: 1px;
}

.grupo-ficha__lista a {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 6px 8px;
  border-radius: var(--r-sm, 8px);
  font-size: 0.8125rem;
  color: var(--texto);
  text-decoration: none;
  transition: background var(--t-rapida, 0.18s), color var(--t-rapida, 0.18s);
}

.grupo-ficha__lista a:hover { background: var(--rojo-tinte); color: var(--rojo-osc); }
.grupo-ficha__lista span { color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

.grupo-ficha__ir { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   Las escenas

   Todas comparten caja (200x140) y todas arrancan quietas: la animación se
   dispara con `.es-animando`, que pone el JS al abrir.

   Van en bucle mientras la ficha está abierta. Una animación que se ejecuta
   una vez y se para deja la ficha muerta justo cuando alguien se ha detenido
   a leerla, que es exactamente al revés de lo que interesa.

   Se anima solo `transform`, `opacity` y `stroke-dashoffset`. Ninguna de las
   tres obliga al navegador a rehacer la maquetación, así que veinte figuras
   moviéndose no cuestan nada.
   -------------------------------------------------------------------------- */
.grupo-ficha__escena {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.grupo-ficha__escena svg { width: 100%; height: 100%; }
.grupo-ficha.es-abierta .grupo-ficha__escena { opacity: 1; }

.escena { fill: var(--v5); stroke: none; }
.escena--reptiles,
.escena--insectos,
.escena--flora { fill: none; stroke: var(--v5); }

/* Todo lo que se mueve gira sobre su propio centro y no sobre el origen del
   lienzo, que está en la esquina. */
.escena > * { transform-box: fill-box; transform-origin: 50% 50%; }

/* --------------------------------------------------------------------------
   Aves · cuatro siluetas cruzan batiendo las alas
   -------------------------------------------------------------------------- */

/* El grupo de fuera avanza y bascula. */
.escena--aves .ave {
  opacity: 0;
}

/* El de dentro solo abre y cierra las alas, mucho más rápido que el avance:
   un ave da varias aletadas por cada tramo que recorre. */
.escena--aves .ala {
  transform-box: fill-box;
  transform-origin: 50% 40%;
}

.es-animando .escena--aves .ave { animation: cruzar 5.4s linear infinite; }
.es-animando .escena--aves .ala { animation: aletear 0.42s ease-in-out infinite; }

/* Cada ave con su altura, su tamaño, su ritmo de aleteo y su desfase. Sin
   esto las siete van en formación cerrada y se nota el bucle.

   Los desfases no están repartidos a intervalos iguales: con -0,8, -1,6, -2,4…
   las aves pasan a compás, como un metrónomo. Los números de aquí abajo están
   escogidos para que se agrupen y se separen, que es como vuela una bandada.
   Y son negativos para que al abrir la ficha ya haya aves por toda la escena
   en vez de empezar todas desde la esquina. */
/* `translate` desplaza el recorrido entero de cada ave, para que las siete no
   vayan por el mismo carril. Va aquí y no dentro de los fotogramas porque las
   propiedades sueltas (`translate`, `rotate`, `scale`) se aplican por fuera
   del `transform`, así que no hay que repetir el desplazamiento en cada uno de
   los siete fotogramas del recorrido. */
/* El `.es-animando` de delante no sobra: la regla que pone `animation:` lo
   lleva, y el atajo reinicia `animation-delay` a cero. Sin él estas reglas
   pierden por especificidad y las siete aves vuelan pegadas, en el mismo
   punto exacto. */
.es-animando .escena--aves .ave--1 { animation-delay: 0s;    translate: 0 -14px; }
.es-animando .escena--aves .ave--2 { animation-delay: -0.9s; translate: 0 -62px; }
.es-animando .escena--aves .ave--3 { animation-delay: -1.7s; translate: 0 12px; }
.es-animando .escena--aves .ave--4 { animation-delay: -2.4s; translate: 0 -88px; }
.es-animando .escena--aves .ave--5 { animation-delay: -3.3s; translate: 0 -38px; }
.es-animando .escena--aves .ave--6 { animation-delay: -4.1s; translate: 0 -104px; }
.es-animando .escena--aves .ave--7 { animation-delay: -4.8s; translate: 0 -74px; }

/* El tamaño va en el grupo de dentro, no en el de fuera. Puesto fuera escalaba
   también el recorrido —el `scale` multiplica al `transform` que lo anima— y
   las aves pequeñas se quedaban a medio camino sin llegar a cruzar la ficha. */
.es-animando .escena--aves .ave--1 .ala { animation-duration: 0.42s; scale: 1; }
.es-animando .escena--aves .ave--2 .ala { animation-duration: 0.31s; scale: 0.72; }
.es-animando .escena--aves .ave--3 .ala { animation-duration: 0.52s; scale: 1.18; }
.es-animando .escena--aves .ave--4 .ala { animation-duration: 0.37s; scale: 0.85; }
.es-animando .escena--aves .ave--5 .ala { animation-duration: 0.27s; scale: 0.62; }
.es-animando .escena--aves .ave--6 .ala { animation-duration: 0.47s; scale: 1.05; }
.es-animando .escena--aves .ave--7 .ala { animation-duration: 0.34s; scale: 0.78; }

/* Cruza en horizontal ondulando, y bascula hacia donde gira, como al planear.
   El recorrido es casi plano a propósito: en diagonal todas pasaban por el
   centro de la ficha, que es justo donde están el logo y el nombre, y se
   quedaban tapadas. Plano, cada ave ocupa su banda —la separación la pone el
   `translate` de más abajo— y siempre hay varias a la vista. */
@keyframes cruzar {
  0%   { opacity: 0;   transform: translate(-26px, 116px) rotate(-5deg); }
  10%  { opacity: 0.5; }
  28%  { transform: translate(38px, 102px) rotate(-11deg); }
  50%  { transform: translate(102px, 112px) rotate(5deg); }
  74%  { transform: translate(166px, 99px) rotate(-9deg); }
  90%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translate(232px, 107px) rotate(-4deg); }
}

/* El aleteo es un aplastado vertical, no un giro: visto de frente, un ave que
   bate las alas se hace más estrecha y más ancha. */
@keyframes aletear {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%      { transform: scaleY(0.24) translateY(-1px); }
}

/* --------------------------------------------------------------------------
   Mamíferos · un rastro de huellas que cruza y se borra
   -------------------------------------------------------------------------- */
.escena--mamiferos .pisada { opacity: 0; }

/* Todas comparten el mismo ciclo y se separan con el retraso: así la última
   se apaga justo antes de que la primera vuelva a encenderse y el rastro
   parece continuo en vez de parpadear entero a la vez. */
.es-animando .escena--mamiferos .pisada { animation: pisar 4.6s ease-out infinite; }
.es-animando .escena--mamiferos .pisada--2 { animation-delay: 0.26s; }
.es-animando .escena--mamiferos .pisada--3 { animation-delay: 0.52s; }
.es-animando .escena--mamiferos .pisada--4 { animation-delay: 0.78s; }
.es-animando .escena--mamiferos .pisada--5 { animation-delay: 1.04s; }
.es-animando .escena--mamiferos .pisada--6 { animation-delay: 1.3s; }

/* Entra con un golpe seco —de más grande a su tamaño— porque una pata se
   apoya, no aparece. Luego se queda y se va borrando despacio. */
@keyframes pisar {
  0%   { opacity: 0; scale: 1.5; }
  4%   { opacity: 0.42; scale: 1; }
  55%  { opacity: 0.42; }
  80%  { opacity: 0; }
  100% { opacity: 0; scale: 1.5; }
}

/* --------------------------------------------------------------------------
   Reptiles · un cuerpo que se desliza por su rastro
   -------------------------------------------------------------------------- */

/* El rastro completo, tenue y quieto: es el camino. */
.escena--reptiles .rastro {
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.12;
}

/* Y encima un trazo corto que lo recorre sin parar. Un guion de 46 con un
   hueco de 320 deja un solo segmento visible; moviendo el desfase, ese
   segmento viaja. Es la forma barata de animar algo a lo largo de una curva
   sin `offset-path`, que no todos los navegadores traen. */
.escena--reptiles .cuerpo {
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 46 320;
  stroke-dashoffset: 366;
}

.es-animando .escena--reptiles .rastro { animation: asomar 0.6s ease-out forwards; }
.es-animando .escena--reptiles .cuerpo { animation: reptar 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }

@keyframes asomar { to { opacity: 0.12; } }

@keyframes reptar {
  0%   { stroke-dashoffset: 366; opacity: 0; }
  12%  { opacity: 0.4; }
  88%  { opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Anfibios · cae la gota y se abren las ondas
   -------------------------------------------------------------------------- */
.escena--anfibios .gota { opacity: 0; }

.escena--anfibios .onda {
  fill: none;
  stroke: var(--v5);
  stroke-width: 2.5;
  opacity: 0;
}

.es-animando .escena--anfibios .gota { animation: caer 3s cubic-bezier(0.55, 0, 0.85, 0.35) infinite; }

/* Las ondas arrancan cuando la gota toca el agua, no antes: de ahí que el
   retraso de la primera sea justo la duración de la caída. */
.es-animando .escena--anfibios .onda { animation: ondear 2.2s ease-out infinite; }
.es-animando .escena--anfibios .onda--1 { animation-delay: 0.85s; }
.es-animando .escena--anfibios .onda--2 { animation-delay: 1.2s; }
.es-animando .escena--anfibios .onda--3 { animation-delay: 1.55s; }

@keyframes caer {
  0%   { opacity: 0;   transform: translateY(-14px) scale(0.6, 1.4); }
  8%   { opacity: 0.5; }
  26%  { opacity: 0.5; transform: translateY(56px) scale(0.75, 1.3); }
  /* Al tocar el agua se aplasta y desaparece: eso es el impacto. */
  30%  { opacity: 0;   transform: translateY(58px) scale(1.7, 0.2); }
  100% { opacity: 0;   transform: translateY(58px) scale(1.7, 0.2); }
}

/* Se abren en elipse y no en círculo porque la superficie se ve en
   perspectiva; un círculo perfecto se lee como una diana, no como agua. */
@keyframes ondear {
  0%   { opacity: 0.5; transform: scale(0.2); }
  70%  { opacity: 0.16; }
  100% { opacity: 0;   transform: scale(2.8); }
}

/* --------------------------------------------------------------------------
   Peces · burbujas que suben torciéndose
   -------------------------------------------------------------------------- */
.escena--peces .burbuja { opacity: 0; }

.es-animando .escena--peces .burbuja { animation: burbujear 4.2s ease-in infinite; }
.es-animando .escena--peces .burbuja--2 { animation-delay: 0.7s; animation-duration: 3.4s; }
.es-animando .escena--peces .burbuja--3 { animation-delay: 1.4s; animation-duration: 4.8s; }
.es-animando .escena--peces .burbuja--4 { animation-delay: 2.1s; animation-duration: 3.8s; }
.es-animando .escena--peces .burbuja--5 { animation-delay: 2.8s; animation-duration: 4.4s; }
.es-animando .escena--peces .burbuja--6 { animation-delay: 3.4s; animation-duration: 3.6s; }

/* El zigzag lateral es lo que la separa de un punto que sube: en el agua una
   burbuja nunca sube recta. */
@keyframes burbujear {
  0%   { opacity: 0;    transform: translate(0, 0) scale(0.6); }
  12%  { opacity: 0.38; }
  35%  { transform: translate(9px, -48px) scale(1); }
  65%  { transform: translate(-7px, -94px) scale(1.12); }
  88%  { opacity: 0.38; }
  100% { opacity: 0;    transform: translate(5px, -146px) scale(1.25); }
}

/* --------------------------------------------------------------------------
   Insectos · un vuelo nervioso
   -------------------------------------------------------------------------- */
.escena--insectos .vuelo {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  stroke-dashoffset: 300;
  opacity: 0;
}

.escena--insectos .bicho { fill: var(--v5); stroke: none; opacity: 0; }
.escena--insectos .tiritona { transform-box: fill-box; transform-origin: 50% 50%; }

.es-animando .escena--insectos .vuelo { animation: rastro 4s linear infinite; }
.es-animando .escena--insectos .bicho { animation: revolotear 4s ease-in-out infinite; }
/* El temblor es aparte y mucho más rápido que el recorrido: es lo que hace
   que parezca un bicho y no una bola rodando. */
.es-animando .escena--insectos .tiritona { animation: tiritar 0.14s linear infinite; }

@keyframes rastro {
  0%   { stroke-dashoffset: 300; opacity: 0; }
  15%  { opacity: 0.26; }
  85%  { opacity: 0.26; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes revolotear {
  0%   { opacity: 0;    transform: translate(6px, 116px); }
  10%  { opacity: 0.55; }
  28%  { transform: translate(56px, 60px); }
  45%  { transform: translate(92px, 92px); }
  62%  { transform: translate(134px, 66px); }
  80%  { transform: translate(168px, 40px); }
  90%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translate(198px, 28px); }
}

@keyframes tiritar {
  0%, 100% { transform: translate(0.8px, -0.6px); }
  50%      { transform: translate(-0.8px, 0.6px); }
}

/* --------------------------------------------------------------------------
   Flora · el tallo crece y van brotando las hojas
   -------------------------------------------------------------------------- */
.escena--flora .tallo {
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.22;
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
}

.escena--flora .brote {
  fill: var(--v5);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  /* Cada hoja se despliega desde donde se une al tallo. */
  transform-origin: 0 50%;
}

.escena--flora .brote--2 { transform-origin: 100% 50%; }

.es-animando .escena--flora .tallo { animation: crecer 5.6s ease-in-out infinite; }
/* Cada hoja brota cuando el tallo ya ha pasado por su altura. */
.es-animando .escena--flora .brote--1 { animation: brotar 5.6s ease-out 0.9s infinite; }
.es-animando .escena--flora .brote--2 { animation: brotar 5.6s ease-out 1.5s infinite; }
.es-animando .escena--flora .brote--3 { animation: brotar 5.6s ease-out 2.1s infinite; }

@keyframes crecer {
  0%   { stroke-dashoffset: 96; opacity: 0; }
  8%   { opacity: 0.22; }
  55%  { stroke-dashoffset: 0; opacity: 0.22; }
  85%  { opacity: 0.22; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes brotar {
  0%   { opacity: 0; transform: scale(0.1) rotate(-14deg); }
  14%  { opacity: 0.3; transform: scale(1) rotate(0deg); }
  70%  { opacity: 0.3; }
  100% { opacity: 0; transform: scale(1) rotate(0deg); }
}

/* --------------------------------------------------------------------------
   Respaldo · anillos que laten, para el grupo que no tenga escena propia
   -------------------------------------------------------------------------- */
.escena--generico .pulso {
  fill: none;
  stroke: var(--v5);
  stroke-width: 3;
  opacity: 0;
}

.es-animando .escena--generico .pulso { animation: latir 2.8s ease-out infinite; }
.es-animando .escena--generico .pulso--2 { animation-delay: 0.9s; }

@keyframes latir {
  0%   { opacity: 0.4; transform: scale(0.4); }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* --- Encabezado del bloque ----------------------------------------------- */
.grupos-cabecera {
  max-width: 62ch;
  margin: 0 auto var(--e-6);
  text-align: center;
}

.grupos-cabecera h2 { margin: var(--e-3) 0 var(--e-4); }

@media (max-width: 720px) {
  .grupos--fichas { grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
  .grupo-ficha__logo { width: 62px; height: 62px; }
  .grupo-ficha__logo svg { width: 34px; height: 34px; }
  .grupo-ficha__nombre { font-size: 1.0625rem; }
  .grupo-ficha__frente { padding: var(--e-5) var(--e-3) var(--e-4); }
}

/* Sin movimiento la ficha se abre igual, pero sin escena ni transiciones: la
   información es la misma, que es lo que importa. */
@media (prefers-reduced-motion: reduce) {
  .grupo-ficha,
  .grupo-ficha__logo,
  .grupo-ficha__flecha,
  .grupo-ficha__caja,
  .grupo-ficha__detalle,
  .grupo-ficha__escena { transition: none; }
  .grupo-ficha__escena { display: none; }
  .es-animando * { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Filtros y campos
   -------------------------------------------------------------------------- */
.filtros {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) auto;
  gap: var(--e-3);
  align-items: end;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--e-4);
  box-shadow: var(--sombra-1);
}

.campo { display: grid; gap: var(--e-2); min-width: 0; }

.campo__etiqueta {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris-2);
}

.campo__control {
  position: relative;
  display: flex;
  align-items: center;
}

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

.campo__control:has(> svg:first-child) .entrada { padding-left: 40px; }

.entrada,
.selector,
.area {
  width: 100%;
  padding: 0.72rem 0.95rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--linea);
  background: var(--papel-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--tinta);
  transition: border-color var(--dur-rapida) var(--ease-salida),
    background-color var(--dur-rapida) var(--ease-salida);
}

.entrada::placeholder,
.area::placeholder { color: var(--gris-2); font-weight: var(--peso-normal); }

.entrada:focus,
.selector:focus,
.area:focus {
  outline: none;
  border-color: var(--rojo);
  background: var(--blanco);
}

.entrada.es-invalido,
.selector.es-invalido,
.area.es-invalido { border-color: var(--rojo); background: var(--rojo-tinte); }

.area { resize: vertical; min-height: 104px; line-height: 1.55; }

.selector {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a938c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 15px;
  cursor: pointer;
}

.campo__error {
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--rojo);
  display: none;
}

.campo.es-invalido .campo__error { display: block; }

/* Barra de búsqueda suelta */
.buscador {
  position: relative;
  display: flex;
  align-items: center;
}

.buscador svg {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--gris-2);
}

.buscador .entrada {
  padding: 0.95rem 1rem 0.95rem 46px;
  border-radius: var(--r-full);
  font-size: var(--t-base);
  background: var(--blanco);
}

/* Píldoras de filtro */
.pildoras { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.pildora {
  padding: 0.42rem 0.9rem;
  border-radius: var(--r-full);
  border: 1px solid var(--linea);
  background: var(--blanco);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  color: var(--texto-tenue);
  cursor: pointer;
  transition: all var(--dur-rapida) var(--ease-salida);
}

.pildora:hover { border-color: var(--gris-3); color: var(--tinta); }

.pildora.es-activo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Tarjeta de especie
   -------------------------------------------------------------------------- */
.especie-tarjeta {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  will-change: transform;
}

.especie-tarjeta__figura {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(150deg, var(--v2), var(--v5));
  display: grid;
  place-items: center;
}

.especie-tarjeta__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.especie-tarjeta__figura > svg {
  width: 42px;
  height: 42px;
  color: rgba(255, 255, 255, 0.5);
}

.especie-tarjeta__uicn {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  z-index: 2;
}

.especie-tarjeta__grupo {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}

.especie-tarjeta__cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); }

.especie-tarjeta__nombre {
  font-size: var(--t-md);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--tinta);
}

.especie-tarjeta__sci {
  display: block;
  margin-top: 3px;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--gris-1);
}

.especie-tarjeta__pie {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-sutil);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--texto-tenue);
}

.especie-tarjeta__pie span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.especie-tarjeta__pie svg { width: 13px; height: 13px; color: var(--rojo); }

/* --------------------------------------------------------------------------
   Ficha de especie
   -------------------------------------------------------------------------- */
.ficha {
  display: grid;
  /* `minmax(0, ...)` y no `1fr` a secas: `1fr` equivale a `minmax(auto, 1fr)`,
     cuyo mínimo es el min-content del contenido, y entonces la columna se
     niega a encoger. Es lo que desbordaba la ficha en pantallas estrechas. */
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}

.ficha__aside {
  position: sticky;
  top: calc(var(--alto-header) + var(--e-5));
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: var(--sombra-2);
}

.ficha__figura {
  position: relative;
  aspect-ratio: 4 / 3.4;
  background: linear-gradient(150deg, var(--v4), var(--v6));
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* La foto se ve ENTERA, venga apaisada, vertical o cuadrada: `contain` no
   recorta. El hueco que sobra no queda vacío ni con bandas de color, sino con
   la misma imagen ampliada y desenfocada detrás.

   Se prefiere esto a adaptar el alto del contenedor a cada foto: eso obligaría
   a esperar a que cargue para saber cuánto mide, y la ficha entera daría un
   salto al recolocarse. */
.ficha__foto {
  /* Posición absoluta y no `height: 100%` en flujo normal: la figura fija su
     alto con `aspect-ratio` y la imagen lo pedía de vuelta a la figura, un
     bucle que el navegador rompe usando el alto natural de la foto. Con una
     vertical eso hacía crecer la caja de la imagen por debajo del marco, y el
     `overflow: hidden` de la figura le cortaba el pie. Sacándola del flujo, la
     figura manda y la imagen se ajusta dentro. */
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px) saturate(1.25) brightness(0.82);
  /* El desenfoque aclara los bordes: se amplía para que no se vea el marco. */
  transform: scale(1.15);
  pointer-events: none;
}

.ficha__figura > svg { width: 56px; height: 56px; color: rgba(255, 255, 255, 0.45); }

.ficha__volver {
  position: absolute;
  top: var(--e-4);
  left: var(--e-4);
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.ficha__galeria-btn {
  position: absolute;
  bottom: var(--e-4);
  right: var(--e-4);
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.ficha__aside-cuerpo { padding: var(--e-5); }

.ficha__aside h1 {
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  color: #fff;
  letter-spacing: -0.035em;
}

.ficha__sci {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-md);
  font-style: italic;
  color: rgba(255, 255, 255, 0.62);
}

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

.ficha__metas .insignia {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

.ficha__bloque {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.ficha__bloque-titulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: var(--e-3);
}

.ficha__idiomas { display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.ficha__idiomas b { color: rgba(255, 255, 255, 0.9); }

.sabias {
  margin: var(--e-5) var(--e-5) 0;
  padding: var(--e-4);
  border-radius: var(--r-md);
  background: rgba(224, 169, 59, 0.12);
  border: 1px solid rgba(224, 169, 59, 0.24);
}

.sabias__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: #f0c471;
  margin-bottom: var(--e-2);
}

.sabias__titulo svg { width: 16px; height: 16px; }
.sabias p { font-size: var(--t-sm); line-height: 1.55; }
.sabias li { font-size: var(--t-sm); line-height: 1.55; padding-block: 3px; }

/* Tabs */
.tabs {
  position: relative;
  display: flex;
  gap: var(--e-1);
  padding: var(--e-1);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  box-shadow: var(--sombra-1);
  overflow-x: auto;
  scrollbar-width: none;
  isolation: isolate;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.65rem 1.15rem;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: var(--texto-tenue);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-rapida) var(--ease-salida);
  z-index: 1;
}

.tab svg { width: 16px; height: 16px; opacity: 0.7; }
.tab:hover { color: var(--tinta); }
.tab[aria-selected='true'] { color: #fff; }
.tab[aria-selected='true'] svg { opacity: 1; }

.tabs__indicador {
  position: absolute;
  top: var(--e-1);
  left: 0;
  height: calc(100% - var(--e-1) * 2);
  border-radius: var(--r-full);
  background: var(--rojo);
  z-index: 0;
  will-change: transform, width;
}

.tab-panel { display: none; }
.tab-panel.es-activo { display: block; }

/* Lista de datos */
.datos { display: grid; gap: var(--e-1); }

.dato {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: var(--e-4);
  align-items: baseline;
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linea-sutil);
  font-size: var(--t-sm);
}

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

.dato__clave {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris-2);
}

.dato__valor { line-height: 1.55; }

/* Rasgos con icono */
.rasgos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }

.rasgo { display: flex; gap: var(--e-3); align-items: flex-start; }
.rasgo svg { width: 19px; height: 19px; color: var(--rojo); flex-shrink: 0; margin-top: 2px; }
.rasgo b { display: block; font-size: var(--t-sm); font-weight: var(--peso-bold); }
.rasgo span { display: block; font-size: var(--t-sm); color: var(--texto-tenue); line-height: 1.5; }

/* Taxonomía en escalera */
.taxonomia { display: grid; gap: 0; }

.taxon {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  position: relative;
}

.taxon:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 34px;
  bottom: -4px;
  width: 1.5px;
  background: var(--linea);
}

.taxon__punto {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: var(--r-full);
  background: var(--papel);
  border: 1.5px solid var(--linea);
  flex-shrink: 0;
  z-index: 1;
}

.taxon__punto svg { width: 13px; height: 13px; color: var(--gris-1); }

.taxon:last-child .taxon__punto { background: var(--rojo); border-color: var(--rojo); }
.taxon:last-child .taxon__punto svg { color: #fff; }

.taxon__clave {
  width: 68px;
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris-2);
}

.taxon__valor { font-size: var(--t-sm); font-weight: var(--peso-semi); }
.taxon:last-child .taxon__valor { font-style: italic; color: var(--rojo); }

/* --------------------------------------------------------------------------
   Gráficos
   -------------------------------------------------------------------------- */
.grafico { width: 100%; overflow: visible; }

.grafico__barra {
  fill: var(--rojo);
  transform-origin: bottom;
  transform-box: fill-box;
  will-change: transform;
}

.grafico__barra:hover { fill: var(--rojo-osc); }
.grafico__barra--verde { fill: var(--v5); }

.grafico__eje {
  font-size: 10px;
  font-weight: 600;
  fill: var(--gris-2);
  font-variant-numeric: tabular-nums;
}

.grafico__rejilla { stroke: var(--linea); stroke-width: 1; }

.grafico-envoltura {
  position: relative;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding-bottom: var(--e-2);
}

/* El SVG conserva su tamaño y queda centrado; cualquier otro contenido
   —las barras horizontales que se usan con pocos datos— ocupa todo el ancho.
   Sin esto, el flex las encoge al tamaño de su texto. */
.grafico-envoltura > svg { flex-shrink: 0; }
.grafico-envoltura > :not(svg) { flex: 1; min-width: 0; }

/* Barras horizontales */
.barra-lista { display: grid; gap: var(--e-3); }

.barra-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-3);
  align-items: center;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
}

.barra-item__pista {
  display: block;
  grid-column: 1 / -1;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--papel);
  overflow: hidden;
}

/* `display: block` es imprescindible: son <span>, y en línea no aplicarían
   ni el alto ni el ancho, así que la barra quedaría invisible. */
.barra-item__relleno {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--rojo);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

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

/* --------------------------------------------------------------------------
   Galería y visor
   -------------------------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--e-3);
}

.galeria__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(150deg, var(--v3), var(--v6));
  cursor: pointer;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.5);
  will-change: transform;
}

.galeria__item img { width: 100%; height: 100%; object-fit: cover; }
.galeria__item > svg { width: 26px; height: 26px; }

.galeria__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-salida);
}

.galeria__item:hover::after { opacity: 1; }

.galeria__pie {
  position: absolute;
  left: var(--e-3);
  right: var(--e-3);
  bottom: var(--e-3);
  z-index: 2;
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-media) var(--ease-salida),
    transform var(--dur-media) var(--ease-suave);
}

.galeria__item:hover .galeria__pie { opacity: 1; transform: none; }

.galeria__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

.galeria__play span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--rojo);
}

.galeria__play svg { width: 18px; height: 18px; }

/* Visor */
.visor {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: var(--e-5);
  visibility: hidden;
  opacity: 0;
}

.visor.es-abierto { visibility: visible; }

.visor__fondo {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 15, 0.92);
  backdrop-filter: blur(8px);
}

.visor__marco {
  position: relative;
  z-index: 1;
  max-width: min(1000px, 92vw);
  width: 100%;
  background: var(--blanco);
  border-radius: var(--r-lg);
  overflow: hidden;
  will-change: transform, opacity;
}

/* Sin proporción fija: el marco se ajusta a la foto. Con un 16/10 rígido, una
   foto vertical quedaba como una tira estrecha entre dos franjas enormes. Al
   ser una ventana modal, que cambie de tamaño no descoloca nada de la página. */
.visor__figura {
  background: #0f1512;
  display: grid;
  place-items: center;
  min-height: 200px;
  color: rgba(255, 255, 255, 0.5);
}

.visor__figura img {
  display: block;
  max-width: 100%;
  /* Se deja sitio para el pie del visor dentro de la altura de la ventana. */
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.visor__figura > svg { width: 52px; height: 52px; }

.visor__cuerpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
}

.visor__cerrar {
  position: absolute;
  top: var(--e-4);
  right: var(--e-4);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--tinta);
}

.visor__cerrar svg { width: 19px; height: 19px; }

.visor__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--tinta);
  transition: background-color var(--dur-rapida);
}

.visor__nav:hover { background: #fff; }
.visor__nav--ant { left: var(--e-4); }
.visor__nav--sig { right: var(--e-4); }
.visor__nav svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Proceso / pasos
   -------------------------------------------------------------------------- */
.pasos { display: grid; gap: var(--e-5); }
.pasos--fila { grid-template-columns: repeat(5, 1fr); }

.paso {
  position: relative;
  padding-top: var(--e-5);
  border-top: 2px solid var(--linea);
}

.paso__num {
  font-size: var(--t-2xl);
  font-weight: var(--peso-black);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--rojo);
  opacity: 0.22;
}

.paso h4 { margin-block: var(--e-3) var(--e-2); }
.paso p { font-size: var(--t-sm); color: var(--texto-tenue); line-height: 1.6; }

.paso__progreso {
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
}

/* Pasos numerados verticales (¿Cómo funciona?) */
.pasos-num { display: grid; gap: var(--e-5); }

.paso-num {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
}

.paso-num__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  background: var(--rojo);
  color: #fff;
  flex-shrink: 0;
}

.paso-num__marca svg { width: 23px; height: 23px; }

.paso-num__indice {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 23px;
  height: 23px;
  border-radius: var(--r-full);
  background: var(--tinta);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: var(--peso-black);
  border: 2px solid var(--papel);
}

.paso-num h4 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.paso-num p { font-size: var(--t-sm); color: var(--texto-tenue); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Glosario
   -------------------------------------------------------------------------- */
.alfabeto {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.letra {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: var(--texto-tenue);
  cursor: pointer;
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}

.letra:hover:not(:disabled) { background: var(--rojo-tinte); color: var(--rojo); }
.letra.es-activo { background: var(--rojo); color: #fff; }
.letra:disabled { opacity: 0.24; cursor: default; }
.letra--todas { width: auto; padding-inline: var(--e-4); }

.termino {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-5);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  will-change: transform, opacity;
}

.termino__icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  background: var(--v1);
  color: var(--v6);
  flex-shrink: 0;
}

.termino__icono svg { width: 19px; height: 19px; }

.termino h4 {
  font-size: var(--t-md);
  color: var(--v6);
  margin-bottom: var(--e-2);
}

.termino p { font-size: var(--t-sm); color: var(--texto-tenue); line-height: 1.6; }

.termino__cat {
  margin-top: var(--e-3);
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   Asistente de registro (wizard)
   -------------------------------------------------------------------------- */
.asistente {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.asistente__cabeza { padding: var(--e-6) var(--e-6) var(--e-5); }

.asistente__pista {
  height: 4px;
  background: var(--linea-sutil);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: var(--e-4);
}

.asistente__progreso {
  height: 100%;
  background: var(--rojo);
  border-radius: var(--r-full);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.asistente__hitos {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.hito {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  color: var(--gris-2);
  transition: color var(--dur-media) var(--ease-salida);
}

.hito__punto {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: var(--r-full);
  background: var(--papel);
  border: 1.5px solid var(--linea);
  font-size: 0.625rem;
  font-weight: var(--peso-black);
  flex-shrink: 0;
  transition: all var(--dur-media) var(--ease-salida);
}

.hito__punto svg { width: 12px; height: 12px; }

.hito.es-actual { color: var(--rojo); }
.hito.es-actual .hito__punto { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.hito.es-hecho { color: var(--ok); }
.hito.es-hecho .hito__punto { background: var(--ok); border-color: var(--ok); color: #fff; }

.asistente__escena {
  position: relative;
  padding: var(--e-2) var(--e-6) var(--e-6);
  overflow: hidden;
}

.asistente__paso { display: none; }
.asistente__paso.es-activo { display: block; }

.asistente__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  border-top: 1px solid var(--linea);
  background: var(--papel-2);
}

.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
.campos--1 { grid-template-columns: 1fr; }
.campo--ancho { grid-column: 1 / -1; }

/* Zona de carga de imagen */
.soltar {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: var(--e-2);
  padding: var(--e-6);
  border: 2px dashed var(--linea);
  border-radius: var(--r-md);
  background: var(--papel-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
}

.soltar:hover,
.soltar.es-encima { border-color: var(--rojo); background: var(--rojo-tinte); }
.soltar svg { width: 27px; height: 27px; color: var(--gris-2); }
.soltar b { font-size: var(--t-sm); }
.soltar span { font-size: var(--t-xs); color: var(--gris-2); }

/* Resumen de confirmación */
.resumen {
  display: grid;
  gap: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  overflow: hidden;
}

.resumen__fila {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--linea-sutil);
}

.resumen__fila:last-child { border-bottom: none; }
.resumen__fila:nth-child(odd) { background: var(--papel-2); }

.resumen__clave {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris-2);
}

.resumen__valor { font-weight: var(--peso-semi); }
.resumen__valor:empty::after,
.resumen__valor.es-vacio::after {
  content: 'Sin diligenciar';
  color: var(--gris-3);
  font-weight: var(--peso-normal);
}

/* Éxito */
.exito {
  display: none;
  text-align: center;
  padding: var(--e-8) var(--e-6);
}

.exito.es-visible { display: block; }

.exito__marca {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-inline: auto;
  border-radius: var(--r-full);
  background: var(--ok);
  color: #fff;
}

.exito__marca svg { width: 42px; height: 42px; }

.exito__marca svg path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

.exito h3 { margin-block: var(--e-5) var(--e-3); }

/* Puerta de acceso */
.puerta {
  max-width: 440px;
  margin-inline: auto;
  text-align: center;
}

.puerta .icono-circulo { margin-inline: auto; margin-bottom: var(--e-5); }
.puerta form { display: grid; gap: var(--e-3); margin-top: var(--e-5); text-align: left; }

/* --------------------------------------------------------------------------
   Estados de carga / vacío
   -------------------------------------------------------------------------- */
.esqueleto {
  background: linear-gradient(90deg, var(--linea-sutil) 25%, var(--papel) 50%, var(--linea-sutil) 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}

@keyframes brillo {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.esqueleto--tarjeta { height: 300px; }
.esqueleto--linea { height: 13px; margin-bottom: var(--e-2); }

.vacio {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  padding: var(--e-9) var(--e-5);
  text-align: center;
  color: var(--texto-tenue);
}

.vacio svg { width: 42px; height: 42px; color: var(--gris-3); }
.vacio b { font-size: var(--t-md); color: var(--tinta); }
.vacio p { font-size: var(--t-sm); max-width: 40ch; }

/* Aviso */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-md);
  background: var(--rojo-tinte);
  border: 1px solid var(--rojo-borde);
  font-size: var(--t-sm);
  color: var(--rojo-osc);
}

.aviso svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.aviso--info { background: var(--v1); border-color: var(--v2); color: var(--v6); }
.aviso--neutro { background: var(--papel-2); border-color: var(--linea); color: var(--texto-tenue); }
.aviso[hidden] { display: none; }

/* Aviso de origen de los datos.
   Va fijo sobre el contenido y no en el flujo: aparece cuando los datos ya se
   cargaron, y si empujara la página desplazaría todo lo que el usuario está
   leyendo en ese momento. */
.cinta-demo {
  position: fixed;
  left: var(--e-4);
  bottom: var(--e-4);
  z-index: 880;
  max-width: min(420px, calc(100vw - var(--e-6)));
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-xs);
  line-height: 1.5;
  box-shadow: var(--sombra-3);
}

.cinta-demo b { color: #fff; }
.cinta-demo svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--rojo-claro); }
.cinta-demo[hidden] { display: none; }

.cinta-demo__cerrar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, 0.6);
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}

.cinta-demo__cerrar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cinta-demo__cerrar svg { width: 13px; height: 13px; margin: 0; color: currentColor; }

@media (max-width: 560px) {
  .cinta-demo { left: var(--e-3); right: var(--e-3); bottom: var(--e-3); max-width: none; }
}

/* --------------------------------------------------------------------------
   Tabla
   -------------------------------------------------------------------------- */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--blanco);
}

.tabla { font-size: var(--t-sm); min-width: 620px; }

.tabla th {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris-2);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.tabla td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linea-sutil);
  vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background-color var(--dur-rapida); }
.tabla tbody tr:hover { background: var(--papel-2); }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--peso-bold); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha__aside { position: static; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .pasos--fila { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .mapa-panel {
    top: auto;
    bottom: var(--e-4);
    left: var(--e-4);
    right: var(--e-4);
    width: auto;
  }
  .leyenda { display: none; }
  .mapa-filtros { max-width: none; right: var(--e-4); }
  .filtros { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .rasgos { grid-template-columns: 1fr; }
  .pasos--fila { grid-template-columns: 1fr; }
  .asistente__hitos { overflow-x: auto; scrollbar-width: none; }
  .hito span { display: none; }
  .asistente__cabeza,
  .asistente__escena,
  .asistente__pie { padding-inline: var(--e-4); }
  .resumen__fila { grid-template-columns: 1fr; gap: var(--e-1); }
  .dato { grid-template-columns: 1fr; gap: var(--e-1); }
  .visor__nav { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   Actualizar datos (solo equipo interno)
   -------------------------------------------------------------------------- */
/* Discreto y fuera del recorrido de lectura: no es parte del contenido del
   Atlas, es una herramienta para quien está curando registros. */
.actualizar-datos {
  position: fixed;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: 920;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: var(--tinta);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-3);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-rapida) var(--ease-salida),
    transform var(--dur-rapida) var(--ease-salida);
}

.actualizar-datos:hover { opacity: 1; transform: translateY(-2px); }
.actualizar-datos:disabled { cursor: progress; opacity: 0.9; }
.actualizar-datos svg { width: 16px; height: 16px; }
.actualizar-datos:disabled svg { animation: girar 1s linear infinite; }

@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  /* En móvil compite con el pulgar: solo el icono. */
  .actualizar-datos span { display: none; }
  .actualizar-datos { padding: 12px; }
}

/* --------------------------------------------------------------------------
   Carrusel de fotografías de la portada

   La lámina activa va a tamaño completo y las vecinas asoman reducidas y
   atenuadas por los lados: así se ve de un vistazo que hay más fotografías sin
   necesidad de explicarlo. El fondo es oscuro porque una fotografía de campo
   sobre papel claro pierde fuerza.
   -------------------------------------------------------------------------- */

.carrusel {
  position: relative;
  padding-block: var(--e-7);
  background: var(--verde-hondo, #1f4a2e);
  overflow: hidden;
}

/* Un velo de color de marca por encima del verde, para que las fotografías
   no floten sobre un bloque plano. */
.carrusel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200, 32, 47, 0.22), transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(0, 0, 0, 0.42), transparent 60%);
  pointer-events: none;
}

.carrusel__marco {
  position: relative;
  overflow: hidden;
  /* Sin `mask` el recorte lateral es un corte seco; con él las láminas de los
     lados se desvanecen y el conjunto parece continuar más allá. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.carrusel__pista {
  display: flex;
  gap: var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carrusel__lamina {
  position: relative;
  flex: 0 0 auto;
  width: min(760px, 62vw);
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  transform: scale(0.88);
  opacity: 0.38;
  filter: saturate(0.7);
  transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.6s ease, filter 0.6s ease;
}

.carrusel__lamina.es-activa {
  transform: scale(1);
  opacity: 1;
  filter: none;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

.carrusel__enlace {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}

.carrusel__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carrusel__lamina.es-activa:hover img { transform: scale(1.045); }

.carrusel__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 18, 14, 0.9) 0%,
                                       rgba(10, 18, 14, 0.5) 34%,
                                       transparent 62%);
}

.carrusel__pie {
  position: absolute;
  left: var(--e-6);
  right: var(--e-6);
  bottom: var(--e-5);
  /* El texto entra un poco más tarde que la lámina: primero se ve la
     fotografía y luego se lee quién es. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease 0.18s, transform 0.5s ease 0.18s;
}

.carrusel__lamina.es-activa .carrusel__pie { opacity: 1; transform: none; }

.carrusel__grupo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full, 999px);
  background: var(--rojo, #c8202f);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carrusel__nombre {
  margin: var(--e-3) 0 2px;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.12;
  color: #fff;
}

.carrusel__nombre.cientifico { font-style: italic; }

.carrusel__sci {
  margin: 0;
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
}

.carrusel__dato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--e-3);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

.carrusel__dato svg { width: 14px; height: 14px; }

/* --- Controles ---------------------------------------------------------- */

/* Las flechas van en la barra inferior y no flotando sobre la fotografía.
   Encima de la lámina tapaban el nombre de la especie en pantallas estrechas,
   y aquí quedan agrupadas con el contador, que es donde uno las busca. */
.carrusel__flecha {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full, 999px);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: transform var(--t-rapida, 0.18s), background var(--t-rapida, 0.18s);
}

.carrusel__flecha:hover { background: rgba(255, 255, 255, 0.92); color: var(--tinta, #1a2420); transform: scale(1.06); }
.carrusel__flecha:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.carrusel__flecha svg { width: 18px; height: 18px; }

/* Con cuarenta fotografías una fila de puntos es una hilera de guiones sin
   significado. Un contador dice dónde estás y una barra dice cuánto falta
   para el siguiente salto; las dos cosas funcionan con cualquier cantidad. */
.carrusel__barra {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  margin-top: var(--e-6);
}

.carrusel__cuenta {
  font-family: 'Archivo Narrow', var(--fuente, sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

.carrusel__cuenta b { color: #fff; font-weight: 700; }

.carrusel__tiempo {
  width: min(210px, 34vw);
  height: 3px;
  border-radius: var(--r-full, 999px);
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.carrusel__tiempo span {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
}

.carrusel.es-contando .carrusel__tiempo span {
  animation: carrusel-cuenta 5s linear forwards;
}

@keyframes carrusel-cuenta { to { width: 100%; } }

/* --- Antes de que arranque el JS ---------------------------------------- */

.carrusel:not(.es-listo) .carrusel__flecha,
.carrusel:not(.es-listo) .carrusel__barra { opacity: 0; }

/* --- Pantallas pequeñas -------------------------------------------------- */

@media (max-width: 720px) {
  .carrusel { padding-block: var(--e-6); }
  .carrusel__lamina { width: 88vw; aspect-ratio: 4 / 3; }
  .carrusel__pie { left: var(--e-4); right: var(--e-4); bottom: var(--e-4); }

  /* En el teléfono lo natural es deslizar con el dedo; las flechas se quedan
     por si acaso, pero más pequeñas y sin robar sitio al contador. */
  .carrusel__barra { gap: var(--e-3); }
  .carrusel__flecha { width: 36px; height: 36px; }
  .carrusel__flecha svg { width: 16px; height: 16px; }
  .carrusel__tiempo { width: min(110px, 26vw); }
}

/* --------------------------------------------------------------------------
   Variante «montaje» — la del héroe.

   Aquí el carrusel no es una banda a lo ancho de la página sino una sola
   tarjeta inclinada, montada sobre el mapa. Cambia bastante: desaparecen las
   láminas que asoman por los lados (no cabrían) y el marco verde pasa de ser
   el fondo de la sección a ser el borde de la tarjeta, como el de una
   fotografía montada sobre cartón.
   -------------------------------------------------------------------------- */

.carrusel--montaje {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 59%;
  z-index: 3;
  padding: 10px 10px 8px;
  background: linear-gradient(158deg, #2b3a33, #161f1b);
  border-radius: 20px;
  box-shadow:
    0 30px 64px rgba(22, 31, 27, 0.38),
    0 2px 10px rgba(22, 31, 27, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  /* La inclinación es la que convierte dos recuadros en un montaje. Poca:
     pasados los cuatro grados parece un error de maquetación. */
  transform: rotate(-3.2deg);
  /* Aparece sola, sin esperar al escalonado de entrada del resto del héroe:
     es la fotografía más grande de la página y ese retraso se lo cobraba
     entero el LCP. Se muestra en cuanto el carrusel tiene datos. */
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.55s ease,
              opacity 0.45s ease;
}

.carrusel--montaje.es-listo { opacity: 1; }

/* Al acercarse se endereza y sube un poco: invita a tocarla y de paso deja la
   fotografía recta justo cuando alguien se para a mirarla. */
.carrusel--montaje:hover,
.carrusel--montaje:focus-within {
  transform: rotate(-0.6deg) translateY(-6px);
  box-shadow:
    0 40px 78px rgba(22, 31, 27, 0.44),
    0 2px 10px rgba(22, 31, 27, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* El velo de marca es para la banda ancha; sobre una tarjeta pequeña solo
   ensucia. */
.carrusel--montaje::before { display: none; }

.carrusel--montaje .carrusel__marco {
  border-radius: 13px;
  /* Sin láminas asomando no hay nada que desvanecer, y la máscara se comería
     los bordes de la única fotografía visible. */
  -webkit-mask-image: none;
  mask-image: none;
}

/* Una lámina por vista, a todo el ancho de la tarjeta. */
.carrusel--montaje .carrusel__lamina {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 13px;
  transform: none;
  opacity: 1;
  filter: none;
  box-shadow: none;
}

.carrusel--montaje .carrusel__lamina.es-activa { box-shadow: none; }

.carrusel--montaje .carrusel__pie { left: var(--e-5); right: var(--e-5); bottom: var(--e-4); }
.carrusel--montaje .carrusel__nombre { font-size: clamp(1.05rem, 1.5vw, 1.45rem); }
.carrusel--montaje .carrusel__sci { font-size: 0.8125rem; }
.carrusel--montaje .carrusel__dato { font-size: 0.75rem; margin-top: var(--e-2); }

.carrusel--montaje .carrusel__barra { margin-top: 8px; gap: var(--e-3); }
.carrusel--montaje .carrusel__flecha { width: 32px; height: 32px; }
.carrusel--montaje .carrusel__flecha svg { width: 15px; height: 15px; }
.carrusel--montaje .carrusel__cuenta { font-size: 0.75rem; }
.carrusel--montaje .carrusel__tiempo { width: min(96px, 14vw); }

/* Lo que cambia con el ancho está en paginas.css, junto al resto del héroe:
   allí viven las reglas de .hero__montaje y esa hoja se carga después, así
   que repartirlo entre las dos acaba en reglas que no se aplican. */

/* --- Sin movimiento ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista,
  .carrusel__lamina,
  .carrusel__pie,
  .carrusel__lamina img { transition: none; }
  .carrusel.es-contando .carrusel__tiempo span { animation: none; width: 100%; }
  .carrusel--montaje { transition: none; }
}