/* Muelle La Bodeguita — piel de las vistas públicas de wayfinding.

   Los cuatro colores de marca y los siete secundarios se declaran aquí una vez;
   todo lo demás —sombras, velos, estados— se deriva de ellos con capas
   translúcidas, para que la marca siga siendo coherente si alguno cambia.

   Solo se declaran las caras que se envían. */

@font-face { font-family:'Banana Grotesk'; src:url('fuentes/BananaGrotesk-Light.woff2') format('woff2');
             font-weight:300; font-display:swap; }
@font-face { font-family:'Banana Grotesk'; src:url('fuentes/BananaGrotesk-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Banana Grotesk'; src:url('fuentes/BananaGrotesk-Medium.woff2') format('woff2');
             font-weight:500; font-display:swap; }
@font-face { font-family:'Fact Compressed'; src:url('fuentes/fact-compressed-bold.woff2') format('woff2');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Bestigia'; src:url('fuentes/Bestigia-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }

:root{
  --navy:#073770; --azul:#0062EE; --celeste:#7ACAF0; --arena:#EAE7D0;
  --sec-amarillo:#FFE72D; --sec-verde:#92D566;     --sec-rojo:#FF221D;
  --sec-terracota:#C2551B; --sec-rosa:#FC87B9;     --sec-esmeralda:#00AB55;
  --sec-cacao:#441000;

  --texto:'Banana Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titular:'Fact Compressed', 'Arial Narrow', system-ui, sans-serif;
  --saludo:'Bestigia', Georgia, serif;

  --sombra-md:0 12px 30px -12px color-mix(in srgb, var(--navy) 45%, transparent);
  --sombra-lg:0 22px 44px -16px color-mix(in srgb, var(--navy) 55%, transparent);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ -webkit-tap-highlight-color:transparent; }

/* El `display:none` del atributo `hidden` lo pone la hoja del navegador y lo
   gana cualquier regla de autor con `display`. Estas vistas muestran y ocultan
   con `hidden`, así que sin esto los chips y el buscador aparecen igual. */
[hidden]{ display:none !important; }

body{
  margin:0; min-height:100vh; min-height:100dvh; overflow-x:hidden;
  font-family:var(--texto); font-weight:400;
  -webkit-text-size-adjust:100%;
  color:var(--arena);

  /* Agua profunda abajo, luz arriba: la página tiene horizonte, no un plano.
     El halo sale del celeste de marca, muy diluido, no de un color nuevo.
     Es el mismo fondo de muellelabodeguita.com: quien llega desde ahí no
     cambia de sitio, sigue en el mismo. */
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--celeste) 22%, transparent), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 78%, #000) 100%);
  background-color:var(--navy);        /* respaldo si color-mix no existe */
  background-attachment:fixed;
}

/* ---------------------------------------------------------------- el mar --
   Tres capas de la misma onda —la del logotipo, ampliada— a distinta altura,
   opacidad y velocidad. Es el único gesto llamativo: todo lo demás se mantiene
   quieto para que los operadores sigan siendo lo primero.

   Cada capa mide lo suyo dentro de un contenedor que ocupa la pantalla entera y
   va anclada abajo. Con el trazo largo (viewBox de 340 para una onda que va de
   26 a 98) la altura de la capa mueve la línea de agua sin agrandar el oleaje:
   queda a `100 - 0.82 × altura` por ciento de la pantalla, así que 61 % deja la
   capa azul justo a media pantalla, que es donde se la pidió. */
.mar{ position:fixed; inset:0; height:100dvh; pointer-events:none; z-index:0; }
.ola{ position:absolute; left:0; bottom:0; width:200%; height:100%; display:block; }
.ola path{ fill:currentColor; }

.ola-1{ color:color-mix(in srgb, var(--celeste) 14%, transparent); height:68%;
        animation:deriva 26s linear infinite; }
.ola-2{ color:color-mix(in srgb, var(--azul) 58%, transparent);    height:61%;
        animation:deriva 38s linear infinite reverse; }
.ola-3{ color:color-mix(in srgb, var(--arena) 9%, transparent);    height:51%;
        animation:deriva 52s linear infinite; }

/* El pie se lee sobre el agua, no contra ella: un velo que devuelve la
   profundidad del navy justo en la franja donde va el texto. */
.mar::after{
  content:""; position:absolute; inset:auto 0 0 0; height:26%;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--navy) 92%, #000) 92%);
}

@keyframes deriva{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Todo el contenido va por delante del agua. */
.m-cabecera, .m-intro, .ir-cuerpo, .nav-operador, .nav-cuerpo, .m-pie{
  position:relative; z-index:1;
}

/* --------------------------------------------------------- cabecera --
   El logo se centra respecto a la página, no respecto al hueco que deja el
   botón de idioma: por eso los laterales de la rejilla miden igual. */
/* `viewport-fit=cover` (en muelle_head.php) mete la página bajo la muesca y
   bajo la barra de gestos. Los recuadros seguros se suman al relleno, y no lo
   sustituyen, para que en un teléfono sin muesca —`env()` vale 0— quede
   exactamente el relleno de siempre. Solo la cabecera y el pie los necesitan:
   son los dos únicos bloques que ocupan el ancho completo. Sin esto, en
   horizontal el botón de idioma, anclado al borde derecho, se va bajo la
   muesca del iPhone. */
.m-cabecera{
  color:var(--arena);
  padding:20px 18px 8px;
  padding-top:calc(20px + env(safe-area-inset-top, 0px));
  padding-left:calc(18px + env(safe-area-inset-left, 0px));
  padding-right:calc(18px + env(safe-area-inset-right, 0px));
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
}
.m-logo{ grid-column:2; width:min(300px, 58vw); height:auto; display:block; }
.m-lang{
  grid-column:3; justify-self:end;
  color:var(--arena); text-decoration:none;
  font-weight:500; font-size:14px; letter-spacing:.08em;
  border:1px solid color-mix(in srgb, var(--arena) 45%, transparent);
  border-radius:99px; padding:11px 16px; min-height:44px;
  display:inline-flex; align-items:center;
  background:color-mix(in srgb, var(--navy) 55%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 16px -8px color-mix(in srgb, #000 70%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* El `:hover` va dentro de `@media (hover:hover)` —aquí y en las otras seis
   reglas de la hoja— porque en una pantalla táctil no existe el «salir del
   elemento»: el navegador deja el estado puesto tras el toque y el botón se
   queda levantado hasta que se toca otra cosa. `:focus-visible` y `:active` sí
   valen en táctil y se quedan fuera: son la respuesta al toque, no su rastro.
   Por eso este par, que compartía declaración, va ahora separado. */
.m-lang:focus-visible{
  transform:translateY(-1px);
  border-color:var(--celeste);
  box-shadow:0 10px 22px -8px color-mix(in srgb, #000 70%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
}
@media (hover:hover) and (pointer:fine){
  .m-lang:hover{
    transform:translateY(-1px);
    border-color:var(--celeste);
    box-shadow:0 10px 22px -8px color-mix(in srgb, #000 70%, transparent),
               inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
  }
}
.m-lang:active{ transform:translateY(0) scale(.97); }
@media (max-width:520px){
  .m-cabecera{ grid-template-columns:1fr; justify-items:center; gap:4px; }
  .m-lang{ grid-column:1; grid-row:1; justify-self:end; }
  .m-logo{ grid-column:1; grid-row:2; width:min(260px, 70vw); }
}

/* ------------------------------------------------------------ saludo -- */
.m-intro{ color:var(--arena); text-align:center; padding:10px 20px 26px; }
.m-intro h1{
  font-family:var(--saludo); font-weight:400; color:var(--celeste);
  font-size:clamp(32px, 8vw, 52px); line-height:1.02; margin:0 0 6px;
}
.m-intro p{
  margin:0; font-weight:300; font-size:clamp(14px, 3.9vw, 17px);
  color:color-mix(in srgb, var(--arena) 88%, transparent);
}

/* -------------------------------------------------------------- arco --
   El contenedor de la marca: cúpula arriba, base recta. Su inverso es casco. */
.m-arco{ border-radius:999px 999px 18px 18px; }
.m-arco-inv{ border-radius:18px 18px 999px 999px; }

/* ----------------------------------------------------------- píldora -- */
.m-pildora{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:99px;
  font-size:12.5px; font-weight:500; line-height:1.5;
  background:color-mix(in srgb, var(--celeste) 34%, transparent);
  color:var(--navy);
}
.m-pildora svg{ width:14px; height:14px; flex-shrink:0; }

/* --------------------------------------------------------------- pie -- */
.m-pie{
  color:var(--arena);
  color:color-mix(in srgb, var(--arena) 88%, transparent);
  text-align:center; padding:18px 20px 22px; font-size:13px; font-weight:300;
  /* Última franja de la página: sin esto el crédito de Corpoturismo queda
     debajo de la barra de gestos del iPhone. */
  padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  padding-left:calc(20px + env(safe-area-inset-left, 0px));
  padding-right:calc(20px + env(safe-area-inset-right, 0px));
}
.m-tricolor{ display:flex; height:3px; width:112px; margin:0 auto 12px; border-radius:99px; overflow:hidden; }
.m-tricolor span{ flex:1; }

/* ------------------------------------------------- menos movimiento -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ==================================================== ir.php — la lista == */
.ir-cuerpo{ max-width:560px; margin:0 auto; padding:14px 16px 30px; }

.ir-aviso{
  margin:0 0 14px; padding:12px 16px; border-radius:14px; text-align:center;
  font-size:13.5px; font-weight:500;
  background:var(--sec-amarillo);
  color:var(--sec-cacao);
  box-shadow:0 10px 24px -12px color-mix(in srgb, #000 60%, transparent);
}

.ir-buscar{ margin-bottom:12px; }
.ir-buscar input{
  width:100%; padding:13px 18px; min-height:46px;
  /* 16px exactos, no 15: por debajo de 16, Safari en iOS amplía la página al
     enfocar el campo y no la devuelve al soltarlo. La lista queda ampliada y
     corrida, y el cliente no tiene forma obvia de volver. */
  font:inherit; font-size:16px; color:var(--navy);
  background:#fff; border:1px solid color-mix(in srgb, var(--navy) 18%, transparent);
  border-radius:99px; outline:none;
}
.ir-buscar input:focus{ border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent); }

/* Los chips desbordan a propósito: con 19 operadores hay más destinos de los
   que caben, y partirlos en varias filas empuja las tarjetas fuera de vista. */
.ir-chips{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ir-chips::-webkit-scrollbar{ display:none; }
.ir-chip{
  flex:0 0 auto; min-height:44px; padding:0 16px;
  font:inherit; font-size:13.5px; font-weight:500; white-space:nowrap; cursor:pointer;
  color:var(--arena);
  background:color-mix(in srgb, var(--navy) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--arena) 34%, transparent); border-radius:99px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 12px -6px color-mix(in srgb, #000 70%, transparent);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .ir-chip:hover{ transform:translateY(-1px);
    box-shadow:0 8px 18px -8px color-mix(in srgb, #000 70%, transparent); }
}
.ir-chip:active{ transform:translateY(0) scale(.97); }
.ir-chip[aria-pressed="true"]{
  background:var(--arena); color:var(--navy); border-color:var(--arena);
  box-shadow:0 8px 20px -8px color-mix(in srgb, #000 65%, transparent),
             inset 0 1px 0 #fff;
}
/* Sin esto el chip dependía del contorno por omisión del navegador: el
   resto de la hoja (.m-lang, el buscador) sí define su propio foco. */
.ir-chip:focus-visible{
  outline:2px solid var(--celeste); outline-offset:2px;
}

.ir-lista{ display:flex; flex-direction:column; gap:12px; }

.ir-tarjeta{
  display:flex; align-items:center; gap:14px;
  background:#fff; border-radius:22px; padding:14px;
  box-shadow:var(--sombra-md);
  animation:ir-entra .45s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes ir-entra{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* El arco es la forma de la marca; el fondo blanco es el único respaldo que
   funciona para dieciocho logotipos ajenos con sus propios colores. */
.ir-arco{
  flex-shrink:0; width:64px; height:64px;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--titular); font-size:24px; line-height:1;
}
.ir-arco-logo{ background:#fff; border:1px solid color-mix(in srgb, var(--navy) 14%, transparent); }
.ir-arco img{ width:100%; height:100%; object-fit:cover; display:block; }

.ir-datos{ flex:1; min-width:0; }
.ir-nombre{ margin:0 0 6px; font-size:17px; font-weight:500; line-height:1.2; color:var(--navy); }

/* La descripción es la pista para reconocer el módulo desde lejos: dos líneas
   completas, no una cortada. */
.ir-desc{
  margin:7px 0 0; font-size:13px; font-weight:300; line-height:1.35;
  color:color-mix(in srgb, var(--navy) 70%, transparent);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Compactos a propósito: medidos a 390px con los 19 operadores reales,
   «Llamar» y «Correo» con el relleno y la letra de antes (14px/13px) no
   entraban en una fila y la tarjeta se iba a 229px. Este relleno, tipo y
   separación caben los dos en una fila a ese ancho sin bajar de 44px de
   alto ni de área táctil (quedan en ~70×44px cada uno); flex-wrap sigue
   de respaldo por si un idioma futuro trae textos más largos. */
.ir-contacto{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.ir-contacto a{
  display:inline-flex; align-items:center; gap:4px;
  min-height:44px; padding:0 8px; border-radius:12px;
  font-size:12px; font-weight:500; text-decoration:none;
}
.ir-contacto svg{ width:12px; height:12px; }
.ir-tel { background:color-mix(in srgb, var(--celeste) 34%, transparent); color:var(--navy); }
.ir-mail{ background:color-mix(in srgb, var(--navy) 8%, transparent);     color:var(--navy); }

/* Casco, no cúpula: el botón lleva a otro lado, no contiene.
   El relieve no es adorno: en una tarjeta blanca, plana y llena de texto, es lo
   que separa «esto se toca» de «esto se lee». La sombra sale del azul del
   propio botón, no de un gris, para que el color no se ensucie. */
.ir-btn{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-height:64px; padding:0 18px; text-decoration:none;
  background:linear-gradient(160deg, var(--azul) 0%, var(--navy) 78%);
  color:var(--arena);
  font-family:var(--titular); font-size:20px; letter-spacing:.02em;
  box-shadow:0 12px 22px -10px color-mix(in srgb, var(--azul) 75%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ir-btn svg{ width:18px; height:18px; transition:transform .18s ease; }
@media (hover:hover) and (pointer:fine){
  .ir-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 30px -10px color-mix(in srgb, var(--azul) 85%, transparent),
               inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
  }
  /* La flecha se adelanta: el gesto dice a dónde va antes que la palabra. */
  .ir-btn:hover svg{ transform:translateX(3px); }
}
.ir-btn:active{ transform:translateY(0) scale(.97);
  box-shadow:0 6px 14px -8px color-mix(in srgb, var(--azul) 70%, transparent),
             inset 0 2px 6px color-mix(in srgb, var(--navy) 60%, transparent); }

.ir-esqueleto{
  height:92px; border-radius:22px;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--arena) 10%, transparent) 30%,
    color-mix(in srgb, var(--arena) 20%, transparent) 50%,
    color-mix(in srgb, var(--arena) 10%, transparent) 70%);
  background-size:200% 100%; animation:ir-brillo 1.4s infinite;
}
@keyframes ir-brillo{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.ir-vacio,.ir-error{ text-align:center; padding:28px 16px; font-weight:300;
                     color:color-mix(in srgb, var(--arena) 86%, transparent); }
.ir-error a{ color:var(--celeste); }

/* ============================================== navegar.php — la brújula == */
/* Esta pantalla va entera sobre navy: se mira de reojo mientras se camina, y
   así la aguja y el mapa son lo único que brilla. */
body.nav{ color:var(--arena); }

/* El mar está, pero quieto: en esta pantalla ya hay un mapa rotando por CSS a
   ~60 Hz junto al GPS activo, y tres capas animadas más compiten por CPU y
   batería justo cuando la persona necesita que el teléfono aguante hasta el
   módulo. En `ir.php`, donde no pasa nada más, el agua sí deriva. */
body.nav .ola{ animation:none; }
.nav-cabecera{ padding:14px 18px 4px; }
.nav-logo{ width:min(210px, 48vw); }

.nav-operador{
  display:flex; align-items:center; gap:12px;
  max-width:420px; margin:0 auto; padding:6px 18px 14px;
}
.nav-arco{ width:52px; height:52px; flex-shrink:0; overflow:hidden; background:#fff; }
.nav-arco img{ width:100%; height:100%; object-fit:cover; display:block; }
.nav-nombre { font-size:18px; font-weight:500; line-height:1.2; }
.nav-destino{ font-size:14px; font-weight:300; color:var(--celeste); margin-top:2px; }

.nav-cuerpo{ max-width:420px; margin:0 auto; padding:0 18px 26px; }

.nav-brujula{ text-align:center; margin-bottom:14px; }
.nav-rotulo{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px;
  color:color-mix(in srgb, var(--arena) 62%, transparent);
}
.nav-esfera{
  position:relative; width:168px; height:168px; margin:0 auto; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--celeste) 30%, transparent);
  background:radial-gradient(circle at 50% 38%,
    color-mix(in srgb, var(--celeste) 12%, transparent) 0%,
    color-mix(in srgb, var(--navy) 60%, #000) 100%);
  box-shadow:inset 0 2px 10px color-mix(in srgb, #000 40%, transparent);
}
.nav-esfera::after{ content:""; position:absolute; inset:14px; border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--celeste) 22%, transparent); }
.nav-cardinal{ position:absolute; font-size:11px; font-weight:500;
               color:color-mix(in srgb, var(--arena) 55%, transparent); }
.nav-cardinal.n{ top:6px; left:50%; transform:translateX(-50%); color:var(--celeste); }
.nav-cardinal.s{ bottom:6px; left:50%; transform:translateX(-50%); }
.nav-cardinal.o{ left:8px; top:50%; transform:translateY(-50%); }
.nav-cardinal.e{ right:8px; top:50%; transform:translateY(-50%); }
.nav-aguja-caja{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* Aguja de dos cuerpos, alto 104px, con la base de la punta exactamente en el
   centro: por eso `transform-origin:50% 50%` y no otro valor — rota sin
   bambolear. Solo cambian los colores. */
.nav-aguja{
  display:flex; flex-direction:column; align-items:center; height:104px;
  transform-origin:50% 50%; will-change:transform;
  filter:drop-shadow(0 2px 8px color-mix(in srgb, var(--celeste) 45%, transparent));
}
.nav-aguja .tip{
  width:0; height:0; border-radius:2px;
  border-left:14px solid transparent; border-right:14px solid transparent;
  border-bottom:52px solid var(--celeste);
}
.nav-aguja .tail{
  width:8px; height:44px; margin-top:8px; border-radius:6px;
  background:color-mix(in srgb, var(--arena) 30%, transparent);
}
.nav-eje{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--arena); border:2px solid var(--navy);
}

#btnBrujula{
  display:none; align-items:center; gap:8px; margin:12px auto 0;
  min-height:44px; padding:0 20px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:500;
  background:linear-gradient(170deg, #fff 0%, var(--arena) 64%);
  color:var(--navy); border:none; border-radius:99px;
  box-shadow:0 10px 20px -10px color-mix(in srgb, #000 75%, transparent),
             inset 0 1px 0 #fff;
  transition:transform .16s ease, box-shadow .16s ease;
}
@media (hover:hover) and (pointer:fine){
  #btnBrujula:hover{ transform:translateY(-1px); }
}
#btnBrujula:active{ transform:translateY(0) scale(.97); }
#btnBrujula:not([hidden]){ display:inline-flex; }
#btnBrujula svg{ width:18px; height:18px; }
#compassFallback{ font-size:12px; margin-top:10px; font-weight:300;
                  color:color-mix(in srgb, var(--arena) 68%, transparent); }

/* La distancia es el dato que se consulta cada pocos pasos: se lee a un metro. */
.nav-dist{ text-align:center; margin-bottom:12px; }
.nav-num{ font-family:var(--titular); font-size:64px; line-height:1; color:var(--arena); }
.nav-unidad{ font-size:16px; font-weight:300; color:color-mix(in srgb, var(--arena) 70%, transparent); }
.nav-barra{ width:70%; height:5px; border-radius:3px; margin:10px auto 4px;
            background:color-mix(in srgb, var(--arena) 18%, transparent); }
.nav-barra div{ height:100%; width:0; border-radius:3px; background:var(--celeste); transition:width .4s; }
.nav-pct,.nav-eta{ font-size:12px; font-weight:300;
                   color:color-mix(in srgb, var(--arena) 62%, transparent); }
.nav-eta{ margin-top:4px; }
#gpsMsg{ font-size:12px; font-weight:300; padding:10px 0;
         color:color-mix(in srgb, var(--arena) 62%, transparent); }

/* La estrella de la marca aparece una sola vez en todo el recorrido: al llegar. */
#arrivedBanner{
  display:none; text-align:center; padding:16px 14px; margin-bottom:14px;
  background:var(--arena); color:var(--navy);
  box-shadow:var(--sombra-lg);
}
#arrivedBanner:not([hidden]){ display:block; animation:nav-brinco .5s ease 3; }
#arrivedBanner svg{ width:34px; height:34px; display:block; margin:0 auto 6px; color:var(--navy); }
#arrivedBanner strong{ display:block; font-family:var(--titular); font-size:26px; }
#arrivedBanner span{ font-size:13.5px; font-weight:300; }
@keyframes nav-brinco{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

#miniMapWrap{
  width:196px; height:196px; border-radius:50%; overflow:hidden; position:relative;
  margin:0 auto 16px; border:4px solid var(--arena);
  box-shadow:0 20px 44px -16px color-mix(in srgb, #000 60%, transparent);
}
#miniMap{ position:absolute; width:200%; height:200%; top:-50%; left:-50%; }
.leaflet-container{ background:var(--navy); }

.user-pulse{
  width:16px; height:16px; border-radius:50%;
  background:var(--celeste); border:3px solid var(--arena);
  animation:nav-pulso 1.8s ease-out infinite;
}
@keyframes nav-pulso{
  0%  { box-shadow:0 0 0 0 color-mix(in srgb, var(--celeste) 60%, transparent); }
  70% { box-shadow:0 0 0 12px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

.nav-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; padding:0 20px; margin-bottom:10px; text-decoration:none;
  background:linear-gradient(170deg, #fff 0%, var(--arena) 62%);
  color:var(--navy);
  font-family:var(--titular); font-size:20px;
  box-shadow:0 14px 26px -12px color-mix(in srgb, #000 75%, transparent),
             inset 0 1px 0 #fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-btn svg{ width:20px; height:20px; }
@media (hover:hover) and (pointer:fine){
  .nav-btn:hover{ transform:translateY(-2px);
    box-shadow:0 20px 34px -12px color-mix(in srgb, #000 80%, transparent), inset 0 1px 0 #fff; }
}
.nav-btn:active{ transform:translateY(0) scale(.98);
  box-shadow:0 6px 14px -10px color-mix(in srgb, #000 70%, transparent),
             inset 0 2px 6px color-mix(in srgb, var(--navy) 25%, transparent); }
.nav-volver{ display:block; text-align:center; padding:6px; text-decoration:none;
             font-size:13px; font-weight:300; color:var(--celeste); }

.nav-contacto{ margin-top:18px; padding:14px; border-radius:16px; text-align:center;
               background:var(--arena); color:var(--navy); }
.nav-contacto-t{ font-size:13.5px; font-weight:500; margin-bottom:10px; }
.nav-contacto-b{ display:flex; gap:8px; }
.nav-contacto-b a{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; border-radius:12px; text-decoration:none;
  font-size:14px; font-weight:500; color:var(--arena);
  background:linear-gradient(160deg, var(--azul) 0%, var(--navy) 80%);
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--azul) 80%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  transition:transform .16s ease, box-shadow .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .nav-contacto-b a:hover{ transform:translateY(-1px);
    box-shadow:0 14px 24px -10px color-mix(in srgb, var(--azul) 85%, transparent),
               inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent); }
}
.nav-contacto-b a:active{ transform:translateY(0) scale(.97); }
.nav-contacto-b a[hidden]{ display:none; }
.nav-contacto-b svg{ width:16px; height:16px; }