/* ============================================================================
   Travel Zone — Menú móvil (hamburguesa + drawer)  ·  ADITIVO
   Este archivo se carga DESPUÉS de style.css y NO modifica ninguna regla
   existente. La hamburguesa solo aparece en el breakpoint móvil ya existente
   (max-width:1180px), donde `.nav-links` ya está oculto por style.css.
   Marca: superficie azul corporativo (--tz-blue), coral solo para el CTA.
   ============================================================================ */

/* ---- Logo como enlace a inicio (solo sub-páginas; no afecta al index) ---- */
.nav-logo-link{ display:inline-flex; align-items:center; text-decoration:none; }

/* ---- Botón hamburguesa (oculto en desktop) ---- */
.nav-burger{
  display:none;
  width:46px; height:46px; padding:11px;
  background:transparent; border:0; cursor:pointer; color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.nav-burger-box{ position:relative; display:block; width:24px; height:16px; }
.nav-burger-line{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:currentColor;
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease;
}
.nav-burger-line:nth-child(1){ top:0; }
.nav-burger-line:nth-child(2){ top:7px; }
.nav-burger-line:nth-child(3){ top:14px; }
.nav-burger.is-open .nav-burger-line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open .nav-burger-line:nth-child(2){ opacity:0; }
.nav-burger.is-open .nav-burger-line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- Scrim de fondo ---- */
.nav-drawer-backdrop{
  position:fixed; inset:0; z-index:95;
  background: rgba(5, 5, 20, 0.55);
  opacity:0; pointer-events:none;
  transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* ---- Panel drawer (azul corporativo, entra desde la derecha) ---- */
.nav-drawer{
  position:fixed; top:0; right:0; z-index:100;
  width: min(86vw, 380px); height:100%;
  display:flex; flex-direction:column;
  padding: 26px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--tz-blue) 0%, #1d3149 100%);
  box-shadow: -24px 0 60px -24px rgba(0,0,0,0.55);
  transform: translateX(100%);
  visibility:hidden;
  transition: transform .72s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .72s;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.nav-drawer.is-open{
  transform: translateX(0);
  visibility:visible;
  transition: transform .72s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* ---- Cabecera del drawer: logo TZ (izq) + cerrar (der) ---- */
.nav-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; margin-bottom:20px;
}
.nav-drawer-logo{ height:46px; width:auto; display:block; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4)); }
.nav-drawer-close{
  background:transparent; border:0; color:#fff; cursor:pointer;
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; transition: background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-close:hover, .nav-drawer-close:focus-visible{ background: rgba(255,255,255,0.10); }

/* ---- Enlaces: micro-etiquetas en mayúsculas, una por línea ---- */
.nav-drawer-links{ display:flex; flex-direction:column; }
.nav-drawer-links a{
  display:block; padding:16px 0;
  color:#fff; text-decoration:none;
  font-family:'Inter', system-ui, sans-serif;
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  border-bottom:1px solid rgba(255,255,255,0.10);
  transition: color .2s ease, padding-left .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drawer-links a:hover,
.nav-drawer-links a:focus-visible{ color: var(--tz-light); padding-left:6px; }

/* ---- Único CTA en coral ---- */
.nav-drawer-cta{ margin-top:24px; width:100%; text-align:center; }

/* ---- Mostrar la hamburguesa solo donde el nav-links ya está oculto ---- */
@media (max-width: 1180px){
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-cta-row{ justify-self:end; display:flex; align-items:center; gap:12px; }
}

/* ---- Accesibilidad: respetar prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce){
  .nav-drawer,
  .nav-drawer-backdrop,
  .nav-burger-line,
  .nav-drawer-links a{ transition: none !important; }
}