/* =========================================
   ESTILOS DEL CARRUSEL DE TOURS (.tour-carousel-style)
   ========================================= */

.tour-carousel-style {
  /* --- 1. CONFIGURACIÓN ESTRUCTURAL --- */
  /* Base (Móvil): 1 item por vista */
  --f-carousel-slide-width: 100%;
  --f-carousel-gap: 0; /* Desactivamos gap nativo para usar padding */

  /* Hack para compensar el padding lateral y que se vea alineado */
  margin: 0 -10px;
  width: calc(100% + 20px);

  /* --- 2. CONFIGURACIÓN DE FLECHAS (Usando variables --f-arrow-*) --- */
  
  /* Tamaño y Forma */
  --f-arrow-width: 48px;
  --f-arrow-height: 48px;
  --f-arrow-border-radius: 50%; /* Círculo perfecto */

  /* Icono SVG interno */
  --f-arrow-svg-width: 22px;
  --f-arrow-svg-height: 22px;
  --f-arrow-svg-stroke-width: 2.5; /* Flecha más gruesa */

  /* Colores Normales (Fondo blanco, Icono oscuro) */
  --f-arrow-bg: #ffffff;
  --f-arrow-color: #333333;
  
  /* Colores Hover (Fondo Rojo, Icono Blanco) */
  --f-arrow-hover-bg: var(--bs-primary, #d32f2f);
  --f-arrow-hover-color: #ffffff;

  /* Colores Active (Al hacer clic) */
  --f-arrow-active-bg: var(--bs-primary, #d32f2f);
  --f-arrow-active-color: #ffffff;

  /* Sombra (Para que flote) */
  --f-arrow-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

  /* Posición (Estas sí usan --f-button-*-pos en v6 para la ubicación) */
  --f-button-next-pos: 10px; 
  --f-button-prev-pos: 10px;
}

/* --- 3. ANIMACIÓN EXTRA PARA LAS FLECHAS --- */
/* Efecto Zoom suave al pasar el mouse sobre el botón */
.tour-carousel-style .f-button {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.9;
}

.tour-carousel-style .f-button:hover {
  opacity: 1;
  transform: scale(1.1); /* Crece un 10% */
  /* Refuerzo de sombra roja al hover */
  box-shadow: 0 10px 20px rgba(214, 31, 31, 0.25); 
}

/* --- 4. ESPACIADO DE SLIDES (GAP con Padding) --- */
.tour-carousel-style .f-carousel__slide {
  padding: 25px; /* Espacio visual entre tarjetas */
  box-sizing: border-box;
  display: flex; /* Vital para igualar alturas */
  height: auto;
}

/* --- 5. RESPONSIVE (Columnas) --- */

/* Tablet (min 768px): 2 Columnas */
@media (min-width: 768px) {
  .tour-carousel-style {
    --f-carousel-slide-width: 50%;
  }
}

/* PC Escritorio (min 992px): 3 Columnas */
@media (min-width: 992px) {
  .tour-carousel-style {
    --f-carousel-slide-width: 33.333%;
  }
}