/* ============================================================
   responsive.css — Capa de adaptabilidad (NO altera la identidad)
   ------------------------------------------------------------
   Se carga DESPUÉS de theme.css. No toca colores, bordes, radios,
   sombras ni fuentes (todo eso vive en los tokens de theme.css).
   Solo reacomoda layout y escala tipografías de forma fluida.

   Técnica: el diseño original define los grids como estilos INLINE
   (p. ej. style="grid-template-columns:1fr 360px"). Para no editar
   decenas de estilos en línea ni el JS que los genera, se atacan con
   selectores de atributo [style*="..."] + !important, que solo aplican
   en los anchos de pantalla indicados.
   ============================================================ */

/* ---------- Tipografía fluida (todas las pantallas) ----------
   clamp() reduce el tamaño en móvil y lo mantiene idéntico en desktop;
   conserva la fuente y el peso originales. */
[style*="font-size:58px"] { font-size: clamp(32px, 8.5vw, 58px) !important; }
[style*="font-size:34px"] { font-size: clamp(25px, 6.5vw, 34px) !important; }
[style*="font-size:32px"] { font-size: clamp(24px, 6vw, 32px) !important; }
[style*="font-size:30px"] { font-size: clamp(23px, 5.6vw, 30px) !important; }
[style*="font-size:28px"] { font-size: clamp(22px, 5.4vw, 28px) !important; }
[style*="font-size:25px"] { font-size: clamp(20px, 5vw, 25px) !important; }
[style*="font-size:19px"] { font-size: clamp(15px, 3.6vw, 19px) !important; }

/* Evita desbordes horizontales por contenidos anchos */
html, body { overflow-x: hidden; }
img, svg, .ph { max-width: 100%; }

/* Inputs (todas las pantallas): que respeten su contenedor. Clave en iOS Safari, donde
   los <input type="datetime-local"> nativos NO respetan width:100% y tienen un ancho
   mínimo propio que desbordaba las tarjetas. appearance:none resetea ese sizing nativo. */
input, select, textarea { box-sizing: border-box; max-width: 100%; }
input[type="datetime-local"], input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
}

/* ============================================================
   TABLET / MÓVIL GRANDE  (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {

  /* Hero: panel de búsqueda (3 columnas → 1) */
  [style*="grid-template-columns:1.4fr 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Layouts principales con sidebar (contenido + 360px → apilado).
     minmax(0, 1fr) — NO "1fr" — para que la columna pueda encogerse por debajo del
     contenido y no desborde el viewport (1fr = minmax(auto,1fr) y el 'auto' no encoge). */
  [style*="1fr 360px"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Sidebars sticky: dejan de fijarse al apilarse */
  [style*="top:140px"] { position: static !important; top: auto !important; }

  /* Resultados: tarjeta de segmento (carrusel | info | precio → apilado) */
  #results-list .selectable { grid-template-columns: minmax(0, 1fr) !important; }
  #results-list .selectable > div { border-left: 0 !important; border-right: 0 !important; }
  #results-list .selectable > div + div { border-top: 1px solid var(--line) !important; }

  /* Coberturas: tarjeta (radio | texto | precio) — el precio baja a su propia fila */
  [style*="grid-template-columns:auto 1fr auto"] { grid-template-columns: auto minmax(0, 1fr) !important; }
  [style*="grid-template-columns:auto 1fr auto"] > div:last-child {
    grid-column: 1 / -1 !important;
    text-align: left !important;
    min-width: 0 !important;
    padding-left: 40px;
  }

  /* Beneficios (4 → 2) y cómo funciona (4 → 2) */
  #benefits { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Conectores de pasos: solo tienen sentido en la fila de 4 columnas */
  #how-steps .how-arrow { display: none !important; }
}

/* ============================================================
   MÓVIL  (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {

  /* Cualquier rejilla de 2 (o 3) columnas → 1 (formularios, docs, métricas) */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Beneficios y cómo funciona → 1 columna */
  #benefits { grid-template-columns: minmax(0, 1fr) !important; }
  #how-steps { grid-template-columns: minmax(0, 1fr) !important; }

  /* Hero más compacto en alto */
  [style*="min-height:660px"] { min-height: auto !important; }
  [style*="padding-top:96px"] { padding-top: 88px !important; }

  /* Stepper: se ocultan las etiquetas y se conservan los puntos/líneas */
  .step-lbl { display: none !important; }
  .step-line { width: 20px !important; margin: 0 6px !important; }

  /* Banda de precio (pantallas 3–5): que el total y el botón no se corten */
  .sticky-top [style*="font-size:26px"] { font-size: 22px !important; }

  /* Footer: columnas más juntas al apilar */
  footer .flex { gap: 26px !important; }

  /* Botones a ancho completo en acciones apiladas para mejor tap-target */
  .btn-lg, .btn-xl { width: 100%; }
  .between .btn-lg { width: auto; }

  /* Filas de acción con DOS botones grandes (Volver + Continuar): en desktop van lado a
     lado (.between), pero en móvil se encimaban porque juntos rebasan el ancho. Se apilan
     a ancho completo (primario arriba con column-reverse). :has() lo detecta sin tocar las
     vistas; navegadores sin :has() conservan el comportamiento actual. */
  .between:has(> .btn-lg + .btn-lg) { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .between:has(> .btn-lg + .btn-lg) .btn-lg { width: 100% !important; }

  /* Nav: en móvil el CTA "Mi reservación" queda solo como icono. Con la etiqueta
     completa el conjunto (logo + Mi reservación + toggle ES/EN) solo cabe a
     ≥~417px, así que en teléfonos desbordaba el viewport. La etiqueta vuelve en
     tablet/desktop (≥601px). El texto sigue en el DOM para lectores de pantalla. */
  .btn-quiet[href="/Reserva/ConsultarFolio"] {
    font-size: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================================
   MÓVIL PEQUEÑO  (≤ 380px) — ajustes finos de respiro
   ============================================================ */
@media (max-width: 380px) {
  :root { --pad: 14px; }
  .btn { padding: 0 14px; }
}