/* ============================================================================
   Travel Zone — Mobile polish  ·  ADITIVO (NO modifica style.css)
   Se carga como ÚLTIMA hoja en cada página, así gana a igual especificidad.
   TODO está dentro de @media móvil → el desktop queda pixel-idéntico.
   ============================================================================ */

/* ===== FIX 2: el FAB de WhatsApp nunca tapa contenido (todas las páginas) ===== */
@media (max-width: 767px){
  /* sube el FAB por el safe-area inferior de iOS */
  .fab{ bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  /* deja aire al final del footer para que su contenido (boletín, enlaces,
     barra inferior) se pueda desplazar por encima del FAB */
  .tz-footer{ padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ===== FIX 3: input del boletín con altura normal en móvil ===== */
@media (max-width: 767px){
  .tz-foot-news-row{ align-items: stretch; }
  .tz-foot-news-input{
    flex: 0 0 auto;          /* evita que el flex lo estire verticalmente */
    width: 100%;
    height: 46px;
    min-height: 0;
    padding: 0 14px;
    line-height: 46px;
    box-sizing: border-box;
  }
}

/* ===== FIX 4: Cap 04 — las SEIS pestañas accesibles por swipe horizontal ===== */
@media (max-width: 767px){
  .glass-tabs{
    width: 100%; max-width: 100%;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;   /* momentum en iOS */
    touch-action: pan-x;                 /* permite el swipe horizontal (Lenis no lo roba) */
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .glass-tabs::-webkit-scrollbar{ display: none; }
  .glass-tab{ flex: 0 0 auto; scroll-snap-align: start; }
}

/* ===== FIX 1: la caja de acceso del Hero cabe completa en el viewport (index) ===== */
@media (max-width: 767px){
  .access-hero{ left: 4%; right: 4%; }
  .access-hero .access{
    box-sizing: border-box;   /* el ancho incluye el padding → no se desborda */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px 16px 16px;  /* un poco más compacta */
  }
}