/* BLOQUE4....................... */
#bloque4 {
height: 100vh;
background: linear-gradient(
    to bottom,
     #1D2A4A 0%,
    #1D2A4A 40%,
    #ffffff 40%,
    #ffffff 100%
  /*   #E3EDF3  40%,
     #E3EDF3  100% */
  );
  display: flex;
    justify-content: center;
    align-items: center;
}

#seccionBloque4{
      display: flex;
      flex-direction: column;
    justify-content: center;
    align-items: center;
    
}


.cardClientes{
 padding: 20px 0px;
  width: 100%;
margin-bottom: 20px;


}
.clientesH5{
    font-size: 3rem;
    margin: 0px;
    font-weight: 300;
    line-height: 1;
    color: white;
 text-align: center;
  margin-bottom: 20px;
 
}

.textoOpinan{
  width: 100%;
   font-size: 1.5rem;
    margin: 0px;
    font-style: italic;
    font-weight: 400;
    line-height: 1;
     color: white;
  text-align: center;

}









/* CARDS OPINION,.............. */









.cardWhite{
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
justify-content: space-between;
align-items: center;
box-shadow: 0px 5px 10px -5px black;
}
.cardIconoOpinion{
  width: 100%;
   border-radius: 12px 12px 0px 0px;
   padding:10px;
  background-color: #bababa;

}

.cardIconoOpinion img{
 width: 35px;
}


.cardTextOpinion{
  width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px 20px;

}

.cardImgUser{
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 10px;
}
.cardImgUser img{
  width: 35px;
}
.textoOpinionClientes{
  color:black;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 300;
  margin: 0px;
  line-height: 1.3;
}




/* SLIDER ................................*/

/* Contenedor principal */
.swiper-container-wrapper {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
margin-top: 100px;

}

/* Slider Swiper */
.swiper {
  width: 100%;
height: auto;   
}

/* Slides */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  transition: transform 0.5s ease;
}

/* Imágenes */
.swiper-slide img {
  display: block;
 max-width: 65%; 
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

/* Slide central destacado */
.swiper-slide-active img {
  transform: scale(1.3); 
  z-index: 10;
}



/* Flechas */
.custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: grey;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 20;
  user-select: none;
  transition: all 0.3s ease;
}

.custom-arrow:hover {
  background-color: white;
  transform: translateY(-50%) scale(1.1);
}

.custom-arrow.prev { left: 0px; }
.custom-arrow.next { right: 0px; }

/* Paginación */
.swiper-pagination-bullet {
  background: white;
  opacity: 0.7;
}



/* ARROW............... */
.cardImgArrow{
    display: flex;
    justify-content: center;
    align-items: center;
 margin-top: 50px;
}



@media (max-width: 1200px) {

#bloque4 {
height: auto;
    padding: 20px 0px;
}


}




@media (max-width: 990px) {


  .swiper-slide-active img {
  transform: scale(1.2); 
  
}
.clientesH5{
    font-size: 2.5rem;
    margin-bottom: 20px;
}

}

@media (max-width: 765px) {

  #bloque4 {
background: linear-gradient(
    to bottom,
     #ffffff 0%,
    #ffffff 40%,
    #ffffff 40%,
    #ffffff 100%
  );

  }

  .cardWhite{
  height: 250px;
}

.cardsOpinion{
  margin-bottom: 20px;
}

.cardClientes{
  padding: 10px;
  margin-bottom: 20px;
}
  .clientesH5{
  line-height: 1.2;
  color: #1D2A4A;
}
  .textoOpinan{
    font-size: 1.2rem;
      color: #1D2A4A;
  }


.swiper-container-wrapper {

  margin-top: 20px;
 
}

.swiper-slide img {
 
 max-width: 70%; 

}



    .custom-arrow.prev { 
       
        left: 30px; 
    }
    
    .custom-arrow.next { 
      
        right: 30px; 
    }
    
    
    .custom-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
        transform: translateY(-50%); 
    }
    
    .custom-arrow:hover {
        transform: translateY(-50%); 
    }


}

@media (max-width: 380px) {

  .clientesH5{
    font-size: 2rem;
  
}

}