@charset "UTF-8";
/* =========================================================
   GUAJIRA VIAJES — Identidad Corporativa
   Basado en: guajira.com.ar legacy site (site.css)
   Colores primarios extraídos del sitio productivo
   ========================================================= */

/* --- Variables de Marca (Guajira: verde, amarillo, azul) --- */
:root {
  --color-primary:        #1c9ee6;   /* Azul cielo — color dominante */
  --color-primary-dark:   #1a7bb8;   /* Azul oscuro — hover / sombras */
  --color-primary-light:  #36b0e7;   /* Azul claro — íconos, badges */
  --color-accent:         #f5c518;   /* Amarillo dorado — precios, CTAs, highlights */
  --color-accent-light:   #fbe627;   /* Amarillo claro */
  --color-green:          #217c32;   /* Verde corporativo — CTA primario, activo */
  --color-green-dark:     #1a6328;   /* Verde oscuro — hover */
  --color-green-light:    #269a40;   /* Verde claro */
  --color-text:           #5d5d5d;   /* Texto secundario */
  --color-text-dark:      #111111;   /* Texto principal */
  --color-bg-light:       #f1f1f1;   /* Fondo claro */
  --font-main:            'Montserrat', 'Lato', Arial, sans-serif;
  --header-height:        85px;      /* Altura total del header fijo */
}

/* =========================================================
   SECCIÓN 1 — LOGO: eliminar background-image de la plantilla
   El template CityTours usa background-image en #logo_home h1 a
   para mostrar el logo como imagen de fondo. Aquí lo eliminamos
   para que el <Image> de Next.js sea el único logo visible.
   ========================================================= */

/* Normal + todos los contextos de header */
#logo_home h1 a,
header.sticky #logo_home h1 a,
header#plain #logo_home h1 a,
header#colored #logo_home h1 a,
header.sticky#colored #logo_home h1 a {
  background-image: none !important;
  text-indent: 0 !important;
  width:  auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  line-height: 1;
}

/* Retina variants — mismo override */
@media only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
  #logo_home h1 a,
  header.sticky #logo_home h1 a,
  header#plain #logo_home h1 a,
  header.sticky#colored #logo_home h1 a {
    background-image: none !important;
    background-size: unset !important;
  }
}

/* Contenedor h1 */
#logo_home h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Imagen del logo dentro del anchor */
#logo_home h1 img,
#logo_home h1 a img {
  max-height: 55px;
  width: auto;
  display: block;
}

/* Logo en sticky */
header.sticky #logo_home h1 img,
header.sticky #logo_home h1 a img {
  max-height: 42px;
}

/* Logo en menú móvil (#header_menu) */
#header_menu img {
  max-height: 50px;
  width: auto;
}

/* =========================================================
   SECCIÓN 2 — LAYOUT: padding-top de <main> para el header fijo
   El header tiene position:fixed, por lo que el contenido
   comienza detrás de él. Compensamos con padding-top en main.
   ========================================================= */

main {
  padding-top: var(--header-height) !important;
}

/* El hero parallax de la home ocupa toda la vista; no necesita padding extra */
main > .parallax-window:first-child,
main > section.parallax-window:first-child {
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
}

/* =========================================================
   SECCIÓN 3 — CLASES DE ESPACIADO faltantes en la plantilla
   ========================================================= */

/* margin_60_35: equivalente a margin_60 pero con bottom 35 */
.margin_60_35 {
  padding-top:    60px;
  padding-bottom: 35px;
}

/* bg_color: fondo gris claro para secciones alternas */
.bg_color {
  background-color: var(--color-bg-light);
}

/* =========================================================
   SECCIÓN 4 — HERO BANNER para páginas internas
   Clase .parallax-content-tours usada en /paquetes, /destinos
   y /contacto como sección de cabecera con fondo Guajira.
   ========================================================= */

.parallax-content-tours {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  padding: 80px 0 40px;
  text-align: center;
  color: #fff;
  margin-top: calc(-1 * var(--header-height));   /* compensa el padding de <main> */
  padding-top: calc(var(--header-height) + 50px);/* espacio real encima del texto */
  position: relative;
  overflow: hidden;
}

/* Efecto decorativo sutil */
.parallax-content-tours::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.parallax-content-tours h1 {
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.parallax-content-tours p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* =========================================================
   SECCIÓN 5 — IDENTIDAD GUAJIRA: colores de marca
   ========================================================= */

body {
  font-family: var(--font-main);
  color: var(--color-text);
}

/* --- Botones principales (verde corporativo) --- */
.btn_1 {
  background-color: var(--color-green) !important;
  border-color:     var(--color-green) !important;
  color: #fff !important;
}
.btn_1:hover,
.btn_1:focus {
  background-color: var(--color-green-dark) !important;
  border-color:     var(--color-green-dark) !important;
}
.btn_1.outline {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.btn_1.outline:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* --- Íconos: reemplaza el rojo de la plantilla por azul Guajira --- */
.icon_red,
i.icon_red {
  color: var(--color-primary) !important;
}
.feature_home i {
  color: var(--color-primary) !important;
}

/* --- Precios (highlight amarillo) --- */
.price,
.price_room,
.tour_container .tour_title .rating strong,
span.price {
  color: var(--color-accent) !important;
}

/* --- Íconos activos en sidebar / filtros --- */
.cat_nav_list li a.active,
.cat_nav_list li a:hover {
  color: var(--color-primary);
}

/* --- Links globales --- */
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-primary-dark);
}

/* --- Badge / etiqueta destacado --- */
span.ribbon {
  background-color: var(--color-accent) !important;
  color: #111 !important;
}

/* --- Barra superior (top bar) — azul oscuro --- */
#top_line {
  background-color: var(--color-primary-dark);
}

/* --- Newsletter section — verde corporativo --- */
section[style*="1a5276"] {
  background: var(--color-green) !important;
}

/* =========================================================
   SECCIÓN 6 — COMPONENTES
   ========================================================= */

/* --- Tour cards: overlay con color Guajira (azul + tono verde) --- */
.tour_container .short_info {
  background-color: rgba(28, 158, 230, 0.85);
}

/* --- Precio destacado (amarillo dorado) --- */
.tour_container .short_info .price {
  color: var(--color-accent) !important;
  font-weight: 700;
}

/* --- Tour cards: zoom en hover --- */
.tour_container:hover .img_container img {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}
.tour_container .img_container {
  overflow: hidden;
}

/* --- Feature strip en home --- */
.feature_home {
  text-align: center;
  padding: 20px 10px;
}
.feature_home i {
  font-size: 50px;
  margin-bottom: 15px;
  display: block;
}
.feature_home h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-text-dark);
}

/* --- Cajas estilo 1 y 2 --- */
.box_style_1,
.box_style_2 {
  border-radius: 6px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
.box_style_2 {
  text-align: center;
  padding: 30px 20px;
}
.box_style_2 i.icon_high {
  font-size: 48px;
  color: var(--color-primary);
  display: block;
  margin-bottom: 15px;
}
.box_style_2 h4 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* --- Título de sección --- */
.main_title {
  text-align: center;
  margin-bottom: 30px;
}
.main_title h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 8px;
}
.main_title p {
  color: var(--color-text);
  font-size: 15px;
}

/* --- Footer link color --- */
footer a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* --- WhatsApp CTA (solo en botones, no en links de texto) --- */
a.btn_1[href*="wa.me"],
#whatsapp_footer {
  background-color: #25D366 !important;
  border-color:     #25D366 !important;
}
a.btn_1[href*="wa.me"]:hover {
  background-color: #1ebe5e !important;
  border-color:     #1ebe5e !important;
}

/* --- Contacto: lista de datos --- */
ul.contacts li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  line-height: 1.6;
}
ul.contacts li:last-child {
  border-bottom: none;
}
ul.contacts li i {
  color: var(--color-primary);
  margin-right: 8px;
  font-size: 1.1em;
}

/* --- Alertas de formulario --- */
.alert-success {
  background-color: #e8f5e9;
  border-color: #a5d6a7;
  color: #2e7d32;
  border-radius: 6px;
  padding: 1.5rem;
}
.alert-danger {
  background-color: #fdecea;
  border-color: #f5a9a9;
  color: #c62828;
  border-radius: 6px;
  padding: 1rem;
}

/* =========================================================
   SECCIÓN 7 — RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
  .parallax-content-tours {
    padding-top: calc(var(--header-height) + 30px);
    padding-bottom: 30px;
  }
  .parallax-content-tours h1 {
    font-size: 26px;
  }
  #logo_home h1 img,
  #logo_home h1 a img {
    max-height: 44px;
  }
  .margin_60_35 {
    padding-top:    40px;
    padding-bottom: 25px;
  }
}

@media (max-width: 575px) {
  .parallax-content-tours h1 {
    font-size: 22px;
    letter-spacing: 1px;
  }
  .margin_60_35 {
    padding-top:    25px;
    padding-bottom: 15px;
  }
}

/* =========================================================
   SECCIÓN 8 — CLASES DE ÍCONOS faltantes
   ========================================================= */

/* Ícono grande standalone (usado en box_style_2) */
.icono_single {
  font-size: 52px !important;
  color: var(--color-primary) !important;
  display: block;
  margin: 0 auto 15px;
}

/* Ícono muy grande (estado vacío) */
.icon_big {
  font-size: 72px !important;
  color: var(--color-primary-light) !important;
  display: block;
  margin-bottom: 1rem;
}

/* Override color del ícono en box_style_2 para identidad Guajira */
.box_style_2 i {
  color: var(--color-primary) !important;
}

/* =========================================================
   SECCIÓN 9 — HERO HOME: compensar padding de <main> para el parallax
   La sección hero ocupa la pantalla completa desde arriba;
   usamos margen negativo para "subir" el parallax bajo el header.
   ========================================================= */

/* =========================================================
   SECCIÓN 10 — FIX: .parallax-content-tours dentro de .parallax-window
   Cuando se usa dentro de un parallax-window, la imagen de fondo
   debe ser visible. El gradiente sólido la tapaba completamente.
   ========================================================= */

/* Quitar el fondo sólido para que la imagen parallax sea visible */
.parallax-window .parallax-content-tours {
  background: transparent;
  margin-top: 0; /* El padre .parallax-window ya compensa el header */
}

/* Cambiar el ::before decorativo por un overlay oscuro semitransparente
   para mantener la legibilidad del texto sobre la imagen de fondo */
.parallax-window .parallax-content-tours::before {
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   SECCIÓN 11 — PÁGINAS INTERNAS: clases faltantes
   Estas clases se usan en hoteles, paquetes detalle y cruceros
   pero no existen en el CSS original de CityTours.
   ========================================================= */

/* --- Hotel / Listado: strip card --- */
.strip_list {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;
}
.strip_list:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.strip_list figure {
  margin: 0;
  overflow: hidden;
  position: relative;
}
.strip_list figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.strip_list:hover figure img {
  transform: scale(1.03);
}

.strip_info {
  padding: 15px 20px;
}
.strip_info .item_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.strip_info .item_title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-dark);
}
.strip_info .item_title h3 a {
  color: var(--color-text-dark);
  text-decoration: none;
}
.strip_info .item_title h3 a:hover {
  color: var(--color-primary);
}

.strip_price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.strip_price .price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-accent) !important;
}

/* --- Paquete detalle: list_info --- */
.list_info {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.list_info li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  color: var(--color-text);
  font-size: 0.95rem;
}
.list_info li:last-child {
  border-bottom: none;
}
.list_info li i {
  display: inline-block;
  width: 24px;
  color: var(--color-primary);
  margin-right: 6px;
}
.list_info li strong {
  color: var(--color-text-dark);
  margin-right: 4px;
}

/* --- Tour / Paquete excerpt --- */
.tour_excerpt {
  font-size: 0.85rem;
  color: var(--color-text);
  margin: 4px 0 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour_info {
  font-size: 0.85rem;
  color: var(--color-text);
  margin: 4px 0 0;
}
.tour_info i {
  color: var(--color-primary);
  margin-right: 4px;
}

/* --- Single tour description --- */
.tour_container.single_tour {
  background: #fff;
  border-radius: 6px;
  padding: 25px;
  border: 1px solid #e8e8e8;
}
.tour_container.single_tour h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 10px;
}
.tour_container.single_tour h2 small {
  font-size: 0.65em;
  font-weight: 400;
}
.tour_description {
  line-height: 1.8;
  font-size: 0.95rem;
  color: var(--color-text);
}
.tour_description h2,
.tour_description h3,
.tour_description h4 {
  color: var(--color-text-dark);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.tour_description ul,
.tour_description ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.tour_description img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 10px 0;
}

/* --- Box style 4 (sidebar precio hotel) --- */
.box_style_4 {
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  padding: 25px 20px;
  text-align: center;
}
.box_style_4 h4 {
  font-size: 1.2rem;
  color: var(--color-text-dark);
  margin-bottom: 10px;
}

/* --- Parallax-content-1 para hero con CTA (cruceros/paquete detalle) --- */
.parallax-content-1 {
  /* Flexbox reemplaza display:table de style.css para que la altura sea auto */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto !important;    /* sobrescribe height:470px / 360px de style.css */
  min-height: 480px;
  padding: 120px 15% 60px;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* El hijo directo pasa de display:table-cell a block normal */
.parallax-content-1 > div {
  display: block !important;   /* sobrescribe display:table-cell de style.css */
  width: 100%;
  padding: 0 !important;       /* el padding horizontal ya está en el padre */
}
.parallax-content-1 h1 {
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.parallax-content-1 p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Fix: parallax-window base — background-color transparente para que el
   parallax-mirror (z-index:-100) se vea en desktop. La imagen de fondo se
   inyecta vía inline style desde SectionParallax (SSR) como fallback inmediato.
   En móvil (iOS/Android) el plugin parallax.js aplica background-image directo.
   NOTA: sin overflow:hidden ni height fijo para que el contenido no se recorte. */
.parallax-window {
  position: relative;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  min-height: 480px;
  /* sobrescribe height:360px que style.css inyecta en ≤767px */
  height: auto !important;
}

/* Sección: box_style_cat para filtros laterales */
.box_style_cat {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}
.box_style_cat h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary);
}

/* --- Rating (estrellas) --- */
.rating {
  display: inline-flex;
  gap: 2px;
}
.rating i {
  color: #f0c040;
  font-size: 0.85rem;
}

/* =========================================================
   SECCIÓN 12 — RESPONSIVE PÁGINAS INTERNAS
   ========================================================= */

@media (max-width: 991px) {
  .parallax-content-1 {
    padding: 80px 10% 40px;
    min-height: 420px;
  }
  .parallax-content-1 h1 {
    font-size: 28px;
  }
  .strip_price {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tour_container.single_tour {
    padding: 15px;
  }
}

@media (max-width: 575px) {
  .parallax-window {
    /* En móvil la altura la dicta el contenido, sin mínimo fijo */
    min-height: 0 !important;
  }
  .parallax-content-1 {
    /* Padding mínimo: header + margen pequeño arriba/abajo */
    padding: calc(var(--header-height) + 16px) 5% 24px !important;
    min-height: 0;
  }
  .parallax-content-1 h1 {
    font-size: 22px;
    letter-spacing: 1px;
  }
  .strip_info {
    padding: 10px 15px;
  }
  .box_style_4 {
    padding: 15px;
  }
}

/* =========================================================
   SECCIÓN 13 — HERO SEARCH: tabs del formulario de búsqueda
   Estructura idéntica a la plantilla (#search_2 .nav-tabs)
   pero con clase propia para no heredar el display:table-cell
   ========================================================= */

/* Contenedor principal */
.hero-search-widget {
  display: block;
  width: 100%;
  max-width: 700px;
  padding: 0;
  background: transparent;
}

/* ── Nav-tabs ── */
.hero-search-widget .nav-tabs {
  border: 0;
  border-bottom: 1px solid transparent;
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  font-size: 12px;
  text-transform: uppercase;
  list-style: none;
}

.hero-search-widget .nav-tabs > li {
  list-style: none;
  margin-right: 4px;
}

.hero-search-widget .nav-tabs > li > a {
  display: block;
  border: 0 !important;
  line-height: 20px;
  color: #fff !important;
  padding: 10px 15px 10px 40px;
  border-radius: 3px 3px 0 0;
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s;
}

.hero-search-widget .nav-tabs > li > a.active,
.hero-search-widget .nav-tabs > li > a:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Iconos fontello antes de cada tab (igual que #tab_bt_N:before) */
.hero-search-widget .nav-tabs > li > a::before {
  font-family: 'fontello';
  font-size: 18px;
  position: absolute;
  left: 13px;
  top: 8px;
}

.hero-search-widget .nav-tabs > li > a#tab_bt_1::before {
  content: '\e8f6'; /* icon-suitcase — maleta, representa paquetes de viaje */
}

.hero-search-widget .nav-tabs > li > a#tab_bt_2::before {
  content: '\ed60'; /* trenes */
}

.hero-search-widget .nav-tabs > li > a#tab_bt_3::before {
  content: '\ed80'; /* autos */
}

/* ── Tab content ── */
.hero-search-widget .tab-content {
  border: 0;
  background-color: transparent;
  padding: 0;
}

/* ── Formulario Paquetes: select nativo visible
   (style.css oculta todo select dentro de custom-search-input-2
   porque espera nice-select; lo anulamos aquí) ── */
.hero-search-widget .hero-search-select {
  display: block !important;
  height: 50px;
  border: 0;
  border-right: 1px solid #d2d8dd;
  border-radius: 0;
  padding: 0 12px;
  font-weight: 500;
  color: #6f787f;
  background: #fff;
  width: 100%;
}

/* Botón buscar: color de marca Guajira en lugar del rojo template */
.hero-search-widget .btn_search {
  background-color: var(--color-primary) !important;
}
.hero-search-widget .btn_search:hover {
  background-color: var(--color-primary-dark) !important;
}

/* Panel blanco para tabs sin formulario (Trenes / Autos) */
.hero-search-widget .search-cta-panel {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  padding: 1.25rem;
}

/* ── Fix: style.css (línea 7538) aplica `padding: 0 10%` a TODOS los div
   dentro de .parallax-content-1 en ≤768px. En nuestro layout anidado
   (parallax → animated → hero-search-widget → form), ese padding cascadea
   reduciendo el formulario ~20% por cada nivel. Neutralizamos con
   selectores de mayor especificidad (2 clases > 1 clase + 1 etiqueta). ── */
@media (max-width: 768px) {
  .parallax-content-1 .animated,
  .parallax-content-1 .hero-search-widget {
    padding: 0;
    font-size: inherit;
  }
  /* Todos los divs del formulario (sin afectar search-cta-panel) */
  .hero-search-widget .tab-content,
  .hero-search-widget .tab-pane,
  .hero-search-widget .custom-search-input-2,
  .hero-search-widget .col-12,
  .hero-search-widget .col-md-7,
  .hero-search-widget .col-md-3,
  .hero-search-widget .col-md-2,
  .hero-search-widget .col-lg-7,
  .hero-search-widget .col-lg-3,
  .hero-search-widget .col-lg-2,
  .hero-search-widget .form-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Móvil ≤767px: cada campo ocupa fila completa dentro del widget ── */
@media (max-width: 767px) {
  /* Mantener fondo blanco del formulario aunque style.css lo quite a ≤991px */
  .hero-search-widget .custom-search-input-2 {
    background-color: #fff !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) !important;
    border-radius: 5px;
  }

  /* Input: font-size 16px para evitar zoom automático en iOS al enfocar,
     borde inferior separador y esquinas redondeadas arriba */
  .hero-search-widget .custom-search-input-2 input.form-control {
    font-size: 16px !important; /* iOS zoom-on-focus prevention */
    border-right: none !important;
    border-bottom: 1px solid #d2d8dd;
    border-radius: 5px 5px 0 0;
  }

  /* Select: full-width con borde inferior */
  .hero-search-widget .hero-search-select {
    border-right: none !important;
    border-bottom: 1px solid #d2d8dd;
    border-radius: 0;
  }

  /* Botón: full-width y esquinas redondeadas abajo */
  .hero-search-widget .btn_search {
    margin: 0 !important;
    border-radius: 0 0 5px 5px !important;
    height: 50px;
  }

  /* form-group sin margin extra */
  .hero-search-widget .custom-search-input-2 .form-group {
    margin-bottom: 0 !important;
  }
}

/* ── Móvil ≤575px: sin íconos, padding reducido ── */
@media (max-width: 575px) {
  .hero-search-widget {
    max-width: 100%;
  }
  .hero-search-widget .nav-tabs > li > a {
    padding: 8px 10px;
    font-size: 11px;
  }
  .hero-search-widget .nav-tabs > li > a::before {
    display: none;
  }
}

/* =========================================================
   SECCIÓN 14 — HERO SEARCH: iconos Trenes y Autos
   Reemplaza los caracteres fontello (que no mapean íconos de tren/auto)
   por Bootstrap Icons inline que sí están disponibles en el proyecto.
   ========================================================= */

/* Limpiar ::before de fontello para tabs 2 y 3 */
.hero-search-widget .nav-tabs > li > a#tab_bt_2::before,
.hero-search-widget .nav-tabs > li > a#tab_bt_3::before {
  content: '';
}

/* Posicionar los <i class="bi"> inline en el mismo lugar que el pseudo-element */
.hero-search-widget .nav-tabs > li > a#tab_bt_2 .bi,
.hero-search-widget .nav-tabs > li > a#tab_bt_3 .bi {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
}

/* En ≤575px los iconos inline también se ocultan (coherente con ::before) */
@media (max-width: 575px) {
  .hero-search-widget .nav-tabs > li > a#tab_bt_2 .bi,
  .hero-search-widget .nav-tabs > li > a#tab_bt_3 .bi {
    display: none;
  }
}

/* =========================================================
   SECCIÓN 15 — FILTROS MÓVIL en listado de paquetes
   En pantallas < 992px el sidebar de filtros se colapsa
   y se muestra un botón toggle (#filters_col_bt).
   En desktop (≥992px) .d-lg-block fuerza la visibilidad.
   ========================================================= */

/* Asegurar que el título de filtros se vea dentro del colapso */
#collapseFilters h3.inner {
  margin-top: 0;
  padding-top: 0;
}

/* Botón toggle de filtros en móvil — igual que el template CityTours */
a#filters_col_bt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  padding-bottom: 10px;
  cursor: pointer;
}

a#filters_col_bt::after {
  content: '\25BE'; /* ▾ flecha hacia abajo */
  margin-left: auto;
  font-size: 16px;
  transition: transform 0.2s;
}

a#filters_col_bt[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* =========================================================
   SECCIÓN 15 — PRECIO OVERFLOW / PAGINACIÓN RESPONSIVA
   ========================================================= */

/* Evitar que precios largos desborden la card */
.short_info .price {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Precio en vista lista: respetar el ancho de la columna */
.price_list {
  font-size: 28px;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Paginación: wrap en móvil si hay muchos botones */
.pagination {
  flex-wrap: wrap;
  gap: 4px;
}

.pagination .page-link {
  min-width: 2.2em;
  text-align: center;
  padding: 0.35rem 0.55rem;
  font-size: 0.9rem;
}

@media (max-width: 575.98px) {
  .pagination .page-link {
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    min-width: 2em;
  }
}