/* ═══════════════════════════════════════
   JetSMART Colombia — style.css
   ═══════════════════════════════════════ */

/* ── Variables ─────────────────────── */
:root {
  --blue:     #1B365D;
  --blue-mid: #204071;
  --cyan:     #00AEC7;
  --red:      #AF272F;
  --white:    #ffffff;
  --gray-bg:  #F5F5F5;
  --border:   #E0E0E0;
  --text:     #1c1c1c;
  --muted:    #666;
  --radius:   12px;
  --shadow:   0 2px 8px rgba(0,0,0,.1);
  --shadow-lg:0 6px 24px rgba(0,0,0,.15);
  --max-w:    1280px;
}

/* ── Reset ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', 'Lato', sans-serif; color: var(--text); background: #fff; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { display: block; max-width: 100%; }
input, select { font-family: inherit; }

/* ─────────────────────────────────────
   LOADER
   ───────────────────────────────────── */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  transition: opacity .4s ease, visibility .4s ease;
  /* CSS fallback: si el JS falla, desaparece solo */
  animation: loaderAutohide 0.4s ease 1.8s forwards;
}
#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
#page-loader img { width: 180px; }
@keyframes loaderAutohide {
  to { opacity: 0; visibility: hidden; pointer-events: none; z-index: -1; }
}
.loader-bar {
  width: 200px; height: 3px; background: #eee; border-radius: 3px; overflow: hidden;
}
.loader-bar-fill {
  height: 100%; width: 0; background: var(--cyan);
  animation: load-fill 1.5s ease forwards;
}
@keyframes load-fill { to { width: 100%; } }

/* ─────────────────────────────────────
   HEADER
   ───────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #fff;
  border-bottom: 4px solid var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .3s ease;
}
.site-header.hidden { transform: translateY(-100%); }

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo {
  display: flex; align-items: center;
  margin-right: 16px; flex-shrink: 0;
}
.header-logo img { height: 42px; }

.header-nav {
  display: flex; align-items: center;
  height: 100%;
  flex: 1;
}
.header-nav li {
  height: 100%;
  display: flex; align-items: center;
}
.header-nav li a,
.header-nav li > div {
  display: flex; align-items: center; gap: 4px;
  height: 100%; padding: 0 12px;
  font-size: 14px; font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.header-nav li a:hover,
.header-nav li > div:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.header-nav .caret {
  display: inline-block; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--blue-mid);
  margin-left: 2px;
}

.header-right {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.btn-login {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 999px;
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 600;
  transition: background .15s;
  white-space: nowrap;
}
.btn-login:hover { background: var(--blue-mid); }
.btn-login i { font-size: 14px; }

.header-country {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer;
}
.header-country img { width: 22px; border-radius: 2px; }

.header-hamburger {
  display: none; font-size: 22px; color: var(--red); padding: 4px;
}

/* ─────────────────────────────────────
   HERO CAROUSEL  
   ───────────────────────────────────── */
#rt-carousel {
  margin-top: 68px;
  position: relative;
  overflow: hidden;
}
.main-carousel {
  position: relative;
  background: #009DC4;
  overflow: hidden;
}
.carrusel-inner {
  display: flex;
  transition: transform .5s ease-in-out;
  will-change: transform;
}
.carrusel-item {
  flex: 0 0 100vw;
  min-width: 100vw;
  position: relative;
  height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.carrusel-item picture.desktop { position: absolute; inset: 0; }
.carrusel-item picture.desktop img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.carrusel-item picture.mobile { display: none; }
.carrusel-item .caja {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  width: 100%; padding: 20px 16px;
  cursor: pointer;
}
.carrusel-item .caja img {
  max-height: 290px; max-width: 100%;
  object-fit: contain;
}

/* Arrow buttons */
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.25); border: 2px solid rgba(255,255,255,.5);
  color: #fff; font-size: 18px; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.carousel-btn:hover { background: rgba(255,255,255,.4); }
.carousel-btn.desktop-left  { left: 14px; }
.carousel-btn.desktop-right { right: 14px; }

/* Dots */
.carousel-indicators {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.carrusel-indicator, .mainCarousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  display: block; cursor: pointer;
  transition: background .2s, transform .2s;
}
.carrusel-indicator.active,
.mainCarousel-dot.active { background: #fff; transform: scale(1.25); }

/* ─────────────────────────────────────
   QUICK TABS (Vuelos / Administra / etc)
   ───────────────────────────────────── */
.quick-tabs {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.quick-tabs-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 16px; display: flex;
}
.quick-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; font-size: 13.5px; font-weight: 700;
  color: var(--muted); border-bottom: 3px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
  transition: color .15s, border-color .15s; cursor: pointer;
}
.quick-tab i { font-size: 15px; }
.quick-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.quick-tab:hover  { color: var(--cyan); }

/* ─────────────────────────────────────
   SEARCH BOX
   ───────────────────────────────────── */
.search-section { background: #fff; padding: 0 16px 20px; }
.search-box {
  max-width: var(--max-w); margin: 0 auto;
  background: #fff; border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 12px 12px;
  overflow: hidden;
}

/* Sub-tabs */
.search-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 16px; }
.search-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; font-size: 13px; font-weight: 700;
  color: #999; border-bottom: 3px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
  transition: color .15s; cursor: pointer;
}
.search-tab i { font-size: 14px; }
.search-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.search-tab:hover  { color: var(--blue); }

/* Form */
.search-form-body { padding: 14px 16px 0; }
.trip-selector { display: flex; gap: 22px; margin-bottom: 13px; }
.trip-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.trip-opt input { accent-color: var(--cyan); width: 15px; height: 15px; }

/* Fields row */
.search-fields {
  display: flex; border: 1.5px solid #ccc; border-radius: 8px;
  overflow: hidden; margin-bottom: 0;
}
.sfield {
  flex: 1; display: flex; align-items: center;
  border-right: 1px solid #ddd; min-width: 0;
  cursor: pointer; transition: background .12s;
}
.sfield:last-child { border-right: none; }
.sfield:hover { background: #fafafa; }
.sfield.sm { flex: .7; }
.sfield-inner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; width: 100%; }
.sfield-icon { color: #bbb; flex-shrink: 0; }
.sfield-icon i { font-size: 15px; }
.sfield-text { flex: 1; min-width: 0; }
.sfield-label { font-size: 10px; color: #aaa; display: block; }
.sfield-val   { font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfield-caret { color: #ccc; }
.sfield-caret i { font-size: 10px; }

.swap-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border-right: 1px solid #ddd;
  background: #fafafa; flex-shrink: 0;
}
.btn-swap {
  width: 28px; height: 28px; border: 1.5px solid #ccc; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #666; transition: all .2s;
}
.btn-swap:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-swap i { font-size: 12px; }

/* Bottom row */
.search-bottom {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0 14px; flex-wrap: wrap;
}
.chk-millas { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #444; }
.chk-millas input { accent-color: var(--blue); }
.link-rearmar { font-size: 12px; color: var(--cyan); display: flex; align-items: center; gap: 4px; }
.link-rearmar i { font-size: 11px; }
.search-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.link-promo { font-size: 12px; color: var(--cyan); display: flex; align-items: center; gap: 4px; }
.btn-buscar {
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 10px 22px; border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
  transition: background .15s; white-space: nowrap;
}
.btn-buscar:hover { background: #8c1f26; }
.btn-buscar i { font-size: 15px; }

/* ─────────────────────────────────────
   DESTINOS SECTION
   ───────────────────────────────────── */
.destinos-section { padding: 24px 0 0; }
.destinos-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 16px;
}

/* Header row */
.destinos-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.destinos-title {
  display: flex; align-items: center; gap: 8px;
}
.destinos-title i { font-size: 16px; color: var(--cyan); }
.ofertas-desde { display: flex; align-items: center; gap: 6px; }
.ofertas-desde span { font-size: 14px; color: var(--blue); }
.custom-select-wrapper { display: flex; align-items: center; gap: 4px; cursor: pointer; }
#origin-select {
  font-size: 18px; font-weight: 700; color: var(--cyan);
  text-decoration: underline; text-underline-offset: 2px;
}
.custom-select-wrapper i { color: var(--cyan); font-size: 12px; }

/* Tasas toggle */
.tasas-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; }
.toggle-switch {
  position: relative; width: 42px; height: 22px;
  background: var(--cyan); border-radius: 11px; cursor: pointer;
  transition: background .2s;
}
.toggle-switch::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: right .2s;
}
.toggle-switch.off { background: #ccc; }
.toggle-switch.off::after { right: 22px; }

/* Filter chips */
.filter-chips { display: flex; gap: 8px; margin-bottom: 16px; }
.filter-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700;
  border: 1.5px solid #ccc; color: #666; background: #fff;
  cursor: pointer; transition: all .15s;
}
.filter-chip.active { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.filter-chip i { font-size: 11px; }

/* Destinations carousel container */
.destinos-carousel-wrapper { position: relative; }
.destinos-desktop { overflow: hidden; }
.carrusel-inner.destinos {
  gap: 0; flex-wrap: nowrap;
  transition: transform .4s ease;
}

/* Individual destination card (real JetSMART structure) */
.card {
  background: #fff; border-radius: 10px;
  overflow: hidden; border: 1px solid #e8e8e8;
  box-shadow: var(--shadow);
  width: 218px; flex-shrink: 0;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-img-container { position: relative; overflow: hidden; height: 120px; }
.card-img-top { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-img-overlay { display: none; }
.card-body { padding: 10px 12px 12px; }
.flight-title { font-size: 13px; font-weight: 700; color: var(--blue); padding-bottom: 8px; line-height: 1.3; }
.tipo-vuelo { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.destinos-card-label {
  font-size: 9.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 3px;
  background: var(--cyan); color: #fff;
}
.destinos-card-label.rt-hidden { display: none; }
.precios-container { margin-top: 6px; }
.precio-oferta { display: flex; align-items: baseline; gap: 2px; }
.precio-moneda { font-size: 11px; font-weight: 600; color: #666; }
.precio-valor { font-size: 21px; font-weight: 900; color: var(--text); }
.precio-valor .price-sign { font-size: 13px; }
.precio-info { font-size: 11px; color: #999; margin-top: 2px; }
.sin-tasas { display: none; }
.con-tasas { display: flex; flex-direction: column; }

/* Show/hide based on tasas toggle */
.tasas-off .sin-tasas { display: flex !important; flex-direction: column; }
.tasas-off .con-tasas { display: none !important; }

/* Carousel nav arrows (destinations) */
.destinos-carrusel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1.5px solid #ddd;
  color: #555; display: flex; align-items: center; justify-content: center;
  z-index: 5; box-shadow: var(--shadow); cursor: pointer;
  transition: all .2s;
}
.destinos-carrusel-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.destinos-carrusel-btn.left  { left: -16px; }
.destinos-carrusel-btn.right { right: -16px; }
.destinos-carrusel-btn i { font-size: 12px; }

/* Indicators */
.carrusel-indicators {
  display: flex; justify-content: center;
  gap: 8px; padding: 14px 0 8px;
}

/* Ver todos */
.ver-destinos-link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 0 24px; font-size: 13px; font-weight: 700; color: var(--cyan);
}
.ver-destinos-link:hover { text-decoration: underline; }
.ver-destinos-link i { font-size: 12px; }

/* ─────────────────────────────────────
   WIDGETS / PROMOS
   ───────────────────────────────────── */
.widgets-section {
  background: var(--gray-bg);
  padding: 8px 16px 16px;
}
.widgets-inner {
  max-width: var(--max-w); margin: 0 auto;
}

/* AYCF full banner */
.widget-aycf { margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.widget-aycf a { display: block; }
.widget-aycf img { width: 100%; display: block; border-radius: 12px; }

/* 2×2 grid */
.widgets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.widget-highlight {
  display: block; border-radius: 10px; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  box-shadow: var(--shadow);
}
.widget-highlight:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.widget-highlight img { width: 100%; display: block; }

/* ─────────────────────────────────────
   SHORTCUTS
   ───────────────────────────────────── */
.shortcuts-section {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.shortcuts-container {
  max-width: var(--max-w); margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.shortcut-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 16px; color: var(--blue);
  border-right: 1px solid var(--border);
  transition: color .15s, background .15s;
}
.shortcut-btn:last-child { border-right: none; }
.shortcut-btn:hover { color: var(--cyan); background: #f8fdff; }
.shortcut-left { display: flex; align-items: center; gap: 10px; }
.icon-container i { font-size: 18px; color: var(--cyan); }
.shortcut-text { font-size: 13.5px; font-weight: 700; }
.shortcut-btn .fa-chevron-right { font-size: 13px; color: #bbb; }

/* ─────────────────────────────────────
   ALIANZAS SECTION
   ───────────────────────────────────── */
.alianzas-section { padding: 28px 16px 36px; background: #fff; }
.alianzas-inner { max-width: var(--max-w); margin: 0 auto; }
.alianzas-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.alianzas-title i { font-size: 22px; color: var(--cyan); }
.alianzas-title .text-container { font-size: 19px; font-weight: 700; color: var(--text); }
.alianzas-content .rttw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.alianzas-content .card {
  width: auto; cursor: pointer; transition: transform .2s;
  box-shadow: none; border: none;
}
.alianzas-content .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.alianzas-content .card-img-container { height: 165px; border-radius: 10px; margin-bottom: 10px; }
.alianzas-content .card-img-top { border-radius: 10px; }
.card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.card-text  { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.separator  { height: 1px; background: var(--border); margin: 8px 0; }
.card-link  { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--cyan); }
.card-link:hover { text-decoration: underline; }
.card-link i { font-size: 11px; }

/* ─────────────────────────────────────
   HIGHLIGHTS / FAQ STEPS
   ───────────────────────────────────── */
.highlights-section {
  background: #fff; border-top: 1px solid var(--border);
  padding: 30px 16px 0;
}
.highlights-inner { max-width: var(--max-w); margin: 0 auto; }
.highlights-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px;
  gap: 12px; flex-wrap: wrap;
}
.highlights-title { display: flex; align-items: center; gap: 10px; }
.highlights-title i { font-size: 26px; color: var(--cyan); }
.highlights-title h2 { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.highlights-title p  { font-size: 13px; color: var(--muted); }
.btn-preguntas {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 2px solid #ccc; border-radius: 20px;
  font-size: 12.5px; font-weight: 700; color: #444;
  white-space: nowrap; flex-shrink: 0;
  transition: all .15s;
}
.btn-preguntas:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-preguntas i { font-size: 13px; }

/* Steps grid */
.highlights-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.highlight-item {
  display: flex; gap: 12px; padding: 18px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.highlight-item:nth-child(3n) { border-right: none; }
.hi-icon { font-size: 22px; flex-shrink: 0; width: 36px; text-align: center; }
.hi-icon i { color: var(--blue); font-size: 20px; }
.hi-text h4 {
  font-size: 11.5px; font-weight: 800; color: var(--blue);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; line-height: 1.3;
}
.hi-text p  { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 6px; }
.hi-text a  { font-size: 11.5px; color: var(--cyan); font-weight: 700; }
.hi-text a:hover { text-decoration: underline; }

/* ─────────────────────────────────────
   FOOTER
   ───────────────────────────────────── */
footer { background: var(--blue); color: rgba(255,255,255,.7); }

.footer-top { background: rgba(0,0,0,.18); padding: 18px 16px; }
.footer-top-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.footer-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 7px; }
.payments-footer img {
  display: inline-block; height: 24px; padding: 2px 4px;
  filter: brightness(0) invert(1); opacity: .85;
}
.rss-footer a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 5px;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 14px; margin-right: 4px; margin-top: 4px;
  transition: background .15s;
}
.rss-footer a:hover { background: rgba(255,255,255,.25); }

.footer-links { padding: 28px 16px 20px; }
.footer-links-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.footer-col h4 {
  font-size: 12px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px;
}
.footer-col li { margin-bottom: 5px; }
.footer-col li a { font-size: 11.5px; color: rgba(255,255,255,.6); transition: color .15s; }
.footer-col li a:hover { color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px; }
.footer-bottom-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,.45); }
.footer-awards { display: flex; gap: 16px; align-items: center; }
.footer-awards img { height: 26px; opacity: .65; filter: brightness(0) invert(1); }

/* ─────────────────────────────────────
   CITY ORIGIN DROPDOWN
   ───────────────────────────────────── */
.city-dropdown-wrap { position: relative; }
.city-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  min-width: 200px; z-index: 100; display: none;
  overflow: hidden;
}
.city-dropdown-menu.open { display: block; }
.city-dropdown-item {
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: background .12s;
}
.city-dropdown-item:hover { background: #f0fafd; color: var(--cyan); }
.city-dropdown-item.active { color: var(--cyan); background: #e8f7fb; }

/* ─────────────────────────────────────
   POPUP
   ───────────────────────────────────── */
.popup-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.55); display: none;
  align-items: center; justify-content: center;
}
.popup-overlay.show { display: flex; }
.popup-inner {
  position: relative; max-width: 540px; width: 90%;
  border-radius: 14px; overflow: hidden;
  animation: popIn .35s ease;
}
.popup-inner img { width: 100%; display: block; }
.popup-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
}
.popup-close:hover { background: rgba(0,0,0,.7); }
@keyframes popIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }

/* ─────────────────────────────────────
   MOBILE MENU
   ───────────────────────────────────── */
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.5);
}
.mobile-nav-overlay.show { display: block; }
.mobile-nav {
  position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 1000; overflow-y: auto;
  transform: translateX(-100%); transition: transform .3s ease;
}
.mobile-nav.show { transform: translateX(0); }
.mobile-nav a, .mobile-nav > div {
  display: block; padding: 14px 20px;
  font-size: 15px; font-weight: 600; color: var(--blue);
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:hover { color: var(--cyan); }

/* ─────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────── */
@media (max-width: 1024px) {
  .header-nav { display: none; }
  .header-hamburger { display: block; }
  .carrusel-item { min-height: 280px; }
}
@media (max-width: 900px) {
  .alianzas-content .rttw-grid { grid-template-columns: 1fr 1fr; }
  .highlights-grid { grid-template-columns: 1fr 1fr; }
  .highlight-item:nth-child(3n) { border-right: 1px solid var(--border); }
  .highlight-item:nth-child(2n) { border-right: none; }
  .footer-links-inner { grid-template-columns: 1fr 1fr; }
  .shortcuts-container { grid-template-columns: 1fr 1fr; }
  .shortcut-btn:nth-child(2) { border-right: none; }
  .shortcut-btn:nth-child(3) { border-right: 1px solid var(--border); }
}
@media (max-width: 650px) {
  .header-country { display: none; }
  #rt-carousel { margin-top: 68px; }
  .carrusel-item { flex: 0 0 100vw; min-width: 100vw; height: 220px; }
  .carrusel-item picture.desktop { display: none; }
  .carrusel-item picture.mobile { display: block !important; position: absolute; inset: 0; }
  .carrusel-item picture.mobile img { width: 100%; height: 100%; object-fit: cover; }
  .carrusel-item .caja img { max-height: 160px; }
  .widgets-grid { grid-template-columns: 1fr; }
  .shortcuts-container { grid-template-columns: 1fr; }
  .shortcut-btn { border-right: none; }
  .alianzas-content .rttw-grid { grid-template-columns: 1fr; }
  .highlights-grid { grid-template-columns: 1fr; }
  .highlight-item { border-right: none; }
  .footer-links-inner { grid-template-columns: 1fr; }
  .footer-top-inner { flex-direction: column; align-items: flex-start; }
  .search-fields { flex-direction: column; }
  .sfield { border-right: none; border-bottom: 1px solid #ddd; }
  .sfield:last-child { border-bottom: none; }
  .swap-cell { display: none; }
  .search-bottom { flex-direction: column; align-items: flex-start; }
  .search-right { margin-left: 0; flex-wrap: wrap; }
  .btn-buscar { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════
   FOOTER — color correcto (blanco + azul)
   ═══════════════════════════════════════ */
footer {
  background: #fff !important;
  color: var(--blue) !important;
}
.footer-top {
  background: #fff !important;
  border-bottom: 1px solid var(--border);
  padding: 20px 16px;
}
.footer-top-inner { max-width: 1280px; margin: 0 auto; }
.footer-label { color: var(--blue) !important; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.payments-footer img {
  filter: none !important;          /* mostrar en color */
  opacity: 1 !important;
  height: 28px;
  display: inline-block;
  margin: 2px 4px;
}
.rss-footer a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: #F0F3F7 !important;
  border-radius: 6px;
  color: var(--blue) !important;
  font-size: 16px; margin: 2px;
  transition: background .15s;
}
.rss-footer a:hover { background: #e0e8f0 !important; }
.footer-links { padding: 20px 16px 16px; }
.footer-links-inner { border-top: 1px solid var(--border); padding-top: 16px; }
.footer-col h4 { color: var(--blue) !important; }
.footer-col li a { color: #444 !important; font-size: 13px; }
.footer-col li a:hover { color: var(--cyan) !important; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  background: #fff;
}
.footer-bottom-inner { max-width: 1280px; margin: 0 auto; }
.footer-copy { color: #666 !important; font-size: 13px; }
.footer-awards img {
  height: 40px;
  filter: none !important;
  opacity: 1 !important;
}
.footer-logo-wrap img { height: 36px; }


/* ════════════════════════════════════════════════════
   SEARCH PANELS  (posición fija calculada por JS)
   ════════════════════════════════════════════════════ */

/* Base — JS asigna position:fixed + top/left al abrir */
.srch-panel {
  display: none;          /* JS cambia a flex cuando abre */
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 36px rgba(0,0,0,.22);
  animation: panelSlideIn .18s ease;
  overflow: hidden;
}
@keyframes panelSlideIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Airport ─────────────────────────────────── */
.airport-panel {
  flex-direction: column;
  overflow: hidden;
  /* Desktop */
  width: 340px;
  max-height: 480px;
}

/* ── Top bar: título + X ── */
.ap-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.ap-title {
  font-size: 18px;
  font-weight: 800;
  color: #00AEC7;
}
.ap-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  font-weight: 300;
}
.ap-close-btn:hover { color: #333; }

/* ── Buscador ── */
.ap-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px;
  padding: 10px 14px;
  background: #f4f4f4;
  border-radius: 10px;
  flex-shrink: 0;
}
.ap-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: #1B365D;
  outline: none;
  min-width: 0;
}
.ap-search-input::placeholder { color: #bbb; }

/* ── Lista ── */
.ap-city-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ap-city-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
  transition: background .1s;
}
.ap-city-row:hover,
.ap-city-row:active { background: #f0f9fc; }
.ap-city-row-name {
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
}
.ap-city-row-iata {
  font-size: 12px;
  color: #bbb;
  font-weight: 700;
  letter-spacing: .5px;
}
.ap-no-results {
  padding: 28px 18px;
  text-align: center;
  color: #aaa;
  font-size: 14px;
}

/* ── DESKTOP: compacto ── */
@media (min-width: 769px) {
  .airport-panel {
    width: 340px !important;
    max-height: 480px !important;
    border-radius: 12px !important;
  }
  .ap-title { font-size: 15px; }
  .ap-top-bar { padding: 10px 14px 8px; }
  .ap-search-box { margin: 8px 10px; padding: 8px 12px; }
  .ap-search-input { font-size: 13px; }
  .ap-city-row { padding: 10px 14px; }
  .ap-city-row-name { font-size: 14px; }
}

/* ── MÓVIL: pantalla completa ── */
@media (max-width: 768px) {
  /* airport-panel mobile: manejado por JS */
  .ap-title { font-size: 22px; }
  .ap-top-bar { padding: 20px 20px 16px; }
  .ap-search-box { margin: 12px 16px; padding: 12px 14px; }
  .ap-search-input { font-size: 16px; }
  .ap-city-row { padding: 16px 20px; }
  .ap-city-row-name { font-size: 16px; }
  .ap-city-row-iata { font-size: 13px; }
}


.cal-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 8px; border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.cal-step-title {
  flex: 1; text-align: center;
  font-size: 16px; font-weight: 700; color: var(--blue);
}
.cal-nav-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f5f5f5; color: var(--blue);
  font-size: 20px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; border: none;
}
.cal-nav-btn:hover { background: #e0f5fb; color: var(--cyan); }
.cal-close {
  color: #aaa; font-size: 18px; cursor: pointer;
  padding: 4px 6px; border-radius: 4px;
  border: none; background: none;
}
.cal-close:hover { color: var(--red); }
.cal-months-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; padding: 16px 24px 20px;
}
.cal-month-title {
  text-align: center; font-size: 16px; font-weight: 800;
  color: var(--blue); margin-bottom: 14px;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7,1fr); gap: 2px;
}
.cal-hdr {
  text-align: center; font-size: 11px; font-weight: 700;
  color: #aaa; padding: 3px 0 8px;
}
.cal-day {
  text-align: center; padding: 7px 2px;
  border-radius: 6px; font-size: 13px;
}
.cal-past  { color: #ccc; }
.cal-avail { color: var(--blue); cursor: pointer; font-weight: 600; }
.cal-avail:hover { background: #e8f7fb; }
.cal-sel   { background: var(--cyan) !important; color: #fff !important; font-weight: 700 !important; border-radius: 6px; }
.cal-range { background: #e8f7fb; color: var(--blue); }

/* ── Passengers ──────────────────────────────── */
.pax-panel {
  width: 340px;
  flex-direction: column;
}
.pax-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.pax-title { font-size: 16px; font-weight: 700; color: var(--blue); }
.pax-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid #f5f5f5;
}
.pax-type { font-size: 14px; font-weight: 700; color: var(--blue); }
.pax-desc { font-size: 11.5px; color: #999; margin-top: 2px; }
.pax-counter { display: flex; align-items: center; gap: 12px; }
.pax-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; font-weight: 700;
  transition: all .15s; line-height: 1; background: #fff;
}
.pax-btn:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.pax-btn:disabled { opacity: .3; cursor: not-allowed; }
.pax-num { font-size: 17px; font-weight: 700; color: var(--blue); min-width: 18px; text-align: center; }
.btn-confirm-pax {
  width: 100%; padding: 11px; border-radius: 30px;
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s; border: none; font-family: inherit;
}
.btn-confirm-pax:hover { background: #8c1f26; }

/* Mobile */
@media(max-width: 768px){
  .airport-panel  { width: calc(100vw - 32px); left: 16px !important; }
  .calendar-panel { width: calc(100vw - 32px); left: 16px !important; }
  .cal-months-wrap { grid-template-columns: 1fr; }
  .pax-panel { width: calc(100vw - 32px); left: 16px !important; right: auto !important; }
}

/* ════════════════════════════════════════════════════
   MOBILE SEARCH — Layout igual a la captura
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero: se mantiene de fondo (sin margen top extra) ── */
  #rt-carousel {
    margin-top: 60px; /* altura del header */
  }
  .carrusel-item {
    height: auto;
    min-height: 260px;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0;
  }
  .carrusel-item picture.desktop { display: none; }
  .carrusel-item picture.mobile  { display: block !important; position: absolute; inset: 0; }
  .carrusel-item picture.mobile img { width: 100%; height: 100%; object-fit: cover; }
  .carrusel-item .caja {
    position: relative; z-index: 2;
    padding: 12px 12px 0;
  }
  .carrusel-item .caja img { max-height: 160px; width: auto; max-width: 100%; }

  /* ── Quick tabs: pills teal/outline sobre hero ── */
  .quick-tabs {
    background: transparent;
    border-bottom: none;
    padding: 10px 14px 8px;
    position: relative;
    z-index: 20;
  }
  .quick-tabs-inner {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    padding: 0;
    max-width: 100%;
  }
  .quick-tab {
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 13px; font-weight: 700;
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    border-bottom: 2px solid #fff !important; /* override base */
    gap: 6px;
    white-space: nowrap;
    transition: background .15s, color .15s;
    margin-bottom: 0 !important;
  }
  .quick-tab.active {
    background: var(--cyan);
    border-color: var(--cyan) !important;
    color: #fff;
  }
  .quick-tab:hover { background: rgba(255,255,255,.15); }
  /* Solo mostrar los primeros 2 tabs en móvil */
  .quick-tab:nth-child(3),
  .quick-tab:nth-child(4) { display: none; }

  /* ── Search section: card blanco flotante sobre hero ── */
  .search-section {
    position: relative;
    z-index: 20;
    padding: 0 10px 0;
    background: transparent;
    margin-top: -8px;
  }
  .search-box {
    border: none !important;
    border-radius: 12px !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    overflow: visible;
  }

  /* ── Sub-tabs (Vuelos/Traslado/Paquetes): compactos ── */
  .search-tabs {
    padding: 0 12px;
    border-bottom: 1px solid #eee;
  }
  .search-tab {
    padding: 10px 10px;
    font-size: 12px;
  }
  .search-tab:nth-child(4) { display: none; } /* ocultar Hoteles en móvil */

  /* ── Trip type ── */
  .search-form-body { padding: 10px 12px 0; }
  .search-trip-opts { gap: 18px; margin-bottom: 10px; }
  .search-trip-opt { font-size: 13px; }

  /* ── Campos: Origen/Destino apilados, swap a la derecha ── */
  .search-fields {
    flex-direction: column;
    border: none;
    border-radius: 0;
    gap: 0;
    position: relative;
  }
  .sfield {
    border: none !important;
    border-bottom: none !important;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 6px;
  }
  .sfield:last-child { margin-bottom: 0; }
  .sfield .sfield-inner { padding: 10px 12px; }
  .sfield-label { font-size: 11px; }
  .sfield-val   { font-size: 14px; }

  /* ── Ocultar fechas y pasajeros en móvil ── */
  #fidaField,
  #fvueltaField,
  #paxField { display: none !important; }

  /* ── Swap: pequeño botón entre origen y destino a la derecha ── */
  .swap-cell { display: none; } /* ocultamos el separador cell */

  /* Swap botón flotante a la derecha entre los dos campos */
  #oriField { position: relative; }
  

  /* ── Bottom row ── */
  .search-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 0 12px;
  }
  .chk-millas { order: 2; font-size: 12px; }
  .link-rearmar { order: 3; font-size: 12px; }
  .search-right { margin-left: 0; width: 100%; order: 1; flex-direction: column; gap: 6px; }
  .link-promo { font-size: 12.5px; font-weight: 700; color: var(--cyan); }
  .link-promo::before { content: '+ '; }
  .btn-buscar {
    width: 100%;
    justify-content: center;
    border-radius: 30px;
    font-size: 15px;
    padding: 12px;
  }

  /* ── Hero abajo del search card: visible ── */
  /* El hero se ve detrás y debajo del search card gracias al z-index */

  /* ── Header mobile ── */
  .site-header { height: 60px; }
  .header-inner { height: 60px; padding: 0 14px; }
  .header-logo img { height: 30px; }
  .btn-login {
    font-size: 12px;
    padding: 7px 12px;
  }
  .header-country { display: none; }
  .header-hamburger { display: flex; align-items: center; }
}

/* Extra pequeño: less than 480px */
@media (max-width: 480px) {
  .quick-tabs { padding: 8px 10px 6px; }
  .search-section { padding: 0 8px 0; }
  .search-tab { padding: 8px 8px; font-size: 11px; }
}

/* ── Mobile: hero + tabs + search card stacked ── */
@media (max-width: 768px) {
  #hero-search-wrap {
    display: flex;
    flex-direction: column;
    background: #009DC4; /* teal de fondo visible detrás de todo */
    position: relative;
  }

  /* Hero ocupa el alto del area */
  #rt-carousel {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    z-index: 1;
  }
  .main-carousel, .carrusel-inner, .carrusel-item {
    height: 100% !important;
  }

  /* Tabs encima del hero */
  .quick-tabs {
    position: relative;
    z-index: 10;
    padding-top: 12px;
  }

  /* Search card encima del hero */
  .search-section {
    position: relative;
    z-index: 10;
    padding-bottom: 14px;
  }

  /* Area para que el hero sea visible debajo del card */
  /* Ajustamos el wrapper al alto del hero real */
  #hero-search-wrap {
    min-height: 560px;
  }
}

/* Hide desktop-only tabs on mobile */
@media (max-width: 768px) {
  .qtab-desktop { display: none !important; }
  .qtab-reserva { display: flex !important; } /* always show Mi Reserva */
}
/* Show all tabs on desktop */
@media (min-width: 769px) {
  .qtab-reserva { display: none; } /* hide Mi Reserva on desktop (it's in the nav) */
  .qtab-desktop { display: flex; }
  /* Reset mobile overrides */
  #hero-search-wrap { display: block; background: transparent; min-height: auto; }
  #rt-carousel { position: static; height: auto; }
  .main-carousel { height: auto !important; }
  .carrusel-inner { height: auto !important; }
  .carrusel-item { height: 370px !important; }
  .quick-tabs { background: #fff; padding: 0; border-bottom: 2px solid #e8e8e8; }
  .quick-tab {
    border: none;
    background: transparent;
    color: #555;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    padding: 13px 18px;
    margin-bottom: -2px;
  }
  .quick-tab.active { background: transparent; color: var(--cyan); border-bottom-color: var(--cyan); border-color: var(--cyan); }
  .search-section { background: #fff; padding: 0 20px 20px; margin-top: 0; z-index: auto; }
  .search-box { border: 1px solid var(--border) !important; border-top: none !important; border-radius: 0 0 10px 10px !important; box-shadow: none; }
  .search-fields { flex-direction: row; border: 1.5px solid #ccc; border-radius: 8px; gap: 0; }
  .sfield { background: transparent; border-radius: 0; margin-bottom: 0; }
  .sfield { border-right: 1px solid #ddd !important; border-bottom: none !important; }
  .sfield:last-child { border-right: none !important; }
  #fidaField, #fvueltaField, #paxField { display: flex !important; }
  .swap-cell { display: flex; }
  .search-bottom { flex-direction: row; align-items: center; }
  .search-right { margin-left: auto; flex-direction: row; width: auto; order: 0; gap: 14px; }
  .chk-millas { order: 0; }
  .link-rearmar { order: 0; }
  .btn-buscar { width: auto; border-radius: 8px; padding: 10px 22px; }
}

/* ═══════════════════════════════════════════════════
   MOBILE FIX v2 — card más abajo, esquinas redondas
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Wrapper: fondo teal visible arriba y abajo del card */
  #hero-search-wrap {
    background: #009DC4 !important;
    min-height: auto !important;
    padding-top: 0;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
  }

  /* Hero: ocupa todo el ancho de fondo */
  #rt-carousel {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 100%;
    z-index: 1 !important;
  }

  /* Tabs + search: encima del hero */
  .quick-tabs,
  .search-section {
    position: relative !important;
    z-index: 10 !important;
  }

  /* Espacio en la parte superior para que el hero sea visible ARRIBA del card */
  .quick-tabs {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  /* Card blanco: TODAS las esquinas redondeadas */
  .search-box {
    border-radius: 14px !important;
    border: none !important;
    border-top: none !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.2) !important;
    overflow: hidden !important;
  }

  .search-section {
    padding: 0 10px !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    margin-top: 0 !important;
  }

  /* Espacio debajo del card para mostrar el hero (mascota etc.) */
  #hero-search-wrap {
    padding-bottom: 200px; /* espacio para el hero abajo */
  }

  /* El hero ocupa ese espacio del padding */
  #rt-carousel {
    bottom: 0;
  }

  /* Corregir doble + en código promocional */
  .link-promo::before { content: '' !important; }
  .link-promo i { display: inline-block; margin-right: 3px; }

  /* Buscar SMART: rojo más sólido, pill completo */
  .btn-buscar {
    background: #c0192a !important;
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    box-shadow: 0 3px 10px rgba(192,25,42,.4);
  }

  /* Orden correcto del bottom row */
  .search-bottom {
    padding: 10px 0 14px !important;
    gap: 8px !important;
  }

  /* Link código promo ARRIBA del botón Buscar */
  .search-right {
    order: -1 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .link-promo {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
  }
  .chk-millas  { order: 2; }
  .link-rearmar { order: 3; }

  /* Subtabs: solo Vuelos, Traslado, Paquetes — sin separador inferior cortado */
  .search-tabs {
    padding: 0 0 0 0 !important;
    border-bottom: 1px solid #eee !important;
    display: flex;
  }
  .search-tab {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }

  /* Asegurar que el hero se vea debajo:
     el wrapper tiene suficiente alto para que el hero sea visible */
  #hero-search-wrap {
    min-height: 600px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE SEARCH — Grupos O/D y Fecha/Pasajeros
   ═══════════════════════════════════════════════════════ */

/* ── Desktop: ocultar elementos solo-mobile ── */
.btn-swap-mobile { display: none; }
.date-pax-row {
  display: flex;
  flex: 1;
}

/* ── Desktop: search-fields como fila ── */
.search-fields { display: flex; }
.od-group { display: contents; } /* invisible en desktop, los hijos se comportan normal */

/* ── MOBILE ─────────────────────────────────── */
@media (max-width: 768px) {

  /* search-fields: columna */
  .search-fields {
    flex-direction: column !important;
    border: none !important;
    border-radius: 0 !important;
    gap: 8px !important;
  }

  /* Ocultar elementos desktop en móvil */
  .desktop-only { display: none !important; }
  .swap-cell    { display: none !important; }

  /* ── Grupo O/D: caja única redondeada ── */
  .od-group {
    display: block !important;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: #f7f7f7;
    overflow: hidden;
    position: relative;
  }

  .sfield-ori, .sfield-dest {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100%;
  }
  .sfield-ori {
    border-bottom: 1px solid #e0e0e0 !important;
  }
  .sfield-ori .sfield-inner,
  .sfield-dest .sfield-inner {
    padding: 11px 44px 11px 12px !important; /* espacio para swap btn */
  }
  .sfield-ori .sfield-val,
  .sfield-dest .sfield-val { font-size: 15px !important; font-weight: 600 !important; }
  .sfield-ori .sfield-label,
  .sfield-dest .sfield-label { font-size: 11px !important; color: #aaa; }

  /* Botón swap flotante a la derecha del grupo */
  .btn-swap-mobile {
    display: flex !important;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: #fff;
    color: #666;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    z-index: 2;
    transition: border-color .15s;
  }
  .btn-swap-mobile:hover { border-color: var(--cyan); color: var(--cyan); }

  /* ── Fila fecha + pasajeros ── */
  .date-pax-row {
    display: flex !important;
    gap: 8px;
    flex: none !important;
  }

  .sfield-date {
    flex: 1;
    background: #f7f7f7 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }
  .sfield-pax {
    flex: 1;
    background: #f7f7f7 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }
  .sfield-date .sfield-inner,
  .sfield-pax  .sfield-inner { padding: 9px 10px !important; }
  .sfield-date .sfield-label,
  .sfield-pax  .sfield-label { font-size: 10px !important; color: #aaa; }
  .sfield-date .sfield-val,
  .sfield-pax  .sfield-val   { font-size: 13px !important; font-weight: 600 !important; }
  .sfield-date .sfield-icon i,
  .sfield-pax  .sfield-icon i { font-size: 14px; color: var(--blue); }

  /* Ocultar "Fecha de vuelta" en móvil solo ida (se puede ajustar según radio) */
  #fvueltaField { display: none !important; }

  /* Cuando es "Ida y vuelta", mostrar fecha de vuelta (JS añade clase) */
  .trip-round #fvueltaField { display: flex !important; }

  /* Remove old overrides que conflictúan */
  #fidaField, #paxField {
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE FIX v3 — card más abajo, pasajeros debajo en
   ida y vuelta, menos espacio blanco
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Hero: bajar MÁS el card (más espacio arriba) ── */
  #hero-search-wrap {
    min-height: 580px !important;
    padding-top: 0 !important;
    padding-bottom: 90px !important;  /* hero visible debajo del card */
  }

  /* Agregar espacio ENCIMA de las tabs para ver el hero arriba */
  .quick-tabs {
    padding-top: 60px !important;  /* empuja el card hacia abajo */
  }

  /* ── 2. Carrusel ocupa todo el wrapper ── */
  #rt-carousel {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    z-index: 1 !important;
    margin-top: 0 !important;
  }
  .main-carousel,
  .carrusel-inner { height: 100% !important; }
  .carrusel-item {
    flex: 0 0 100vw !important;
    min-width: 100vw !important;
    height: 100% !important;
  }

  /* ── 3. Card: bordes redondeados completos ── */
  .search-box {
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  /* Margen lateral del card */
  .search-section { padding: 0 12px !important; }

  /* ── 4. Fecha + Pasajeros: layout correcto ── */

  /* Wrapper de las fechas (ida + vuelta) */
  .date-fields-wrap {
    display: flex;
    gap: 8px;
    flex: 1;
  }
  .date-fields-wrap .sfield-date {
    flex: 1;
  }

  /* Por defecto (solo ida): fechas + pasajeros en fila */
  .date-pax-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    align-items: stretch;
  }
  .sfield-pax { flex: 0 0 auto; min-width: 120px; }

  /* Fecha de vuelta: oculta por defecto (solo ida) */
  #fvueltaField { display: none !important; }

  /* IDA Y VUELTA: fechas en fila arriba, pasajeros debajo */
  .trip-round .date-pax-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .trip-round .date-fields-wrap {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .trip-round #fvueltaField {
    display: flex !important;
  }
  .trip-round .sfield-pax {
    width: 100%;
    min-width: 0;
  }
  .trip-round .sfield-pax .sfield-inner {
    padding: 9px 12px !important;
  }

  /* ── 5. Menos espacio blanco bajo el hero ── */
  /* El gap entre el hero y la sección de destinos */
  .rt-widget { margin-top: 0 !important; }
  .rt-widget > div { padding-top: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP SEARCH — estilos exactos del original JetSMART
   SOLO aplica en pantallas >= 769px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ── Quick tabs (Vuelos / Administra / Check-in / Estado) ─── */
  /* Activo: blanco con borde inferior teal, esquinas top redondeadas */
  .quick-tab {
    background: #fff;
    color: var(--blue);
    border-radius: 12px 12px 0 0;   /* solo top */
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 14px 16px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    margin-bottom: -2px !important;
    gap: 7px;
    white-space: nowrap;
    transition: color .15s;
  }
  .quick-tab:hover { color: var(--cyan); border-bottom-color: var(--cyan) !important; }
  .quick-tab.active { color: var(--blue); border-bottom-color: var(--cyan) !important; font-weight: 700 !important; }

  /* Inactivos: pill (rounded-xl) */
  .quick-tab:not(.active) {
    border-radius: 12px !important;
    padding: 10px 16px !important;
    border-bottom: none !important;
  }

  /* ── Search box container ──────────────────────────────────── */
  .search-box {
    border: none !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* ── Sub-tabs (Vuelos / Traslado / Paquetes / Hoteles) ─────── */
  /* Contenedor */
  .search-tabs {
    border-bottom: none !important;
    padding: 14px 20px 10px !important;
    display: flex !important;
    gap: 8px !important;
    background: #fff;
  }
  /* Todos: pill con bg gris, texto azul-gris */
  .search-tab {
    background: #f7f7f7 !important;
    color: #7D93B2 !important;
    border-radius: 999px !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background .15s;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  .search-tab:hover { background: #F0F3F7 !important; }
  /* Activo: fondo teal */
  .search-tab.active {
    background: var(--cyan) !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
  .search-tab i { font-size: 14px; }

  /* ── Radio tipo de viaje ───────────────────────────────────── */
  .search-form-body { padding: 8px 20px 0 !important; background: #fff; }
  .search-trip-opts { gap: 24px !important; margin-bottom: 14px !important; }
  .search-trip-opt { font-size: 14px !important; font-weight: 500; }

  /* ── Campos: SEPARADOS, cada uno con su propio borde redondeado ─ */
  .search-fields {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin-bottom: 12px;
    padding: 0 !important;
    flex-direction: row !important;
  }

  /* od-group: contenedor O+D ocupa la primera columna */
  .od-group {
    display: block !important;
    border: 1.5px solid #c1c1c1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    position: relative;
    height: 52px;
    overflow: hidden;
    grid-column: 1;
  }
  .od-group:hover { border-color: var(--cyan) !important; }

  /* Dentro del od-group: origen y destino en fila */
  .sfield-ori, .sfield-dest {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    flex: 1;
    height: 52px;
    display: flex !important;
    align-items: center;
  }
  .od-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 52px !important;
  }
  .sfield-ori { border-right: 1px solid #e0e0e0 !important; }
  .sfield-ori .sfield-inner,
  .sfield-dest .sfield-inner {
    padding: 8px 10px 8px 14px !important;
    height: 100%;
    display: flex; align-items: center;
  }
  .sfield-ori .sfield-val,
  .sfield-dest .sfield-val { font-size: 14px !important; color: var(--blue) !important; }

  /* Swap en desktop: celda entre origen y destino */
  .swap-cell {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 6px !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0;
  }
  .btn-swap {
    width: 28px; height: 28px;
    border: 1.5px solid #c1c1c1;
    border-radius: 50%;
    background: #fff;
    color: #666;
    transition: border-color .15s;
  }
  .btn-swap:hover { border-color: var(--cyan); color: var(--cyan); }
  .btn-swap-mobile { display: none !important; }
  .desktop-only { display: flex !important; }

  /* date-pax-row: fila de fechas y pasajeros */
  .date-pax-row {
    display: contents !important; /* hijos participan directo en el grid */
  }
  .date-fields-wrap {
    display: contents !important; /* idem */
  }

  /* Fechas y pasajeros: cada uno como celda del grid */
  .sfield-date, .sfield-pax {
    border: 1.5px solid #c1c1c1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    margin: 0 !important;
    height: 52px !important;
    display: flex !important;
    align-items: center;
    flex: none !important;
    transition: border-color .15s;
  }
  .sfield-date:hover, .sfield-pax:hover { border-color: var(--cyan) !important; }
  .sfield-date .sfield-inner,
  .sfield-pax  .sfield-inner { padding: 8px 12px !important; height: 100%; display: flex; align-items: center; }
  .sfield-date .sfield-val,
  .sfield-pax  .sfield-val { font-size: 14px !important; color: var(--blue) !important; }
  .sfield-date .sfield-label,
  .sfield-pax  .sfield-label { font-size: 11px !important; color: #aaa; }

  /* fecha de vuelta visible en desktop (siempre) */
  #fvueltaField { display: flex !important; }

  /* ── Bottom row ─────────────────────────────────────────────── */
  .search-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 10px 20px 16px !important;
    background: #fff;
    border-radius: 0 0 16px 16px;
    flex-wrap: nowrap !important;
  }
  .chk-millas {
    font-size: 13px; order: 0; flex-shrink: 0; white-space: nowrap;
  }
  .link-rearmar {
    font-size: 13px; order: 1; margin-left: 20px; flex-shrink: 0;
    text-decoration: underline;
  }
  .search-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    order: 2;
    flex-direction: row !important;
    width: auto !important;
  }
  .link-promo {
    font-size: 13px; font-weight: 600; color: var(--blue);
    white-space: nowrap;
  }
  .link-promo::before { content: '' !important; }

  /* Buscar SMART: coral pill */
  .btn-buscar {
    background: #D4172A !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 11px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    width: auto !important;
    white-space: nowrap;
    justify-content: center;
    letter-spacing: .2px;
    box-shadow: none;
  }
  .btn-buscar:hover { background: #af1122 !important; }
  .btn-buscar i { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP SEARCH — Corrección grid: 1 fila O/D+fechas,
   pasajero debajo al mismo ancho que O/D (como el original)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* Grid de 4 columnas iguales */
  .search-fields {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }

  /* od-group: ocupa columnas 1 y 2 (mismo ancho que fecha+vuelta juntos) */
  .od-group {
    grid-column: 1 / 3 !important;  /* span 2 columnas */
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    height: 52px !important;
    border: 1.5px solid #c1c1c1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  .od-group:hover { border-color: var(--cyan) !important; }

  /* Fecha de ida: columna 3 */
  #fidaField {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  /* Fecha de vuelta: columna 4 */
  #fvueltaField {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Cuando es solo ida: fecha vuelta deshabilitada visualmente */
  .search-fields:not(.trip-round) #fvueltaField {
    opacity: .45;
    pointer-events: none;
  }

  /* Pasajeros: SEGUNDA FILA, columnas 1-2 (mismo ancho que O/D) */
  #paxField {
    grid-column: 1 / 3 !important;   /* span 2 cols = mismo ancho que O/D */
    grid-row: 2 !important;
    display: flex !important;
    height: 52px !important;
    flex: none !important;
    min-width: 0 !important;
  }

  /* Anular display:contents en wrappers — dejar que hijos sean directos del grid */
  .date-pax-row    { display: contents !important; }
  .date-fields-wrap { display: contents !important; }

  /* Asegurar que sfield-date y sfield-pax hereden correctamente */
  .sfield-date, .sfield-pax {
    border: 1.5px solid #c1c1c1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    align-items: center !important;
    transition: border-color .15s;
    height: 52px !important;
  }
  .sfield-date:hover,
  .sfield-pax:hover  { border-color: var(--cyan) !important; }

  .sfield-date .sfield-inner,
  .sfield-pax  .sfield-inner {
    padding: 8px 14px !important;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .sfield-date .sfield-label,
  .sfield-pax  .sfield-label { font-size: 11px; color: #aaa; }
  .sfield-date .sfield-val,
  .sfield-pax  .sfield-val   { font-size: 14px !important; color: var(--blue) !important; }

  /* Origen dentro del od-group */
  .sfield-ori {
    flex: 1;
    border: none !important;
    border-right: 1px solid #e8e8e8 !important;
    border-radius: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
  }
  .sfield-dest {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
  }
  .sfield-ori .sfield-inner,
  .sfield-dest .sfield-inner {
    padding: 8px 12px !important;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .sfield-ori .sfield-val,
  .sfield-dest .sfield-val { font-size: 14px !important; color: var(--blue) !important; }
  .sfield-ori .sfield-label,
  .sfield-dest .sfield-label { font-size: 11px; color: #aaa; }

  /* Swap button entre Origen y Destino */
  .swap-cell {
    display: flex !important;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
  }
  .btn-swap {
    width: 30px; height: 30px;
    border: 1.5px solid #c1c1c1;
    border-radius: 50%;
    background: #fff;
    color: #888;
    transition: all .15s;
    display: flex; align-items: center; justify-content: center;
  }
  .btn-swap:hover { border-color: var(--cyan); color: var(--cyan); }
  .btn-swap i { font-size: 13px; }
  .btn-swap-mobile { display: none !important; }
  .desktop-only { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE TABS — Vuelos blanco pegado al card, Mi Reserva pill
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Contenedor tabs: sin fondo, sin borde, no agrega espacio abajo */
  .quick-tabs {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 12px 0 !important;
    padding-top: 60px !important;
    display: flex;
    align-items: flex-end;   /* tabs se alinean en la base = se pegan al card */
    gap: 8px;
  }

  /* Todos los tabs mobile: reset */
  .quick-tab {
    border: none !important;
    border-bottom: none !important;
    border-radius: 14px 14px 0 0 !important;  /* default: top rounded */
    background: rgba(255,255,255,.55) !important;
    color: var(--blue) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    gap: 7px;
    margin-bottom: 0 !important;
    white-space: nowrap;
    backdrop-filter: blur(4px);
  }

  /* Tab activo (Vuelos): BLANCO SÓLIDO, conectado al card */
  .quick-tab.active {
    background: #fff !important;
    color: var(--blue) !important;
    border-radius: 14px 14px 0 0 !important;
    /* Sin espacio entre tab y card (margin-bottom negativo para fusionar) */
    margin-bottom: -2px !important;
    padding-bottom: 12px !important;
    position: relative;
    z-index: 11;
  }

  /* Tab Mi Reserva: PILL blanco completo (separado) */
  .quick-tab.qtab-reserva {
    background: #fff !important;
    color: var(--blue) !important;
    border-radius: 14px !important;   /* todas las esquinas = pill */
    padding: 10px 18px !important;
    margin-bottom: 6px !important;    /* separado del card */
    backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }
  .quick-tab.qtab-reserva:hover { background: #f5f5f5 !important; }

  /* El card del search: la esquina top-left (donde va el tab activo)
     queda "plana" para fundirse con el tab */
  .search-box {
    border-radius: 0 14px 14px 14px !important;  /* flat top-left */
  }

  /* La sección search: no padding top para que el card toque el tab */
  .search-section {
    padding-top: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP — Solo ida: Fecha de vuelta desactivada
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* "Ida y vuelta" activo: ambas fechas normales */
  .search-fields.trip-round #fvueltaField {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* "Solo ida" (sin trip-round): fecha vuelta desactivada */
  .search-fields:not(.trip-round) #fvueltaField {
    opacity: .4 !important;
    pointer-events: none !important;
    cursor: default !important;
    border-color: #e0e0e0 !important;
  }
  .search-fields:not(.trip-round) #fvueltaField .sfield-val {
    color: #c1c1c1 !important;
  }
  .search-fields:not(.trip-round) #fvueltaField .sfield-icon i {
    color: #c1c1c1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE TABS — ajuste final para que se vea igual a la ref.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Wrapper tabs + search forman UNA unidad visual */
  .quick-tabs {
    padding-top: 56px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    background: transparent !important;
    border-bottom: none !important;
  }

  /* ✈ Vuelos: blanco sólido, top-rounded, fusionado con el card */
  .quick-tab.active {
    background: #fff !important;
    color: var(--blue) !important;
    border-radius: 12px 12px 0 0 !important;
    border: none !important;
    border-bottom: 3px solid #fff !important;  /* tapa el borde del card */
    padding: 10px 20px 13px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin-bottom: -3px !important;  /* se superpone al borde del card */
    position: relative;
    z-index: 20;
    box-shadow: none !important;
  }

  /* 📅 Mi Reserva: pill blanco completo, separado */
  .quick-tab.qtab-reserva {
    background: #fff !important;
    color: var(--blue) !important;
    border-radius: 20px !important;
    border: none !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
    backdrop-filter: none !important;
  }
  .quick-tab.qtab-reserva:hover { background: #f5f5f5 !important; }

  /* Ocultar otros tabs */
  .qtab-desktop { display: none !important; }

  /* Search card: esquina top-left plana (se fusiona con el tab Vuelos) */
  .search-section { padding: 0 10px 0 !important; }
  .search-box {
    border-radius: 0 14px 14px 14px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
    position: relative;
    z-index: 10;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE TABS v-FINAL — Fusión real tab Vuelos + card blanco
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* El truco: tabs y search-section tienen el MISMO padding lateral
     y se "tocan" sin espacio entre ellos */

  /* Contenedor tabs */
  .quick-tabs {
    background: transparent !important;
    border-bottom: none !important;
    padding: 52px 10px 0 10px !important;  /* espacio arriba pa ver hero */
    display: flex !important;
    align-items: flex-end !important;      /* tabs alineados en la base */
    gap: 6px !important;
    position: relative;
    z-index: 11;
  }

  .quick-tabs-inner {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
  }

  /* === TAB VUELOS (activo) ===
     • Mismo fondo blanco que el card (#fff)
     • Bordes superior redondeados
     • SIN espacio inferior — se fusiona con el card */
  .quick-tab.active {
    background: #fff !important;
    color: var(--blue) !important;
    border-radius: 12px 12px 0 0 !important;
    border: none !important;
    padding: 10px 18px 14px !important;   /* padding-bottom extra para que tape el borde del card */
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 15;
    box-shadow: none !important;
    /* Pequeña sombra solo en la parte superior para profundidad */
    filter: drop-shadow(0 -3px 6px rgba(0,0,0,.08));
  }

  /* === TAB MI RESERVA (inactivo) ===
     • Pill blanco completo, separado del card */
  .quick-tab.qtab-reserva {
    background: #fff !important;
    color: var(--blue) !important;
    border-radius: 20px !important;
    border: none !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;        /* separado del card */
    box-shadow: 0 3px 12px rgba(0,0,0,.15) !important;
    backdrop-filter: none !important;
  }

  /* === SEARCH SECTION: sin padding-top, rasante con los tabs === */
  .search-section {
    padding: 0 10px 0 10px !important;    /* MISMO padding lateral que .quick-tabs */
    background: transparent !important;
    margin-top: 0 !important;
    position: relative;
    z-index: 10;
  }

  /* === CARD: esquina TOP-LEFT = 0 (donde llega el tab Vuelos) === */
  .search-box {
    background: #fff;
    border: none !important;
    /* Top-left: 0 (se funde con el tab), el resto: 14px */
    border-radius: 0 14px 14px 14px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  /* Ocultar tabs de desktop en mobile */
  .qtab-desktop { display: none !important; }
  .quick-tab:not(.active):not(.qtab-reserva) { display: none !important; }
}

/* Sub-tabs iconos en color teal (#00AEC7) igual que modo escritorio */
.search-tab i {
  color: #00AEC7 !important;
  font-size: 15px;
}
/* Activo: ícono mantiene color teal igual que los inactivos */

/* ══ FIX: Sin scroll horizontal ══ */
html, body { overflow-x: hidden !important; }

/* Contenedores externos: overflow hidden para clip del slider */
#rt-carousel, .main-carousel { overflow: hidden !important; }

/* carrusel-inner NECESITA ser 3×100vw — sin max-width */
.carrusel-inner { overflow: visible !important; max-width: none !important; }

/* carrusel-item: solo oculta desborde de sus imágenes internas */
.carrusel-item { overflow: hidden !important; max-width: none !important; }

/* En mobile, ningún panel o sección puede ser más ancho que la pantalla */
@media (max-width: 768px) {
  * { max-width: 100% !important; box-sizing: border-box !important; }
  /* Excepción: paneles fixed (no afectan el layout) */
  .srch-panel { max-width: none !important; }
  /* Excepción: imágenes internas de los cards (object-fit las maneja) */
  .carrusel-item img,
  .caja img { max-width: none !important; }
  img { max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP — Fix visual: línea borrosa arriba y esquina pax
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* Quitar cualquier línea/sombra en la parte superior del buscador */
  .search-box {
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .search-tabs {
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: none !important;
  }

  /* Field pasajero: ancho correcto, sin artefactos en esquinas */
  #paxField {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 1.5px solid #c1c1c1 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  #paxField:hover { border-color: var(--cyan) !important; }

  /* Eliminar celdas vacías del grid (columnas 3-4 en fila 2) */
  .search-fields {
    grid-template-rows: auto auto !important;
  }

  /* Quitar filter/backdrop de tabs en desktop */
  .quick-tab {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Search form body: sin borde superior extra */
  .search-form-body {
    border-top: none !important;
    box-shadow: none !important;
  }
  .search-section {
    box-shadow: none !important;
    border: none !important;
  }
}

/* ════════════════════════════════════════════════
   SEARCH LOADING OVERLAY — Avión animado en búsqueda
   ════════════════════════════════════════════════ */
.search-loading {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(3px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
.search-loading.show { display: flex; }

/* Contenedor del avión orbitando */
.orbit-wrap {
  position: relative;
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
}

/* Círculo de puntos (el path del avión) */
.orbit-path {
  position: absolute; inset: 0;
  border: 2.5px dotted #1B365D;
  border-radius: 50%;
  opacity: .35;
  animation: rotatePath 2.5s linear infinite;
}
@keyframes rotatePath { to { transform: rotate(360deg); } }

/* El avión que orbita */
.orbit-plane {
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  animation: orbitFly 2.5s linear infinite;
  transform-origin: center center;
}
@keyframes orbitFly {
  0%   { transform: rotate(0deg)   translateX(80px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}
.orbit-plane svg { width: 100%; height: 100%; }

/* Texto debajo */
.search-loading-text {
  position: absolute;
  bottom: -32px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px; font-weight: 600;
  color: #1B365D; white-space: nowrap;
}

/* ── Panel móvil: pantalla completa ── */
@media (max-width: 768px) {
  .srch-panel {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
  }

  .calendar-panel {
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
  }
  .cal-months-wrap {
    grid-template-columns: 1fr !important; /* un mes a la vez en móvil */
  }
  #rightMonth { display: none !important; } /* ocultar segundo mes en móvil */
}

/* ── Móvil: lista de ciudades scrollable dentro del panel ── */
@media (max-width: 768px) {

  .ap-city-list {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 180px) !important;
    overscroll-behavior: contain; /* evita que el scroll pase al body */
  }
  .ap-header {
    flex-shrink: 0 !important; /* header fijo, no hace scroll */
  }
  .ap-cities-header {
    flex-shrink: 0 !important;
  }
}