/* Mapa de Chile y viaje de puertos.html (V2.3 Lado A, integrado en la V2.4). Todos los colores salen de portsync-tokens.css. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--mapa-base);
  color:var(--neutro-900);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

.mapa{display:flex;justify-content:center;min-height:100dvh}

/* ---------- escenario: video 1:2 que llena el alto de la pantalla ---------- */
.escenario{
  position:relative;
  flex:none;
  height:100dvh;
  aspect-ratio:1/2;
  max-width:100vw;
  overflow:hidden;
  container-type:inline-size;   /* los rótulos escalan con el ancho del mapa (1cqw = 1 % del ancho) */
  z-index:2;                     /* sobre el lienzo del viaje (.viaje, z 1): los rótulos se apagan encima del zoom */
}
.escenario__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.escenario__lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.escenario__lineas line{stroke:var(--neutro-700);stroke-width:1;stroke-linecap:round;opacity:.7}
.escenario__lineas line.activa{stroke:var(--azul-800);stroke-width:1.5;opacity:1}
.escenario__capa{position:absolute;inset:0}

/* punto del puerto (decorativo para lectores; el botón accesible es la etiqueta) */
.punto{
  position:absolute;
  left:calc(var(--x) * 100%);
  top:calc(var(--y) * 100%);
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:var(--azul-600);
  box-shadow:0 0 0 2.5px var(--blanco),0 2px 6px var(--negro-40);
  cursor:pointer;
  transition:transform var(--dur-rapida) var(--ease-out),background var(--dur-rapida);
}
.punto::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--blanco-85);opacity:0;
}
.punto:hover{transform:scale(1.2)}
.punto.activo{background:var(--azul-800);transform:scale(1.35)}
.punto.activo::after{animation:pulso 1.8s var(--ease-out) infinite}
@keyframes pulso{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}

/* etiqueta: rótulo blanco con línea guía, como los de la maqueta de referencia */
.etiqueta{
  position:absolute;
  transform:translate(-100%,-50%);
  padding:5px 10px;
  border:0;border-radius:var(--r-sm);
  background:var(--blanco);
  color:var(--neutro-900);
  font:var(--peso-semi) 12.5px/1.2 var(--font-sans);
  white-space:nowrap;
  box-shadow:0 1px 4px var(--negro-14),0 6px 16px var(--negro-14);
  cursor:pointer;
  transition:background var(--dur-rapida),color var(--dur-rapida);
}
.etiqueta:hover{background:var(--azul-50)}
.etiqueta:focus-visible{outline:2px solid var(--azul-600);outline-offset:2px}
.etiqueta[aria-pressed="true"]{background:var(--azul-800);color:var(--blanco)}

.rotulo-pais{
  position:absolute;
  transform:translate(-50%,-50%);
  margin:0;
  color:var(--neutro-900);
  font:var(--peso-semi) 11px/1 var(--font-sans);
  letter-spacing:.32em;
  text-shadow:0 0 6px var(--blanco-85),0 0 3px var(--blanco-85),0 0 1px var(--blanco-85);
  text-transform:uppercase;
  pointer-events:none;
}
.rotulo-oceano{
  /* franja de océano despejado abajo a la izquierda (sin nubes ni etiquetas de puertos) */
  position:absolute;left:5%;top:90%;
  margin:0;
  transform:translateY(-50%);
  color:var(--blanco-85);
  text-shadow:var(--sombra-texto);
  font:var(--peso-medio) min(13px,2.6cqw)/1 var(--font-sans);
  letter-spacing:.55em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}

.pausa{
  position:absolute;left:14px;bottom:14px;
  padding:6px 12px;
  border:0;border-radius:var(--r-pill);
  background:var(--blanco-85);
  color:var(--neutro-800);
  font:var(--peso-medio) 12px/1.2 var(--font-sans);
  cursor:pointer;
}
.pausa:focus-visible{outline:2px solid var(--azul-600);outline-offset:2px}

/* ---------- ficha lateral ---------- */
.ficha{
  position:sticky;top:0;z-index:3;
  display:flex;flex-direction:column;gap:20px;
  width:360px;height:100dvh;
  padding:28px 28px 22px;
  background:var(--neutro-50);
  box-shadow:-1px 0 0 var(--negro-14);
  overflow-y:auto;
}
.ficha__cuerpo{display:flex;flex-direction:column;gap:14px;flex:1}
.ficha__titulo{margin:0;font-size:22px;line-height:1.2;font-weight:var(--peso-semi);color:var(--neutro-900)}
.ficha__texto{margin:0;color:var(--neutro-600);font-size:14px}
.ficha__region{margin:0;color:var(--neutro-600);font-size:13px;letter-spacing:.02em}
.ficha__puerto{margin:0;font-size:32px;line-height:1.1;font-weight:var(--peso-semi);color:var(--azul-800)}

.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lista__item{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;
  padding:9px 10px;
  border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--neutro-900);
  font:var(--peso-medio) 14px/1.2 var(--font-sans);
  text-align:left;cursor:pointer;
}
.lista__item small{color:var(--neutro-600);font-weight:var(--peso-regular);font-size:12px}
.lista__item:hover,.lista__item:focus-visible{background:var(--neutro-100)}
.lista__item:focus-visible{outline:2px solid var(--azul-600);outline-offset:-2px}

.volver{align-self:flex-start;padding:0;border:0;background:none;color:var(--azul-700);font:var(--peso-medio) 13px var(--font-sans);cursor:pointer}
.volver:focus-visible{outline:2px solid var(--azul-600);outline-offset:3px}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.datos div{padding:10px 12px;border-radius:var(--r-md);background:var(--blanco);box-shadow:0 0 0 1px var(--neutro-200)}
.datos div:last-child:nth-child(odd){grid-column:1/-1}
.datos dt{color:var(--neutro-500);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.datos dd{margin:4px 0 0;font:var(--peso-medio) 15px var(--font-mono);color:var(--neutro-900)}

/* estado del puerto: terminología y colores del semáforo (solo para Sin Novedad / Advertencia / Crítico) */
.estado{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  margin:0;padding:4px 11px 4px 9px;border-radius:var(--r-pill);
  background:var(--e-fondo);color:var(--e-tinta);
  font:var(--peso-semi) 13px/1.2 var(--font-sans);
}
.estado__punto{width:8px;height:8px;border-radius:50%;background:var(--e-punto)}
.estado--ok{--e-fondo:var(--verde-50);--e-tinta:var(--verde-700);--e-punto:var(--verde-500)}
.estado--warn{--e-fondo:var(--ambar-50);--e-tinta:var(--ambar-700);--e-punto:var(--ambar-400)}
.estado--crit{--e-fondo:var(--rojo-50);--e-tinta:var(--rojo-700);--e-punto:var(--rojo-500)}
.ficha__pilotes{margin:-4px 0 0;color:var(--neutro-600);font-size:13px}
.ficha__coord{margin:0;color:var(--neutro-500);font:12px var(--font-mono)}
.lecturas{display:flex;flex-direction:column;gap:8px}
.lecturas__cabeza{display:flex;justify-content:space-between;align-items:center;gap:10px}
.estado-linea{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.lecturas__cabeza h3{margin:0;color:var(--neutro-700);font-size:12px;font-weight:var(--peso-semi);text-transform:uppercase;letter-spacing:.08em}
/* los datos simulados siempre rotulados como demostración (regla de producto) */
.demo{
  padding:2px 8px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--neutro-300);
  color:var(--neutro-600);font-size:11px;white-space:nowrap;
}
.demo--oscuro{box-shadow:inset 0 0 0 1px var(--blanco-30);color:var(--blanco-85)}

/* ---------- viaje mapa -> nubes -> puerto (viaje.js) ----------
   Capas: video del descenso (abajo) · lienzo WebGL (mapa + nubes) · encima, dentro de .escenario (z 2), los rótulos
   que se apagan · la ficha (z 3) que sale por el costado. */
.viaje{position:fixed;inset:0;z-index:1;pointer-events:none}
.viaje__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  visibility:hidden;
}
.viaje__video.visible{visibility:visible}
/* V2.4: al terminar el descenso el último cuadro queda QUIETO (el acercamiento lento de antes lo hacía tiritar: ver
   viaje.js, evento 'ended'); si hay bucle de llegada, entra encima sin corte */
.viaje__video{transform:none;backface-visibility:hidden}
.viaje__bucle{z-index:0}
.viaje__lienzo{position:absolute;inset:0;width:100%;height:100%}
.viaje__lienzo.apagado{visibility:hidden}
/* entra y sale fundido sobre el mapa de la página (mismo cuadro): sin salto al empezar ni al volver */
.viaje__lienzo{transition:opacity var(--dur-media) var(--ease-out)}
.viaje__lienzo.transparente{opacity:0}
.viaje__velo{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--negro-60),var(--negro-14) 45%,transparent 70%),
             linear-gradient(to right,var(--negro-40),transparent 55%);
  opacity:0;transition:opacity var(--dur-lenta) var(--ease-out);
}
.viaje.con-llegada .viaje__velo{opacity:1}

.llegada{
  position:absolute;left:clamp(18px,4vw,56px);bottom:clamp(18px,5vh,52px);
  display:flex;flex-direction:column;align-items:flex-start;
  max-width:min(760px,calc(100vw - 36px));
  color:var(--blanco);pointer-events:auto;
  opacity:0;transform:translateY(16px);filter:blur(8px);
  transition:opacity var(--dur-lenta) var(--ease-out),transform var(--dur-lenta) var(--ease-out),filter var(--dur-lenta) var(--ease-out);
}
.llegada.visible{opacity:1;transform:none;filter:none}
.llegada__region{margin:0;color:var(--blanco-85);font-size:14px;letter-spacing:.03em;text-shadow:var(--sombra-texto)}
.llegada__nombre{
  margin:2px 0 0;font-size:clamp(44px,7.4vw,112px);line-height:.95;font-weight:var(--peso-semi);letter-spacing:-.02em;
  text-shadow:var(--sombra-texto);
}
.llegada__linea{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 14px}
.llegada .estado--ok{--e-fondo:var(--ok-bg);--e-tinta:var(--ok-ink);--e-punto:var(--ok)}
.llegada .estado--warn{--e-fondo:var(--warn-bg);--e-tinta:var(--warn-ink);--e-punto:var(--warn)}
.llegada .estado--crit{--e-fondo:var(--crit-bg);--e-tinta:var(--crit-ink);--e-punto:var(--crit)}
.llegada__pilotes{margin:0 0 14px;color:var(--blanco-85);font-size:14px;text-shadow:var(--sombra-texto)}
.llegada__datos{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0 0 20px}
.llegada__datos dt{color:var(--blanco-60);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.llegada__datos dd{margin:3px 0 0;font:var(--peso-medio) 16px var(--font-mono);text-shadow:var(--sombra-texto)}
.llegada__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.llegada__volver{
  height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);
  background:var(--blanco);color:var(--azul-950);font:var(--peso-semi) 15px var(--font-sans);cursor:pointer;
  transition:background var(--dur-rapida) var(--ease-out);
}
.llegada__volver:hover{background:var(--azul-50)}
.llegada__repetir{padding:6px 0;border:0;background:none;color:var(--blanco-85);font:var(--peso-medio) 14px var(--font-sans);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.llegada__repetir:hover{color:var(--blanco)}
.llegada__volver:focus-visible,.llegada__repetir:focus-visible{outline:2px solid var(--azul-300);outline-offset:3px}
.llegada__nota{margin:14px 0 0;color:var(--blanco-60);font-size:12px}
.llegada__creditos{margin:6px 0 0;color:var(--blanco-60);font-size:10.5px;line-height:1.4}
.fps{
  position:absolute;top:12px;left:12px;margin:0;padding:6px 10px;border-radius:var(--r-sm);
  background:var(--negro-60);color:var(--blanco);font:12px var(--font-mono);
}

/* durante el viaje: la ficha sale por el costado, los rótulos se apagan antes de que parta el zoom y el video del
   mapa lo reemplaza el lienzo (dibuja exactamente el mismo cuadro) */
.escenario__lineas,.escenario__capa,.rotulo-oceano,.pausa{transition:opacity var(--dur-media) var(--ease-out)}
body.viaje-etiquetas .escenario__lineas,body.viaje-etiquetas .escenario__capa,
body.viaje-etiquetas .rotulo-oceano,body.viaje-etiquetas .pausa{opacity:0;transition-duration:180ms}
body.viajando{overflow:hidden}
body.viajando .escenario{pointer-events:none}
body.viaje-lejos .escenario__video{visibility:hidden}
/* teléfono (V2.5, N6 Paso 0): el video de la columna va dentro de .escenario (z 2), sobre el lienzo (z 1), y tapaba el
   zoom hasta la nube. Apenas el lienzo pinta el mapa (el mismo cuadro, en el mismo lugar) el video se aparta al tiro
   (viaje.js, taparVideo) y al final de la subida vuelve fundido sobre el lienzo */
.escenario__video{transition:opacity var(--dur-media) var(--ease-out)}
body.viaje-lienzo .escenario__video{opacity:0;transition-duration:0s}
.ficha{transition:transform 480ms var(--ease-out),opacity var(--dur-media) var(--ease-out)}
body.viaje-ficha .ficha{transform:translateX(104%);opacity:0;pointer-events:none}
.entrar{
  margin-top:6px;padding:12px 16px;
  border:0;border-radius:var(--r-md);
  background:var(--azul-800);color:var(--blanco);
  font:var(--peso-semi) 15px var(--font-sans);
  cursor:pointer;
}
.entrar:hover{background:var(--azul-700)}
.entrar:focus-visible{outline:2px solid var(--azul-600);outline-offset:3px}
.aviso{margin:0;color:var(--neutro-600);font-size:13px;line-height:1.45;min-height:1em}

/* ---------- acceso al panel (demostración: sin servidor todavía) ---------- */
.acceso{gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{color:var(--neutro-700);font:var(--peso-medio) 13px/1.2 var(--font-sans)}
.campo input{
  width:100%;height:44px;padding:0 12px;
  border:0;border-radius:var(--r-md);
  background:var(--blanco);color:var(--neutro-900);
  box-shadow:inset 0 0 0 1px var(--neutro-300);
  font:var(--peso-regular) 15px var(--font-sans);
  transition:box-shadow var(--dur-rapida) var(--ease-out);
}
.campo input:hover{box-shadow:inset 0 0 0 1px var(--neutro-400)}
.campo input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--azul-600)}
.campo input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--rojo-500)}
.campo__clave{position:relative}
.campo__clave input{padding-right:84px}
.campo__ver{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  padding:6px 10px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--azul-700);font:var(--peso-medio) 13px var(--font-sans);cursor:pointer;
}
.campo__ver:hover{background:var(--azul-50)}
.campo__ver:focus-visible{outline:2px solid var(--azul-600);outline-offset:0}
.acceso__error{margin:-6px 0 0;color:var(--rojo-700);font-size:13px}
.acceso__error:empty{display:none}
.acceso .entrar{margin-top:0}
.acceso__nota{margin:0;color:var(--neutro-600);font-size:12.5px;line-height:1.5}
.acceso__nota .demo{margin-right:4px}
.sesion{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 0 14px;
  box-shadow:0 1px 0 var(--neutro-200);
}
.sesion__usuario{color:var(--neutro-700);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sesion__usuario strong{color:var(--neutro-900);font-weight:var(--peso-semi)}
.sesion__salir{flex:none;padding:4px 0;border:0;background:none;color:var(--azul-700);font:var(--peso-medio) 13px var(--font-sans);cursor:pointer}
.sesion__salir:hover{text-decoration:underline;text-underline-offset:3px}
.sesion__salir:focus-visible{outline:2px solid var(--azul-600);outline-offset:3px}

/* ---------- escritorio (rondas 4 y 5): página de pantalla completa ----------
   Ronda 5: el mapa es UN solo render ancho 2,4:1 (chile-ancho.mp4, misma cámara y escala que la columna de teléfono,
   corrido al oeste): el Pacífico con Isla de Pascua a la izquierda, Chile un poco a la derecha del centro y Argentina
   a la derecha, donde flota la tarjeta de acceso. Chile se ve a la misma escala de antes ("no la hagas más ancha") y
   hacia los bordes hay un desenfoque liviano. --mapa-cx es el centro de la franja de Chile en la pantalla; --fondo-cx,
   dónde cae esa franja dentro del render (0..1, lo trae ancho.json). */
.fondo-marco,.marca-pagina,.creditos{display:none}
@media (min-width:761px){
  :root{--ficha-w:372px;--hueco:24px;--mapa-w:50dvh;--fondo-cx:.583333;
    --mapa-cx:clamp(calc(var(--mapa-w) / 2 + var(--hueco)), 55vw,
                    calc(100vw - var(--ficha-w) - 2 * var(--hueco) - var(--mapa-w) / 2))}
  body{overflow:hidden}
  .fondo-marco{display:block;position:fixed;inset:0;z-index:0;transform-origin:0 0;pointer-events:none}
  .fondo{
    position:absolute;top:0;left:calc(var(--mapa-cx) - var(--fondo-cx) * 240dvh);
    height:100dvh;aspect-ratio:2.4;
    /* si la pantalla es más ancha que el render, sus bordes se funden con el color del mar de la página */
    -webkit-mask-image:linear-gradient(to right,transparent,var(--negro) 4%,var(--negro) 96%,transparent);
            mask-image:linear-gradient(to right,transparent,var(--negro) 4%,var(--negro) 96%,transparent);
  }
  .fondo__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* desenfoque liviano que crece hacia los bordes (profundidad de campo; ronda 5: "más livianito"). La franja de
     Chile ocupa del 47,9 % al 68,75 % del render y queda nítida con margen. */
  .fondo__desenfoque{position:absolute;inset:0}
  .fondo__desenfoque--suave{
    -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
    -webkit-mask-image:linear-gradient(to right,var(--negro) 30%,transparent 41%,transparent 76%,var(--negro) 84%);
            mask-image:linear-gradient(to right,var(--negro) 30%,transparent 41%,transparent 76%,var(--negro) 84%);
  }
  .fondo__desenfoque--fuerte{
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    -webkit-mask-image:linear-gradient(to right,var(--negro) 6%,transparent 26%,transparent 88%,var(--negro) 100%);
            mask-image:linear-gradient(to right,var(--negro) 6%,transparent 26%,transparent 88%,var(--negro) 100%);
  }
  /* un velo apenas perceptible en los extremos */
  .fondo__velo{
    position:absolute;inset:0;
    background:linear-gradient(to right,var(--negro-14),transparent 22%,transparent 90%,var(--negro-14));
  }
  .fondo__rotulos{position:absolute;inset:0}
  .rotulo-fondo{
    position:absolute;margin:0;transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:5px;
    color:var(--blanco);text-align:center;text-shadow:var(--sombra-texto);
    font:var(--peso-medio) 12px/1.1 var(--font-sans);letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;
  }
  .rotulo-fondo small{letter-spacing:.02em;text-transform:none;font-size:11.5px;font-weight:var(--peso-regular);color:var(--blanco-85)}
  /* la isla: el rótulo va sobre ella, con una línea guía corta */
  .rotulo-fondo--isla{transform:translate(-50%,calc(-100% - 16px));letter-spacing:.2em}
  .rotulo-fondo--isla::after{content:"";width:1px;height:14px;margin-top:3px;background:var(--blanco-60)}

  .marca-pagina{
    position:fixed;top:22px;left:var(--hueco);z-index:3;
    display:flex;align-items:center;gap:10px;
    color:var(--blanco);font:var(--peso-semi) 18px/1 var(--font-sans);letter-spacing:-.01em;
    text-shadow:var(--sombra-texto);
  }
  .marca-pagina img{filter:drop-shadow(0 1px 8px var(--negro-30))}
  .creditos{
    display:block;position:fixed;left:var(--hueco);bottom:18px;z-index:3;
    width:clamp(220px,calc(var(--mapa-cx) - var(--mapa-w) / 2 - 2 * var(--hueco)),420px);margin:0;
    color:var(--blanco-85);font-size:10.5px;line-height:1.45;text-shadow:0 1px 6px var(--negro-60);
  }

  .mapa{display:block;min-height:100dvh}
  .escenario{position:absolute;top:0;left:var(--mapa-cx);transform:translateX(-50%);height:100dvh;width:var(--mapa-w)}
  /* en escritorio el mapa es el render ancho de .fondo; la columna solo lleva los puntos de los puertos */
  .escenario__video{display:none}
  .rotulo-oceano{display:none}   /* en escritorio los océanos se rotulan en el fondo, en mar abierto */

  .ficha{
    position:fixed;top:var(--hueco);right:var(--hueco);
    width:var(--ficha-w);height:auto;max-height:calc(100dvh - 2 * var(--hueco));
    padding:26px 26px 22px;gap:18px;
    border-radius:var(--r-xl);
    background:color-mix(in srgb,var(--neutro-50) 90%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
    box-shadow:0 0 0 1px var(--blanco-30),0 18px 50px var(--negro-30),0 2px 8px var(--negro-14);
  }
  body.viaje-ficha .ficha{transform:translateX(calc(100% + 2 * var(--hueco)))}
  /* el lienzo del viaje dibuja el mismo cuadro encima y entra con un fundido (sin el desenfoque ni el velo de los
     bordes: así no aparecen de golpe); el mapa de la página se oculta recién dentro de la nube */
  body.viaje-lejos .fondo-marco{visibility:hidden}
  .marca-pagina,.creditos{transition:opacity var(--dur-media) var(--ease-out),visibility 0s}
  /* V2.5 (N8): apagadas también dejan de recibir clics y foco (antes la marca quedaba invisible pero clicable sobre la
     vista del puerto); la visibilidad cambia al terminar el fundido */
  body.viaje-etiquetas .marca-pagina,body.viaje-etiquetas .creditos{opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--dur-media) var(--ease-out),visibility 0s linear var(--dur-media)}
  /* en la vista del puerto la marca vuelve (los créditos del mapa no: la llegada trae los suyos) */
  body.viaje-puerto .marca-pagina{opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity var(--dur-media) var(--ease-out),visibility 0s}
}

/* ---------- teléfono: el mapa ocupa el ancho y se recorre bajando; la ficha queda abajo ---------- */
@media (max-width:760px){
  .mapa{flex-direction:column;align-items:center}
  .escenario{width:100vw;height:auto}
  .ficha{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:auto;height:auto;max-height:46dvh;
    padding:16px 16px 14px;gap:12px;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:0 -8px 30px var(--negro-30);
  }
  .ficha__titulo{font-size:18px}
  .ficha__puerto{font-size:26px}
  .escenario{margin-bottom:46dvh}
  body.viaje-ficha .ficha{transform:translateY(104%)}
  /* la ficha es una hoja baja: lecturas compactas y "Ir al puerto" siempre a la vista, fijo al pie */
  .datos{grid-template-columns:repeat(3,1fr);gap:6px}
  .datos div{padding:7px 8px}
  .datos div:last-child:nth-child(odd){grid-column:auto}
  .datos dt{font-size:9.5px;letter-spacing:.04em}
  .datos dd{font-size:13px}
  .ficha__coord{display:none}
  .entrar{position:sticky;bottom:0;box-shadow:0 10px 0 var(--neutro-50),0 -12px 16px var(--neutro-50)}
  .llegada__datos{gap:10px 18px}
  .llegada__datos dd{font-size:14px}
  .etiqueta{font-size:11.5px;padding:4px 8px}
}

@media (prefers-reduced-motion:reduce){
  .llegada{transform:none;filter:none}
  .ficha{transition:opacity var(--dur-media)}
  body.viaje-ficha .ficha{transform:none}
  .punto.activo::after{animation:none}
  .punto,.etiqueta{transition:none}
}

/* ---------- V2.4: panel de pilotes al llegar al puerto (pilotes.js; mismo estilo de la ficha del mapa) ---------- */
.visualmente-oculto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pilotes{
  position:absolute;top:24px;right:24px;z-index:2;
  display:flex;flex-direction:column;gap:14px;
  width:360px;max-height:calc(100dvh - 48px);overflow-y:auto;
  padding:24px 24px 20px;border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--neutro-50) 94%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 0 0 1px var(--blanco-30),0 18px 50px var(--negro-30),0 2px 8px var(--negro-14);
  color:var(--neutro-900);pointer-events:auto;
  opacity:0;transform:translateX(24px);
  transition:opacity var(--dur-media) var(--ease-out),transform 480ms var(--ease-out);
}
.pilotes.visible{opacity:1;transform:none}
.pilotes__asa{display:none}
.pilotes__cabeza{display:flex;flex-direction:column;gap:6px}
.pilotes__antetitulo{margin:0;color:var(--neutro-600);font-size:12px;font-weight:var(--peso-semi);text-transform:uppercase;letter-spacing:.08em}
.pilotes__titulo{margin:0;font-size:26px;line-height:1.1;font-weight:var(--peso-semi);color:var(--azul-800)}
.pilotes__indice{color:var(--neutro-700);font:var(--peso-medio) 13px var(--font-mono)}
.pilotes__cuerpo{display:flex;flex-direction:column;gap:12px}
.pilotes__cuenta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;list-style:none;margin:0;padding:0}
.cuenta{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r-md);background:var(--e-fondo)}
.cuenta__n{color:var(--e-tinta);font:var(--peso-semi) 22px/1.1 var(--font-mono)}
.cuenta__t{color:var(--e-tinta);font-size:11.5px;font-weight:var(--peso-medio)}
.cuenta--ok{--e-fondo:var(--verde-50);--e-tinta:var(--verde-700)}
.cuenta--warn{--e-fondo:var(--ambar-50);--e-tinta:var(--ambar-700)}
.cuenta--crit{--e-fondo:var(--rojo-50);--e-tinta:var(--rojo-700)}
.pilotes__peor{margin:0;color:var(--neutro-700);font-size:13px}
.pilotes__pie{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:2px 0 0;color:var(--neutro-600);font-size:12px}
.pilotes__asa:focus-visible{outline:2px solid var(--azul-600);outline-offset:2px}
/* la llegada (abajo a la izquierda) deja libre la columna del panel */
.con-pilotes .llegada{max-width:min(760px,calc(100vw - 360px - 72px))}

@media (max-width:760px){
  /* teléfono: hoja inferior; plegada muestra el estado general, el asa la despliega */
  .pilotes{
    top:auto;left:0;right:0;bottom:0;width:auto;max-height:70dvh;
    padding:6px 16px 14px;gap:10px;border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:0 -8px 30px var(--negro-30);transform:translateY(24px);
  }
  .pilotes__asa{display:flex;justify-content:center;align-items:center;width:100%;height:28px;padding:0;border:0;background:none;cursor:pointer}
  .pilotes__asa-raya{width:40px;height:4px;border-radius:var(--r-pill);background:var(--neutro-300)}
  .pilotes__titulo{font-size:20px}
  .pilotes:not(.abierta) .pilotes__cuerpo{display:none}
  .con-pilotes .llegada{max-width:calc(100vw - 36px);bottom:calc(var(--hoja-pilotes,132px) + 14px)}
  .con-pilotes .llegada__datos,.con-pilotes .llegada__pilotes,.con-pilotes .llegada__creditos{display:none}
  .con-pilotes .llegada__nombre{font-size:38px}
}
@media (prefers-reduced-motion:reduce){.pilotes{transform:none;transition:opacity var(--dur-media)}}

/* ---------- V2.4: integración en puertos.html (accesos, entrada y salida a negro, créditos en teléfono) ----------
   Todo sale de portsync-tokens.css. */
.accesos{position:fixed;top:12px;right:12px;z-index:6;display:flex;gap:8px;transition:opacity var(--dur-media) var(--ease-out),visibility 0s}
.vinculo{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--blanco);color:var(--azul-950);text-decoration:none;white-space:nowrap;
  font:var(--peso-medio) 13.5px/1 var(--font-sans);transition:background var(--dur-rapida) var(--ease-out)}
.vinculo:hover{background:var(--azul-50)}
.vinculo--directo{background:var(--negro-40);color:var(--blanco);box-shadow:inset 0 0 0 1px var(--blanco-30);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vinculo--directo:hover{background:var(--blanco-16)}
/* durante el vuelo (~3 s) los accesos se apagan y no reciben clics ni foco; en la vista del puerto vuelve «Inicio»
   (V2.5, N8). «Ir directo al panel» no: ahí ya está «Abrir el panel» de ese puerto */
body.viaje-etiquetas .accesos{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-media) var(--ease-out),visibility 0s linear var(--dur-media)}
body.viaje-puerto .accesos{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-media) var(--ease-out),visibility 0s}
body.viaje-puerto .vinculo--directo{display:none}
@media (min-width:761px){
  /* junto a la marca, arriba a la izquierda: sobre el océano, sin tapar los puertos ni la tarjeta */
  .accesos{top:14px;right:auto;left:calc(var(--hueco) + 168px)}
  .vinculo{height:40px;padding:0 18px;font-size:14px}
}
.llegada__panel{
  display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:var(--r-pill);
  background:var(--blanco);color:var(--azul-950);text-decoration:none;font:var(--peso-semi) 15px var(--font-sans);
  transition:background var(--dur-rapida) var(--ease-out);
}
.llegada__panel:hover{background:var(--azul-50)}
.llegada__panel:focus-visible{outline:2px solid var(--azul-300);outline-offset:3px}
.llegada__acciones .llegada__volver{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 1px var(--blanco-40)}
.llegada__acciones .llegada__volver:hover{background:var(--blanco-16)}
/* entrada desde negro (viene de INICIO) y salida a negro (hacia el panel o INICIO): misma duración y curva que el velo del sitio */
.veil{position:fixed;inset:0;z-index:50;background:var(--negro);pointer-events:none;opacity:1;transition:opacity var(--dur-pagina) var(--ease-out)}
body.is-ready .veil{opacity:0}
body.is-leaving .veil{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.veil{transition-duration:.01ms}}
.sin-js{position:fixed;inset:0;z-index:60;margin:0;padding:96px 24px;background:var(--negro);color:var(--blanco);font:16px/1.5 var(--font-sans)}
.sin-js a{color:var(--azul-300)}
.creditos a,.ficha__creditos a{color:inherit}
/* créditos de la maqueta: en escritorio van al pie (.creditos); en teléfono, al final de la tarjeta */
.ficha__creditos{display:none;margin:0;color:var(--neutro-600);font-size:10.5px;line-height:1.45}
@media (max-width:760px){.ficha__creditos{display:block}}
.viaje.sin-video{background:linear-gradient(to bottom,var(--azul-900),var(--azul-950))}
/* teléfono: una franja arriba para los accesos, así no tapan los puertos del norte */
@media (max-width:760px){.mapa{padding-top:54px}}