/* ========================================
   APPROACH SLIDER - ONLY CSS
   (extraído y limpiado del style.css general)
   Respeta tus variables :root (primary, blanco, radius, tamaños, etc.)
   ======================================== */

/* Wrapper */
.approach-slider-wrapper{
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* Container */
#approach-splide{
  position: relative;
  padding-bottom: 50px; /* espacio para dots */
}

/* Track/list: necesarios para slider custom */
#approach-splide .splide__track{
  overflow: hidden;
  min-height: 408px;
  display: flex;
  align-items: center;
}

#approach-splide .splide__list{
  display: flex;               /* CLAVE: carrusel horizontal */
  align-items: center;
  will-change: transform;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Slides */
#approach-splide .splide__slide{
  flex: 0 0 auto;              /* CLAVE: respeta width puesto por JS */
  display: flex;
  justify-content: center;
  align-items: center;

}

/* Card base */
.approach-slide{
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  
}

#approach-splide .approach-slide{
  height: 408px;
}

/* altura grande solo para la activa */
#approach-splide .splide__slide.is-active .approach-slide{
  height: 408px;
}

/* Prev/Next más bajos (solo altura, nunca width fijo) */
#approach-splide .splide__slide.is-prev .approach-slide,
#approach-splide .splide__slide.is-next .approach-slide{
    height: 408px;
}



/* Activo en layout 2 columnas */
#approach-splide .splide__slide.is-active .approach-slide{
  display: flex;
  flex-direction: row;
  z-index: 2;
}

/* Imagen */
.approach-slide .slide-image{
  position: absolute;
  top: 0;
  left: 0; /* IMPRESCINDIBLE para que el ancho se anime desde este punto */
  bottom: 0;
  width: 100%;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: none;
}

.approach-slide .slide-image:after {
content: " ";
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(214.28deg, rgba(81, 142, 170, 0) 18.36%, rgba(81, 142, 170, 0.6) 92%);
}


/* Activo: imagen a la izquierda */
#approach-splide .splide__slide.is-active .approach-slide .slide-image{
  width: 50%;
  height: 100%;
  transition: width 0.4s ease;
}

/* Contenido */
.approach-slide .slide-content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
}

#approach-splide .splide__slide .slide-content {
  width: 100%;
  background-color: transparent;
 
}


/* Activo: contenido a la derecha */
#approach-splide .splide__slide.is-active .approach-slide .slide-content{
  position: relative;
  width: 50%;
  margin-left: 50%;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  /*transition: all 0.4s ease;*/
  background: linear-gradient(334deg, var(--primary) 7.61%, #E5E7EB 156.49%);
}

/* Tipos */
#approach-splide .slide-tag{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--size-26);
  color: var(--blanco);
  text-align: center;
  display: inline-block;
  width: 100%;
}

#approach-splide .slide-text{
  opacity: 0;
  width:0;
  height: 0;
  /*transition-delay: 0.3s;
  transition: all 0.4s ease;*/
}

#approach-splide .splide__slide.is-active .slide-tag{
  font-family: var(--font-title);
  font-size: var(--size-24);
  font-weight: 400;
  letter-spacing: 0.296px;
  line-height: 1.2em;
  /* 1. Anula el escalado del padre (1 / 1.06) */
  transform: scale(0.9434); 
  /* 2. Alinea el origen del transform a la izquierda */
  transform-origin: left center;
  text-align: left;
  
  
}

#approach-splide .splide__slide.is-active .slide-text{
  display: block;
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: var(--size-16);
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.296px;
  margin-top: var(--padding-int);
  opacity: 1;
  visibility: visible;
  height: auto;
  width: auto;
  transform-origin: left center;
}


/* Prev/Next sin fondo en texto */
#approach-splide .splide__slide.is-prev .approach-slide .slide-content,
#approach-splide .splide__slide.is-next .approach-slide .slide-content{
  background: transparent;
}

/* ========================================
   Arrows (usa tus iconos por ::before)
   ======================================== */
#approach-splide .splide__arrows{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* wrapper no bloquea */
  z-index: 50;
}

#approach-splide .splide__arrows svg {
  display: none;
}

#approach-splide .splide__arrow{
  pointer-events: auto; /* botones sí */
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

#approach-splide .splide__arrow::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/flecha_azul_btn.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

#approach-splide .splide__arrow--prev{ left: 0; }
#approach-splide .splide__arrow--prev::before{ transform: rotate(180deg); }

#approach-splide .splide__arrow--next{ right: 0; }

/* ========================================
   Pagination dots
   ======================================== */
#approach-splide .splide__pagination{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 50;
}

#approach-splide .splide__pagination__page{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(81,142,170,0.25);
  cursor: pointer;
  padding: 0;
}

#approach-splide .splide__pagination__page.is-active{
  background: var(--primary);
}

#approach-splide .splide__list { 
  display:flex; 
  padding-top: var(--padding-int) !important;
  padding-bottom: var(--padding-int) !important;
}
#approach-splide .splide__slide { flex: 0 0 auto; }
#approach-splide .splide__track { overflow:hidden; }

#approach-splide.splide {
  padding: 0 var(--margin-section);
  padding-bottom: var(--margin-section);
}

/* suavidad */
#approach-splide .splide__slide{
  
  transform-origin: center center;
}

/* laterales */
#approach-splide .splide__slide{
  transform: scale(0.9);
  transition: transform 0.4s ease;
}

/* activa */
#approach-splide .splide__slide.is-active{
  transform: scale(1.06);
  
  opacity: 1;
  z-index: 5;
}

/* opcional: prev/next un pelín más grandes que el resto */
#approach-splide .splide__slide.is-prev,
#approach-splide .splide__slide.is-next{
  transform: scale(0.9);
  z-index: 3;
}

@media screen and (max-width: 1500px) {

  #approach-splide .splide__slide.is-active .approach-slide .slide-content {
    width: 60%;
    margin-left: 40%;
  } 
}

@media screen and (max-width: 1280px) {
  #approach-splide .splide__slide.is-active, 
  #approach-splide .splide__slide.is-prev,
  #approach-splide .splide__slide.is-next,
  #approach-splide .splide__slide {
    transform: scale(1);
    width: calc(100% - 2 * var(--margin-section));
  } 

  #approach-splide .splide__list {
    width: 100%;
  }

  #approach-splide .splide__slide .approach-slide .slide-content, 
  #approach-splide .splide__slide.is-active .approach-slide .slide-content,
  #approach-splide .splide__slide.is-prev .approach-slide .slide-content, 
  #approach-splide .splide__slide.is-next .approach-slide .slide-content {
        position: relative;
        width: 50%;
        margin-left: 50%;
        left: auto;
        right: auto;
        bottom: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        opacity: 1;
        visibility: visible;
        height: 100%;
        /*transition: all 0.4s ease;*/
        background: linear-gradient(334deg, var(--primary) 7.61%, #E5E7EB 156.49%);
  }

    #approach-splide .splide__slide .slide-tag{
    font-family: var(--font-title);
    font-size: var(--size-26);
    font-weight: 400;
    letter-spacing: 0.296px;
    line-height: 1.2em;
    /* 1. Anula el escalado del padre (1 / 1.06) */
    transform: scale(0.9434); 
    /* 2. Alinea el origen del transform a la izquierda */
    transform-origin: left center;
    text-align: left;
  }

  #approach-splide .splide__slide .slide-text{
    display: block;
    color: var(--blanco);
    font-family: var(--font-body);
    font-size: var(--size-18);
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: 0.296px;
    margin-top: var(--padding-int);
    opacity: 1;
    visibility: visible;
    height: auto;
    width: auto;
    transform-origin: left center;
  }
}

@media screen and (max-width: 1024px) {
  /* Forzamos al contenedor principal a permitir el crecimiento vertical */
  #approach-splide .splide__track {
    overflow: visible !important;
    height: auto !important;
  }

  /* Convertimos la lista de Splide en un contenedor flex vertical */
  #approach-splide .splide__list {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important; /* Anula el desplazamiento del JS */
    gap: var(--padding-int) !important;
    padding: 0 !important;
  }

  /* Ajustamos cada slide para que ocupe todo el ancho y se apile */
  #approach-splide .splide__slide {
    width: 100% !important;
    transform: none !important; /* Quitamos el escalado (0.9 o 1.06) de escritorio */
    opacity: 1 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Re-ajustamos la tarjeta para que sea visible y consistente */
  .approach-slide {
    height: auto !important;
    min-height: 140px;
    cursor: default;
    transform: none !important;
  }

  /* Forzamos el layout de "activo" (imagen arriba o al lado) para todos los slides */
  #approach-splide .approach-slide,
  #approach-splide .splide__slide.is-active .approach-slide {
    display: flex !important;
    flex-direction: column !important; /* Imagen arriba, texto abajo en mobile */
    height: auto !important;
  }

  /* Aseguramos que la imagen y el contenido se vean en todos los slides */
  .approach-slide .slide-image {
    position: relative !important;
    width: 100% !important;
    height: 140px !important; /* Altura fija para la imagen en la lista */
    inset: auto !important;
    margin-bottom: var(--padding-int);
    border-radius: var(--radius);
  }

  .approach-slide .slide-content {
    position: relative !important;
    width: 100% !important;
    margin-left: 0 !important;
    background: linear-gradient(334deg, var(--primary) 7.61%, #E5E7EB 156.49%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 20px !important;
  }

  /* Mostramos el texto que en desktop suele estar oculto en las no-activas */
  #approach-splide .slide-text {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin-top: 10px !important;
  }

  #approach-splide .splide__slide .slide-tag, 
  #approach-splide .splide__slide.is-active .slide-tag {
    text-align: center;
    transform: scale(1);
  }

  /* Ocultamos flechas y paginación (ya lo tenías, pero asegúrate) */
  #approach-splide .splide__arrows, 
  #approach-splide .splide__pagination {
    display: none !important;
  }

  .approach-slide .slide-content {
    background-color: var(--primary) !important;
    border-radius: var(--radius);
  }

  #approach-splide .slide-ta, #approach-splide .splide__slide .slide-content,
  #approach-splide .splide__slide .slide-content p {
    text-align: center;
    color: var(--blanco);
  }

  #approach-splide .splide__slide .slide-content .slide-text {
    font-weight: 300;
    line-height: 1.2em;
  }

  #approach-splide.splide {
    padding: 0 !important;
  }
}