@charset "utf-8";
/* ============================================================
   Tours index · Ajustes de rediseño (carga DESPUÉS de index-modern.css)
   1) Todos los botones en #00c0c0
   2) allTours como banda compacta bajo el hero
   3) Carruseles "corridos" (sin el alto de 100vh entre cada uno)
   4) Responsive: PC · tablet horizontal · tablet vertical · smartphone
   ============================================================ */

:root{
  --tour-teal:#00c0c0;
  --tour-teal-d:#00a3a3;
  --tour-teal-sh:rgba(0,192,192,.32);
}

/* ---- evitar scroll horizontal por 100vw ---- */
.firstStage, .allTours{ width:100% !important; }

/* ============================================================
   1) BOTONES  ->  #00c0c0
   ============================================================ */
/* "Lo quiero" */
.buy{ background:var(--tour-teal) !important; color:#fff !important; }
.buy:hover{ background:var(--tour-teal-d) !important; color:#fff !important; }

/* "Saber más" (enlace) */
.know{ color:var(--tour-teal) !important; }
.know:hover{ color:var(--tour-teal-d) !important; }

/* Badge de descuento (mismo tono para unificar) */
.discount{ background:var(--tour-teal) !important; color:#fff !important; }

/* "VER TODOS LOS TOURS" */
#btn{
  background:var(--tour-teal) !important;
  color:#fff !important;
  border-radius:980px !important;
  box-shadow:0 12px 30px var(--tour-teal-sh) !important;
  border:none !important;
}
#btn:hover{ background:var(--tour-teal-d) !important; color:#fff !important; }

/* Flechas del carrusel: círculo teal con chevron blanco.
   z-index:1 para que queden por DEBAJO del header (#header z-index:2) y del top. */
.carousel-button{ background:var(--tour-teal) !important; border-color:var(--tour-teal) !important; z-index:1 !important; }
.carousel-button::before{ border-right-color:#fff !important; border-bottom-color:#fff !important; }
.carousel-button:hover{ background:var(--tour-teal-d) !important; }

/* ============================================================
   3) CARRUSELES compactos (uno tras otro)
   ============================================================ */
.firstStage{
  height:auto !important;
  min-height:0 !important;
  padding:6px 0 2px !important;
  margin:0 !important;
}
.titleSlider{
  padding:14px 5% 6px !important;
  margin:0 !important;
  font-size:clamp(20px,2.6vw,30px) !important;
}
.carousel-container{ margin:0 !important; padding:0 !important; }
.carousel-track{
  max-width:90vw !important;
  margin:0 auto 10px !important;    /* antes 5vh de separación */
  padding-bottom:4px !important;
}

/* ============================================================
   2) allTours: banda compacta (ya no pantalla completa)
   ============================================================ */
.allTours{
  height:auto !important;
  min-height:clamp(340px,52vh,520px) !important;
  display:flex !important;
  align-items:center !important;
}
.allTours .overlay{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:inherit;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:46px 0 !important;
}
#titleTours{
  padding-top:0 !important;
  margin:0 8% 10px !important;
  font-size:clamp(26px,4vw,44px) !important;
  line-height:1.1 !important;
}
#text{
  margin:0 8% 22px !important;
  font-size:clamp(15px,1.8vw,20px) !important;
  line-height:1.5 !important;
  max-width:820px;
}
/* CTA compacto y centrado (no banda de lado a lado) */
.allTours #btn{
  display:inline-block !important;
  align-self:center !important;   /* centra en el flex-column */
  width:auto !important;
  max-width:max-content !important;
  margin:6px auto 0 !important;
  padding:15px 40px !important;
  text-align:center !important;
  cursor:pointer !important;
  transition:background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease !important;
  /* pulso de sombra: atrae el clic a nivel inconsciente */
  animation:ctaToursPulse 2s ease-in-out infinite !important;
}
/* Latido: la sombra crece y se contrae para "pedir" clic */
@keyframes ctaToursPulse{
  0%   { box-shadow:0 8px 22px var(--tour-teal-sh), 0 0 0 0 rgba(0,192,192,.45); }
  50%  { box-shadow:0 16px 40px var(--tour-teal-sh), 0 0 0 14px rgba(0,192,192,0); transform:translateY(-2px) scale(1.03); }
  100% { box-shadow:0 8px 22px var(--tour-teal-sh), 0 0 0 0 rgba(0,192,192,0); }
}
/* Hover: se detiene el latido, fondo blanco y texto azul */
.allTours #btn:hover{
  background:#fff !important;
  color:#007aff !important;
  border:1px solid #007aff !important;
  animation:none !important;
  transform:translateY(-2px) scale(1.05) !important;
  box-shadow:0 18px 44px rgba(0,122,255,.30) !important;
}
@media (prefers-reduced-motion:reduce){
  .allTours #btn{ animation:none !important; }
}

/* ============================================================
   4) RESPONSIVE · tarjetas visibles por breakpoint
   ============================================================ */
/* PC y tablet horizontal grande: 3 tarjetas */
.carousel-item{ flex:0 0 calc(100% / 3) !important; }

/* Tablet horizontal / laptop chico (≤1024): 3 tarjetas más ajustadas */
@media (max-width:1024px){
  .carousel-item{ flex:0 0 calc(100% / 3) !important; }
  .carousel-item img{ height:190px !important; }
}

/* Tablet vertical (≤820): 2 tarjetas */
@media (max-width:820px){
  .carousel-item{ flex:0 0 calc(100% / 2) !important; }
  .carousel-track{ max-width:92vw !important; }
  .carousel-item img{ height:200px !important; }
}

/* Smartphone (≤600): 1 tarjeta con “peek” de la siguiente */
@media (max-width:600px){
  .carousel-item{ flex:0 0 86% !important; }
  .carousel-item img{ height:210px !important; }
  .carousel-track{ max-width:100vw !important; margin:0 0 10px !important; padding:0 4vw 6px !important; gap:2px; }
  .carousel-button{ display:none !important; }   /* en móvil se usa swipe */
  .titleSlider{ padding:12px 5% 4px !important; }
  .allTours{ min-height:clamp(300px,60vh,460px) !important; }
  #titleTours, #text{ margin-left:6%; margin-right:6%; }
  .allTours #btn{ margin:6px auto 0 !important; padding:14px 34px !important; }
}

/* ============================================================
   5) PRODUCTS · el título nunca debe salirse del tile
   (banda inferior centrada, con wrap, en TODOS los tamaños)
   ============================================================ */
.item1{ position:relative !important; overflow:hidden !important; }
.item1 p{
  position:absolute !important;
  left:8px !important; right:8px !important; bottom:10px !important; top:auto !important;
  width:auto !important; max-width:calc(100% - 16px) !important;
  margin:0 !important; padding:6px 10px !important; box-sizing:border-box !important;
  text-align:center !important;
  font-size:clamp(14px,2vw,24px) !important; line-height:1.15 !important;
  overflow-wrap:break-word !important; word-break:break-word !important; hyphens:auto;
  color:#fff !important; background:rgba(0,0,0,.45) !important; border-radius:12px !important;
}
/* Tablet (vertical y horizontal): versión móvil, 2 por fila */
@media (max-width:1024px){
  .item1{ flex:2 2 calc(50% - 10px) !important; }
  .item1 p{ font-size:clamp(14px,2.6vw,20px) !important; }
}
/* Smartphone: 1 por fila */
@media (max-width:600px){
  .item1{ flex:1 1 100% !important; height:170px !important; }
  .item1 p{ font-size:18px !important; }
}