/* Estilos de tema para look profesional */
:root{
  --brand-primary:#5c3df6; --brand-secondary:#6c757d; --brand-bg:#f8f9fb; --brand-dark:#1f2430;
}
body{background:var(--brand-bg); color:#2a2a2a;}
.navbar{box-shadow:0 1px 12px rgba(0,0,0,.04);} 
.hero{background:linear-gradient(135deg,#4b2bbd 0%,#6a3df0 55%,#8a6dfb 100%);border-radius:14px; overflow:hidden; position:relative}
.hero-overlay{background:rgba(255,255,255,.03);padding-top:24px;padding-bottom:24px}
.hero h1{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.search-bar{max-width:980px;margin:12px auto 0; background:rgba(255,255,255,.12); padding:12px; border-radius:12px}
.search-bar .form-control,.search-bar .form-select{height:44px; background:#fff; border:0}
.search-bar .btn{height:44px}
.promo-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; align-items:center}
.promo-tile{background:#fff;border:1px solid #eee;border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between; min-height:56px}
.promo-tile h6{margin:0;font-weight:700; font-size:.95rem}
.promo-tile img{height:32px; width:auto}
.card-package{border:none;box-shadow:0 8px 16px rgba(0,0,0,.06);border-radius:14px;overflow:hidden}
.card-package .card-img-top{height:150px;object-fit:cover}
.badge-destination{position:absolute;left:10px;top:10px;background:var(--brand-primary);color:#fff;border-radius:20px;padding:4px 10px;font-size:.75rem}

/* Chips bajo buscador */
.search-chips .chip-toggle{background:var(--brand-primary); color:#fff; border:1px solid var(--brand-primary); border-radius:999px; padding:6px 12px; font-size:.9rem; box-shadow:0 2px 6px rgba(92,61,246,.25)}
.search-chips .chip-toggle:hover{filter:brightness(1.05)}
.search-chips .chip-toggle.active{background:#fff; color:var(--brand-primary); border-color:#fff}
.search-chips span{color:#eaeaea}

/* Promos strip */
.promo-strip{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px}
.promo-banner{background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; display:flex; align-items:center; gap:10px; min-height:72px}
.promo-banner img{height:48px}
.promo-banner .promo-title{font-weight:800}
.promo-banner .promo-sub{font-size:.9rem; color:#6c757d}
.promo-banner.black{background:#111; color:#fff; border-color:#111}

/* Carrusel en cards */
.pkg-carousel{position:relative}
.pkg-carousel .carousel-track img{display:none; width:100%; height:150px; object-fit:cover}
.pkg-carousel .carousel-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.35); color:#fff; border:none; width:28px; height:28px; border-radius:50%}
.pkg-carousel .carousel-btn.prev{left:8px}
.pkg-carousel .carousel-btn.next{right:8px}

/* Carrusel principal */
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%; /* Cada item ocupa el 100% del ancho del contenedor */
  box-sizing: border-box;
  height: 300px; /* Forzar altura del item para asegurar visibilidad del fondo */
}

/* Asegurar que cada slide no se encoja y ocupe exactamente el 100% del contenedor */
.carousel-item { flex: 0 0 100%; }

.carousel-item img {
  width: 100%;
  height: 300px; /* Altura fija para las imágenes del carrusel principal */
  object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
  border-radius: 8px; /* Bordes ligeramente redondeados */
}

.carousel-bg {
  width: 100%;
  height: 300px; /* Coincide con la altura de las imágenes del carrusel */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}

/* Fix específico para el carrusel principal: asegurar que los items ocupen espacio y las imágenes llenen el contenedor */
.carousel-container .carousel-track { align-items: stretch; }
.carousel-container .carousel-item { position: relative; min-width: 100%; box-sizing: border-box; min-height: 300px; }
.carousel-container .carousel-item img, .carousel-container .carousel-item .carousel-slide-img { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: 320px !important; object-fit: cover !important; display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 3 !important; border-radius: 8px !important; }
.carousel-container .carousel-item .carousel-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: cover; background-position: center; z-index: 1; }
.carousel-container .carousel-item { overflow: hidden; }
.carousel-container .carousel-item img { border-radius: 8px; }

/* DEBUG: reglas temporales para diagnosticar visibilidad del carrusel */
.carousel-container {
  min-height: 320px !important;
  background: rgba(0,0,0,0.02) !important;
}
.carousel-item img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 100;
  border-radius: 50%;
  font-size: 1.5rem;
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}

/* Beneficios y bloques */
.benefit-card{background:#fff;border-radius:12px;box-shadow:0 8px 16px rgba(0,0,0,.06);overflow:hidden}
.benefit-card .accent{height:6px;background:var(--brand-primary)}
.benefit-icon{font-size:24px}
.gradient-purple{background:linear-gradient(135deg,#5c3df6,#8a6dfb); color:#fff; border:none}

.newsletter input[type=email]{height:42px}
.stars{color:#ffb400;font-size:.8rem}
.price{font-weight:700;color:var(--brand-primary)}
.amenities{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.amenities .chip{background:#f1f3f5;border:1px solid #e5e7eb;color:#4b5563;border-radius:999px;padding:2px 8px;font-size:.75rem}
.benefit-card{border-radius:14px; overflow:hidden; border:1px solid #eee; background:#fff; box-shadow:0 8px 16px rgba(0,0,0,.04)}
.benefit-card .accent{height:6px; background:var(--brand-primary)}
.benefit-icon{font-size:24px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:#efeafd; color:#3b2de6}
.footer{color:#6c757d}
 .btn-primary{background:linear-gradient(135deg,#5c3df6 0%, #8a6dfb 100%);border-color:#5c3df6; color:#fff; box-shadow:0 6px 14px rgba(92,61,246,.25)}
.btn-outline-primary{background:linear-gradient(135deg,#5c3df6 0%, #8a6dfb 100%); color:#fff; border-color:#5c3df6; box-shadow:0 6px 14px rgba(92,61,246,.25)}
.btn-outline-primary:hover{filter:brightness(1.06); color:#fff}
.btn-outline-secondary{background:linear-gradient(135deg,#5c3df6 0%, #8a6dfb 100%); color:#fff; border-color:#5c3df6; box-shadow:0 6px 14px rgba(92,61,246,.25)}
.btn-outline-secondary:hover{filter:brightness(1.06); color:#fff}
.btn-gradient-primary{background:linear-gradient(135deg,#5c3df6 0%, #8a6dfb 100%); color:#fff; border:none; box-shadow:0 6px 14px rgba(92,61,246,.25)}
.btn-gradient-primary:hover{filter:brightness(1.06); color:#fff}
.btn-gradient-primary:focus{box-shadow:0 0 0 .25rem rgba(92,61,246,.35)}
.stars{display:flex; align-items:center; gap:2px}
.stars .star{width:18px; height:18px; display:inline-block; position:relative; line-height:18px;}
.stars .star::before{content:'★'; font-size:18px; color:#ddd; position:absolute; left:0; top:-1px}
.stars .star.full::before{color:#f5a623}
.stars .star.half::before{background:linear-gradient(to right,#f5a623 50%,#ddd 50%); -webkit-background-clip:text; background-clip:text; color:transparent}

.amenities .chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:#f4f4f7; border:1px solid #ececf1; border-radius:999px; font-size:.85rem}
.amenities .chip .icon{font-size:16px}
/* Iconografía SVG */
.navbar .nav-link svg{width:16px; height:16px}
.navbar .nav-link:hover svg{color:var(--brand-primary)}
.amenities .chip .icon svg{width:14px; height:14px}

/* Reseñas */
#reviews .review-item{border-bottom:1px solid #eee; padding:8px 0}
#reviews .review-item:last-child{border-bottom:none}
#reviews .pagination .page-link{color:var(--brand-primary)}

/* Distribución de ratings */
.rating-dist .bar{background:#eef2f7; height:8px; border-radius:4px; overflow:hidden}
.rating-dist .bar .fill{background:var(--brand-primary); height:100%}

/* Carousel: reglas finales para mantener track en flex y asegurar visibilidad de slides */
#main-carousel-track, .carousel-container { min-height: 320px !important; height: 320px !important; }
/* El track principal debe ser flex para el cálculo correcto del ancho de slides */
#main-carousel-track { display: flex !important; transition: transform 0.5s ease-in-out !important; transform: translateX(0) !important; }
#main-carousel-track .carousel-track { display: flex !important; }
#main-carousel-track .carousel-item { flex: 0 0 100% !important; min-width: 100% !important; height: 320px !important; min-height: 320px !important; position: relative !important; overflow: hidden !important; box-sizing: border-box !important; }
#main-carousel-track .carousel-slide-img, #main-carousel-track .carousel-item img { display: block !important; width: 100% !important; height: 320px !important; object-fit: cover !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 5 !important; }
#main-carousel-track .carousel-bg { display: none !important; }
#main-carousel-track .carousel-debug-label { z-index: 200 !important; }
.carousel-button { z-index: 300 !important; }

/* Fix overlay link inside slides: make sure it's transparent and doesn't hide images */
#main-carousel-track .carousel-item > a { position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; display: block !important; background: transparent !important; border: none !important; z-index: 10 !important; }

#main-carousel-track .carousel-slide-img { z-index: 5 !important; }