/* ==================================== */
/* 1. Contenedor del Triple Slider      */
/* ==================================== */
/* (Se mantiene igual que la versión anterior) */

.wpsp-triple-slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==================================== */
/* 2. Estilos Comunes de los Slides     */
/* ==================================== */

.wpsp-slide-item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wpsp-bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
}

/* Overlay para oscurecer la imagen y darle un color base */
.wpsp-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  opacity: 0.5;
}

.wpsp-slide-content {
    position: relative;
    z-index: 3; 
    color: #ffffff;
    padding: 5% 5% 0% 5%;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Estilos del Título y Subtítulo */
.wpsp-text-header {
 	display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0px;
}

.wpsp-title {
    font-size: clamp(0.8em, 5vw, 2.5em); 
    text-transform: uppercase;
  	padding: 5px 0;
  	font-weight: 100;
    margin: 0;
  	text-align: end;
  	color: white;
}

.wpsp-subtitle {
    font-size: clamp(0.8em, 5vw, 2.5em);
 	text-transform: uppercase;
  	font-weight: 900;
    margin-bottom: 0px !important;
  	text-align: end;
  	color: white;
}

/* Estilos de la parte inferior (Botones e Información) */
.wpsp-actions-info-wrapper {
    width: 100%;
}

.wpsp-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
    margin-top: 10px;
    justify-content: flex-start;
}

.wpsp-btn {
    display: inline-block;
  font-size: clamp(0.2em, 1.5vw, 0.8em);
  --corner-size: 20px;
  padding: 6px 10px;
  background-color: #042A61;
  color: #ffffff;
  text-decoration: none !important;
  clip-path: polygon(var(--corner-size) 0%, calc(100rem - var(--corner-size)) 0%, 100% 50%, calc(100% - var(--corner-size)) 100%, var(--corner-size) 100rem, 0% 50%);
  overflow: hidden;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.wpsp-btn:hover {
    background-color: #ffffff;
    color: #042A61;
}

.wpsp-info {
    font-size: clamp(0.2em, 2vw, 1em);
    line-height: 1.2;
    text-align: justify;
  	max-width: 75%;
    margin-bottom: 60px !important;
}

/* ==================================== */
/* 3. Posicionamiento del Triple Slider */
/* ==================================== */

.wpsp-swiper-center {
    position: relative;
    max-width:100%;
    width: 60%;
    height: 100%;
    z-index: 10;
    transition: width 0.3s;
}

.wpsp-swiper-left, 
.wpsp-swiper-right {
    position: relative;
    width: 100%;
    height: 60vh;
    z-index: 5;
    transition: all 0.3s;
    transform: scale(0.85); 
    opacity: 0; /* Mantenemos opacidad alta en el contenedor, controlamos con el overlay */
    filter: blur(2px); /* Mantenemos el desenfoque */
}

.wpsp-swiper-center .swiper-slide:not(.swiper-slide-active) {
    filter: blur(2px);
}

.wpsp-swiper-center .swiper-slide-active .wpsp-slide-overlay {
    opacity: 1 !important;
}

/* Posicionamiento específico (Mantenido) */
.wpsp-swiper-left {
    left: 0;
    transform-origin: center; 
    margin-right: -10%; 
}

.wpsp-swiper-right {
    right: 0;
    transform-origin: center left; 
    margin-left: -10%;
}

/* === REGLA CLAVE: OCULTAR CONTENIDO DETALLADO EN SLIDES LATERALES === */
.swiper-duplicate .wpsp-actions-info-wrapper,
.swiper-duplicate .wpsp-subtitle {
    /* Opacidad y tamaño del texto para simular ser solo un fondo */
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Ajuste del Overlay en los Duplicados para que sean más claros */
.swiper-duplicate .wpsp-slide-overlay {
    opacity: 0.05;
}

/* Ajuste del Título en los Duplicados */
.swiper-duplicate .wpsp-title {
    color: #ffff; /* Texto del título más oscuro en el fondo */
    text-shadow: none;
    font-size: 2em;
    border-bottom-color: #000;
}

/* ==================================== */
/* 4. Navegación (Solo en el Centro)    */
/* ==================================== */

.wpsp-swiper-center .swiper-button-next,
.wpsp-swiper-center .swiper-button-prev {
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15; /* Asegura que la flecha esté sobre los slides laterales */
}

.wpsp-swiper-center .swiper-button-prev {
    left: 20px;
}

.wpsp-swiper-center .swiper-button-next {
    right: 20px;
}

/* ==================================== */
/* 5. Responsividad Móvil (Menos de 768px) */
/* ==================================== */

@media (max-width: 767px) {
    .wpsp-triple-slider-container {
        flex-direction: column;
        height: 80vh; 
    }

    .wpsp-swiper-center {
        width: 100%;
        height: 50vh; 
        order: 2; /* Mantenemos el centro en el medio visualmente */
    }

    /* Ocultamos los duplicados en móvil ya que el efecto triple no funciona bien */
    .wpsp-swiper-left, 
    .wpsp-swiper-right {
        display: none;
    }
  
  .wpsp-title {
  	padding: 5px 10px 0 0;
}
  
  .wpsp-text-header {
  	margin-top:10px;
  }

  .wpsp-subtitle {
  	padding: 0 10px 0 0;
  }
  
  .wpsp-slide-content{
    padding: 20px;
  }
  
  .wpsp-info{
  	margin-bottom: 25px !important;
    width:70%;
  }
  
  .wpsp-buttons{
    margin-bottom: 18px;
  }
  
  .wpsp-triple-slider-container{
  	    height: 50vh;
  }
  
  
}