/* ============================================================
   Puertos de Sucre · Portal de entrada
   Paleta y tipografía heredadas del brochure institucional.
   ============================================================ */

:root {
  --navy-900: #071b2f;
  --navy-800: #0a2a47;
  --navy-700: #0e3a5f;
  --blue-600: #12557f;
  --blue-500: #1b6fa8;
  --blue-400: #2e8fc4;
  --teal-300: #66b6db;
  --gold-600: #b8891f;
  --gold-500: #d4af37;
  --gold-400: #e6c868;
  --gold-300: #f2dfa0;
  --silver-500: #8fa3b3;
  --silver-400: #b9c7d2;
  --silver-300: #d8e1e9;
  --silver-100: #eef3f7;
  --paper: #f4f8fb;
  --ink: #0c2033;
  --ink-soft: #3a5064;

  --display: "Archivo", "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --texto: "Montserrat", -apple-system, "Segoe UI", sans-serif;

  --sombra-panel: 0 26px 70px rgba(0, 0, 0, 0.55);
  --borde-tenue: 1px solid rgba(146, 163, 179, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Sin esto, un display: grid/flex propio gana al display:none de [hidden]
   y los bloques vacíos dejan su borde a la vista. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #071624;
}

body {
  font-family: var(--texto);
  color: var(--silver-300);
  background:
    radial-gradient(1200px 800px at 50% -12%, #123b5c, #071624 62%);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------- escena */

.escena {
  position: fixed;
  inset: 0;
  touch-action: none;
  cursor: grab;
}
.escena.arrastrando { cursor: grabbing; }

#mapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- geografía --- */

/* Los trazos no engordan al acercar: el grosor se mide en píxeles de
   pantalla, no en unidades de mapa. */
#mapa path, #mapa line { vector-effect: non-scaling-stroke; }

.vecino {
  fill: #0c2740;
  stroke: rgba(143, 163, 179, 0.2);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.isla-contexto {
  fill: #10314f;
  stroke: rgba(143, 163, 179, 0.26);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

/* Curvas de profundidad: copias del contorno con trazo ancho y muy tenue. */
.batimetria path {
  fill: none;
  stroke: var(--teal-300);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.batimetria path:nth-child(1) { stroke-width: 30; opacity: 0.05; }
.batimetria path:nth-child(2) { stroke-width: 19; opacity: 0.07; }
.batimetria path:nth-child(3) { stroke-width: 9;  opacity: 0.1; }

.sucre-relleno {
  fill: url(#gradTierra);
  stroke: none;
}
.sucre-contorno {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
}

.graticula line {
  stroke: rgba(143, 163, 179, 0.13);
  stroke-width: 0.6;
  stroke-dasharray: 3 7;
}

/* ---------------------------------------------------------- salidas y rutas */

.ruta {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  opacity: 0.6;
  animation: fluir 2.6s linear infinite;
}
.ruta.salida {
  stroke: var(--teal-300);
  stroke-dasharray: 12 7;
  opacity: 0.7;
}
@keyframes fluir { to { stroke-dashoffset: -16; } }

/* Traviesa que marca la boca: dos costas y el paso entre ellas. */
.boca {
  stroke: var(--teal-300);
  stroke-width: 1.3;
  stroke-dasharray: 2 4;
  opacity: 0.75;
}

.rotulo-ruta {
  font-family: var(--texto);
  font-weight: 700;
  text-transform: uppercase;
  fill: var(--gold-400);
  paint-order: stroke fill;
  stroke: rgba(6, 20, 36, 0.75);
  stroke-width: 2.4;
  pointer-events: none;
  user-select: none;
}
.rotulo-ruta.salida { fill: var(--teal-300); }
.rotulo-geo.boca-nombre {
  fill: #8ed0ec;
  stroke: rgba(6, 20, 36, 0.8);
  stroke-width: 2.4;
}

.sin-rutas #capaRuta { display: none; }

/* Variantes larga y corta del mismo rótulo (ver RUTAS.corto). */
#mapa .solo-estrecho-svg { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ruta { animation: none; }
}

/* --- rótulos geográficos --- */

.rotulo-geo {
  font-family: var(--texto);
  font-weight: 600;
  text-transform: uppercase;
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
}
.rotulo-geo.mar     { fill: rgba(102, 182, 219, 0.5); font-weight: 500; }
.rotulo-geo.mar-min { fill: rgba(102, 182, 219, 0.62); }
.rotulo-geo.isla    { fill: rgba(185, 199, 210, 0.6); }
.rotulo-geo.vecino  { fill: rgba(143, 163, 179, 0.45); }
.rotulo-geo.tierra {
  fill: var(--gold-600);
  stroke: rgba(244, 248, 251, 0.85);
  stroke-width: 2.6;
}

/* ---------------------------------------------------------- capa continental
   Sólo se ve durante el hiperzoom de entrada. */

.pais {
  fill: #0c2740;
  stroke: rgba(143, 163, 179, 0.28);
  stroke-width: 0.9;
  stroke-linejoin: round;
}
.pais.vzla { fill: #123c60; }
.realce {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}
#capaMundo, #realceVzla { pointer-events: none; }
#capaDetalle { opacity: 0; }

/* Señal pulsante sobre Sucre mientras se ve el continente. */
.faro {
  position: fixed;
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 0; height: 0;
}
.faro span {
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-400);
  opacity: 0;
  animation: onda 2.2s ease-out infinite;
}
.faro span:nth-child(2) { animation-delay: 1.1s; }
.faro .nucleo {
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--gold-500);
  border: 0;
  opacity: 1;
  animation: none;
  box-shadow: 0 0 14px 3px rgba(212, 175, 55, 0.55);
}

/* ---------------------------------------------------------- animación de entrada
   Se dispara cuando termina el hiperzoom, no al cargar la página. */

.dibujo-costa { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mapa-listo .dibujo-costa {
  animation: trazar 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }

.entra-tierra, .entra-geo { opacity: 0; }
.mapa-listo .entra-tierra { animation: aparecer 1.1s ease 0.25s forwards; }
.mapa-listo .entra-geo    { animation: aparecer 0.9s ease 1s forwards; }
@keyframes aparecer { to { opacity: 1; } }

/* Con hiperzoom la aparición del detalle ya la lleva #capaDetalle; estas
   opacidades por elemento sólo estorbarían a mitad de la caída. */
.con-intro .entra-tierra,
.con-intro .entra-geo { opacity: 1; animation: none; }

/* ---------------------------------------------------------- velo de legibilidad
   Oscurece el mar justo donde van los textos, sin ocultar el mapa. Va por
   debajo de los marcadores para que los pines sigan leyéndose encima. */

.velo {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(103deg,
      rgba(6, 20, 36, 0.93) 0%,
      rgba(6, 20, 36, 0.74) 20%,
      rgba(6, 20, 36, 0.3) 38%,
      rgba(6, 20, 36, 0) 55%),
    linear-gradient(0deg,
      rgba(6, 20, 36, 0.86) 0%,
      rgba(6, 20, 36, 0.3) 13%,
      rgba(6, 20, 36, 0) 27%),
    linear-gradient(180deg,
      rgba(6, 20, 36, 0.72) 0%,
      rgba(6, 20, 36, 0) 15%);
}

/* ---------------------------------------------------------- capa de interfaz */

.capa-ui {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 34px);
}
.capa-ui > * { pointer-events: auto; }

.barra-sup {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
/* Cuando el mapa vive incrustado en el header de Inicio, la página anfitriona
   ya trae su propio header/nav: se oculta el de portal.css para no duplicar. */
body.incrustado .barra-sup { display: none; }
/* Sin barra-sup, el título subía a colisionar con el header flotante de la
   página anfitriona (Inicio), que se superpone sobre el mapa. Se le devuelve
   ese espacio libre arriba. */
body.incrustado .capa-ui { padding-top: clamp(96px, 14vh, 132px); }

.marca { display: flex; align-items: center; gap: 14px; }

/* El PNG del logo trae mucho lienzo transparente alrededor (el dibujo ocupa
   x 540–2835 e y 1026–2511 de 3375²). Se recorta con una ventana para que la
   marca se vea al tamaño real que se le pide. */
.logo-ps {
  display: block;
  flex: none;
  height: clamp(34px, 3.6vw, 44px);
  aspect-ratio: 2377 / 1258;
}
.logo-ps img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
.marca .divisor {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}
.marca .titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(14px, 1.35vw, 18px);
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.1;
}
.marca .sub {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-top: 5px;
}

.btn-entrar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(230, 200, 104, 0.45);
  background: rgba(9, 28, 48, 0.55);
  backdrop-filter: blur(6px);
  color: var(--gold-300);
  font-family: var(--texto);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 999px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
  white-space: nowrap;
}
.btn-entrar:hover,
.btn-entrar:focus-visible {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  transform: translateY(-1px);
}
.btn-entrar .flecha { transition: transform 0.25s; }
.btn-entrar:hover .flecha { transform: translateX(3px); }

/* --- bloque de encabezado sobre el mar --- */

.intro {
  margin-top: clamp(14px, 4vh, 46px);
  max-width: 430px;
}
.intro .antetitulo {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.intro h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(23px, 2.9vw, 36px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 12px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.intro h1 em {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.42em;
  color: var(--gold-300);
  letter-spacing: 0;
  margin-top: 10px;
}
/* La pista deja de hacer falta en cuanto se abre el primer punto. */
.ya-interactuo .intro .pista { opacity: 0; transition: opacity 0.3s ease; }

.intro .pista {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--silver-400);
}
.intro .pista .punto-pista {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* --- pie: eje geográfico y controles --- */

.barra-inf {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.pie-izq { display: flex; flex-direction: column; gap: 14px; }

.leyenda {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 330px;
}
.leyenda .clave {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--silver-400);
}
.leyenda .clave i {
  flex: none;
  width: 26px;
  height: 0;
  border-top: 1.6px dashed var(--gold-400);
  opacity: 0.85;
}
.leyenda .clave i.m-salida { border-top-color: var(--teal-300); border-top-style: solid; }
.leyenda .nota {
  font-size: 9px;
  line-height: 1.5;
  color: rgba(143, 163, 179, 0.72);
  max-width: 300px;
}
.sin-rutas .leyenda { opacity: 0.35; }
.leyenda { transition: opacity 0.25s; }

.ctrl[aria-pressed="false"] { color: var(--silver-500); opacity: 0.6; }
.ctrl[aria-pressed="true"] { color: var(--gold-300); border-color: rgba(230, 200, 104, 0.42); }

.eje {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(143, 163, 179, 0.7);
}
.eje .linea {
  width: clamp(40px, 9vw, 130px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}

.controles { display: flex; gap: 10px; }
.ctrl {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: var(--borde-tenue);
  background: rgba(9, 28, 48, 0.6);
  backdrop-filter: blur(6px);
  color: var(--silver-300);
  font-size: 15px;
  font-family: var(--texto);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ctrl:hover, .ctrl:focus-visible {
  background: rgba(18, 85, 127, 0.75);
  border-color: rgba(230, 200, 104, 0.5);
  color: var(--gold-300);
}
.ctrl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------------------------------------------------------- marcadores */

.capa-pines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--texto);
  opacity: 0;
}
.mapa-listo .pin {
  animation: pin-entra 0.6s cubic-bezier(0.34, 1.4, 0.5, 1) forwards;
}
@keyframes pin-entra {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 16px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.pin .punto {
  display: block;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold-500);
  border: 2.5px solid #071624;
  box-shadow: 0 0 0 1.5px var(--gold-500), 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1), background 0.25s;
}
.pin[data-color="azul"] .punto {
  background: var(--teal-300);
  box-shadow: 0 0 0 1.5px var(--teal-300), 0 4px 14px rgba(0, 0, 0, 0.6);
}

.pin .anillo {
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-400);
  opacity: 0;
  animation: onda 3s ease-out infinite;
  pointer-events: none;
}
.pin[data-color="azul"] .anillo { border-color: var(--teal-300); }
.pin .anillo:nth-of-type(2) { animation-delay: 1.5s; }
@keyframes onda {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Placa bajo el rótulo: el marcador cruza mar oscuro y tierra clara, así que
   el contraste no puede depender del fondo. */
.pin .rotulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  padding: 6px 11px 7px;
  border-radius: 9px;
  background: rgba(6, 20, 36, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.28);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}
.pin[data-lado="arriba"] .rotulo { bottom: 19px; }
.pin[data-lado="abajo"]  .rotulo { top: 19px; }

.pin .rotulo b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #fff;
}
.pin .rotulo i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.1;
  color: var(--gold-400);
}
.pin:hover .rotulo,
.pin:focus-visible .rotulo,
.pin.activo .rotulo {
  background: rgba(9, 34, 58, 0.92);
  border-color: rgba(230, 200, 104, 0.6);
}

.pin:hover .punto,
.pin:focus-visible .punto,
.pin.activo .punto { transform: scale(1.45); }
.pin:hover .rotulo,
.pin:focus-visible .rotulo { transform: translateX(-50%) scale(1.06); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .punto { box-shadow: 0 0 0 3px rgba(230, 200, 104, 0.85), 0 4px 14px rgba(0, 0, 0, 0.6); }
.pin.activo .anillo { animation-play-state: paused; opacity: 0; }

/* ---------------------------------------------------------- ficha */

.ficha {
  position: fixed;
  z-index: 6;
  width: 372px;
  max-width: calc(100vw - 28px);
  background: linear-gradient(180deg, rgba(10, 34, 56, 0.97), rgba(7, 22, 40, 0.98));
  border: var(--borde-tenue);
  border-radius: 16px;
  box-shadow: var(--sombra-panel);
  backdrop-filter: blur(14px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: none;
}
.ficha.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ficha .foto {
  position: relative;
  height: 128px;
  background: var(--navy-700) center / cover no-repeat;
}
.ficha .foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 22, 40, 0.15), rgba(7, 22, 40, 0.92));
}
.ficha .foto.sin-foto {
  background:
    repeating-linear-gradient(115deg, rgba(212, 175, 55, 0.09) 0 2px, transparent 2px 11px),
    linear-gradient(140deg, var(--navy-700), var(--navy-900));
  height: 92px;
}

.ficha .cuerpo { padding: 18px 20px 20px; }

.ficha .cabecera {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.ficha .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--gold-500);
}
.ficha .tipo {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-500);
}
.ficha h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.ficha .regla {
  width: 42px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  margin: 12px 0 13px;
}
.ficha .direccion {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--gold-300);
  font-weight: 500;
}
.ficha .resumen {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--silver-300);
}

.ficha .cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 16px;
  background: rgba(146, 163, 179, 0.18);
  border: 1px solid rgba(146, 163, 179, 0.18);
  border-radius: 10px;
  overflow: hidden;
}
.ficha .cifras > div {
  background: rgba(9, 28, 48, 0.9);
  padding: 11px 8px;
  text-align: center;
}
.ficha .cifras .v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  color: var(--gold-400);
}
.ficha .cifras .v span { font-size: 10px; margin-left: 2px; }
.ficha .cifras .k {
  margin-top: 6px;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--silver-500);
  line-height: 1.35;
}

.ficha ul {
  list-style: none;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ficha ul li {
  position: relative;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--silver-400);
}
.ficha ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
}

.ficha .aviso {
  margin-top: 15px;
  padding: 10px 12px;
  border-left: 2px solid var(--teal-300);
  background: rgba(46, 143, 196, 0.1);
  border-radius: 0 8px 8px 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--silver-400);
}

.ficha .acciones {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-ficha {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-900);
  font-family: var(--texto);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.22s, transform 0.22s;
}
.btn-ficha:hover, .btn-ficha:focus-visible { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ficha .flecha { transition: transform 0.22s; }
.btn-ficha:hover .flecha { transform: translateX(3px); }

.btn-cerrar {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  border: var(--borde-tenue);
  background: transparent;
  color: var(--silver-400);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-cerrar:hover, .btn-cerrar:focus-visible { background: rgba(146, 163, 179, 0.14); color: #fff; }

/* punta de la ficha apuntando al marcador (solo escritorio) */
.ficha .punta {
  position: absolute;
  width: 12px; height: 12px;
  background: rgba(10, 34, 56, 0.97);
  border-left: var(--borde-tenue);
  border-top: var(--borde-tenue);
  transform: rotate(45deg);
  display: none;
}

/* ---------------------------------------------------------- estado de entrada */

.secuencia,
.saltar { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; }

.en-intro .secuencia,
.en-intro .saltar { opacity: 1; visibility: visible; }

.en-intro .velo,
.en-intro .intro,
.en-intro .barra-inf { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }

.velo, .intro, .barra-inf { transition: opacity 0.7s ease 0.15s; }

/* A la izquierda, a la altura donde después entra el titular: el continente
   va centrado, así que el rótulo nunca se le encima. */
.secuencia {
  position: fixed;
  left: clamp(18px, 2.4vw, 34px);
  top: 46%;
  z-index: 6;
  display: grid;
  justify-items: start;
  pointer-events: none;
}
.secuencia .paso {
  grid-area: 1 / 1;
  font-family: var(--texto);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-shadow: 0 2px 20px rgba(6, 20, 36, 0.95);
  opacity: 0;
  transform: translateY(6px);
  /* El que sale se va primero y el que entra espera: si se cruzan, los dos
     textos se superponen en la misma celda y se leen encimados. */
  transition: opacity 0.28s ease, transform 0.28s ease;
  white-space: nowrap;
}
.secuencia .paso.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.36s ease 0.3s, transform 0.36s ease 0.3s;
}

.saltar {
  position: fixed;
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 34px);
  z-index: 6;
  border: 1px solid rgba(146, 163, 179, 0.3);
  background: rgba(9, 28, 48, 0.55);
  backdrop-filter: blur(6px);
  color: var(--silver-400);
  font-family: var(--texto);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.saltar:hover, .saltar:focus-visible { color: var(--gold-300); border-color: rgba(230, 200, 104, 0.5); }

/* ---------------------------------------------------------- selector móvil */

.chips {
  display: none;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 10px;
  margin: 0 calc(-1 * clamp(18px, 2.4vw, 34px));
  padding-left: clamp(18px, 2.4vw, 34px);
  padding-right: clamp(18px, 2.4vw, 34px);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  border: var(--borde-tenue);
  background: rgba(9, 28, 48, 0.72);
  backdrop-filter: blur(6px);
  color: var(--silver-300);
  font-family: var(--texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip[aria-pressed="true"] {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px), (pointer: coarse) {
  /* Con la hoja abierta se aparta el bloque de título para no tapar el punto. */
  .ficha-abierta .intro,
  .ficha-abierta .barra-inf {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  .ficha {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    transform: translateY(102%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s, visibility 0.32s;
  }
  .ficha.visible { transform: translateY(0); }
  .ficha .punta { display: none !important; }
  .ficha .foto { height: 108px; }
  .ficha .cuerpo { padding-bottom: 0; }

  /* El botón principal no puede quedar bajo el pliegue de la hoja. */
  .ficha .acciones {
    position: sticky;
    bottom: 0;
    margin-top: 18px;
    padding: 14px 0 max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7, 22, 40, 0) 0%, rgba(7, 22, 40, 0.96) 26%);
  }
  .ficha::before {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    border-radius: 2px;
    background: rgba(185, 199, 210, 0.4);
    z-index: 2;
  }
  .chips { display: flex; }
  .intro { max-width: none; }
  .barra-inf { flex-direction: column; align-items: stretch; }
  .eje { justify-content: center; }
  .controles { justify-content: flex-end; }
}

@media (max-width: 900px), (pointer: coarse) {
  /* El velo pasa a ser vertical: arriba el título, abajo la hoja y los chips. */
  .velo {
    background:
      linear-gradient(180deg, rgba(6, 20, 36, 0.9) 0%, rgba(6, 20, 36, 0.42) 24%, rgba(6, 20, 36, 0) 42%),
      linear-gradient(0deg, rgba(6, 20, 36, 0.92) 0%, rgba(6, 20, 36, 0.42) 22%, rgba(6, 20, 36, 0) 42%);
  }
}

@media (max-width: 620px) {
  .intro h1 { font-size: 27px; }
  .marca { gap: 10px; }
  .logo-ps { height: 30px; }
  .marca .titulo { font-size: 12px; white-space: nowrap; }
  .solo-ancho { display: none; }  /* nombre y rótulo largos solo en pantallas amplias */
  .marca .sub { font-size: 7.5px; letter-spacing: 0.24em; margin-top: 3px; }
  .marca .divisor { height: 26px; }
  .btn-entrar { padding: 9px 12px; font-size: 8.5px; letter-spacing: 0.12em; gap: 6px; }
  /* En pantalla estrecha el eje cede su sitio a la leyenda de rutas. */
  .eje { display: none; }
  /* Y los rótulos secundarios se retiran: la franja de tierra es demasiado
     fina para sostenerlos sin encimarse con los marcadores. */
  #mapa .opcional { display: none; }
  #mapa .solo-ancho-svg { display: none; }
  #mapa .solo-estrecho-svg { display: inline; }

  /* Los rótulos conservan su tamaño en píxeles, así que aquí se recortan sus
     cuerpos: la jerarquía de escritorio (17 frente a 8,5) es demasiado
     abierta para 390 px de ancho. */
  #mapa .rotulo-geo.mar { font-size: 11px; letter-spacing: 0.2em; }
  #mapa .rotulo-geo.isla,
  #mapa .rotulo-geo.mar-min,
  #mapa .rotulo-geo.boca-nombre { font-size: 8.4px; letter-spacing: 0.14em; }
  #mapa .rotulo-ruta { font-size: 8.4px; letter-spacing: 0.1em; }
  .pin .rotulo { padding: 5px 8px 6px; border-radius: 8px; }
  .pin .rotulo b { font-size: 11px; }
  .pin .rotulo i { font-size: 7.5px; }
  .ficha h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .dibujo-costa { animation: none; stroke-dashoffset: 0; }
  .entra-tierra, .entra-geo, .pin { animation: none; opacity: 1; }
  .pin { transform: translate(-50%, -50%); }
  .pin .anillo { animation: none; opacity: 0; }
  .intro .pista .punto-pista { animation: none; }
  * { transition-duration: 0.01ms !important; }
}