/* =========================
   RESULTADOS – TESTIMONIOS
   ========================= */

.resultados{
  position: relative;
  padding: 0 0;
  background: var(--azul-10);
}

.resultados-interna{
  position: relative;
  padding: 120px 0;
 background: #fff;

}

/* Panel celeste que empieza DEBAJO del wave */
.testi-bg{
  position: absolute;
  left: 0;
  right: 0;
  top: 347px;              /* 👈 desde dónde empieza el celeste: AJUSTA */
  bottom: 0;
  background: #e7f3fb;     /* tu celeste de testimonios */
  z-index: 0;
}

/* Wave SVG arriba */
.testi-wave{
  position: relative;
  z-index: 1;
}

.testi-wave img{
  width: 100%;
  height: auto;
  display: block;
}

/* Contenido por encima de todo */
.resultados-inner{
  position: relative;
  z-index: 2;
  padding-top: 80px;        /* espacio entre la ola y el título */
}

.resultados-inner{
  position: relative;
}

.resultados-title{
  margin-bottom: 60px;
  max-width: 700px;
  color: var(--azul2-100);
}

/* Swiper: MUY IMPORTANTE que no recorte las elipses */
.resultados-swiper{
  overflow: visible;
}

.resultados-swiper .swiper-wrapper{
  align-items: stretch;
}

.resultados-swiper .swiper-slide{
  overflow: visible !important;   /* 🔴 evita que se corten los avatares */
  display: flex;
  justify-content: center;
}

/* Card principal (Figma: 467 x 462) */
.testi-card{
  position: relative;
  width: 467px;
  height: 600px;
  border-radius: 32px;
  background: #FFFFFF;
  box-shadow: 0 24px 40px rgba(0,0,0,.08);
  padding: 120px 72px 64px;        /* espacio interior; arriba dejamos sitio para texto */
  overflow: visible;               /* 🔴 no recortamos el avatar */
}

/* Avatar circular (Figma: 166 x 166, borde 10px) */
.testi-avatar{
  position: absolute;
  top: 5px;
    left: -86px;                   /* ajusta según quieras */
  width: 166px;
  height: 166px;
  border-radius: 50%;
  border: 10px solid var(--azul-10, #EBF4FA);   /* Primary / Azul P 10 */
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  z-index: 2;
}

.testi-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenido de la card */
.testi-card-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.testi-text{
  color: var(--texto-60, #8D8C8E);
}

.testi-author{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testi-author-name{
  color: var(--azul2-100, #0069CF);
}

.testi-author-meta{
  color: var(--texto-60, #8D8C8E);
}

/* Comillas decorativas (muy suaves) */
.testi-quotes{
  position: absolute;
  right: 72px;
  top: 51px;
 
  line-height: 1;
  color: rgba(0,0,0,.03);
  pointer-events: none;
}

/* Flechas */
.resultados-nav{
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.resultados-btn{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--verde-100, #5DA500);
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
}

/* Triangulito interior de la flecha */
.resultados-btn::before{
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--verde-100, #5DA500);
  border-right: 2px solid var(--verde-100, #5DA500);
  transform: rotate(45deg);
}

.resultados-prev::before{
  transform: rotate(-135deg);
}

.resultados-next::before{
  transform: rotate(45deg);
}



/* ========================
   RESPONSIVE
   ======================== */

@media (max-width: 1024px){
  .testi-card{
    width: 420px;
    height: auto;
  }
}

@media (max-width: 768px){
  .resultados{
    padding: 80px 0;
  }

  .resultados-title{
    margin-bottom: 40px;
  }

  .resultados-swiper .swiper-slide{
    justify-content: center;
  }

  .testi-card{
    width: 343px;        /* Figma móvil */
    height: auto;
    padding: 120px 24px 64px;
  }

  .testi-avatar{
    left: 50%;
    transform: translateX(-50%);
  }

  .resultados-nav{
    justify-content: center;
  }

  .resultados-q{
   
    left: -40px;
    bottom: -40px;
    width: 200px;
  }
}


/* Evitar que se corte el avatar de testimonios
   (algunas plantillas ponen overflow:hidden en .container o .swiper) */
.resultados,
.resultados .container,
.resultados-inner,
.resultados-swiper,
.resultados-swiper .swiper-wrapper,
.resultados-swiper .swiper-slide,
.resultados .testi-card{
  overflow: visible !important;
}



/* 1) Evita scroll horizontal sin matar el “overflow visible” interno */
.resultados{
  overflow-x: clip;  /* moderno */
}

/* Fallback */
@supports not (overflow: clip){
  .resultados{
    overflow-x: hidden;
  }
}


.resultados .container{
  padding-left: 110px;  /* 86 + un margen */
  padding-right: 24px;
}

@media (max-width: 768px){
  .resultados .container{
    padding-left: 24px; /* en móvil ya lo centras */
    padding-right: 24px;
  }
}


/* ====== CONTENEDOR ANCHO 1905 (sin scroll horizontal) ====== */
.resultados{
  overflow-x: hidden !important; /* <-- clave: gana a tu overflow visible */
}

/* el “container” ancho real */
.resultados-wide{
  max-width: 1440px;
  margin: 0 auto;
}

/* Dale aire a la izquierda para el avatar que sale */
.resultados-inner{
  padding-left: 110px;  /* 86px del avatar + margen */
  padding-right: 24px;
}

/* Swiper no debe recortar, pero el SECTION ya corta el scroll */
.resultados-swiper{
  overflow: visible !important;
}

/* Slides: que se mantengan en su tamaño natural */
.resultados-swiper .swiper-slide{
  width: 467px;          /* tu card */
  overflow: visible !important;
}

/* Card y avatar igual */
.testi-card{ overflow: visible; }

/* Mobile: sin offset izquierdo */
@media (max-width: 768px){
  .resultados-inner{
    padding-left: 24px;
    padding-right: 24px;
  }
}