/* ═══════════════════════════════════════════════════════════════
   FASE 2 · Bloques de la portada editorial
   Solo lo nuevo o reorganizado. Todo lo demas hereda de reset.css,
   layout.css, components.css y animations.css. Ningun token de
   color, tipografia o espaciado se redefine aqui.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1 · Hero con mapa ──────────────────────────────────────────
   Composición asimétrica: texto a la izquierda, mapa a la derecha.
   En movil el texto va primero y el mapa despues, sin encogerlo
   hasta volverlo ilegible. */
.hero-f2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: min(88vh, 780px);
  padding: calc(var(--nav-height) + var(--space-xl)) clamp(1rem, 4vw, 3rem) var(--space-2xl);
  max-width: 1400px;
  margin: 0 auto;
}
.hero-f2__texto { min-width: 0; }
.hero-f2__lema {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--c-orange);
  margin-bottom: var(--space-sm);
}
.hero-f2 h1 {
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin-bottom: var(--space-md);
}
.hero-f2__sub {
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}
.hero-f2__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* El mapa del hero: presencia real, no fondo */
.hero-f2__mapa {
  position: relative;
  min-width: 0;
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-surface-a);
  aspect-ratio: 4 / 3;
}
.hero-f2__mapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.hero-f2__mapa figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(180deg, transparent, rgba(5, 6, 4, 0.92) 55%);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
}

/* ─── 2 · Cuatro dimensiones ─────────────────────────────────── */
.dimensiones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.dimension {
  position: relative;
  padding: var(--space-md);
  background: var(--c-surface-a);
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
}
.dimension__num {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gold);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: var(--space-xs);
}
.dimension h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-xs);
}
.dimension p {
  font-size: var(--fs-small);
  color: var(--c-gray);
  line-height: 1.6;
}
.dimension__estado {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  opacity: 0.8;
}

/* ─── 3 · Atlas: el bloque cartográfico ──────────────────────────
   Antes, filtros (85 px) + mapa (620 px) + leyenda (408 px) se apilaban
   en 1161 px contra una ventana de 722. Del borde de los filtros al del
   mapa había 729 px: no cabían juntos en ningún portátil, y la leyenda
   quedaba 644 px por debajo del mapa, fuera de pantalla.

   El mapa ocupa ahora la columna ancha y los controles viven en un panel
   lateral que acompaña el desplazamiento. Se pueden ver a la vez, que era
   la condición para que los filtros sirvieran de algo. */
/* La sección que lo contiene ya aporta el ancho máximo de 1400 y el
   relleno lateral. Repetirlos aquí estrecharía el atlas respecto de su
   propio encabezado.

   Fase 2.1: el panel lateral se retira. Ganaba que todo cupiera en pantalla,
   pero a costa de dejar el mapa en 442 px y la lectura en una columna de
   21 rem. Ahora el mapa toma el ancho entero y la ficha entra por la base
   solo cuando hay un nodo elegido. */
.atlas {
  margin-top: var(--space-lg);
  display: block;
}

/* ── Capas: control dentro del lienzo ──────────────────────────────
   Estaban en una caja con borde encima del mapa. Dos problemas.

   Uno medido: la regla del panel lateral seguía en esta hoja, después de
   la nueva y con la misma especificidad, así que ganaba `column` y las
   once capas se apilaban. La barra medía 448 px contra un mapa de 419.
   El control era más alto que la cartografía.

   Otro de composición, que es el de fondo: una caja con borde apilada
   sobre el mapa lo convierte en la segunda cosa que se ve. En una
   cartografía los controles van dentro del lienzo, como los botones de
   zoom, para que el mapa se lea como un objeto único y no como una
   imagen con una barra de herramientas delante. */
/* Dónde ponerla se decidió midiendo, no por gusto. Se probaron las cuatro
   esquinas con la caja abierta: tapaban entre 6 y 12 nodos, porque el atlas
   puebla toda la cuenca. Una tira de una sola fila a lo ancho, en cambio,
   tapa exactamente uno: La Habana. La banda superior del mapa es mar
   abierto sobre el Golfo, el único hueco real que tiene la cartografía. */
.atlas__barra {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-sm);
  z-index: 550;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;                 /* 44 de objetivo tactil + 6 de aire arriba y abajo */
  overflow: hidden;
  background: rgba(5, 6, 4, 0.86);
  backdrop-filter: blur(3px);
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
  margin: 0;
  width: auto;
  max-width: none;
}

/* Plegada, la tira se encoge a la etiqueta: una pastilla que no tapa nada. */
.atlas__barra:not([open]) { right: auto; }

.atlas__barra > summary {
  flex: 0 0 auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-green-light);
  cursor: pointer;
  padding: 0 var(--space-sm);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.atlas__barra > summary::after {
  content: '▾';
  font-size: 0.75em;
  opacity: 0.8;
}

.atlas__barra[open] > summary::after { content: '▴'; }

.atlas__barra > summary:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* Una sola fila que se desliza. Nunca dos: dos filas pasan de tapar un
   nodo a tapar cuatro, y la rejilla de tres columnas tapaba nueve. */
.atlas .caribe-mapa-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0 var(--space-sm) 0 0;
  height: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.atlas .caribe-mapa-filters .filter-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px;             /* WCAG 2.5.8 · objetivo cómodo */
  padding: 4px 10px;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Los controles de zoom de Leaflet se apartan de las capas */
.atlas__lienzo .leaflet-top.leaflet-left { margin-left: 0; }
.atlas__lienzo .leaflet-control-zoom { margin-top: 60px !important; }

/* ── Lienzo: el mapa a ancho completo, con la ficha superpuesta ── */
.atlas__lienzo {
  position: relative;
  min-width: 0;
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* La barra de navegación es fija y mide 200 px. El alto se calcula
   descontándola, para que el mapa entero quepa en lo visible. */
.atlas__lienzo .caribe-leaflet-map {
  height: clamp(380px, calc(100vh - var(--nav-height) - 5rem), 700px);
  border: 0;
  border-radius: 0;
}

.atlas__pista {
  position: absolute;
  left: 50%; bottom: var(--space-md);
  transform: translateX(-50%);
  max-width: 32rem;
  text-align: center;
  padding: 10px 18px;
  font-size: var(--fs-small);
  color: var(--c-cream);
  background: rgba(5, 6, 4, 0.9);
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 500;
  margin: 0;
}

.atlas__pista[hidden] { display: none; }

/* ── Ficha del nodo, panel inferior ── */
/* El tope es el 30 % que fija el encargo. Conviene saber lo que cuesta: el
   contenido de una ficha mide entre 180 y 330 px según el nodo, así que en
   escritorio se lee con un desplazamiento corto dentro del panel. Subirlo al
   36 % lo evitaba, pero incumplía el límite. */
.ficha {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 30%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(5, 6, 4, 0.96);
  border-top: 2px solid var(--ficha-acento, var(--c-green-light));
  color: var(--c-gray);
  z-index: 600;
}

.ficha[hidden] { display: none; }

.ficha__cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px var(--space-md);
  border-bottom: 1px solid var(--c-divider-green);
  position: sticky;
  top: 0;
  background: inherit;
}

.ficha__titulos { min-width: 0; flex: 1 1 auto; }

.ficha__nombre {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  color: var(--c-cream);
  line-height: 1.2;
  margin: 0;
}

.ficha__meta { font-family: var(--ff-mono); font-size: var(--fs-meta); margin: 2px 0 0; }
.ficha__territorio { color: var(--c-gold); text-transform: uppercase; letter-spacing: 0.1em; }
.ficha__territorio:not(:empty)::after { content: ' · '; color: var(--c-gray); }
.ficha__region { color: var(--c-gray); }

.ficha__cerrar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.2rem; line-height: 1;
  color: var(--c-gray);
  background: transparent;
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ficha__cerrar:hover { color: var(--c-cream); border-color: var(--c-border-orange); }
.ficha__cerrar:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

.ficha__cuerpo { padding: var(--space-xs) var(--space-md) var(--space-sm); }

/* ── El contenido del nodo, dentro de la ficha ─────────────────────
   Llega el mismo HTML que antes iba al globo, pensado para una caja de
   320 px. Volcado tal cual en una ficha de 1250 se descompone: la
   descripción se estira a un renglón ilegible y el reproductor, que es
   `width: 100%` con proporción 16:9, pasa de 320×180 a 1250×703 dentro de
   una banda de 186. Se despliega y aplasta todo lo demás.

   Aquí se reparte en tres columnas y el video recupera su tamaño. */
.ficha .caribe-popup {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-md);
  align-items: start;
  max-width: none;
}

/* La cabecera de la ficha ya nombra el nodo: repetirlo dentro sobra. */
.ficha .caribe-popup-head,
.ficha .caribe-popup-title,
.ficha .caribe-popup-country { display: none; }

.ficha .caribe-popup-desc {
  grid-column: 1;
  max-width: 62ch;              /* renglón de lectura, no ancho de pantalla */
}

/* Una fila, tres columnas. Antes cultura y claves compartían la columna 2 y
   el grid abría una segunda fila: 46 + 73 px que no cabían en la banda. */
.ficha .caribe-popup-tags {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  align-content: start;
}

.ficha .caribe-popup-cultura {
  grid-column: 3;
  grid-row: 1;
  margin-top: 0;
}

/* La canción es una línea con enlace, no un reproductor. */
.ficha .caribe-popup-cancion {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  margin-top: 0;
}



/* Bajo 900 px la ficha ya no se superpone: una columna y el video acotado
   para que no se coma la pantalla del teléfono. */
@media (max-width: 900px) {
  .ficha .caribe-popup { grid-template-columns: 1fr; gap: var(--space-sm); }
  .ficha .caribe-popup-desc,
  .ficha .caribe-popup-cultura,
  .ficha .caribe-popup-tags,
  .ficha .caribe-popup-cancion { grid-column: 1; grid-row: auto; }
}

.nodo-activo { filter: drop-shadow(0 0 6px var(--c-orange)); }

.leaflet-interactive:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 2px;
}

/* Leaflet necesita altura explícita: sin esto el mapa se instancia pero no
   se dibuja. La barra de navegación es fija y mide 200 px, casi un tercio
   de la pantalla de un portátil, así que el alto se calcula descontándola:
   el mapa entero cabe siempre en lo que queda visible. El techo de 700 px
   evita que en pantallas muy altas deje de leerse como cartografía. */
.atlas__lienzo .caribe-leaflet-map {
  height: clamp(380px, calc(100vh - var(--nav-height) - 5rem), 700px);
}







.atlas__leyenda > summary,
.atlas > .mapa-tabla > summary {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-orange);
  cursor: pointer;
  padding: var(--space-xs) 0;
  min-height: 24px;
}

.atlas__leyenda > summary:focus-visible,
.atlas > .mapa-tabla > summary:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}

.atlas .caribe-mapa-legend {
  margin-top: var(--space-xs);
  padding: var(--space-sm);
}

.atlas .caribe-mapa-legend .legend-text { font-size: var(--fs-meta); }

/* En 21 rem las muestras caben de una en una, que es lo deseable: cada
   región con su color y su recuento, legible de un vistazo. */
.atlas .legend-swatches { grid-template-columns: 1fr; }

/* ─── Atlas · una columna ────────────────────────────────────────
   Por debajo de 900 px el panel pasa bajo el mapa y las once capas dejan
   de apilarse en seis u ocho filas: se convierten en una tira que se
   desliza en horizontal. Así el mapa y sus capas siguen cabiendo juntos. */
@media (max-width: 900px) {
  /* El mapa se acorta y la ficha deja de superponerse: baja debajo, entera.
     Con 340 px de mapa, un panel encima taparia mas de la mitad. */
  .atlas__lienzo .caribe-leaflet-map { height: clamp(340px, 52vh, 480px); }
  .atlas__lienzo { overflow: visible; border: 0; }
  .atlas__lienzo .caribe-leaflet-map {
    border: 1px solid var(--c-border-green);
    border-radius: var(--radius-md);
  }
  .ficha {
    position: static;
    max-height: none;
    margin-top: var(--space-sm);
    border: 1px solid var(--c-border-green);
    border-top-width: 2px;
    border-radius: var(--radius-md);
  }
  .ficha__cuerpo { padding-bottom: var(--space-sm); }
  .atlas__pista {
    position: static;
    transform: none;
    max-width: none;
    margin-top: var(--space-sm);
  }
  .atlas .legend-swatches { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Equivalente textual de los nodos: exigido por el informe */
.mapa-tabla { margin-top: var(--space-md); }
.mapa-tabla summary {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  color: var(--c-orange);
  cursor: pointer;
  padding: var(--space-xs) 0;
}
.mapa-tabla summary:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.mapa-tabla table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); font-size: var(--fs-meta); }
.mapa-tabla th, .mapa-tabla td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-divider-green);
  color: var(--c-gray);
}
.mapa-tabla th { color: var(--c-cream); font-family: var(--ff-mono); font-weight: var(--fw-medium); }

/* ─── 4 · Manifiesto con presencia ───────────────────────────── */
.manifiesto-f2 {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-3xl) clamp(1rem, 4vw, 3rem);
  text-align: center;
}
.manifiesto-f2__cita {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--c-cream);
  margin-bottom: var(--space-lg);
}
.manifiesto-f2__cita em { color: var(--c-orange); font-style: italic; }
.manifiesto-f2__texto {
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: 1.75;
  max-width: 62ch;
  margin: 0 auto var(--space-lg);
  text-align: left;
}

/* ─── 5 · Líneas, tarjetas breves ────────────────────────────── */
.lineas-f2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.linea-f2 {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--c-surface-a);
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
}
.linea-f2 h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.linea-f2 p { font-size: var(--fs-small); color: var(--c-gray); line-height: 1.6; margin-bottom: var(--space-md); }
.linea-f2 a { margin-top: auto; font-family: var(--ff-mono); font-size: var(--fs-small); color: var(--c-orange); }
.linea-f2 a:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }

/* ─── 6 · Proyectos destacados ───────────────────────────────── */
.proyectos-f2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.proyecto-f2 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--c-surface-a);
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
}
.proyecto-f2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  margin-bottom: var(--space-sm);
}
.proyecto-f2__estado { color: var(--c-green-light); }
.proyecto-f2__territorio { color: var(--c-gold); }
.proyecto-f2 h3 { font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--space-xs); }
.proyecto-f2 h3 a { color: inherit; }
.proyecto-f2 h3 a::after { content: ""; position: absolute; inset: 0; }
.proyecto-f2 p { font-size: var(--fs-small); color: var(--c-gray); line-height: 1.6; margin-bottom: var(--space-md); }
.proyecto-f2__accion { margin-top: auto; font-family: var(--ff-mono); font-size: var(--fs-small); color: var(--c-orange); }

/* ─── 7 · Recursos ───────────────────────────────────────────── */
.recursos-f2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.recurso-f2 {
  padding: var(--space-md);
  background: var(--c-surface-a);
  border: 1px solid var(--c-border-green);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.recurso-f2 h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.recurso-f2 p { font-size: var(--fs-small); color: var(--c-gray); line-height: 1.6; }
.recurso-f2 a { font-family: var(--ff-mono); font-size: var(--fs-small); color: var(--c-orange); }

/* ─── 8 · Semana Antirracista, sintetizada ───────────────────── */
.semana-f2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--c-surface-b);
  border: 1px solid var(--c-border-red);
  border-radius: var(--radius-md);
}
.semana-f2__media { min-width: 0; border-radius: var(--radius-sm); overflow: hidden; }
.semana-f2__media img { width: 100%; height: 100%; object-fit: cover; }
.semana-f2 p { font-size: var(--fs-small); color: var(--c-gray); line-height: 1.65; margin-bottom: var(--space-md); }
.semana-f2__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ─── 9 · Pregón, tres piezas ────────────────────────────────── */
.pregon-f2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.pregon-f2__pieza {
  position: relative;
  padding: var(--space-md);
  background: var(--c-surface-a);
  border: 1px solid var(--c-border-green);
  border-left: 3px solid var(--c-wood, #b8763c);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pregon-f2__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm);
  font-family: var(--ff-mono); font-size: var(--fs-meta); color: var(--c-gray);
  margin-bottom: var(--space-xs);
}
.pregon-f2__pieza h3 { font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--space-xs); }
.pregon-f2__pieza p { font-size: var(--fs-small); color: var(--c-gray); line-height: 1.6; }

/* ─── 10 · Publicaciones, seis ───────────────────────────────── */
.pubs-f2 { margin-top: var(--space-lg); }
.pub-f2 {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--c-divider-green);
}
.pub-f2__anio { font-family: var(--ff-mono); font-size: var(--fs-small); color: var(--c-gold); }
.pub-f2 h3 { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 4px; }
.pub-f2__autor { font-size: var(--fs-small); color: var(--c-cream); opacity: 0.85; }
.pub-f2__fuente { font-family: var(--ff-mono); font-size: var(--fs-meta); color: var(--c-gray); display: block; margin-top: 4px; }

/* ─── 11 · Comunidad ─────────────────────────────────────────── */
.comunidad-f2 { margin-top: var(--space-lg); }
.comunidad-f2__intro { font-size: var(--fs-body); color: var(--c-gray); line-height: 1.7; max-width: 62ch; }
.comunidad-f2__perfiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}
.perfil-f2 { text-align: center; }
/* Diez de los doce retratos son verticales (proporcion 0.67 a 0.80).
   Con object-fit:cover y recorte cuadrado centrado se pierde entre el
   20 % y el 33 % del alto, repartido arriba y abajo: es decir, la
   cabeza. Subir el punto de anclaje al 22 % conserva el rostro en los
   doce sin descuadrar los dos apaisados. */
.perfil-f2 img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-green);
  margin-bottom: var(--space-xs);
}
.perfil-f2 h3 { font-size: var(--fs-small); line-height: 1.3; }
.perfil-f2 p { font-family: var(--ff-mono); font-size: var(--fs-meta); color: var(--c-gray); }
.comunidad-f2__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ─── Columna de acción de las publicaciones ─────────────────────
   32 de las 54 fichas no tienen enlace externo: capitulos, poesia y
   casi toda la prensa. La columna quedaba vacia y abria un hueco.
   Ahora todas llevan boton de citar, y el enlace externo aparece
   ademas donde existe. */
.pub-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 8.5rem;
}
.pub-enlace {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  color: var(--c-orange);
  white-space: nowrap;
}
.pub-enlace:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }

.pub-citar {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  background: transparent;
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  min-height: 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.pub-citar:hover { color: var(--c-cream); border-color: var(--c-green-light); }
.pub-citar:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.pub-citar[data-copiada] { color: var(--c-green-light); border-color: var(--c-green-light); }

@media (max-width: 675px) {
  .pub-action { align-items: flex-start; min-width: 0; margin-top: var(--space-xs); }
}

/* ─── Marca de idioma ────────────────────────────────────────────
   Cuatro destinos de la portada inglesa no tienen version traducida:
   publicaciones, equipo, Semana Antirracista y efemerides. El enlace
   lleva al contenido en espanol y lo dice, en vez de fingir que hay
   version inglesa o de esconder el contenido. */
.lang-nota {
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  border: 1px solid var(--c-divider-green);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.btn .lang-nota { color: inherit; opacity: 0.75; border-color: currentColor; }

/* ─── Enlace de catálogo, común a varios bloques ─────────────── */
.ver-todo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-family: var(--ff-mono);
  font-size: var(--fs-action);
  color: var(--c-orange);
  border-bottom: 1px solid var(--c-border-orange);
  padding-bottom: 2px;
  min-height: var(--target-min);
}
.ver-todo:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-f2 { grid-template-columns: 1fr; min-height: auto; padding-top: calc(var(--nav-height) + var(--space-lg)); }
  .hero-f2__mapa { aspect-ratio: 3 / 2; }
  .semana-f2 { grid-template-columns: 1fr; }
  .semana-f2__media { order: -1; max-height: 220px; }
}
@media (max-width: 500px) {
  .hero-f2__mapa { aspect-ratio: 1; }
  .pub-f2 { grid-template-columns: 1fr; gap: var(--space-xs); }
  .comunidad-f2__perfiles { grid-template-columns: repeat(2, 1fr); }
}

/* El sitio ya respeta prefers-reduced-motion en animations.css.
   El prototipo no anade ninguna animacion propia. */

/* ── Catálogo filtrado por línea de investigación ────────────────── */
.pub-linea-activa {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  border-left: 3px solid var(--c-green-light);
  padding: var(--space-xs) var(--space-sm);
  margin: var(--space-sm) 0 0;
  background: var(--c-surface-a);
}
.pub-linea-activa[hidden] { display: none; }
.pub-linea-activa strong { color: var(--c-cream); font-weight: var(--fw-medium); }
.pub-linea-quitar {
  font: inherit;
  color: var(--c-orange);
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: 24px;
  cursor: pointer;
  text-decoration: underline;
}
.pub-linea-quitar:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* Entre 900 y 1200 px la columna de la descripción se estrecha a 47
   caracteres y el texto crece a lo alto. Se aprietan las claves para
   devolverle renglón. */
@media (min-width: 901px) and (max-width: 1200px) {
  .ficha .caribe-popup { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 0.8fr); }
  .ficha .caribe-popup-tags { gap: 3px; }
  .ficha .caribe-popup-tags > * { font-size: 10px; padding: 2px 6px; }
}

/* La canción, compacta */
.ficha__cancion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-xs);
  font-size: var(--fs-meta);
  color: var(--c-orange);
  min-height: 24px;
}
.ficha__cancion:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   FASE 3 · Cartografías del Gran Caribe
   Los 43 nodos del atlas, desplegados como texto. Hasta ahora sus
   482 palabras y 124 claves solo existían dentro del JavaScript:
   ni buscador ni lector de pantalla llegaban a ellas.
   ═══════════════════════════════════════════════════════════════ */

/* Índice de regiones, al principio */
.carto-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-lg) 0 var(--space-md);
}

.carto-indice__enlace {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;             /* WCAG 2.5.8 */
  padding: 6px 12px;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.carto-indice__enlace:hover { color: var(--c-cream); border-color: var(--c-border-orange); }
.carto-indice__enlace:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.carto-indice__n { color: var(--c-gold); }

/* El punto de color nunca va solo: siempre acompaña al nombre de la
   región, para no cifrar información únicamente en el color. */
.carto-punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(245, 237, 221, 0.35);
  display: inline-block;
}

.carto-nota {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  border-left: 3px solid var(--c-divider-green);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xl);
  max-width: 68ch;
}

/* ── Regiones ── */
/* Margen de ancla contra la barra COMPACTA, no contra la de reposo: al
   saltar a un ancla ya estas desplazado, asi que la barra que tapa mide
   `--nav-height-compacta`. Con la altura de reposo el destino quedaba mas
   de cien pixeles por debajo del borde, con una franja vacia encima. */
.carto-region { margin-top: var(--space-2xl); scroll-margin-top: calc(var(--nav-height-compacta) + 1rem); }

.carto-region__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-h3);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--c-divider-green);
}

.carto-region__titulo .carto-punto { width: 11px; height: 11px; }

.carto-region__n {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  white-space: nowrap;
}

/* ── Fichas ── */
/* El numero de columnas se fija por tramo en vez de dejarlo a `auto-fill`.
   Con `minmax(19rem, 1fr)` la pantalla ancha abria cuatro columnas de 308 px:
   33 caracteres por linea, menos que en un movil de 375 px. La pantalla mas
   grande daba la lectura mas estrecha. Tres columnas dejan unos 53. */
.carto-nodos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 700px) {
  .carto-nodos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .carto-nodos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.carto-nodo {
  padding: var(--space-md);
  background: var(--c-surface-a);
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-sm);
  /* Sin esto, saltar a un ancla deja la ficha debajo de la barra fija.
     Se mide contra la barra compacta porque al saltar ya estas desplazado. */
  scroll-margin-top: calc(var(--nav-height-compacta) + 1rem);
}

.carto-nodo:target {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 1px var(--c-orange);
}

.carto-nodo__nombre {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  color: var(--c-cream);
  line-height: 1.2;
  margin: 0;
}

.carto-nodo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  margin: 4px 0 var(--space-sm);
}

.carto-nodo__pais { color: var(--c-gold); text-transform: uppercase; letter-spacing: 0.1em; }
.carto-nodo__coord { color: var(--c-gray); opacity: 0.85; }

.carto-nodo__desc {
  font-size: var(--fs-small);
  color: var(--c-gray);
  line-height: 1.65;
  margin: 0 0 var(--space-sm);
  /* Red de seguridad: pase lo que pase con el ancho de la ficha, la linea
     no pasa de una medida legible. Sin esto, una sola columna en tableta
     daria lineas de casi noventa caracteres. */
  max-width: 62ch;
}

.carto-nodo__rotulo {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  color: var(--c-green-light);
  margin: var(--space-sm) 0 5px;
}

.carto-claves {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carto-claves li {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-cream);
  padding: 4px 9px;
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-xs);
}

.carto-nodo__cultura {
  font-size: var(--fs-meta);
  color: var(--c-gray);
  margin: 0;
}

.carto-nodo__cancion {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-orange);
  display: inline-block;
  min-height: 24px;
}

.carto-nodo__mapa {
  display: inline-block;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-divider-green);
  width: 100%;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-gray);
  min-height: 24px;
}

.carto-nodo__mapa:hover { color: var(--c-orange); }

@media (max-width: 600px) {
  .carto-nodos { grid-template-columns: 1fr; }
  .carto-region__n { margin-left: 0; width: 100%; }
  .carto-region__titulo { flex-wrap: wrap; }
}

/* Enlace a la ficha completa, dentro de la ficha del mapa */
.caribe-popup-ficha {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-orange);
  min-height: 24px;
}
.ficha .caribe-popup-ficha { grid-column: 1; }

.mapa-tabla__ir { margin-top: var(--space-sm); }
.mapa-tabla__ir a {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--c-orange);
  min-height: 24px;
  display: inline-block;
}