/* PortSync V2.5 · mapa-comun.css — la Maqueta (puertos.html) con la estética del sitio nuevo. Va DESPUÉS de mapa.css.
   · Letra: DM Sans para el texto y Fraunces para los títulos (tipografia.css); mapa.css usa --font-sans, aquí se redefine.
   · Barra común (comun.js) en lugar de la marca y los accesos de antes: se apaga durante el vuelo del viaje y vuelve en
     la vista del puerto, igual que ellos. La ficha y las tarjetas bajan para no quedar bajo la barra.
   · Pie común: una cortina que sube sobre el mapa al bajar la página (el mapa y la ficha son fijos). */
:root { --font-sans: var(--f-texto); }
body { font-family: var(--f-texto); font-size: 16px; line-height: 1.5; }
.ficha__titulo, .ficha__puerto, .llegada__nombre, .pilotes__titulo, .ficha__region + .ficha__puerto {
  font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--tr-titulo); }
.ficha__puerto, .llegada__nombre { line-height: 1.05; }

/* la barra: arriba, sobre el mapa; durante el vuelo no se ve ni recibe foco */
.c-cabecera { transition: opacity var(--dur-media, 300ms) var(--ease-out, ease), visibility 0s; }
body.viaje-etiquetas .c-cabecera { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-media, 300ms) var(--ease-out, ease), visibility 0s linear var(--dur-media, 300ms); }
body.viaje-puerto .c-cabecera { opacity: 1; visibility: visible; pointer-events: auto; }

/* la llegada del viaje: el botón principal es «Ver el puerto» (llegada.html) y «Abrir el panel» queda de apoyo */
.llegada__acciones .llegada__panel-sec { text-decoration: none; display: inline-flex; align-items: center; }

/* el pie común: sobre el mapa y la ficha */
.c-pie--maqueta { position: relative; z-index: 8; margin: 0 12px 12px; }
@media (min-width: 761px) {
  body { overflow-x: hidden; overflow-y: auto; }
  body.viajando { overflow: hidden; }
  .ficha { top: calc(var(--hueco) + 64px); max-height: calc(100dvh - 2 * var(--hueco) - 64px); }
}
/* con el pie debajo, la página mide más que la pantalla: el mapa ya no define el alto */
.mapa { min-height: 100dvh; }
@media (max-width: 760px) { .c-pie--maqueta { margin-top: 0; } }

/* escritorio: los enlaces de la barra van junto a la marca (no al centro) para no tapar a Arica, el punto más al norte */
@media (min-width: 1100px) { .c-cabecera .c-nav { justify-content: flex-start; margin-left: 8px; } }

/* vista del puerto: la barra sobre la foto lleva vidrio (el texto de la marca se lee) y el panel de pilotes baja bajo ella */
body.viaje-puerto .c-cabecera .c-barra {
  max-width: 1240px; background: var(--c-vidrio); border-color: var(--c-vidrio-borde);
  box-shadow: inset 0 1px 0 var(--c-vidrio-filo), var(--c-sombra-chica);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
@media (min-width: 761px) {
  .pilotes { top: 92px; max-height: calc(100dvh - 92px - 24px); }
}

/* créditos del mapa: legibles (mínimo 12 px) */
.creditos, .ficha__creditos, .llegada__creditos { font-size: 12px; }
/* REV-FINAL: borde oscuro ceñido a la letra; sobre las nubes blancas del mapa el blanco quedaba bajo AA */
.creditos { text-shadow: 0 0 2px var(--negro-88), 0 1px 6px var(--negro-60); }
@media (min-width: 761px) {
  .creditos { padding: 10px 12px; border-radius: 12px; background: var(--negro-60);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}