/* ══════════════════════════════════════════════════════════════════════════════
   📱 NAV FLOTANTE APP — barra inferior de móvil · 2026-07-23 → 2026-07-29
   ══════════════════════════════════════════════════════════════════════════════
   2026-07-29 · Carlos: "la barra flotante que solo existe en el home debe estar
   en toda la web, vamos a tratar la versión móvil como una app".

   ⭐ ESTE ARCHIVO ES LA ÚNICA FUENTE del estilo de la barra.
   Antes vivía embebido dentro del home (que NO carga base.css) y por eso las
   páginas interiores se quedaban sin ella.  Ahora lo cargan las dos familias:
     · páginas PHP  → partials/head.php
     · home         → _fuente/plantilla.html (con <link>, no copiado)
   Si se toca aquí, cambia en las 42 páginas × 2 idiomas.

   El HTML sale de partials/app-nav.php (páginas PHP) y del mismo bloque en
   _fuente/plantilla.html (home).  Escritorio NO se toca: fuera de 900px la
   barra no existe.
   ══════════════════════════════════════════════════════════════════════════════ */

.app-nav{display:none}

@media (max-width:900px){
  .app-nav{
    display:flex; position:fixed; z-index:2100;
    bottom:calc(12px + env(safe-area-inset-bottom));
    left:50%; transform:translateX(-50%);
    width:min(92%,460px);
    background:rgba(4,55,104,.92);            /* azul de marca #043768 */
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:100px;
    box-shadow:0 14px 40px rgba(2,15,32,.42), 0 3px 10px rgba(2,15,32,.28), inset 0 1px 0 rgba(255,255,255,.08);
    padding:8px 18px; justify-content:space-between; align-items:center;
    pointer-events:auto;
  }
  .app-nav__item{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    flex:1; text-decoration:none; -webkit-tap-highlight-color:transparent;
    color:rgba(255,255,255,.62); font-family:"Oswald",sans-serif;
    padding:6px 4px; border-radius:16px; transition:color .2s, transform .15s;
    background:none; border:0; cursor:pointer;   /* el botón central es <button> en las interiores */
  }
  .app-nav__item:active{transform:scale(.94)}
  .app-nav__icon{width:24px; height:24px; display:flex; align-items:center; justify-content:center}
  .app-nav__icon svg{width:23px; height:23px}
  .app-nav__label{font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1}
  /* Experiences aún sin destino: se ve, pero apagado y sin acción */
  .app-nav__item[data-sin-link]{opacity:.55; pointer-events:none}

  /* ── DÓNDE ESTOY (2026-07-29) — lo que hace que se sienta app: la sección
       en la que estás va en blanco pleno, no en el blanco al 62%. ── */
  .app-nav__item[aria-current="page"]{color:#fff}

  /* ── Botón central elevado (Reservar), como el especial de Bahama ── */
  .app-nav__item--center{
    flex:0 0 66px; margin-top:-30px; gap:5px;
    color:var(--azul,#043768);
  }
  .app-nav__item--center .app-nav__icon{
    width:56px; height:56px; border-radius:50%;
    background:var(--amarillo,#F7BE39); color:var(--azul,#043768);
    box-shadow:0 8px 20px rgba(247,190,57,.45), inset 0 1px 0 rgba(255,255,255,.5);
    border:3px solid rgba(4,55,104,.92);
  }
  .app-nav__item--center .app-nav__icon svg{width:27px; height:27px; stroke-width:2.1}
  .app-nav__item--center .app-nav__label{color:#fff; font-size:10px; font-weight:700}
  .app-nav__item--center:active{transform:scale(.94)}
  /* el central nunca se apaga por aria-current: su color lo pone el círculo amarillo */
  .app-nav__item--center[aria-current="page"]{color:var(--azul,#043768)}

  /* aire extra al final para que la barra no tape el contenido del pie */
  footer{padding-bottom:96px}
}