/* Tu Destino — carrusel de banners principales del home. Imagen distinta
   para escritorio (recomendado 1920x840) y móvil (recomendado 900x1200)
   vía <picture>. No se fuerza ni recorta a una proporción fija: cada
   banner se muestra a su proporción real (igual que el banner de los
   contenedores del home), y el alto del carrusel lo ajusta hero-carousel.js
   según la imagen del slide activo, para que no salte al cambiar de slide
   si alguna imagen tiene una proporción distinta a la recomendada. */

/* En escritorio el carrusel queda contenido (con aire a los costados, como
   el resto del sitio) en vez de ir borde a borde — se ve mejor con imágenes
   de proporciones muy anchas. En móvil sigue a todo el ancho (ver media
   query al final), igual que antes. El wrapper solo aporta el ancho máximo
   y el margen lateral: el radio de borde va en .hero-carousel para que
   quede pegado al borde real de la imagen, no al espacio en blanco de
   afuera. */
.hero-carousel-outer { max-width: 1560px; margin: 0 auto; padding: 0 24px; }
.hero-carousel { position: relative; overflow: hidden; background: var(--arena); transition: height .3s ease, border-radius .3s ease; border-radius: 24px; }
.hero-carousel .hc-track {
  display: flex; align-items: flex-start; transition: transform .6s ease;
}
.hero-carousel .hc-slide {
  position: relative; flex: 0 0 100%; min-width: 0;
}
.hero-carousel .hc-slide a { display: block; width: 100%; }
.hero-carousel .hc-slide picture,
.hero-carousel .hc-slide img {
  width: 100%; height: auto; display: block;
}

.hc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(11,29,51,.45); color: #fff; border: none;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.hc-arrow:hover { background: rgba(11,29,51,.7); }
.hc-arrow-prev { left: 16px; }
.hc-arrow-next { right: 16px; }

.hc-dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.hc-dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55);
  border: none; cursor: pointer; padding: 0;
}
.hc-dot.active { background: #fff; }

/* Si el buscador de paquetes está activo justo debajo (semi montado, se
   superpone al borde inferior del carrusel), subimos los dots para que no
   queden tapados por la tarjeta del buscador. El selector va sobre el
   wrapper (.hero-carousel-outer), que es el que ahora es hermano directo
   de .search-widget-wrap en el HTML. */
.hero-carousel-outer:has(+ .search-widget-wrap:not(.hidden)) .hc-dots { bottom: 58px; }
@media (max-width: 860px) {
  .hero-carousel-outer:has(+ .search-widget-wrap:not(.hidden)) .hc-dots { bottom: 40px; }
}

@media (max-width: 768px) {
  .hc-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
  /* En móvil el banner vuelve a ir de borde a borde, como siempre. */
  .hero-carousel-outer { max-width: none; padding: 0; }
  .hero-carousel { border-radius: 0; }
}