/* ---------------------------------------------------------------------------
   Sitio público Coiba AIP

   Transcripción de «Coiba AIP.dc.html». La paleta sale de las veinte variables
   declaradas en #coiba-shell y NO es la del panel: aquí --bg es #F8F6F0 y
   --band es #08344A, distintos de los del panel (#EFEBE1 y #062B3E).

   Los veinte valores están fijados en tests/Feature/Sitio/PaletaTest.php contra
   el prototipo. --band y --ph se transcribieron mal en la tarea 1 (se leyeron a
   ojo del marcado); salieron al comparar los estilos computados en la tarea 4.
   --------------------------------------------------------------------------- */

:root {
  --bg: #F8F6F0;
  --paper: #FFFFFF;
  --band: #08344A;
  --deep: #084868;
  --turq: #009BC4;
  --turq-ink: #00697F;
  --green-ink: #3E6111;
  --amber-ink: #8F4208;
  --sky: #08A8E8;
  --green: #4E7A16;
  --coral: #F5901A;
  --ink: #1B2A35;
  --ink-2: #56697A;
  --line: #E4DFD2;
  --ph: rgba(8, 72, 104, .07);
  --ph-bg: #ECE7DA;
  --hero: #04202E;
  --onband: #EAF3F7;
  --onband-2: #9CBECE;
  --logo-filter: none;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}

a { color: var(--turq); text-decoration: none; }
a:hover { color: var(--deep); }
::selection { background: var(--turq); color: #F8F6F0; }
input, button, textarea { font-family: inherit; }

/* Las cuatro animaciones del artboard, líneas 23–26. */
@keyframes coibaRise { from { opacity: 0; transform: translateY(24px); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes coibaDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(5%, -4%, 0) scale(1.12); } 100% { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes coibaCue { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } }
@keyframes coibaPulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .9; transform: scale(1.5); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

[data-strip] { scrollbar-width: none; -ms-overflow-style: none; }
[data-strip]::-webkit-scrollbar { display: none; }

.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); font-weight: 400; }

.senuelo { position: absolute; left: -9999px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
  left: 12px; top: 12px; z-index: 100; position: fixed;
  background: var(--paper); color: var(--deep); padding: 10px 16px; border-radius: 3px;
}

/* --- Cabecera ------------------------------------------------------------
   Valores extraidos del prototipo renderizado, no leidos a ojo del marcado. */

#coiba-nav {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 80;
  background: var(--bg);
  transition: box-shadow .3s, transform .4s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
#coiba-nav.con-sombra { box-shadow: 0 8px 24px rgba(8, 72, 104, .08); }
#coiba-nav.escondida { transform: translateY(-100%); }

.nav-interior {
  max-width: 1360px; margin: 0 auto; padding: 7px 4vw; min-height: 98px;
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; gap: 18px;
}

.nav-interior .marca { flex: none; display: flex; align-items: center; }
.nav-interior .marca img { height: 84px; width: auto; display: block; filter: var(--logo-filter); }

.nav-interior nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  flex: 1 1 430px; justify-content: flex-end;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav-interior nav::-webkit-scrollbar { display: none; }
/* Ocho entradas desde que Publicaciones se separó de Divulgación. A 1280 px con
   barra de desplazamiento, en español, con 10 px de relleno el menú se partía
   en dos líneas y con 8 le sobraba 1 px; con 7 le sobran unos 17. */
.nav-interior nav a {
  position: relative; padding: 9px 7px; font-size: 13px; font-weight: 500;
  color: var(--ink); letter-spacing: .01em; white-space: nowrap;
}
.nav-interior nav a:hover { color: var(--turq-ink); }
.nav-interior nav .subrayado {
  position: absolute; left: 7px; right: 7px; bottom: 2px;
  height: 1.5px; background: var(--turq); display: block;
}

.nav-acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }

/*
   El menú de pantallas estrechas (ver el bloque de 900 px). Fuera de ese corte
   el cajón no cuenta para la maquetación: con `display: contents`, el menú y las
   acciones siguen siendo hijos del flex de `.nav-interior`, como antes de
   envolverlos. El botón solo se pinta dentro del corte y con JavaScript.
*/
.nav-cajon { display: contents; }
.nav-boton { display: none; }

.pastilla {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 40px; background: none;
  cursor: pointer; color: var(--ink-2);
}
.pastilla.idioma {
  gap: 4px; padding: 7px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
}
.pastilla.idioma .activo { color: var(--turq-ink); font-weight: 500; }
.pastilla.idioma .barra { opacity: .45; }
.pastilla.tema { gap: 8px; padding: 6px 11px 6px 9px; }
.pastilla.tema i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--turq); display: block;
  box-shadow: 0 0 0 3px rgba(0, 155, 196, .16);
}
.pastilla.tema span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.pastilla:hover { border-color: var(--turq); }

.apoya {
  background: var(--coral); color: #2A1704; border: 0; border-radius: 2px;
  padding: 12px 20px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1),
              background-color .25s ease, color .25s ease;
}

/*
   Al pasar por encima vira al celeste de la paleta —el mismo --sky con que
   arranca la franja de colores de debajo de la cabecera— y la tinta pasa al
   azul oscuro del sitio, que sobre ese fondo da 6,2:1.
*/
.apoya:hover,
.apoya:focus-visible {
  background: var(--sky); color: var(--hero); transform: translateY(-1px);
}

/*
   Cabecera en pantallas estrechas.

   Las dos pastillas y el boton naranja suman mas de 400 px con `nowrap`: a
   375 px el boton se salia del viewport y se veia cortado por la derecha.
   Viene asi del prototipo, que no baja de ese ancho.

   `.nav-acciones` era `flex: none`, asi que sus tres hijos se quedaban en una
   linea pasara lo que pasara. Debajo de 560 px envuelve, y el boton pasa a
   ocupar su propia linea a lo ancho: cabe entero y ademas se pulsa mejor.
*/
@media (max-width: 560px) {
  .nav-acciones {
    flex-wrap: wrap;
    row-gap: 10px;
    width: 100%;
    margin-left: 0;
  }

  .apoya { flex: 1 1 100%; text-align: center; }
}

/*
   Menú de pantallas estrechas (2026-09-21).

   Hasta 900 px la cabecera fija llegaba a ocupar media pantalla: a 375 px, 340
   de 812. Con JavaScript, el menú y las acciones se pliegan en #nav-cajon y la
   barra queda en el logotipo y el botón. Sin JavaScript no hay `data-js`, estas
   reglas no aplican y la cabecera se ve entera, como antes.

   El cajón abierto se pinta sobre la página, dentro de la cabecera fija; el
   espaciador no se vuelve a medir, así que no la empuja. Mientras está abierto,
   la página no se desplaza ni recibe punteros: tocar fuera solo cierra.
*/
@media (max-width: 900px) {
  html[data-js] .nav-interior { min-height: 0; padding: 8px 4vw; gap: 12px; }
  html[data-js] .nav-interior .marca img { height: 56px; }

  html[data-js] .nav-boton {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer;
  }
  html[data-js] .nav-boton span {
    display: block; width: 18px; height: 1.5px; background: var(--ink);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
  }
  html[data-js] .nav-boton:hover { border-color: var(--turq); }
  /* Tres rayas de 1,5 px separadas 5: la primera y la tercera bajan y suben 6,5. */
  html[data-js] .nav-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  html[data-js] .nav-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  html[data-js] .nav-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  html[data-js] .nav-cajon {
    display: none; flex: 1 1 100%; flex-direction: column; gap: 18px;
    padding: 4px 0 22px;
  }
  html[data-js].menu-abierto .nav-cajon { display: flex; animation: coibaCajon .25s cubic-bezier(.2, .8, .2, 1); }

  html[data-js] .nav-cajon nav {
    flex: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap; justify-content: flex-start;
  }
  html[data-js] .nav-cajon nav a { padding: 13px 2px; font-size: 16px; border-bottom: 1px solid var(--line); }
  html[data-js] .nav-cajon nav a.activo { color: var(--turq-ink); }
  html[data-js] .nav-cajon nav .subrayado { left: 2px; right: auto; width: 28px; bottom: -1px; height: 2px; }

  html[data-js] .nav-cajon .nav-acciones { flex-wrap: wrap; row-gap: 12px; width: 100%; margin-left: 0; }
  html[data-js] .nav-cajon .apoya { flex: 1 1 100%; text-align: center; padding: 14px 20px; }

  html[data-js].menu-abierto { overflow: hidden; }
  html[data-js].menu-abierto #coiba-nav {
    max-height: 100vh; max-height: 100dvh; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(8, 72, 104, .12);
  }
  html[data-js].menu-abierto body > :not(#coiba-nav) { pointer-events: none; }
}

@keyframes coibaCajon { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* La franja de seis colores bajo la cabecera, tal cual el prototipo. */
.nav-degradado {
  height: 2px; opacity: .92;
  background: linear-gradient(90deg, #08A8E8 0%, #4E7A16 22%, #78C808 42%, #F89808 66%, #EC6E8A 84%, #08A8E8 100%);
}

#coiba-nav-spacer { height: 100px; }

/*
   La cabecera es fija, asi que al saltar a un ancla el navegador dejaria el
   destino justo debajo de ella, tapado. `scroll-margin-top` le reserva su
   altura mas un respiro.
*/
[id] { scroll-margin-top: 118px; }

/* --- Suscripcion ----------------------------------------------------------
   Valores extraidos del prototipo renderizado. --turq-ink se redefine dentro
   de la banda oscura, igual que hace el artboard: el #00697F de :root no tiene
   contraste suficiente sobre --band. */

.suscripcion {
  --turq-ink: #4FC7E4;
  background: var(--band);
  color: var(--onband);
  padding: clamp(70px, 8vw, 110px) 5vw;
}

.suscripcion-interior {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.suscripcion .rotulo {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--turq-ink); margin: 0 0 20px;
}

.suscripcion h2 {
  font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05;
  color: #F8F6F0; margin: 0 0 16px;
}

.suscripcion .entradilla {
  font-size: 15px; line-height: 1.65; color: var(--onband-2); margin: 0; max-width: 34em;
}

.suscripcion-campos { display: flex; flex-wrap: wrap; gap: 10px; }

.suscripcion input[type="email"] {
  flex: 1 1 0; min-width: 220px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #F8F6F0;
  padding: 15px 16px; font-size: 15px; border-radius: 2px; outline: none;
  transition: border-color .25s, background .25s;
}

.suscripcion input[type="email"]::placeholder { color: var(--onband-2); }

.suscripcion input[type="email"]:focus {
  border-color: var(--turq-ink);
  background: rgba(255, 255, 255, .1);
}

.suscripcion button {
  position: relative; overflow: hidden;
  background: var(--coral); color: #2A1704;
  border: 0; border-radius: 2px;
  padding: 15px 22px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.suscripcion button .etiqueta { position: relative; z-index: 2; }

.suscripcion .nota { font-size: 11.5px; color: var(--onband-2); margin: 14px 0 0; }

.suscripcion .confirmado {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--turq-ink); margin: 0 0 10px;
}

.suscripcion .error { font-size: 12.5px; color: #FFC9C9; margin: 10px 0 0; }

/* --- Pie ------------------------------------------------------------------ */

.pie {
  --turq-ink: #4FC7E4;
  background: var(--hero);
  color: var(--onband-2);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #08A8E8, #4E7A16 24%, #78C808 44%, #F89808 68%, #EC6E8A 86%, #08A8E8) 1 / 1 / 0 stretch;
  padding: clamp(56px, 6vw, 84px) 5vw 34px;
}

.pie-interior { max-width: 1240px; margin: 0 auto; }

.pie-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 38px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.pie-marca img { height: 96px; width: auto; display: block; margin: 0 0 20px -6px; }
.pie-marca p { font-size: 13px; line-height: 1.65; margin: 0; }

.pie-rotulo {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--turq-ink); margin-bottom: 16px;
}

.pie-enlaces { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }

.pie-contacto {
  display: flex; flex-direction: column; gap: 12px;
  font-size: 12.5px; line-height: 1.55;
}

.pie-redes { display: flex; gap: 14px; margin-top: 2px; }

.pie-redes a {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}

/* El prototipo deja estos enlaces con el --turq de :root (#009BC4), que sobre
   --hero se queda en 3,5:1. Se usa el --turq-ink que la propia banda declara
   (#4FC7E4): sale igualmente del prototipo y cumple el contraste que exige la
   tarea 11. */
.pie a { color: var(--turq-ink); }
.pie a:hover { color: var(--onband); }

.pie-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  padding-top: 24px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
}

/* --- Botones con ola -------------------------------------------------------
   El prototipo marca estos botones con `data-magnetic` y mete dentro un
   `data-fill` que sube a 280 % al entrar el puntero. El desplazamiento
   magnetico lo trae el JavaScript de la tarea 10; la ola se cubre aqui con
   :hover para que no quede muerta hasta entonces. Cuando llegue el script, su
   estilo en linea manda sobre este. */

.ola {
  position: absolute; left: -20%; bottom: -8%; width: 140%; height: 0;
  background: var(--turq); border-radius: 46% 46% 0 0; opacity: .9;
  transition: height .55s cubic-bezier(.3, .9, .2, 1);
}

[data-magnetic]:hover .ola,
[data-magnetic]:focus-visible .ola { height: 280%; }

/* --- Piezas compartidas de la portada -------------------------------------- */

.rotulo {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--turq-ink); margin: 0 0 18px;
}

.titular-seccion {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 22px; margin-bottom: 34px;
}

/* Las secciones que se separan de la anterior con un filete, no con aire. */
.titular-linea { border-top: 1px solid var(--line); padding-top: 34px; }

.titular-nota { font-size: 14px; line-height: 1.6; color: var(--onband-2); margin: 0; max-width: 27em; }

.enlace-mono {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--turq-ink); white-space: nowrap;
}
.enlace-mono:hover { color: var(--deep); }

/* La caja rayada que el prototipo usa dondequiera que va una foto. Es el
   estado «sin imagen» del propio diseño, no un hueco sin resolver. */
/*
   `picture` es un elemento en linea, asi que su `img` con `width:100%` se mide
   contra el ancho intrinseco de la imagen y no contra la columna: el marco de
   4/5 salia a 1250 px de alto. Con `display:contents` la caja del `picture`
   desaparece y el `img` hereda el sitio que le tocaba en la rejilla.
*/
picture { display: contents; }

.marco-foto {
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(135deg, var(--ph) 0 9px, transparent 9px 18px);
  border: 1px solid var(--line);
  /* `height:auto` es imprescindible: los atributos width/height del <img>
     actuan como alto definido y dejarian sin efecto el aspect-ratio de abajo,
     que es quien da al marco su proporcion. */
  display: block; width: 100%; height: auto; object-fit: cover;
}
.marco-foto-alto { aspect-ratio: 4 / 5; }
.marco-foto-ancho { aspect-ratio: 16 / 10; }

/* --- Heroe ----------------------------------------------------------------- */

.hero {
  --turq-ink: #4FC7E4;
  position: relative; min-height: 92svh; background: var(--hero);
  display: flex; align-items: flex-end; overflow: hidden;
}

/*
   La fotografia aerea de Coiba, que ocupa el hueco que el prototipo reservaba
   para un video de dron en bucle. Va la primera, debajo de la trama, los halos
   y el velo, que son los que dejan legible el texto encima.
*/
.hero-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}

/*
   La trama de rayas diagonales del prototipo se retira: daba textura a un fondo
   plano, y sobre la fotografia solo la opaca. La regla se queda documentada
   aqui, sin uso, por si vuelve el fondo plano algun dia:

   .hero-trama { background-image: repeating-linear-gradient(128deg,
     rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 9px,
     rgba(255,255,255,0) 9px, rgba(255,255,255,0) 18px); }
*/

.hero-halo { position: absolute; }

.hero-halo-1 {
  top: -25%; left: -10%; width: 70%; height: 90%;
  background: radial-gradient(circle, rgba(0, 155, 196, .36), transparent 62%);
  filter: blur(30px);
  animation: coibaDrift 26s ease-in-out infinite;
}

.hero-halo-2 {
  bottom: -30%; right: -8%; width: 66%; height: 96%;
  background: radial-gradient(circle, rgba(8, 168, 232, .26), transparent 60%);
  filter: blur(34px);
  animation: coibaDrift 34s ease-in-out infinite reverse;
}

/*
   El prototipo trae (.42, .10, .88) y una trama de rayas encima. Sin la trama y
   con la fotografia debajo, ese reparto deja el texto sobre la arena clara de
   la playa y no se lee: medido, el rotulo bajaba a 2,8:1.

   Las paradas no son a ojo. `.hero-interior` empieza al 48 % de la altura y el
   rotulo vive entre el 51 % y el 53 %, asi que el velo llega ya oscuro al 50 %
   y de ahi hacia abajo no afloja. Por encima del 40 % apenas toca la imagen,
   que es donde la foto luce.

   Medido sobre el PEOR pixel de cada linea, no sobre la media: la media daba
   4,9:1 donde el peor daba 2,8:1, y es el peor el que se lee mal.
*/
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(
    rgba(4, 32, 46, .26) 0%,
    rgba(4, 32, 46, .12) 28%,
    rgba(4, 32, 46, .34) 42%,
    rgba(4, 32, 46, .84) 50%,
    rgba(4, 32, 46, .90) 74%,
    rgba(4, 32, 46, .96) 100%
  );
}

/*
   Cinturon y tirantes. El velo basta para el contraste, pero una foto puede
   cambiar y traer espuma blanca justo detras de una linea de texto; la sombra
   sostiene el contraste sin oscurecer mas la imagen.
*/
.hero-rotulo,
.hero h1,
.hero-entradilla {
  text-shadow: 0 1px 12px rgba(3, 25, 36, .55);
}

/*
   El turquesa del prototipo (#4FC7E4) medido sobre la foto da 4,53:1, que pasa
   el 4,5 de la norma por tres centesimas. En un rotulo de 9 px en versalitas
   eso no es margen: si manana se cambia la fotografia, baja. Se aclara el tono
   —sigue siendo el turquesa de la marca— hasta dejarlo holgado.
*/
.hero-rotulo { color: #A6E6F7; }

.hero-interior {
  position: relative; z-index: 3; width: 100%;
  max-width: 1360px; margin: 0 auto; padding: 0 5vw 78px;
}

.hero-rotulo {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--turq-ink); margin: 0 0 22px;
  animation: coibaRise .9s cubic-bezier(.16, .84, .28, 1) both;
}

.hero h1 {
  font-size: clamp(44px, 6.6vw, 88px); line-height: .98; letter-spacing: -.02em;
  color: #F8F6F0; margin: 0; max-width: 16em;
  animation: coibaRise 1s cubic-bezier(.16, .84, .28, 1) .12s both;
}

.hero-pie {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 44px; margin-top: 40px;
  animation: coibaRise 1s cubic-bezier(.16, .84, .28, 1) .26s both;
}

.hero-entradilla {
  font-size: 16.5px; line-height: 1.66; color: rgba(234, 243, 247, .8);
  margin: 0; max-width: 33em;
}

.hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.boton-claro {
  position: relative; overflow: hidden;
  background: #F8F6F0; color: #084868; border: 0; border-radius: 2px;
  padding: 15px 24px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.boton-claro .etiqueta { position: relative; z-index: 2; }
.boton-claro:hover { color: #084868; }

.boton-linea {
  border: 1px solid rgba(234, 243, 247, .34); border-radius: 2px;
  padding: 15px 24px; font-size: 13.5px; font-weight: 500; color: #EAF3F7;
}
.boton-linea:hover { color: #EAF3F7; border-color: var(--turq); }

.hero-coordenadas {
  position: absolute; right: 5vw; top: 46%; z-index: 3;
  font-size: 10px; letter-spacing: .2em; color: rgba(234, 243, 247, .5);
  writing-mode: vertical-rl;
}

.hero-cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 3;
  width: 1px; height: 28px; background: linear-gradient(var(--turq), transparent);
  animation: coibaCue 2.4s ease-in-out infinite;
}

/* --- Banda de cifras ------------------------------------------------------- */

.banda-kpis {
  --turq-ink: #4FC7E4;
  background: var(--band); color: var(--onband);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #08A8E8, #4E7A16 24%, #78C808 44%, #F89808 68%, #EC6E8A 86%, #08A8E8) 1 / 1 / 0 stretch;
}

.kpis-interior {
  max-width: 1360px; margin: 0 auto; padding: 0 5vw;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* El margen negativo solapa el filete del primero con el borde del contenedor,
   para que la columna de la izquierda no lo luzca suelto. */
.kpi {
  padding: 46px 0 44px 30px;
  border-left: 1px solid rgba(255, 255, 255, .13);
  margin-left: -1px;
}

.kpi .cifra {
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 4.6vw, 58px); font-weight: 400; line-height: 1;
  color: #F8F6F0; letter-spacing: -.02em;
}
.kpi .etiqueta { font-size: 13px; font-weight: 600; margin-top: 12px; color: var(--turq-ink); }
.kpi .nota { font-size: 11.5px; line-height: 1.5; margin-top: 5px; color: var(--onband-2); }

/* --- Intro ----------------------------------------------------------------- */

.intro { padding: clamp(78px, 9vw, 136px) 5vw; }

.intro-interior {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(38px, 6vw, 86px); align-items: start;
}

.intro h2 {
  font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.015em;
  color: var(--deep); margin: 0 0 26px;
}
.intro p { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); margin: 0 0 20px; }

.intro .cita { border-left: 2px solid var(--turq); padding: 4px 0 4px 22px; }
.intro .cita p { font-style: italic; font-size: 22px; line-height: 1.4; color: var(--deep); margin: 0; }
.intro .cita .firma {
  font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); margin: 14px 0 0;
}

.intro-lado { position: relative; }
.intro-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.intro-datos .dato { border: 1px solid var(--line); background: var(--paper); padding: 18px; }
.dato-cifra { font-size: 26px; color: var(--deep); }
.dato-pie { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }

/* --- Cuatro lineas --------------------------------------------------------- */

.lineas { padding: 0 5vw clamp(78px, 9vw, 130px); }
.lineas-interior { max-width: 1240px; margin: 0 auto; }
.lineas .titular-seccion { margin-bottom: 38px; }
.lineas h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; color: var(--deep); margin: 0; }

/* El gap de 1px sobre fondo --line dibuja los filetes entre fichas sin bordes
   dobles: es la reticula del prototipo. */
.lineas-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}

.linea-ficha {
  background: var(--paper); padding: 32px 26px 38px; color: inherit;
  transition: background .3s, box-shadow .35s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.linea-ficha:hover {
  background: var(--bg); box-shadow: 0 16px 44px rgba(8, 72, 104, .11);
  transform: translateY(-3px); position: relative; z-index: 2; color: inherit;
}

.linea-num {
  font-size: 10px; letter-spacing: .16em; color: var(--turq-ink); margin-bottom: 22px;
}
.linea-ficha h3 {
  font-size: 19px; font-weight: 600; color: var(--deep);
  margin: 0 0 12px; letter-spacing: -.01em;
}
.linea-ficha p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }

.linea-sellos { display: flex; gap: 7px; flex-wrap: wrap; }
.sello { font-size: 10.5px; padding: 4px 9px; border: 1px solid var(--line); color: var(--ink-2); }
.sello-verde { background: rgba(78, 122, 22, .1); color: var(--green-ink); border-color: transparent; }
.sello-turquesa { background: rgba(0, 155, 196, .1); color: var(--turq-ink); border-color: transparent; }
.sello-ambar { background: rgba(245, 144, 26, .12); color: var(--amber-ink); border-color: transparent; }

/* --- Territorio y mapa ----------------------------------------------------- */

.territorio {
  --turq-ink: #4FC7E4;
  background: var(--band); color: var(--onband);
  padding: clamp(74px, 8vw, 120px) 5vw;
}
.territorio-interior { max-width: 1360px; margin: 0 auto; }
.territorio .titular-seccion { gap: 24px; margin-bottom: 40px; }
.territorio h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; color: #F8F6F0; margin: 0; }

.territorio-rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .13);
}

.territorio-lienzo { position: relative; min-height: 520px; background: #062A3C; }
.territorio-lienzo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.territorio-lista { background: var(--band); display: flex; flex-direction: column; }

.territorio-sitio {
  text-align: left; background: none; color: inherit; cursor: pointer;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 19px 22px; transition: background .25s;
}
.territorio-sitio:hover { background: rgba(255, 255, 255, .05); }

.sitio-tipo {
  display: block; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 7px;
}
.sitio-nombre { display: block; font-size: 14px; font-weight: 600; color: #F8F6F0; line-height: 1.35; }
.sitio-coords { display: block; font-size: 10.5px; color: var(--onband-2); margin-top: 6px; }

.territorio-reset { padding: 19px 22px; margin-top: auto; }
.reset-pastilla {
  background: none; border: 1px solid rgba(255, 255, 255, .24); border-radius: 2px;
  padding: 10px 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--onband); cursor: pointer; transition: border-color .25s, background .25s;
}
.reset-pastilla:hover { border-color: var(--turq-ink); background: rgba(255, 255, 255, .05); }

@media (max-width: 860px) {
  .territorio-rejilla { grid-template-columns: 1fr; }
  .territorio-lienzo { min-height: 380px; }
}

/* --- Boya ------------------------------------------------------------------ */

.boya { padding: clamp(78px, 9vw, 130px) 5vw; }
.boya-interior { max-width: 1240px; margin: 0 auto; }
.boya h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; color: var(--deep); margin: 0; }

.boya-estado {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); padding: 8px 13px;
}
.boya-estado .pulso {
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral); display: block;
  animation: coibaPulse 2s ease-in-out infinite;
}
.boya-estado span:last-child {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}

.boya-ficha { border: 1px solid var(--line); background: var(--paper); }

.boya-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.boya-metrica {
  padding: 26px 24px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.metrica-etiqueta {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2);
}
.metrica-valor { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
.metrica-valor .cifra {
  font-variant-numeric: tabular-nums; font-size: 33px; color: var(--deep); letter-spacing: -.02em;
}
.metrica-valor .unidad { font-size: 13px; color: var(--ink-2); }
.metrica-delta { font-size: 11px; color: var(--turq-ink); margin-top: 8px; }

.boya-grafica { padding: 28px 24px 22px; }

.grafica-titular {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 12px; margin-bottom: 16px;
}
.grafica-que { font-size: 12.5px; font-weight: 600; color: var(--deep); }
.grafica-fondeo { font-size: 10.5px; color: var(--ink-2); }

.grafica-lienzo { position: relative; height: 190px; }
.grafica-lienzo svg { width: 100%; height: 100%; display: block; overflow: visible; }

.boya-grafica .guia { stroke: var(--line); stroke-width: 1; }
.boya-grafica .guia-media { stroke-dasharray: 3 4; }
.boya-grafica .area { fill: rgba(0, 155, 196, .13); }
.boya-grafica .linea { stroke: var(--turq); stroke-width: 2; }
.boya-grafica .punto { fill: var(--coral); }

/* Los extremos de la escala se apoyan sobre las guias, con el fondo del papel
   detras para que la linea no les pase por encima. */
.grafica-tope,
.grafica-suelo {
  position: absolute; left: 0; font-size: 10px; color: var(--ink-2);
  background: var(--paper); padding-right: 6px;
}
.grafica-tope { top: -6px; }
.grafica-suelo { bottom: 22px; }

.grafica-tiempo {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--ink-2);
  border-top: 1px solid var(--line); padding-top: 12px;
}

.boya-nota {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  margin: 16px 0 0; max-width: 52em;
}

.boya-vacio {
  border: 1px dashed var(--line); padding: 34px; text-align: center;
  color: var(--ink-2); font-size: 14px; margin: 0;
}

/* --- Catalogo de especies -------------------------------------------------- */

.catalogo-portada { padding: 0 0 clamp(78px, 9vw, 130px); }
.catalogo-titular { max-width: 1240px; margin: 0 auto; padding: 0 5vw; }
.catalogo-portada .titular-seccion { border-top: 1px solid var(--line); padding-top: 34px; }
.catalogo-portada h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; color: var(--deep); margin: 0; }

.catalogo-cuenta { text-align: right; }
.cuenta-cifra {
  font-variant-numeric: tabular-nums; font-size: clamp(40px, 5vw, 64px);
  line-height: .9; color: var(--deep);
}
.cuenta-pie { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }

.catalogo-carrusel { position: relative; }

/* Los velos tapan el corte de la tira contra el fondo de la pagina. */
.carrusel-velo {
  position: absolute; top: 0; bottom: 22px; z-index: 2;
  width: clamp(46px, 6vw, 104px); pointer-events: none;
}
.carrusel-velo-izq { left: 0; background: linear-gradient(to right, var(--bg) 14%, rgba(0, 0, 0, 0)); }
.carrusel-velo-der { right: 0; background: linear-gradient(to left, var(--bg) 14%, rgba(0, 0, 0, 0)); }

.carrusel-flecha {
  position: absolute; top: 50%; z-index: 3;
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%); border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--deep);
  cursor: pointer; opacity: .9; transition: opacity .25s, transform .25s, background .25s;
}
.carrusel-antes { left: 12px; }
.carrusel-despues { right: 12px; }
.carrusel-flecha:hover {
  opacity: 1; transform: translateY(-50%) scale(1.09);
  background: var(--turq); color: #04212E; border-color: var(--turq);
}

.carrusel-pista {
  display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth;
  padding: 6px 5vw 22px; scroll-padding-left: 5vw; scroll-snap-type: x;
}

.especie-ficha {
  flex: 0 0 auto; width: 270px; scroll-snap-align: start; color: inherit;
  border: 1px solid var(--line); background: var(--paper);
}

.especie-foto {
  aspect-ratio: 4 / 3; width: 100%; display: block; object-fit: cover; overflow: hidden;
}

.especie-cuerpo { padding: 18px 18px 22px; }

.especie-grupo {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 9px;
}
.especie-nombre { font-size: 15.5px; font-weight: 600; color: var(--deep); line-height: 1.3; }
.especie-latin { font-style: italic; font-size: 15px; color: var(--ink-2); margin-top: 4px; }

.especie-estado {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2);
}

/* Los cuatro tonos con que el prototipo grada la urgencia del estado. */
.especie-estado .punto { width: 7px; height: 7px; border-radius: 50%; display: block; flex: 0 0 auto; }
.punto-critico { background: #B4530A; }
.punto-amenazado { background: var(--coral); }
.punto-estable { background: var(--green); }
.punto-observado { background: var(--turq); }

/* --- Divulgacion reciente -------------------------------------------------- */

.divulgacion-portada { padding: 0 5vw clamp(78px, 9vw, 120px); }
.divulgacion-interior { max-width: 1240px; margin: 0 auto; }
.divulgacion-portada .titular-seccion { margin-bottom: 36px; }
.divulgacion-portada h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; color: var(--deep); margin: 0; }

.divulgacion-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px;
}

.divulgacion-rejilla a { color: inherit; display: block; }
.divulgacion-rejilla .marco-foto { margin-bottom: 14px; }
.post-meta {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 10px;
}
.divulgacion-rejilla h3 {
  font-size: 24px; font-weight: 400; line-height: 1.18; color: var(--deep); margin: 0 0 10px;
}
.divulgacion-rejilla p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.divulgacion-rejilla a:hover h3 { color: var(--turq-ink); }

/* --- La Isla ---------------------------------------------------------------
   Pantalla entera sobre --hero, con el halo a la deriva del heroe de la portada
   pero con opacidades mas bajas. */

.isla {
  --turq-ink: #4FC7E4;
  background: var(--hero); color: #EAF3F7;
  position: relative; overflow: hidden;
}

/*
   La trama de rayas diagonales se retira a peticion del cliente (2026-09-09),
   como ya se hizo en el heroe. Aqui NO hay fotografia debajo: el prototipo da a
   esta cabecera un fondo plano (`background: var(--hero)`) con la trama encima y
   un solo halo, sin imagen ninguna. Quitarla deja el plano y el halo, que es una
   divergencia deliberada del prototipo, no un descuido. La regla se queda
   documentada por si vuelve:

   .isla-trama { position: absolute; inset: 0; background-image:
     repeating-linear-gradient(128deg, rgba(255,255,255,.04) 0,
     rgba(255,255,255,.04) 9px, rgba(255,255,255,0) 9px,
     rgba(255,255,255,0) 18px); }
*/

.isla-halo {
  position: absolute; top: -20%; left: -6%; width: 58%; height: 120%;
  background: radial-gradient(circle, rgba(0, 155, 196, .24), transparent 62%);
  filter: blur(34px);
  animation: coibaDrift 32s ease-in-out infinite;
}

.isla-cabecera {
  position: relative;
  padding: clamp(52px, 6vw, 86px) 5vw clamp(30px, 4vw, 48px);
  max-width: 1240px; margin: 0 auto;
}

.isla-cabecera h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  margin: 0 0 24px; max-width: 17em; color: #EAF3F7;
}

.isla-entradilla {
  font-size: 16.5px; line-height: 1.7; color: rgba(234, 243, 247, .78);
  margin: 0; max-width: 46em;
}

.isla-pista { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.isla-pista .raya { width: 26px; height: 1px; background: rgba(234, 243, 247, .36); display: block; }
.isla-pista .mono {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(234, 243, 247, .5);
}

.isla-tira { position: relative; }

.tira-velo {
  position: absolute; top: 0; bottom: clamp(40px, 5vw, 60px); z-index: 2;
  width: clamp(46px, 6vw, 104px); pointer-events: none;
}
.tira-velo-izq { left: 0; background: linear-gradient(to right, var(--hero) 14%, rgba(0, 0, 0, 0)); }
.tira-velo-der { right: 0; background: linear-gradient(to left, var(--hero) 14%, rgba(0, 0, 0, 0)); }

.tira-flecha {
  position: absolute; top: 50%; z-index: 3;
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%); border-radius: 50%;
  border: 1px solid rgba(234, 243, 247, .26);
  background: rgba(4, 32, 46, .66); backdrop-filter: blur(9px);
  color: #EAF3F7; cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
  transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1), background .25s, color .25s, border-color .25s;
}
.tira-antes { left: 12px; }
.tira-despues { right: 12px; }
.tira-flecha:hover {
  transform: translateY(-50%) scale(1.09);
  background: #4FC7E4; color: #04212E; border-color: #4FC7E4;
}

.tira-pista {
  display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
  scroll-padding-left: 5vw; scroll-snap-type: x;
  padding: 12px 5vw clamp(40px, 5vw, 60px);
}

.capitulo {
  flex: 0 0 auto; width: min(78vw, 560px); scroll-snap-align: center;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03);
  display: flex; flex-direction: column;
}

.capitulo-foto { aspect-ratio: 16 / 10; width: 100%; display: block; object-fit: cover; }
.capitulo-hueco {
  background-color: rgba(255, 255, 255, .04);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .07) 9px, transparent 9px, transparent 18px);
}

.capitulo-cuerpo { padding: 28px 26px 32px; }
.capitulo-cabeza { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.capitulo-anio { font-size: 36px; color: var(--turq-ink); line-height: 1; }
.capitulo-tag {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(234, 243, 247, .5);
}
.capitulo h2 { font-size: 28px; line-height: 1.14; margin: 0 0 14px; color: #F8F6F0; }
.capitulo p { font-size: 15px; line-height: 1.72; color: rgba(234, 243, 247, .76); margin: 0; }

.isla-cifras {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: clamp(44px, 5vw, 70px) 5vw clamp(60px, 7vw, 96px);
}
.isla-cifras-interior {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px;
}
.isla-cifras .cifra {
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.4vw, 44px); color: #F8F6F0;
}
.isla-cifras .cifra-pie {
  font-size: 13px; color: rgba(234, 243, 247, .62); margin-top: 10px; line-height: 1.5;
}

/* --- La Estacion ----------------------------------------------------------- */

.estacion-cabecera { padding: clamp(52px, 6vw, 84px) 5vw clamp(40px, 5vw, 60px); }
.estacion-cabecera-interior { max-width: 1240px; margin: 0 auto; }
.estacion-cabecera h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  color: var(--deep); margin: 0 0 24px; max-width: 18em;
}
.estacion-entradilla { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin: 0; max-width: 46em; }

.estacion-infra { padding: 0 5vw clamp(60px, 7vw, 96px); }
.estacion-aviso-caja { max-width: 1240px; margin: 0 auto 18px; }

/* Borde de trazos, no continuo: el prototipo marca asi lo que es de muestra. */
.estacion-aviso {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px dashed var(--line); padding: 6px 11px; margin-bottom: 16px;
}
.estacion-aviso .punto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
  display: block; flex: 0 0 auto;
}
.estacion-aviso .mono {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}

.infra-rejilla {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.infra-ficha { background: var(--paper); padding: 30px 26px 34px; }
.infra-cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.infra-num { font-size: 10px; letter-spacing: .16em; color: var(--turq-ink); }
.infra-dato { font-size: 11px; color: var(--ink-2); }
.infra-ficha h3 {
  font-size: 18px; font-weight: 600; color: var(--deep);
  margin: 0 0 11px; letter-spacing: -.01em;
}
.infra-ficha p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }

.laboratorio {
  --turq-ink: #4FC7E4;
  background: var(--band); color: var(--onband);
  padding: clamp(64px, 7vw, 104px) 5vw;
}
.laboratorio-interior { max-width: 1240px; margin: 0 auto; }
.laboratorio .titular-seccion { margin-bottom: 44px; }
.laboratorio .rotulo { margin: 0 0 12px; }
.laboratorio-aviso {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--onband-2); margin: 0 0 18px;
}
.laboratorio h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; color: #F8F6F0; margin: 0; }
.laboratorio-nota { font-size: 14.5px; line-height: 1.65; color: var(--onband-2); margin: 0; max-width: 30em; }

.cronograma {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14);
}
.hito { background: var(--band); padding: 26px 22px 30px; }
.hito-anio { font-size: 11px; color: var(--turq-ink); margin-bottom: 16px; }
.hito-titulo { font-size: 15px; font-weight: 600; color: #F8F6F0; margin-bottom: 8px; }
.hito-texto { font-size: 12.5px; line-height: 1.55; color: var(--onband-2); }
.hito-barra { height: 3px; background: var(--turq); margin-top: 20px; }

.llegar { padding: clamp(64px, 7vw, 104px) 5vw; }
.llegar-interior {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.llegar h2 {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06;
  color: var(--deep); margin: 0 0 30px;
}

.llegar-pasos { border-top: 1px solid var(--line); }
.paso {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 18px;
  align-items: start; padding: 20px 2px; border-bottom: 1px solid var(--line);
}
.paso-num { font-size: 11px; color: var(--turq-ink); padding-top: 3px; }
.paso-titulo { font-size: 15.5px; font-weight: 600; color: var(--deep); margin-bottom: 5px; }
.paso-texto { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.paso-tiempo { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; padding-top: 3px; }

.visitantes {
  margin-top: 32px;
  border: 1px solid var(--line); background: var(--paper);
  padding: 26px 24px;
}
.visitantes-rotulo {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 14px;
}
.visitantes p { font-size: 14.5px; line-height: 1.66; color: var(--ink-2); margin: 0 0 20px; }

.llegar-mapa {
  border: 1px solid var(--line); background: #062A3C;
  min-height: 520px; position: relative;
}
.llegar-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.boton-banda {
  position: relative; overflow: hidden; display: inline-block;
  background: var(--band); color: var(--onband); border: 0; border-radius: 2px;
  padding: 14px 22px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.boton-banda .etiqueta { position: relative; z-index: 2; }
.boton-banda:hover { color: var(--onband); }

/* --- Investigacion ---------------------------------------------------------
   El buscador del prototipo alternaba en memoria; aqui es un formulario GET y
   los chips son enlaces. La estetica es la misma. */

.investigacion { padding: clamp(52px, 6vw, 84px) 5vw clamp(78px, 9vw, 120px); }
.investigacion-interior { max-width: 1240px; margin: 0 auto; }

.investigacion h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  color: var(--deep); margin: 0 0 22px; max-width: 20em;
}

.investigacion-entradilla {
  font-size: 16.5px; line-height: 1.7; color: var(--ink-2);
  margin: 0 0 18px; max-width: 44em;
}

.investigacion-aviso-caja { margin-bottom: 26px; }

.buscador {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  border: 1px solid var(--line); background: var(--paper);
  padding: 14px 16px; margin-bottom: 18px;
  transition: border-color .25s, box-shadow .3s;
}
.buscador:hover,
.buscador:focus-within {
  border-color: var(--turq-ink);
  box-shadow: 0 8px 26px rgba(8, 72, 104, .07);
}

.buscador-lupa { font-size: 12px; color: var(--turq-ink); }

.buscador input {
  flex: 1 1 0; min-width: 200px;
  border: 0; outline: none; background: none;
  font-size: 15px; color: var(--ink); padding: 5px 0;
}
.buscador input:focus { color: var(--deep); }

.buscador-cuenta { font-size: 11px; color: var(--ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }

.chip {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  border-radius: 40px; padding: 8px 15px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: .22s;
}
.chip:hover { border-color: var(--turq); color: var(--turq-ink); }
.chip.activo {
  border-color: var(--turq); background: var(--turq); color: #04212E;
}
.chip.activo:hover { color: #04212E; }

.proyectos { border-top: 1px solid var(--line); }

.proyecto {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 26px;
  align-items: start; padding: 26px 6px;
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}
/* El resaltado es solo de la fila que lleva a algún sitio. Se quedó suelto en la
   transcripción —el prototipo tenía clic y `cursor:pointer`, y aquí se conservó
   únicamente el hover—, así que la fila se iluminaba prometiendo un destino que
   no existía. */
.proyecto.enlazado { position: relative; }
.proyecto.enlazado:hover { background: var(--paper); }
.proyecto h3 a { color: inherit; }
/* Estira el enlace del título sobre la tarjeta entera, como el prototipo. */
.proyecto h3 a::after { content: ''; position: absolute; inset: 0; }
.proyecto h3 a:focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; }

/* El código del proyecto es interno desde el 2026-09-21: no se pinta en público. */

.proyecto-linea {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 9px;
}
.proyecto h3 {
  font-size: 19.5px; font-weight: 600; line-height: 1.32;
  color: var(--deep); margin: 0 0 9px; letter-spacing: -.01em;
}
.proyecto p {
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 12px; max-width: 56em;
}
.proyecto-autores { font-size: 11px; color: var(--ink-2); }

.proyecto-lado { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Los cinco tonos con que el prototipo grada la fase del proyecto. */
.sello-fase { font-size: 11px; padding: 5px 10px; font-weight: 600; }
.sello-curso { background: rgba(0, 155, 196, .13); color: var(--turq-ink); }
.sello-publicado { background: rgba(78, 122, 22, .12); color: var(--green-ink); }
.sello-vivo { background: rgba(245, 144, 26, .16); color: var(--amber-ink); }
.sello-piloto { background: rgba(10, 46, 78, .08); color: var(--deep); }
.sello-cerrado { background: rgba(10, 46, 78, .06); color: var(--ink-2); }

.proyecto-periodo { font-size: 11px; color: var(--ink-2); }
.proyecto-datos { font-size: 11px; color: var(--turq-ink); }

.investigacion-vacio {
  border: 1px dashed var(--line); padding: 44px; text-align: center;
  color: var(--ink-2); font-size: 15px; margin: 0;
}

/* Paginacion. No sale del prototipo —su listado no paginaba—, asi que se viste
   con las piezas que ya usa el sitio: la pastilla de los chips.

   Iba acotada a `.investigacion` y por eso el catalogo y divulgacion paginaban
   con la vista de Tailwind en crudo: flechas <svg> sin width ni height, es
   decir, 300x150 px cada una. Ahora la vista es propia
   —`resources/views/vendor/pagination/coiba.blade.php`— y estas reglas valen
   para las tres pantallas que paginan. */
.paginador { margin-top: 34px; }
.paginador ul {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  padding: 0; margin: 0; justify-content: center;
}
.paginador a,
.paginador span {
  display: inline-block; border: 1px solid var(--line); border-radius: 40px;
  padding: 8px 15px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  transition: .22s;
}
.paginador a:hover { border-color: var(--turq); color: var(--turq-ink); }
.paginador [aria-current="page"] span {
  border-color: var(--turq); background: var(--turq); color: #04212E;
}
/* Los extremos apagados y los puntos suspensivos no son botones: sin borde. */
.paginador [aria-disabled="true"] span,
.paginador .paginador-hueco { border-color: transparent; color: var(--ink-3); }

@media (max-width: 720px) {
  .proyecto { grid-template-columns: 1fr; gap: 12px; }
  .proyecto-lado { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* --- Divulgacion, el listado ----------------------------------------------- */

.divulgacion { padding: clamp(52px, 6vw, 84px) 5vw clamp(78px, 9vw, 120px); }
.divulgacion .divulgacion-interior { max-width: 1240px; margin: 0 auto; }
.divulgacion h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  color: var(--deep); margin: 0 0 26px; max-width: 18em;
}
.divulgacion .chips { margin-bottom: 44px; }

/* La pieza que abre el listado, a dos columnas y con filete arriba y abajo. */
.divulgacion-destacado {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 40px 0; margin-bottom: 52px;
}
.divulgacion-destacado a {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 60px); align-items: center; color: inherit;
}
.destacado-foto { aspect-ratio: 5 / 4; width: 100%; display: block; object-fit: cover; }

.destacado-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sello-destacado {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  background: var(--band); color: var(--onband); padding: 5px 10px;
}
.destacado-canal {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.divulgacion-destacado h2 {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08;
  color: var(--deep); margin: 0 0 18px;
}
.divulgacion-destacado p { font-size: 16px; line-height: 1.68; color: var(--ink-2); margin: 0 0 22px; }

.destacado-leer {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--turq-ink);
}
.divulgacion-destacado a:hover h2 { color: var(--turq-ink); }

/* El gap de 1px sobre --line dibuja los filetes sin bordes dobles. */
.divulgacion-rejilla-cuadro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}

.post-ficha {
  background: var(--paper);
  transition: background .28s, box-shadow .35s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.post-ficha a { display: block; padding: 26px 24px 30px; color: inherit; }
.post-ficha:hover {
  background: var(--bg); box-shadow: 0 16px 44px rgba(8, 72, 104, .1);
  transform: translateY(-3px); position: relative; z-index: 2;
}

.post-ficha-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.post-canal {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--turq-ink);
}
.post-lectura { font-size: 10px; color: var(--ink-2); }
.post-ficha h3 { font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--deep); margin: 0 0 12px; }
.post-ficha p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 20px; }
.post-fecha {
  font-size: 10.5px; color: var(--ink-2);
  border-top: 1px solid var(--line); padding-top: 14px;
}

/* La franja que lleva a Publicaciones, donde antes iba la lista de papers. */
.franja-publicaciones {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  margin-top: clamp(56px, 7vw, 88px); padding: 26px 4px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: inherit; transition: background .25s;
}
.franja-publicaciones:hover { background: var(--paper); }
.franja-rotulo { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; color: var(--deep); }
.franja-cuenta { font-size: 11.5px; color: var(--ink-2); }
.franja-enlace {
  margin-left: auto; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--turq-ink);
}

/* --- Publicaciones --------------------------------------------------------- */

.publicaciones { padding: clamp(52px, 6vw, 84px) 5vw clamp(78px, 9vw, 120px); }
.publicaciones-interior { max-width: 1240px; margin: 0 auto; }
.publicaciones h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  color: var(--deep); margin: 0 0 18px; max-width: 18em;
}
.publicaciones-entradilla {
  font-size: 16px; line-height: 1.68; color: var(--ink-2); margin: 0 0 30px; max-width: 46em;
}

/* Los desplegables y el botón del buscador, con el aire del campo de texto. */
.buscador select {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 3px;
}
.buscador-boton {
  border: 1px solid var(--turq); background: var(--turq); color: #04212E;
  border-radius: 40px; padding: 8px 16px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.publicaciones-limpiar { display: inline-block; margin: 0 0 22px; }

.publicacion-destacada {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(22px, 3vw, 44px); align-items: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 32px 0; margin-bottom: 36px;
}
.publicacion-destacada h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.12; margin: 14px 0 10px; }
.publicacion-destacada h2 a { color: var(--deep); }
.publicacion-destacada h2 a:hover { color: var(--turq-ink); }

/* Los títulos y los autores de los papers migrados son largos: se parten en
   vez de empujar la fila. */
.publicaciones-lista { border-top: 1px solid var(--line); }
.publicacion {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px;
  align-items: start; padding: 20px 4px; border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.publicacion:hover { background: var(--paper); }
.publicacion h3 {
  font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0 0 6px; overflow-wrap: anywhere;
}
.publicacion h3 a { color: var(--deep); }
.publicacion h3 a:hover { color: var(--turq-ink); }
.publicacion-meta {
  font-size: 11.5px; line-height: 1.6; color: var(--ink-2); margin: 0; overflow-wrap: anywhere;
}
.publicacion-sello {
  display: inline-block; margin-top: 8px; padding: 4px 9px;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--band); color: var(--onband);
}
.publicacion-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.publicacion-pdf,
.publicacion-doi { font-size: 11px; color: var(--turq-ink); white-space: nowrap; }
.publicacion-pdf:hover,
.publicacion-doi:hover { color: var(--deep); }

@media (max-width: 720px) {
  .publicacion { grid-template-columns: minmax(0, 1fr); }
  .publicacion-lado { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
}

/* --- La ficha (articulo y paper comparten cabecera) ------------------------ */

.ficha-cabecera {
  --turq-ink: #4FC7E4;
  background: var(--hero); color: #EAF3F7;
  padding: clamp(48px, 6vw, 80px) 5vw clamp(56px, 7vw, 96px);
  position: relative; overflow: hidden;
}

/*
   La trama de rayas se retira con la de /isla y la del heroe (2026-09-09).
   Aqui tampoco hay fotografia debajo: el prototipo da a esta cabecera un fondo
   plano con la trama encima y un halo. Divergencia deliberada, no descuido.
   Afecta a las tres fichas que comparten esta cabecera: articulo, paper y
   proyecto. La regla se queda documentada por si vuelve:

   .ficha-trama { position: absolute; inset: 0; background-image:
     repeating-linear-gradient(128deg, rgba(255,255,255,.043) 0,
     rgba(255,255,255,.043) 9px, rgba(255,255,255,0) 9px,
     rgba(255,255,255,0) 18px); }
*/
.ficha-halo {
  position: absolute; top: -40%; right: -6%; width: 52%; height: 150%;
  background: radial-gradient(circle, rgba(0, 155, 196, .26), transparent 62%);
  filter: blur(30px);
  animation: coibaDrift 30s ease-in-out infinite;
}

.ficha-cabecera-interior { position: relative; max-width: 900px; margin: 0 auto; }

.ficha-volver {
  display: inline-block; margin: 0 0 34px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--turq-ink);
}
.ficha-volver:hover { color: #EAF3F7; }

.ficha-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.ficha-chip {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  border: 1px solid rgba(234, 243, 247, .3); padding: 6px 11px; color: #EAF3F7;
}
.ficha-chip.relleno { background: var(--turq); color: #04212E; border-color: var(--turq); }

.ficha-cabecera h1 {
  font-size: clamp(34px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 30px; color: #EAF3F7;
}

.ficha-metas {
  display: flex; flex-wrap: wrap; gap: 36px;
  border-top: 1px solid rgba(234, 243, 247, .18); padding-top: 24px;
}
.ficha-meta-rotulo {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 7px;
}
.ficha-meta-valor { font-size: 13.5px; line-height: 1.5; max-width: 22em; }
.ficha-meta-valor.mono { font-size: 13px; }
.ficha-meta-valor a { color: #EAF3F7; text-decoration: underline; }
.ficha-meta-valor a:hover { color: var(--turq-ink); }

.ficha { max-width: 900px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) 5vw clamp(70px, 8vw, 110px); }

.ficha-portada { margin: 0 0 40px; }
.ficha-portada img { width: 100%; display: block; border: 1px solid var(--line); }
.ficha-portada figcaption {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 10px;
}

.ficha-entradilla {
  font-size: 26px; line-height: 1.42; color: var(--deep); margin: 0 0 34px;
}
/* El cuerpo va en la misma caja blanca que el abstract del paper, y el texto de
   las dos, justificado: lo pidió el cliente (2026-09-10). */
.ficha-cuerpo {
  border: 1px solid var(--line); background: var(--paper);
  padding: 30px 30px 26px; margin-bottom: 34px;
}
.ficha-cuerpo p {
  font-size: 17px; line-height: 1.78; color: var(--ink); margin: 0 0 26px;
  text-align: justify;
}
.ficha-cuerpo p:last-child { margin-bottom: 0; }

.ficha-relacionados { border-top: 1px solid var(--line); padding-top: 34px; margin-top: 20px; }
.ficha-relacionados h2 {
  font-size: 24px; font-weight: 400; color: var(--deep); margin: 0 0 20px;
}
.relacionados-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
}
.relacionado {
  display: block; border: 1px solid var(--line); background: var(--paper);
  padding: 18px 18px 22px; color: inherit; transition: border-color .25s;
}
.relacionado:hover { border-color: var(--turq); color: inherit; }
.relacionado-canal {
  display: block; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 9px;
}
.relacionado-titulo { display: block; font-size: 17px; line-height: 1.24; color: var(--deep); }

/* --- La ficha de paper ------------------------------------------------------ */

.paper-abstract {
  border: 1px solid var(--line); background: var(--paper);
  padding: 30px 30px 26px; margin-bottom: 34px;
}
.paper-abstract-rotulo {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 14px;
}
.paper-abstract p {
  font-size: 15.5px; line-height: 1.72; color: var(--ink); margin: 0;
  text-align: justify;
}

/* Justificado, el texto necesita ancho: a 320 px, con 30 px de relleno, a la
   línea le quedaban 226 px. Con 18 le quedan 250. */
@media (max-width: 480px) {
  .ficha-cuerpo,
  .paper-abstract { padding: 22px 18px 20px; }
}

.paper-claves { font-size: 11.5px; color: var(--ink-2); margin-bottom: 34px; }

.paper-acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 34px; }
.paper-datos {
  border: 1px solid var(--line); border-radius: 2px; padding: 14px 20px;
  font-size: 13px; font-weight: 600; color: var(--turq-ink);
}
.paper-datos:hover { border-color: var(--turq); color: var(--turq-ink); }

.paper-licencia {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 22px;
  font-size: 13.5px; color: var(--ink-2);
}
.paper-licencia-rotulo {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--turq-ink);
}

@media (max-width: 780px) {
  .paper-fila { grid-template-columns: 1fr; gap: 8px; }
}

/* --- Catalogo de especies --------------------------------------------------- */

.catalogo { padding: clamp(52px, 6vw, 84px) 5vw clamp(70px, 8vw, 110px); }
.catalogo-interior { max-width: 1240px; margin: 0 auto; }
.catalogo h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  color: var(--deep); margin: 0 0 22px;
}
.catalogo-entradilla {
  font-size: 16.5px; line-height: 1.7; color: var(--ink-2);
  margin: 0 0 44px; max-width: 46em;
}
.chips-catalogo { margin-bottom: 36px; }

/* auto-FILL y no auto-fit: con pocas fichas el prototipo deja los huecos en
   vez de estirar las tarjetas a lo ancho de la fila. */
.catalogo-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 22px;
}

.catalogo-ficha {
  border: 1px solid var(--line); background: var(--paper);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .3s;
}
.catalogo-ficha:hover {
  transform: translateY(-3px); border-color: var(--turq);
  box-shadow: 0 16px 40px rgba(8, 72, 104, .1);
}

.catalogo-foto { aspect-ratio: 1 / 1; width: 100%; display: block; object-fit: cover; }
.catalogo-cuerpo { padding: 17px 17px 20px; }

.catalogo-grupo {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-ink); margin-bottom: 9px;
}
.catalogo-nombre { font-size: 15px; font-weight: 600; color: var(--deep); line-height: 1.3; }
.catalogo-latin { font-style: italic; font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }

.catalogo-estado {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
}
.catalogo-uicn { font-size: 11.5px; color: var(--ink-2); flex: 1 1 0; }

.especie-audio {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--turq-ink); white-space: nowrap;
}

.catalogo-nota {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  margin: 30px 0 0; max-width: 52em;
}

/* --- Nosotros ---------------------------------------------------------------- */

.nosotros-cabecera { padding: clamp(52px, 6vw, 84px) 5vw clamp(50px, 6vw, 74px); }
.nosotros-cabecera-interior { max-width: 1240px; margin: 0 auto; }
.nosotros-cabecera h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  color: var(--deep); margin: 0 0 26px; max-width: 18em;
}
.nosotros-entradilla { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin: 0; max-width: 46em; }

.junta { padding: 0 5vw clamp(60px, 7vw, 96px); }
.junta-interior { max-width: 1240px; margin: 0 auto; }
.junta-titular { border-top: 1px solid var(--line); padding-top: 34px; margin-bottom: 30px; }
.junta-titular h2 {
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06;
  color: var(--deep); margin: 0 0 22px;
}

.apartados { display: flex; flex-wrap: wrap; gap: 8px; }
/* Ya no son rotulos muertos: llevan a su apartado, y se nota al pasar. */
.apartado {
  font-size: 12px; padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 40px; color: var(--ink-2);
  transition: border-color .2s, color .2s, background .2s;
}
.apartado:hover { border-color: var(--turq); color: var(--turq-ink); background: rgba(0, 155, 196, .06); }
.apartado.activo {
  border-color: var(--turq); background: var(--turq); color: #04212E; font-weight: 600;
}

.junta-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 24px 20px;
}

/*
   La tarjeta: lo justo para reconocer a alguien. El perfil entero se lee en el
   modal, pulsando «Ver perfil»; con cuarenta personas, la resena de cada una en
   la rejilla era una pared de texto.

   Se pulsa entera —el enlace se estira por CSS hasta cubrirla— y responde al
   paso del raton y al foco del teclado. Sin esa respuesta, cuarenta cuadros
   iguales no parecen pulsables.
*/
.miembro {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 13px; padding: 28px 18px 22px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 6px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.miembro:hover, .miembro:focus-within {
  transform: translateY(-3px); border-color: rgba(0, 155, 196, .45);
  box-shadow: 0 12px 28px rgba(8, 52, 74, .1);
}

/* Quien pide menos movimiento conserva el resalte, pero la tarjeta no se mueve. */
@media (prefers-reduced-motion: reduce) {
  .miembro { transition: box-shadow .22s ease, border-color .22s ease; }
  .miembro:hover, .miembro:focus-within { transform: none; }
}

.miembro-datos { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; }

/*
   Retrato circular.

   Las fotos de la web oficial son de 380x550 y llevan el nombre de la persona y
   su bandera IMPRESOS a media altura, sobre una banda: un recorte cuadrado del
   derecho —object-fit: cover— mete esa banda dentro del circulo. Por eso la
   imagen se agranda dentro de un contenedor que desborda, encuadrando la cara,
   que en todas ocupa el mismo sitio porque son del mismo estudio.

   Se ven nitidas porque siguen reduciendose: el original tiene 380 px de ancho
   y aqui se pinta a ~214.
*/
.miembro-retrato {
  width: 104px; height: 104px; flex: 0 0 auto; position: relative; overflow: hidden;
  border-radius: 50%;
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(135deg, var(--ph) 0 7px, transparent 7px 14px);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line);
  transition: box-shadow .22s ease;
}
.miembro:hover .miembro-retrato, .miembro:focus-within .miembro-retrato {
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(0, 155, 196, .7);
}
.miembro-retrato img { position: absolute; width: 206%; max-width: none; left: -53%; top: -13%; }

.miembro-nombre { font-size: 15px; font-weight: 600; color: var(--deep); line-height: 1.35; margin: 0; }
/* El cargo en gris y no en turquesa: el color de accion se reserva para «Ver
   perfil», que es lo unico que se pulsa. */
.miembro-cargo { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.5; }
.miembro-afiliacion { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 14px 0 0; }

.miembro-ver {
  margin-top: auto; padding-top: 16px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--turq-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
/* El enlace cubre la tarjeta entera: se pulsa donde sea. */
.miembro-ver::after { content: ''; position: absolute; inset: 0; border-radius: 6px; }
.miembro-flecha { transition: transform .22s ease; }
.miembro:hover .miembro-flecha { transform: translateX(3px); }
.miembro-ver:focus-visible { outline: none; }
.miembro:focus-within { outline: 2px solid var(--turq); outline-offset: 3px; }

.cuentas {
  --turq-ink: #4FC7E4;
  background: var(--band); color: var(--onband);
  padding: clamp(64px, 7vw, 104px) 5vw;
}
.cuentas-interior {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(34px, 5vw, 70px); align-items: start;
}
.cuentas-aviso {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--onband-2); margin: 0 0 14px;
}
.cuentas h2 {
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06;
  color: #F8F6F0; margin: 0 0 30px;
}

.renglones { display: flex; flex-direction: column; gap: 20px; }
.renglon-cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.renglon-etiqueta { font-size: 13.5px; color: #F8F6F0; }
.renglon-pct { font-size: 12px; color: var(--turq-ink); }
.renglon-pista { height: 5px; background: rgba(255, 255, 255, .14); }
.renglon-relleno { height: 5px; background: var(--turq); }

.documentos { border-top: 1px solid rgba(255, 255, 255, .16); }
.documento {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 2px; border-bottom: 1px solid rgba(255, 255, 255, .16);
  color: inherit; transition: background .25s;
}
.documento:hover { background: rgba(255, 255, 255, .05); color: inherit; }
.documento-titulo { display: block; font-size: 14.5px; font-weight: 600; color: #F8F6F0; }
.documento-meta { display: block; font-size: 10.5px; color: var(--onband-2); margin-top: 5px; }
.documento-descargar {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-ink); white-space: nowrap;
}

.alianzas { padding: clamp(60px, 7vw, 96px) 5vw clamp(70px, 8vw, 110px); }
.alianzas-interior { max-width: 1240px; margin: 0 auto; }

.alianzas-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.alianza {
  background: var(--paper); aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; text-align: center; color: inherit;
  transition: background .25s;
}
.alianza:hover { background: var(--bg); color: inherit; }
.alianza span {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.alianza img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Modo abisal -----------------------------------------------------------
   La constante DARK del artboard, valor por valor. El tema lo pinta el
   servidor en <html data-tema-actual>, no el JavaScript: asi no hay parpadeo
   blanco al cargar en abisal. Los veinte valores estan fijados en TemaTest. */

[data-tema-actual="abisal"] {
  --bg: #04202E;
  --paper: #0A3145;
  --band: #062B3E;
  --deep: #DCEAF1;
  --turq: #34C8E8;
  --turq-ink: #34C8E8;
  --green-ink: #9CCB4A;
  --amber-ink: #FFA652;
  --sky: #5EC5F2;
  --green: #9CCB4A;
  --coral: #FFA652;
  --ink: #D5E3EB;
  --ink-2: #8FAAB9;
  --line: rgba(255, 255, 255, .13);
  --ph: rgba(255, 255, 255, .07);
  --ph-bg: #082B3D;
  --hero: #031924;
  --onband: #EAF3F7;
  --onband-2: #9CBECE;
  --logo-filter: none;
}

/* El prototipo no filtra el logotipo en abisal: cambia la imagen. Se sirven las
   dos y se alternan aqui, para que el cambio no dependa del JavaScript. */
/* Con la especificidad de `.nav-interior .marca img`, que ya fija display. */
.nav-interior .marca .logo-abisal { display: none; }
[data-tema-actual="abisal"] .nav-interior .marca .logo-claro { display: none; }
[data-tema-actual="abisal"] .nav-interior .marca .logo-abisal { display: block; }

/* Las bandas oscuras ya son oscuras: en abisal no vuelven a bajar el --turq-ink
   ni el fondo, o se pierden contra el resto de la pagina. */
[data-tema-actual="abisal"] .suscripcion,
[data-tema-actual="abisal"] .territorio,
[data-tema-actual="abisal"] .laboratorio,
[data-tema-actual="abisal"] .cuentas,
[data-tema-actual="abisal"] .banda-kpis { background: var(--band); }

[data-tema-actual="abisal"] .pie { background: var(--hero); }

/* --- Plancton ---------------------------------------------------------------
   Solo se enciende en abisal. Va fijo y sin capturar el puntero: es fondo. */

#coiba-plankton {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 60; opacity: 0; transition: opacity .8s;
}

/* --- Revelado al hacer scroll -----------------------------------------------
   Se esconde SOLO si hay JavaScript (`[data-js]`, puesto en el <head> antes de
   pintar). Sin el, la pagina se lee entera en vez de quedarse en blanco. */

[data-js] [data-reveal] { opacity: 0; }
[data-js] [data-reveal].visible {
  opacity: 1;
  animation: coibaRise .9s cubic-bezier(.16, .84, .28, 1) both;
}

/* Las flechas de las tiras se ocultan en los extremos, no se desactivan: un
   boton deshabilitado no dice nada a quien navega con teclado. */
.tira-flecha[hidden],
.carrusel-flecha[hidden] { display: none; }

.carrusel-velo,
.tira-velo { transition: opacity .3s; }

/* --- Páginas de error ------------------------------------------------------ */

.pagina-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
}

.pagina-error main { max-width: 34em; }

.error-codigo {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--turq-ink);
  margin: 0 0 14px;
}

.pagina-error h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; margin: 0 0 14px; color: var(--deep); }

.error-texto { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 26px; }

.error-volver {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 20px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}

.error-volver:hover { border-color: var(--turq); color: var(--turq-ink); }

/* Los tres datos tabulados de la ficha de proyecto. Reaprovecha la tipografía
   de la ficha de paper; solo cambia la disposición. */
.proyecto-datos-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px; margin: 0 0 34px; padding: 22px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.proyecto-datos-ficha dt {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 7px;
}
.proyecto-datos-ficha dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--deep); }

/* --- Apartados institucionales de Nosotros ---------------------------------
   Seis bloques de texto con las pildoras de arriba como indice. Son enlaces de
   ancla, asi que `scroll-margin-top` los aparta de la cabecera fija.
   --------------------------------------------------------------------------- */

.apartados-cuerpo { background: var(--paper); border-bottom: 1px solid var(--line); }

.apartados-interior {
  max-width: 900px; margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) 5vw;
}

.apartados-interior > .apartados { margin-bottom: clamp(28px, 3vw, 40px); }

/*
   Pestanas sin una linea de JavaScript: cada pildora es un enlace de ancla y
   `:target` decide cual se ve. La direccion queda compartible y el boton de
   atras funciona solo.

   El `@supports` no es adorno: donde no haya `:has()` no se esconde nada y se
   ven los seis apartados seguidos, que es peor que las pestanas pero mucho
   mejor que una pantalla en blanco.

   `scroll-margin-top` aparta el ancla de la cabecera fija.
*/
.apartado-ficha { scroll-margin-top: 92px; }

@supports selector(:has(*)) {
  .apartados-cuerpo .apartado-ficha { display: none; }
  .apartados-cuerpo .apartado-ficha:target { display: block; }
  /* Sin ancla en la direccion manda el primero, que es el que la pildora
     marca como activa al cargar. */
  .apartados-cuerpo:not(:has(.apartado-ficha:target)) .apartado-ficha:first-of-type { display: block; }
}
.apartado-ficha h2 {
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; letter-spacing: -.015em;
  color: var(--deep); margin: 0 0 18px; font-weight: 400;
}
.apartado-ficha p {
  font-size: 15.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 16px; max-width: 62em;
}
.apartado-ficha p:last-child { margin-bottom: 0; }
.apartado-ficha ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.apartado-ficha li {
  position: relative; padding-left: 22px;
  font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 62em;
}
.apartado-ficha li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 7px; height: 1px; background: var(--turq);
}
/* Segundo nivel del cuerpo de un apartado: el organigrama es una jerarquia. */
.apartado-ficha li.nivel-2 { padding-left: 46px; font-size: 14.5px; }
.apartado-ficha li.nivel-2::before { left: 24px; background: var(--ink-3); }

/* El rotulo de cada grupo del equipo. */
.equipo-grupo {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin: clamp(30px, 3vw, 44px) 0 18px; font-weight: 500;
}
.junta-titular + .equipo-grupo { margin-top: 0; }

/* --- El perfil de un integrante, en modal -----------------------------------

   Se abre por ancla y lo ensena `:target`, el mismo mecanismo que las pildoras
   de apartados de esta pantalla. De ahi salen tres cosas: abre sin JavaScript,
   el boton Atras lo cierra y la direccion de un perfil se puede compartir.

   Cerrado va con `display: none` y no con opacidad: si no, un lector de
   pantalla recorreria cuarenta biografias al pasar por la seccion.

   El diseno no se inventa nada: la banda oscura, el filete de colores y la
   tipografia son los de la propia pantalla. La cabecera se queda fija y solo se
   desplaza el texto, que es lo que puede ser largo.
   --------------------------------------------------------------------------- */

.miembro-perfil {
  display: none; position: fixed; inset: 0; z-index: 60;
  align-items: center; justify-content: center; padding: max(5vw, 20px);
}
.miembro-perfil:target { display: flex; }

.miembro-perfil-fondo {
  position: absolute; inset: 0;
  background: rgba(4, 32, 46, .72);
}

.miembro-perfil-caja {
  position: relative; display: flex; flex-direction: column;
  width: min(600px, 100%); max-height: min(86vh, 760px); overflow: hidden;
  background: var(--paper); border-radius: 6px;
  box-shadow: 0 28px 70px rgba(4, 32, 46, .38), 0 2px 8px rgba(4, 32, 46, .2);
  animation: perfil-entra .26s cubic-bezier(.2, .8, .3, 1) both;
}

/* El filete de la marca, el mismo que cruza la cabecera del sitio. */
.miembro-perfil-caja::before {
  content: ''; display: block; height: 3px; flex: 0 0 auto;
  background: linear-gradient(90deg, #08A8E8 0%, #4E7A16 24%, #78C808 44%, #F89808 68%, #EC6E8A 86%, #08A8E8 100%);
}

@keyframes perfil-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Quien pide menos movimiento ve el modal aparecer sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .miembro-perfil-caja { animation-duration: .01ms; }
}

.miembro-perfil-cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(234, 243, 247, .28);
  font-size: 19px; line-height: 1; color: var(--onband); text-decoration: none;
  transition: background .2s, border-color .2s;
}
.miembro-perfil-cerrar:hover, .miembro-perfil-cerrar:focus-visible {
  background: rgba(234, 243, 247, .16); border-color: rgba(234, 243, 247, .55);
}

/* La cabecera, sobre la banda oscura del sitio: el retrato deja de flotar
   sobre el blanco y el nombre gana el peso que le toca. */
.miembro-perfil-cabecera {
  flex: 0 0 auto; display: flex; gap: 22px; align-items: center;
  padding: 30px 30px 26px;
  background: var(--band); color: var(--onband);
}

.miembro-retrato-grande {
  width: 122px; height: 122px;
  box-shadow: 0 0 0 3px var(--band), 0 0 0 4px rgba(0, 155, 196, .75);
}

.miembro-perfil-nombre {
  font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--onband);
  margin: 0; line-height: 1.2;
}
.miembro-perfil-cabecera .miembro-cargo { color: #6FD3EC; margin: 7px 0 0; font-size: 13px; }
.miembro-perfil-grupo {
  font-size: 9px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--onband-2); margin: 10px 0 0;
}

.miembro-perfil-texto {
  flex: 1 1 auto; overflow-y: auto; padding: 26px 30px 30px;
  /* Un cuarto de segundo de scroll suave al llegar; mas que eso marea. */
  scrollbar-width: thin;
}
.miembro-perfil-bio, .miembro-perfil-texto .miembro-afiliacion {
  font-size: 15px; line-height: 1.8; color: var(--ink-2); margin: 0; max-width: 58ch;
}

/* Mientras hay un perfil abierto el fondo no se desplaza. La clase la pone y la
   quita el JavaScript, que es quien se entera de que se abrio. */
body.con-perfil { overflow: hidden; }

@media (max-width: 600px) {
  .miembro-perfil { padding: 16px; }
  .miembro-perfil-cabecera {
    flex-direction: column; text-align: center; gap: 14px; padding: 30px 22px 24px;
  }
  .miembro-perfil-texto { padding: 22px 22px 26px; }
  .miembro-retrato-grande { width: 108px; height: 108px; }
  .miembro-perfil-nombre { font-size: 23px; }
}

/* --- El formato dentro de los textos largos ---------------------------------

   Desde que el panel escribe con formato, el cuerpo de un artículo y el
   abstract pueden traer subtítulos, listas, citas y enlaces. Son exactamente
   las etiquetas que deja pasar App\Support\HtmlSeguro: lo que no está aquí no
   llega a publicarse.

   El estilo lo pone esta hoja y no quien escribe: así dos artículos de dos
   personas distintas siguen pareciéndose entre sí.
   -------------------------------------------------------------------------- */

.ficha-cuerpo h2, .ficha-cuerpo h3 {
  font-family: var(--serif); font-weight: 400; color: var(--deep);
  margin: 38px 0 14px; text-align: left;
}
.ficha-cuerpo h2 { font-size: 26px; }
.ficha-cuerpo h3 { font-size: 21px; }
.ficha-cuerpo > *:first-child { margin-top: 0; }

.ficha-cuerpo ul, .ficha-cuerpo ol {
  margin: 0 0 26px; padding-left: 26px;
  font-size: 17px; line-height: 1.78; color: var(--ink);
}
.ficha-cuerpo li { margin-bottom: 8px; }
.ficha-cuerpo li:last-child { margin-bottom: 0; }

.ficha-cuerpo blockquote {
  margin: 0 0 26px; padding: 4px 0 4px 22px; border-left: 2px solid var(--turq);
  font-family: var(--serif); font-size: 19px; line-height: 1.7; color: var(--ink-2);
}

.ficha-cuerpo a, .paper-abstract a {
  color: var(--turq-ink); text-decoration: underline; text-underline-offset: 2px;
}

/* El abstract solo admite lo de dentro de un párrafo, pero puede traer varios. */
.paper-abstract p + p { margin-top: 16px; }

/* Subíndices y superíndices sin descuadrar el interlineado: sin esto, una
   fórmula con CO2 abre un hueco entre las líneas del párrafo. */
.ficha-cuerpo sub, .ficha-cuerpo sup,
.paper-abstract sub, .paper-abstract sup { font-size: .72em; line-height: 0; position: relative; }
.ficha-cuerpo sup, .paper-abstract sup { top: -.5em; }
.ficha-cuerpo sub, .paper-abstract sub { bottom: -.25em; }

/* El segundo nivel del organigrama, ahora como lista anidada. Antes era una
   clase «nivel-2» sobre un <li> plano; se conservan las dos formas porque el
   contenido convertido y el que escriba el editor tienen que verse igual. */
.apartado-ficha li > ul { margin: 12px 0 0; display: grid; gap: 12px; }
.apartado-ficha li li { padding-left: 24px; font-size: 14.5px; }
.apartado-ficha li li::before { left: 2px; background: var(--ink-3); }