/* ============================================================
   Capa responsive · Zanellato Viajes
   Escala fluida con clamp() para que todo entre en cualquier
   pantalla, de 320px a 2560px. Se aplica sobre el diseño base
   usando los hooks data-* (por eso los !important).
   ============================================================ */

/* ---------- 1. BASE FLUIDA ---------- */
html { font-size: clamp(14.5px, 0.55vw + 12.6px, 17px); }
body { font-size: 1rem !important; line-height: 1.6 !important; }

/* ---------- 2. HERO ---------- */
/* Más alto que antes (el video se luce) pero acotado por vh,
   para que el formulario siempre entre en pantalla. */
[data-hero] {
  height: clamp(480px, 78vh, 780px) !important;
  min-height: 0 !important;
  padding: 0 0 clamp(96px, 15vh, 200px) !important;
}
[data-hero] h1 {
  font-size: clamp(23px, 2.4vw + 0.5rem, 44px) !important;
  line-height: 1.08 !important;
  margin-bottom: clamp(8px, 1.1vh, 16px) !important;
  max-width: 20ch !important;
}
[data-hero] p {
  font-size: clamp(14px, 0.55vw + 0.65rem, 18px) !important;
  line-height: 1.5 !important;
  margin-bottom: clamp(12px, 2vh, 24px) !important;
  max-width: 46ch !important;
}
[data-heroactions] { gap: clamp(8px, 1vw, 14px) !important; }
[data-heroactions] .btn,
[data-heroactions] a {
  min-height: clamp(42px, 5.2vh, 52px) !important;
  padding: 0 clamp(16px, 1.8vw, 28px) !important;
  font-size: clamp(13.5px, 0.4vw + 0.6rem, 16.5px) !important;
  display: inline-flex !important;
  align-items: center !important;
}
[data-herodots] { top: clamp(14px, 2.2vh, 26px) !important; right: clamp(14px, 1.6vw, 26px) !important; }

/* ---------- 3. BUSCADOR / FORMULARIO ---------- */
[data-searchbar] { margin-top: clamp(-210px, -19vh, -120px) !important; }
/* el contenedor de ancho no lleva fondo */
[data-searchbar] > div { background: transparent !important; }
/* panel translúcido: es el nieto (el que tiene el border-radius) */
[data-searchbar] > div > div {
  background: rgba(232, 106, 102, .80) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 18px 48px rgba(20,17,15,.32) !important;
}
/* padding interno compacto */
[data-searchbar] > div > div > div {
  padding: clamp(10px, 1.1vw, 16px) clamp(13px, 1.4vw, 22px) clamp(11px, 1.2vw, 18px) !important;
}

/* tabs: sin scroll vertical nunca, scroll horizontal invisible */
[data-ttrack] {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
  flex-wrap: nowrap !important;
}
[data-ttrack]::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
[data-tab] {
  padding: clamp(5px, 0.7vh, 9px) clamp(8px, 0.9vw, 14px) !important;
  font-size: clamp(11.5px, 0.28vw + 0.52rem, 13.5px) !important;
  white-space: nowrap !important;
}
[data-tab] svg { width: clamp(13px, 0.9vw, 16px) !important; height: clamp(13px, 0.9vw, 16px) !important; }
[data-tprev], [data-tnext] {
  width: clamp(26px, 2.4vw, 34px) !important;
  height: clamp(26px, 2.4vw, 34px) !important;
  flex-shrink: 0 !important;
}

/* grilla del form: más compacta */
[data-sbgrid] { gap: clamp(6px, 0.6vw, 10px) !important; }
[data-sbgrid] label {
  font-size: clamp(10.5px, 0.2vw + 0.5rem, 12.5px) !important;
  margin-bottom: 3px !important;
  display: block !important;
  color: rgba(255,255,255,.94) !important;
}
[data-sbgrid] select,
[data-sbgrid] input {
  min-height: clamp(34px, 4.2vh, 42px) !important;
  padding: 0 clamp(8px, 0.7vw, 12px) !important;
  font-size: clamp(12.5px, 0.25vw + 0.56rem, 14.5px) !important;
  border-radius: 9px !important;
}
[data-sbbtn] {
  min-height: clamp(34px, 4.2vh, 42px) !important;
  padding: 0 clamp(13px, 1.3vw, 22px) !important;
  font-size: clamp(12.5px, 0.25vw + 0.56rem, 14.5px) !important;
  border-radius: 9px !important;
}
/* títulos y pie del panel */
[data-searchbar] h2 { font-size: clamp(14px, 0.5vw + 0.58rem, 17px) !important; margin-bottom: 0 !important; }
[data-searchbar] small,
[data-searchbar] [data-sbsub] { font-size: clamp(10.5px, 0.2vw + 0.5rem, 12.5px) !important; }
/* apretar los bloques internos del panel */
[data-searchbar] [data-sbhead] { margin-bottom: clamp(7px, 0.9vh, 11px) !important; }
[data-searchbar] [data-sbfoot] { margin-top: clamp(7px, 0.9vh, 11px) !important; padding-top: clamp(6px, 0.8vh, 10px) !important; }
[data-searchbar] [data-sbfoot] a { min-height: clamp(32px, 4vh, 38px) !important; font-size: clamp(12px, 0.22vw + 0.54rem, 14px) !important; padding: 0 clamp(11px,1vw,18px) !important; }
[data-searchbar] [data-ttabs] { margin-bottom: clamp(8px, 1vh, 13px) !important; }

/* ---------- 4. TRUST BAR (pie del panel) ---------- */
[data-trust] > *,
[data-searchbar] [data-trustitem] {
  font-size: clamp(10.5px, 0.22vw + 0.5rem, 13px) !important;
  gap: clamp(5px, 0.5vw, 9px) !important;
}
[data-trust] { padding: clamp(7px, 1vh, 12px) 0 !important; }

/* ---------- 5. TIPOGRAFÍA GENERAL ---------- */
h2 { font-size: clamp(21px, 1.5vw + 0.62rem, 40px) !important; line-height: 1.15 !important; }
h3 { font-size: clamp(16px, 0.7vw + 0.62rem, 24px) !important; }
section { padding-top: clamp(38px, 6vh, 92px) !important; padding-bottom: clamp(38px, 6vh, 92px) !important; }

/* ---------- 6. CARDS ---------- */
[data-featured] { min-height: clamp(380px, 52vh, 560px) !important; }
[data-featured] h3 { font-size: clamp(21px, 1.5vw + 0.6rem, 32px) !important; }
[data-asim] { gap: clamp(12px, 1.4vw, 22px) !important; }

/* ---------- 7. HEADER / TOPBAR ---------- */
[data-header] { padding: clamp(7px, 1vh, 12px) 0 !important; }
[data-logo] { height: clamp(34px, 3.2vw, 56px) !important; width: auto !important; }
[data-nav] { gap: clamp(12px, 1.4vw, 28px) !important; }
[data-nav] a { font-size: clamp(13px, 0.32vw + 0.6rem, 15.5px) !important; }
[data-topleft], [data-header] [data-headphone] { font-size: clamp(12px, 0.28vw + 0.58rem, 15.5px) !important; }


/* ============================================================
   NAVBAR FLOTANTE dentro del video (ref: aiken.ar)
   El header deja de ser una barra blanca full-width y pasa a ser
   una píldora blanca flotando sobre el hero.
   ============================================================ */
@media (min-width: 721px) {
  /* la topbar coral queda sobre el video, translúcida */
  body > div > div:first-child {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 51 !important;
    background: rgba(242,92,92,.86) !important;
    -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  }
  [data-header] {
    position: absolute !important;
    top: clamp(48px, 6vh, 66px) !important;
    left: 0 !important; right: 0 !important;
    z-index: 50 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* la píldora es el contenedor interno */
  [data-header] > div {
    background: rgba(255,255,255,.95) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    border-radius: 999px !important;
    padding: clamp(8px, 1vh, 12px) clamp(14px, 1.4vw, 22px) !important;
    box-shadow: 0 10px 34px rgba(20,17,15,.20) !important;
    max-width: 1150px !important;
  }
  /* logo más grande */
  [data-logo] { height: clamp(42px, 4vw, 62px) !important; }
  /* el hero arranca arriba de todo: topbar y header flotan encima */
  [data-hero] { margin-top: 0 !important; }
  body > div > div:first-child ~ [data-hero],
  [data-hero] { padding-top: clamp(96px, 12vh, 140px) !important; }
  /* al scrollear la píldora se pega arriba */
  [data-header].zfixed { position: fixed !important; top: 10px !important; }
  [data-header].zfixed > div { box-shadow: 0 12px 38px rgba(20,17,15,.26) !important; }
}
@media (max-width: 720px) {
  [data-logo] { height: 38px !important; }
}

/* ---------- 8. BREAKPOINTS ---------- */

/* Notebooks 13" y pantallas bajas: el form es lo que tiene que entrar */
@media (max-height: 820px) {
  [data-hero] { height: clamp(400px, 76vh, 620px) !important; padding-bottom: clamp(86px, 13vh, 150px) !important; }
  [data-hero] h1 { font-size: clamp(22px, 2vw + 0.4rem, 34px) !important; }
  [data-hero] p { font-size: clamp(13px, 0.4vw + 0.6rem, 15.5px) !important; margin-bottom: 10px !important; }
}
@media (max-width: 1100px) and (max-height: 820px) {
  [data-hero] { height: clamp(300px, 58vh, 430px) !important; padding-bottom: clamp(76px, 12vh, 120px) !important; }
  [data-searchbar] { margin-top: clamp(-180px, -19vh, -110px) !important; }
}
@media (max-height: 760px) {
  [data-hero] h1 { font-size: clamp(21px, 1.8vw + 0.4rem, 31px) !important; }
  [data-hero] p { font-size: 13.5px !important; margin-bottom: 9px !important; }
  [data-searchbar] { margin-top: clamp(-190px, -18vh, -110px) !important; }
}
@media (max-height: 700px) {
  [data-hero] { height: clamp(340px, 70vh, 500px) !important; }
  [data-hero] p { display: none !important; }
  section { padding-top: 34px !important; padding-bottom: 34px !important; }
}

/* Tablet: el form pasa a 2 columnas */
@media (max-width: 1080px) {
  [data-sbgrid] { grid-template-columns: 1fr 1fr !important; }
  [data-sbgrid] [data-sbbtn] { grid-column: 1 / -1 !important; width: 100% !important; }
}

/* ---------- MOBILE (≤720px) — layout propio, no una versión achicada ----------
   Regla: el alto del video NO condiciona al formulario. El hero es un bloque
   con alto propio y el panel va DEBAJO, sin margin negativo. */
@media (max-width: 720px) {
  /* topbar: una sola línea, sin el texto largo */
  [data-topleft] { display: none !important; }
  /* la topbar es el 1er hijo del wrapper: centrar y achicar */
  [data-topleft]:first-child ~ div { justify-content: center !important; }
  body > div > div:first-child > div { justify-content: center !important; gap: 14px !important; }
  body > div > div:first-child a { font-size: 12px !important; }

  /* header compacto */
  [data-header] { padding: 8px 0 !important; }
  [data-logo] { height: 30px !important; }
  [data-header] a[href*="wa.me"], [data-header] a[style*="background:#f25c5c"] { min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; }

  /* HERO: alto propio, contenido centrado y contenido */
  [data-hero] {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    min-height: 46vh !important;
    padding: 0 0 8px !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  [data-hero] > div:last-of-type { padding-bottom: 26px !important; }
  [data-hero] h1 {
    font-size: clamp(19px, 5.2vw, 26px) !important;
    max-width: 100% !important;
    line-height: 1.12 !important;
    margin-bottom: 8px !important;
    text-wrap: balance;
  }
  [data-hero] p { display: none !important; }          /* el subhead vive en el panel */
  [data-hero] h1 + p, [data-hero] div[style*="uppercase"] { font-size: 10px !important; margin-bottom: 8px !important; }

  /* CTAs del hero: en fila, chicos */
  [data-heroactions] { flex-direction: row !important; gap: 8px !important; }
  [data-heroactions] > * {
    flex: 1 1 0 !important; width: auto !important; justify-content: center !important;
    min-height: 38px !important; font-size: 12.5px !important; padding: 0 10px !important;
  }
  [data-heroactions] svg { display: none !important; }

  /* PANEL: debajo del hero, sin pisar. Sólido (el blur sobre nada no aporta) */
  [data-searchbar],
  div[data-searchbar="1"] { margin-top: 0 !important; margin-block-start: 0 !important; }
  [data-searchbar] > div { padding: 0 12px !important; }
  [data-searchbar] > div > div {
    background: #f25c5c !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-radius: 0 0 18px 18px !important;
    border: none !important;
    box-shadow: 0 10px 26px rgba(20,17,15,.16) !important;
    margin-top: 0 !important;   /* en mobile NO pisa: el panel arranca donde termina el video */
  }
  [data-searchbar] > div > div > div { padding: 14px 14px 16px !important; }

  /* tabs: scroll horizontal con peek */
  [data-tprev], [data-tnext] { display: none !important; }
  [data-ttrack] { gap: 2px !important; }
  [data-tab] { font-size: 12.5px !important; padding: 7px 11px !important; }

  /* campos: uno por fila, cómodos para el dedo */
  [data-sbgrid] { grid-template-columns: 1fr !important; gap: 9px !important; }
  [data-sbgrid] label { font-size: 12px !important; }
  [data-sbgrid] select, [data-sbgrid] input { min-height: 44px !important; font-size: 15px !important; }
  [data-sbbtn] { min-height: 46px !important; font-size: 15px !important; margin-top: 2px !important; }
  [data-searchbar] h2 { font-size: 16px !important; }
  [data-searchbar] [data-sbhead] { margin-bottom: 10px !important; }

  /* pie del panel: los 2 botones en fila */
  [data-sbgrid] ~ div { flex-direction: column !important; align-items: stretch !important; gap: 9px !important; }
  [data-sbgrid] ~ div a { flex: 1 !important; justify-content: center !important; min-height: 40px !important; font-size: 13.5px !important; }

  /* trust bar: 2×2 */
  [data-trust], [data-searchbar] > div > div > div:last-child {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 10px !important; }

  [data-herodots] { display: none !important; }
  section { padding-top: 34px !important; padding-bottom: 34px !important; }
}

/* Pantallas muy chicas */
@media (max-width: 400px) {
  [data-tab] { font-size: 12px !important; padding: 8px 10px !important; }
  [data-logo] { height: 30px !important; }
}

/* Pantallas grandes: no dejar que se estire de más */
@media (min-width: 1800px) {
  [data-hero] { height: min(760px, 72vh) !important; }
  [data-searchbar] { margin-top: clamp(-230px, -21vh, -150px) !important; }
}

/* video: que nunca se pase del contenedor */
[data-hero] video, [data-hero] img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: 100% !important; }

/* el FAB simple de WhatsApp se oculta: lo reemplaza el chatbot (chatbot.js) */
[data-wafloat], .wa-float { display: none !important; }

/* ---------- 9. UTILIDADES ---------- */
/* nunca scroll horizontal en el documento */
html, body { overflow-x: hidden !important; }
/* aire abajo para que el widget de navegación no tape contenido */
body { padding-bottom: clamp(56px, 7vh, 78px) !important; }
@media print { body { padding-bottom: 0 !important; } }

/* ============================================================
   HERO SIN FORMULARIO (variante activa)
   El buscador del hero se ocultó: la data mostraba que casi no
   se usa. El hero gana aire y el texto crece.
   Para volver a mostrarlo: agregar la clase "con-form" al <html>
   (o borrar este bloque).
   ============================================================ */
/* se oculta el formulario, NO la trust bar (que es el último hijo del panel) */
html:not(.con-form) [data-searchbar] > div > div > div:first-child { display: none !important; }
/* el panel deja de flotar y pasa a ser la franja de confianza */
html:not(.con-form) [data-searchbar] { margin-top: 0 !important; }
html:not(.con-form) [data-searchbar] > div { padding: 0 !important; max-width: none !important; }
html:not(.con-form) [data-searchbar] > div > div {
  background: #1a1614 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
html:not(.con-form) [data-searchbar] > div > div > div:last-child {
  max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important;
}

html:not(.con-form) [data-hero] {
  height: clamp(560px, 84vh, 900px) !important;
  padding: 0 0 clamp(40px, 6vh, 80px) !important;
  align-items: center !important;
}
html:not(.con-form) [data-hero] h1 {
  font-size: clamp(32px, 3.6vw + 0.6rem, 62px) !important;
  line-height: 1.05 !important;
  max-width: 17ch !important;
  margin-bottom: clamp(14px, 2vh, 24px) !important;
}
html:not(.con-form) [data-hero] p {
  display: block !important;
  font-size: clamp(16px, 0.7vw + 0.75rem, 21px) !important;
  line-height: 1.55 !important;
  max-width: 50ch !important;
  margin-bottom: clamp(22px, 3.4vh, 38px) !important;
}
html:not(.con-form) [data-hero] > div:last-of-type { padding-bottom: 0 !important; }
/* eyebrow un poco más presente */
html:not(.con-form) [data-hero] div[style*="uppercase"] {
  font-size: clamp(11px, 0.28vw + 0.55rem, 14px) !important;
  margin-bottom: clamp(14px, 2vh, 22px) !important;
}
/* CTAs más grandes: ahora son la única acción del hero */
html:not(.con-form) [data-heroactions] { gap: clamp(10px, 1.2vw, 18px) !important; }
html:not(.con-form) [data-heroactions] > * {
  min-height: clamp(46px, 5.8vh, 58px) !important;
  padding: 0 clamp(20px, 2.2vw, 34px) !important;
  font-size: clamp(14.5px, 0.45vw + 0.66rem, 18px) !important;
  border-radius: 12px !important;
}
/* la trust bar queda como cierre del hero, sobre papel */
html:not(.con-form) [data-trust] { padding: clamp(12px, 1.6vh, 20px) 0 !important; }
html:not(.con-form) [data-trust] > * { font-size: clamp(11.5px, 0.26vw + 0.54rem, 14.5px) !important; }

/* mobile sin formulario */
@media (max-width: 720px) {
  html:not(.con-form) [data-hero] {
    height: auto !important;
    min-height: 62vh !important;
    aspect-ratio: auto !important;
    padding: clamp(70px, 11vh, 110px) 0 clamp(28px, 5vh, 44px) !important;
    align-items: center !important;
  }
  html:not(.con-form) [data-hero] h1 { font-size: clamp(26px, 7.2vw, 36px) !important; max-width: 100% !important; }
  html:not(.con-form) [data-hero] p {
    display: block !important; font-size: 15.5px !important;
    max-width: 100% !important; margin-bottom: 22px !important;
  }
  html:not(.con-form) [data-heroactions] { flex-direction: column !important; }
  html:not(.con-form) [data-heroactions] > * { width: 100% !important; min-height: 48px !important; font-size: 15px !important; }
  html:not(.con-form) [data-heroactions] svg { display: inline !important; }
}
@media (min-width: 1800px) {
  html:not(.con-form) [data-hero] { height: min(900px, 80vh) !important; }
}