/* ═══════════════════════════════════════════════════════════════
   Maya Tours — Mobile-First Global Overrides
   Aplica a TODAS las páginas estáticas (index.html, /hoteles, /vuelos,
   /internacionales, /nacionales, /paquete, /carrito, /checkout, etc.)
   Cargar con: <link rel="stylesheet" href="/_styles/mobile-first.css">
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   Logo Maya Tours — protección de aspect ratio
   Se aplica a TODAS las viewports (no solo móvil).
   Sin estas reglas, otras reglas globales (max-width: 100%, etc.)
   pueden comprimir el logo. !important para sobreescribir inline styles
   incorrectos que algunas páginas pueden tener.
   ═══════════════════════════════════════════════ */
img[alt="Maya Tours"] {
  height: 52px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  flex-shrink: 0;
}
header img[alt="Maya Tours"],
nav img[alt="Maya Tours"] { height: 52px !important; }
footer img[alt="Maya Tours"] { height: 56px !important; }

@media (max-width: 480px) {
  header img[alt="Maya Tours"],
  nav img[alt="Maya Tours"] { height: 40px !important; }
  footer img[alt="Maya Tours"] { height: 44px !important; }
}

/* Reset común para móvil */
@media (max-width: 639px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Contenedor base */
  .mt-container,
  [class*="container"]:not([class*="containerless"]) {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
  }
  /* Headings — escalar a móvil */
  h1, .h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.1 !important; word-break: normal !important; overflow-wrap: break-word !important; }
  h2, .h2, .h-display { font-size: clamp(1.4rem, 6vw, 2rem) !important; line-height: 1.15 !important; }
  h3, .h3 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; line-height: 1.2 !important; }
  /* Inputs/selects: 16px previene zoom iOS */
  input[type=text], input[type=date], input[type=number], input[type=tel],
  input[type=email], input[type=password], input[type=search], select, textarea {
    font-size: 16px !important;
  }
  /* Padding global de sections grandes */
  section, .section { padding-left: 0 !important; padding-right: 0 !important; }
  /* Grids comunes — forzar 1 col */
  [data-mobile-stack] { display: flex !important; flex-direction: column !important; gap: 14px !important; }
  /* Cards: full width imagen + texto stack */
  [data-hotel-card], [data-package-card], [data-flight-card] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-hotel-card] img, [data-package-card] img {
    width: 100% !important;
    max-height: 220px !important;
    object-fit: cover !important;
  }
  /* Search bars horizontales → stack vertical */
  [data-search-bar] {
    grid-template-columns: minmax(0, 1fr) !important;
    display: grid !important;
  }
  [data-search-bar] > * {
    border-right: none !important;
    border-bottom: 1px solid rgba(12,48,36,0.08) !important;
  }
  [data-search-bar] > *:last-child {
    border-bottom: none !important;
  }
  /* Results header con sort + view toggle */
  [data-results-header] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  [data-results-header] > * { width: 100% !important; }
  /* Filters sidebar */
  [data-filters-sidebar] {
    padding: 14px !important;
    margin-bottom: 0 !important;
  }
  /* Layout grid 2-col → stack */
  [data-layout-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  /* FAB botón flotante: no taparlo con bottom bar */
  [data-mobile-fab] { bottom: 88px !important; right: 14px !important; }
  /* Tablas: scroll horizontal */
  table { display: block !important; overflow-x: auto !important; max-width: 100% !important; }
  /* Imágenes nunca overflowean — EXCEPTO el logo Maya Tours (mantiene aspect ratio fijo) */
  img:not([alt="Maya Tours"]):not([data-keep-ratio]) {
    max-width: 100% !important;
    height: auto;
  }
  /* Footers: stack columns */
  .foot-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .office-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  /* Buttons CTA: min height 44px (tap target) */
  .btn, button:not([data-icon-only]) { min-height: 44px; }
  /* Sticky header search bar (top): compacto */
  [data-sticky-search] { padding: 8px 0 !important; }
  /* Modal/popovers full-width minus padding */
  [data-popover] {
    min-width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
  }
  /* Carrito: items stack vertical (imagen arriba, precio abajo) */
  [data-cart-item] {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 16px !important;
    gap: 12px !important;
  }
  [data-cart-item] > div:first-child {
    width: 100% !important;
    height: 200px !important;
  }
  [data-cart-item] > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Cart grid en general */
  .cart-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  /* H1 oversized en empty states */
  .h-display { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.1 !important; }
  /* Footer stacks */
  .foot-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* min-width: 0 universal en grid items para evitar overflow por min-content */
  [data-layout-grid] > *,
  [data-cart-item] > *,
  [data-hotel-card] > *,
  [data-search-bar] > * {
    min-width: 0 !important;
  }
  /* Imagen del cart-item: full width + min-height (override inline width: 140) */
  [data-cart-item] > div:first-child {
    width: 100% !important;
    height: 200px !important;
    max-width: 100% !important;
  }
  /* Precio del cart-item: NO text-align right (queda raro stacked) */
  [data-cart-item] > div:last-child {
    text-align: left !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  /* MobileBottomBar — z-index alto para no taparse con FAB */
  .mt-mobile-bar, [class*="mobile-bar" i] {
    z-index: 100 !important;
  }
  /* FAB search circular (típico abajo-derecha): subirlo */
  [data-fab], button[class*="fab" i], [class*="floating-search" i] {
    bottom: 88px !important;
  }
  /* Eyebrow + breadcrumbs: compactar */
  .eyebrow { font-size: 11px !important; }
}

/* Tablet (640-1023px): ajustes menores */
@media (min-width: 640px) and (max-width: 1023px) {
  .mt-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}