/* ═══════════════════════════════════════════════════════════
   AQUALUME — Mobile sync (última hoja, gana a todo)
   Viewport ≤768px: header, calendario, booking, checkout.
   No toca desktop.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Header home (nav) ──
     En 390px caben ~370px útiles. Logo palabra + ES + carrito +
     Reservar + burger = overflow. Solución: logo solo icono,
     idioma compacto, Reservar más estrecho. */
  .nav__inner {
    width: calc(100% - 1rem);
    max-width: 100%;
    gap: 0.35rem;
    padding-inline: 0;
  }

  .nav__logo {
    gap: 0.4rem;
    min-width: 0;
    flex: 0 1 auto;
  }

  .nav__logo img {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
  }

  .nav__word {
    font-size: 0.72rem !important;
  }

  .nav__word small {
    display: none !important; /* oculta "ADVENTURES" en móvil */
  }

  .nav__end {
    gap: 0.25rem !important;
    flex-shrink: 0;
  }

  .lang-select {
    padding: 0.3rem 0.35rem !important;
    font-size: 0.65rem !important;
    max-width: 4.6rem;
    min-height: 36px;
  }

  .nav__reserve {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.65rem !important;
    white-space: nowrap;
  }

  .cart-nav-btn {
    padding: 0.35rem 0.5rem !important;
    min-width: 2rem;
    justify-content: center;
  }

  .cart-nav-btn [data-i18n="nav_cart"] {
    display: none; /* solo muestra el número */
  }

  .nav__burger {
    min-width: 36px;
    min-height: 36px !important;
    padding: 0.35rem !important;
  }

  /* Site-chrome header (checkout, destinos, etc.) */
  .site-chrome-page .header__inner,
  .site-chrome-page .header {
    gap: 0.35rem;
  }

  .site-chrome-page .header__logo-text {
    font-size: 0.65rem !important;
    max-width: 6.5rem;
    line-height: 1.1;
  }

  .site-chrome-page .header__actions {
    gap: 0.25rem !important;
  }

  /* ── Calendario: el bug era min-height:44px (tap) + aspect-ratio:1
     → celdas de 44×44 que no caben en 7 columnas dentro de ~200px.
     Aquí anulamos el tap mínimo SOLO en celdas del calendario. */
  .avail-cal {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.5rem !important;
    overflow: hidden;
  }

  .avail-cal__week,
  .avail-cal__grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0.15rem !important;
  }

  .avail-cal__cell,
  button.avail-cal__cell {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    font-size: 0.7rem !important;
    padding: 0 !important;
    border-radius: 6px;
  }

  .avail-cal__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 0.9rem;
    font-size: 0.68rem;
    text-align: center;
  }

  .avail-cal__legend > * {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }

  /* ── Booking: cascada de paddings comía el ancho ──
     section 28 + caribe 24 + inner 20 ≈ 72px por lado.
     En 390px dejan solo ~246px → calendario aplastado. */
  .booking-section,
  .sec--booking-palms .booking-section {
    padding: 1rem !important;
    gap: 1rem !important;
    border-radius: 20px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .booking-caribe,
  .booking-caribe.booking-glass {
    padding: 0.75rem !important;
    border-radius: 18px !important;
  }

  .booking-caribe__inner {
    padding: 0.75rem !important;
  }

  .booking-form,
  .booking-form-grid {
    width: 100%;
    max-width: 100%;
  }

  .booking-field,
  .booking-field--calendar {
    width: 100%;
    max-width: 100%;
  }

  .booking-field label,
  .booking-form label {
    display: block;
    text-align: center;
    letter-spacing: 0.08em;
  }

  .booking-form select,
  .booking-form input,
  .booking-field select,
  .booking-field input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* Hotel picker: a veces se desborda */
  .hotel-picker,
  .hotel-picker__input,
  .hotel-picker__list {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Hero / textos centrados en móvil (pedido explícito) */
  .hero-premium__left,
  .hero-premium__content,
  .hero-premium__title,
  .hero-premium__script,
  .hero-premium__lead,
  .hero-premium__perks,
  .hero-premium__actions,
  .hero-premium__trust,
  .phero__copy,
  .hero__copy,
  .premium-hero__copy,
  .page-hero,
  .page-hero__copy,
  .sec__head,
  .sec__head--center {
    text-align: center !important;
  }

  .hero-premium__perks,
  .hero-premium__actions,
  .hero-premium__trust {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-premium__perk {
    justify-content: center;
  }

  .hero-premium__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-premium__actions .btn,
  .hero-premium__actions a.btn {
    width: 100%;
    max-width: 20rem;
    justify-content: center;
  }

  .phero__copy .btn-row,
  .hero__copy .btn-row,
  .premium-hero__copy .btn-row {
    justify-content: center !important;
  }

  /* Checklist / perks del booking */
  .booking-caribe__perks,
  .booking-perks,
  .trust-row {
    justify-content: center !important;
    text-align: center;
    flex-wrap: wrap;
  }

  /* Checkout: el aside se salía 12px por padding del contenedor */
  .checkout-layout,
  .container.checkout-layout {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0.85rem !important;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .checkout-main,
  .checkout-card,
  .checkout-summary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Mapa del home: iframe con width fijo */
  .map-box,
  .map-box iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Footer bar: links en wrap, no en una sola línea */
  .foot__bar,
  .foot__bar-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center;
    gap: 0.5rem 0.85rem !important;
    max-width: 100%;
  }

  .foot__bar-links {
    display: flex;
    width: 100%;
  }

  /* Cookie banner: botones a ancho completo, centrados */
  .cookie-banner,
  .cookie-consent {
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    max-width: calc(100% - 1.5rem) !important;
  }

  .cookie-banner__actions,
  .cookie-consent__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: stretch;
  }

  .cookie-banner__actions .btn,
  .cookie-consent__actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Orbes / glows decorativos: no empujan el layout */
  .flow-bg,
  .flow-bg__orb,
  .experience-media__glow {
    pointer-events: none;
    max-width: none;
  }

  .flow-bg,
  .experience-media {
    overflow: hidden;
    clip-path: inset(0);
  }
}

/* Móvil estrecho (≤380): aún más compacto */
@media (max-width: 380px) {
  .nav__word {
    display: none !important; /* solo logo circular */
  }

  .nav__reserve {
    padding: 0.35rem 0.55rem !important;
  }

  .lang-select {
    max-width: 3.6rem;
  }

  .booking-section,
  .sec--booking-palms .booking-section {
    padding: 0.75rem !important;
  }
}