/* =====================================================================
   DURÁN TRAVEL BY FRAVEO — Responsive (mobile-first breakpoints)
   ---------------------------------------------------------------------
   Breakpoints de referencia: 320 · 360 · 375 · 390 · 430 · 768 · 1024 · 1440
   Estrategia: el CSS base (styles.css) define el layout amplio de
   escritorio; aquí lo adaptamos hacia abajo. Se prioriza que nada
   desborde y que las áreas táctiles sean cómodas.
   ===================================================================== */

/* =========================================================
   ≤ 1080px — Tablet horizontal / laptop pequeña
   ========================================================= */
@media (max-width: 1080px) {
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-form { grid-template-columns: repeat(2, 1fr); }
  .quote-form .btn { grid-column: 1 / -1; }
}

/* =========================================================
   ≤ 960px — Activar navegación móvil
   ========================================================= */
@media (max-width: 960px) {
  :root { --header-h: 72px; }

  .nav,
  .header-actions .btn:not(.nav-toggle) { display: none; }
  .nav-toggle { display: inline-flex; }

  .benefits-grid,
  .travelers-grid { grid-template-columns: repeat(2, 1fr); }

  .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  .contact-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }

  .steps,
  .value-grid { grid-template-columns: 1fr; gap: 1rem; }

  .destinos-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* =========================================================
   ≤ 768px — Tablet vertical / móvil grande
   ========================================================= */
@media (max-width: 768px) {
  .hero { min-height: 88vh; min-height: 88svh; align-items: center; }
  .hero__actions { gap: 0.7rem; }

  .destinos-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
  }
  .destino-card.wide,
  .destino-card.tall { grid-column: auto; grid-row: auto; }

  .quick-quote { margin-top: -2rem; }
}

/* =========================================================
   ≤ 600px — Móvil
   ========================================================= */
@media (max-width: 600px) {
  :root {
    --section-pad-y: clamp(3rem, 2.5rem + 3vw, 4rem);
    --space-gutter: 20px; /* márgenes laterales cómodos */
  }

  /* Hero apilado y editorial */
  .hero { min-height: 86vh; min-height: 86svh; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { gap: 0.5rem; }
  .hero__trust .chip { font-size: 0.8rem; padding: 0.45rem 0.75rem; }
  .hero__scroll { display: none; }

  /* Formulario rápido vertical */
  .quote-form { grid-template-columns: 1fr; }

  /* Una tarjeta por fila */
  .packages-grid,
  .benefits-grid,
  .travelers-grid { grid-template-columns: 1fr; }

  .package-card__actions { flex-direction: column; }

  /* Destinos: una columna, sin recortes raros */
  .destinos-mosaic { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .destinos-grid { grid-template-columns: 1fr; }
  .destinos-grid .destino-card { aspect-ratio: 16 / 11; }

  .traveler-card { aspect-ratio: 16 / 11; }

  /* Formularios */
  .form-row { grid-template-columns: 1fr; }

  /* Footer apilado */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-bottom nav { flex-wrap: wrap; }

  /* Estadísticas compactas */
  .stats { gap: 1.5rem 2rem; }

  /* WhatsApp compacto: solo icono */
  .wa-float { padding: 0.85rem; gap: 0; }
  .wa-float .wa-label { display: none; }

  /* CTA final */
  .cta-actions .btn,
  .cta-band .btn { width: 100%; }
  .cta-actions { flex-direction: column; }

  /* Filtros con scroll horizontal suave si hace falta */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }

  .mobile-sub ul { grid-template-columns: 1fr; }
}

/* =========================================================
   ≤ 400px — Móviles pequeños (iPhone SE, Android 360, 320)
   ========================================================= */
@media (max-width: 400px) {
  :root { --space-gutter: 16px; }

  .brand__name { font-size: 1.12rem; }
  .brand__mark { width: 40px; height: 40px; }

  .hero__eyebrow { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
  .mobile-nav__link { font-size: 1.25rem; }

  .package-card__meta { flex-wrap: wrap; gap: 0.5rem; }
}

/* =========================================================
   Ajuste fino: en móvil reducir blur del glass (rendimiento)
   ========================================================= */
@media (max-width: 600px) {
  :root { --glass-blur: blur(12px) saturate(130%); }
  .site-header.scrolled { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

/* =========================================================
   Punteros gruesos (táctil): no depender de hover
   ========================================================= */
@media (hover: none) {
  .package-card:hover { transform: none; }
  .destino-card:hover img,
  .traveler-card:hover img,
  .package-card:hover .package-card__media img { transform: none; }
}