
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; /* por debajo del drawer */
}

.menu-overlay.active {
  display: block;
}

/* Drawer arriba del overlay */
.menu-drawer {
  z-index: 1000 !important;
  position: fixed !important;
  top: 0;
  right: 0;
  height: 100%;
}

.slick-banner {
  width: 100%;
  max-width: 1200px !important;
  margin: 0 auto;
}

.banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.header-fixed {
    height: 42px !important;
}




  .containercustom {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
  }

  .rowcustom {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
  }

  .col-12 {
    width: 100%;
    padding: 0 10px;
  }

  @media (min-width: 768px) {
    .col-md-4 {
      width: 43.3333%;
    }

    .col-md-6 {
      width: 50%;
    }

    .col-md-8 {
      width: 54.6666%;
    }
  }

  .left-column {
    /* background-color: #e0f7fa; */
    padding: 20px;
  }

  .right-column {
    /* background-color: #ffe0b2; */
    padding: 20px;
  }

  .block {
    margin-bottom: 20px;
    padding: 20px;
    color: white;
    border-radius: 8px;
  }

  .block-title {
    background-color: #4CAF50;
    height: 200px;
    display: flex;
    align-items: center;
  }

  .block-text {
    background-color: #2196F3;
    height: 260px;
    font-size: 1.4rem;
    line-height: 3.1rem;
    padding-left: 60px;
    padding-right: 60px;
}
  

  .block-image {
    background-color: #FFC107;
    height: 200px;
  }

  .col-left,
  .col-right {
    border-radius: 8px;
    /* padding: 20px; */
    color: white;
    height: 161px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .col-left {
    background-color: #9C27B0;
  }

  .col-right {
    background-color: #4CAF50;
  }

  @media (max-width: 768px) {
    div[style*="flex: 0 0 39%"] {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }
    div[style*="flex: 0 0 14%"] {
      flex: 0 0 50% !important;
      max-width: 50% !important;
    }
  }

  @media (max-width: 768px) {
    .left-column, .right-column {
      flex: 1 1 100% !important;
      max-width: 100% !important;
    }
  }

  .container.grid-list-lg .layout:only-child {
  margin: 0 !important;
}

/* Clase para márgenes controlados solo a los lados */
.margin-box {
  margin-left: 2rem;  /* Márgenes a la izquierda */
  margin-right: 2rem; /* Márgenes a la derecha */
}





:root {
    --input-bg-color: #ffffff; /* gris más oscuro */
    --input-border-color: #999;
    --input-focus-color: #000000;
    --select-arrow-color: #333;
    --input-max-width: 500px;
    --input-padding-y: 14px;
    --input-padding-x: 12px;
}

.input-wrapper {
    position: relative;
    width: 100%;
    /* margin-bottom: 32px; */
    margin-bottom: 0.3vw;
    max-width: 100%;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: 0.8rem;
    border: none;
    border-bottom: 1.4px solid var(--input-border-color);
    background-color: var(--input-bg-color);
    outline: none;
    border-radius: 4px 4px 0 0;
    transition: border-color 0.3s;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-bottom-color: var(--input-focus-color);
}

.input-wrapper label {
    position: absolute;
    top: 14px;
    left: 0px;
    font-size: 1.2rem;
    color: #626262;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: white;
}

.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown):valid + label,
.input-wrapper textarea:focus + label,
.input-wrapper textarea:not(:placeholder-shown):valid + label,
.input-wrapper select:focus + label,
.input-wrapper select:valid + label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: var(--input-focus-color);
}

/* Estilo del select */
.input-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'10'%20height%3D'6'%20viewBox%3D'0%200%2010%206'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M0%200l5%206%205-6z'%20fill%3D'%23333'%20/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
}

.input-wrapper small {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
    display: block;
}

textarea {
    resize: none;
}

/* Estilo de la clase custom-wrapper */
.custom-wrapper1 {
    max-width: 80%;
    /* margin-left: 4.5rem; */
}
.custom-wrapper2 {
    max-width: 80%;
    margin-left: 4.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    /* .input-wrapper {
    
    } */
    .custom-wrapper1, .custom-wrapper2 {
    max-width: 100% !important;
    margin-left: 0 !important;
    }

    .form-turno{
    margin: 2rem !important;
    max-width: 100% !important;
    
    }
    .input-wrapper {

    margin-bottom: 2vw;

}
}

.input-wrapper select {
    color: #333;
    background-color: white;
}

.input-wrapper select option:checked {
    color: #fff !important;
    background-color: #000000 !important;
}


.form-turno{
    max-width: 80%;
    margin: 6rem 0rem 0rem 11rem;
}
@media (max-width: 1199px) {
.form-turno{
    margin: 3rem 0rem !important;
    max-width: 100% !important;
    
    }
}
@media (max-width: 1903px) {
.form-turno{
    margin: 3rem 0rem !important;
    max-width: 100% !important;
    
    }
    /* Estilo de la clase custom-wrapper */
    .custom-wrapper1 {
    max-width: 80%;
    /* margin-left: 4.5rem; */
}
.custom-wrapper2 {
    max-width: auto;
    margin-left: auto;
}
}



.col-turno {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: stretch;
}

/*   .col-turno-left {
  background-color: #ccc;
} */

.col-turno-right {
  padding: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-turno-right {
  padding: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turno-box {
  background-color: #f2f2f2;
  border-radius: 15px;
  padding: 2vw;
  width: 100%;
  margin-left: auto;
  max-width: 80%;
  margin-right: auto;
  box-sizing: border-box;
  margin-bottom: 2rem;
  margin-left: 0vw;
  margin-right: 2vw;
}

.turno-texto-ajustado {
  padding-left: 2vw;
  margin-bottom: 2.5rem;
}

.turno-title-rojo {
  font-size: clamp(2.5rem, 5vw, 2.5rem);
  font-weight: 900 !important;
  color: #de0122;
  margin-bottom: 2.5rem;
  text-align: left;
}

.turno-titulo-negro {
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-top: 1rem;
  text-align: left;
}

.turno-sub {
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  color: #333;
  text-align: left;
  font-weight: 400;
}

.turno-botones {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-ajustada {
  padding: 2rem 2.3rem !important;
  border-radius: 35px !important;
  min-width: 220px;
  max-width: 220px;
  text-align: center;
  font-size: 1.5rem;
}


@media (max-width: 1903px) {
  .turno-box{
    max-width: 100% ;
    margin-right: auto;
      
    }
    .turno-texto-ajustado {
      padding-left: 0vw;
      
    }
    .col-turno-right {
      padding: 0 0 0 2vw;
    }
    .btn-ajustada {
      min-width: 200px;
      max-width: 200px;
  }
}
  @media (max-width: 1263px) {
    .turno-title-rojo {
      font-size: clamp(2.5rem, 5vw, 3rem);}
    
    .turno-titulo-negro {
      font-weight: 800;
      font-size: clamp(1.4rem, 3vw, 2rem);}
    
    .turno-sub {
      font-size: clamp(1.2rem, 2.8vw, 1.6rem);}
    
    
    .btn-ajustada{
        font-size: 1.1rem;
        min-width: 150px;
        max-width: 150px; 
    }
    .turno-botones{
      gap: 0.5rem
    }
    @media (max-width: 1199px) {
  .col-turno {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .turno-box {
    border-radius: 15px;
    /* padding: 6vw; */
    padding: 3vw;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 95%; */
    width: auto;
    
  }

  .turno-title-rojo,
  .turno-titulo-negro,
  .turno-sub {
    text-align: left;
  }

  .turno-botones {
    justify-content: center;
  }

  .btn-ajustada {
    width: 100%;
    max-width: 183px;
    min-width: 183px;
    /* max-width: 185px; */
    /* min-width: auto; */
    /* font-size: 1.2rem; */
    /* padding: 1.2rem 1.5rem !important; */
  }

  .turno-texto-ajustado {
    padding-left: 0;
  }
  .col-turno-right {
    padding: 0 0 0 0vw !important;
  }
  
}
}
@media (max-width: 767px) {
  .turno-box {
    padding: 3vw;
    width: 100%;
    max-width: 85%;
    
  }
  .turno-title-rojo{
  font-size: clamp(2.5rem, 8vw, 3.5rem);}
  
  .turno-titulo-negro{
      font-size: clamp(1.4rem, 4.5vw, 4rem);}
      
  .turno-sub{
  font-size: clamp(1.2rem, 4.5vw, 2rem);}
  
 .btn-ajustada {
    max-width: 235px;
    min-width: 235px;
    font-size: 1.4rem;
    padding: 2.2rem 1.5rem !important;} 
    
    .form-turno{
        padding: 6vw;}
    
  .v-btn{
    margin-left: 0 !important;
    margin-right: 0 !important;}
    
  .turno-texto-ajustado {
      padding-left: 3vw;}
      .turno-botones{
        gap: .5rem;}
    }

    @media (max-width: 650px) {
      .btn-ajustada {

        max-width: 200px;
        min-width: 200px; 
        font-size: 1.3rem;
    }

  
  
  }
  @media (max-width: 585px) {
    .btn-ajustada {
    max-width: 160px;
    min-width: 160px;
    font-size: 1.1rem;
    padding: 1.5rem 1.5rem !important;
    }
    @media (max-width: 452px) {
    .btn-ajustada {
    max-width: 160px;
    min-width: 160px;
    font-size: 1rem;
    padding: 1.5rem 1.5rem !important;
    }
    .turno-box {

    max-width: 90%;
    
  }
  }
  }

  @media (max-width: 463px) {
    .btn-ajustada {
    max-width: 140px;
    min-width: 140px;
    }
  }




.custom-row-5col {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1458px;
    margin: 0 auto;
    /* padding: 0 24px; */
    box-sizing: border-box;
}

.custom-row-5col .custom-col {
    box-sizing: border-box;
    /* padding: 12px; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Columna de texto con tamaño fijo proporcional */
.custom-row-5col .text-col {
    flex: 0 0 40%;
    max-width: 40%;
    background-color: #de0122;
    display: flex;
    justify-content: center;
    align-items: center;
    /* La altura está definida por porcentaje, para mantener proporciones */
    height: 10vw; /* Usamos el 25% del viewport width (ancho de la pantalla) */
    min-height: 200px; /* Asegura que la columna no sea demasiado pequeña */
    overflow: hidden;
}

.custom-row-5col .text-col span {
    color: white;
    font-size: 2.2vw; /* Ajusta el tamaño del texto proporcionalmente */
    font-weight: bold;
    line-height: 1.2;
    padding: 0 24px;
    text-align: center;
    word-wrap: break-word; /* Asegura que el texto no desborde */
}

/* Columnas de iconos */
.custom-row-5col .icon-col {
    flex: 0 0 15%;
    max-width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-row-5col .icon-col img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tablet */
@media (max-width: 1024px) {
    .custom-row-5col .text-col {
        flex: 0 0 100%;
        max-width: 100%;
        order: -1;
        padding: 16px 0;
        padding-left: 10px;
        padding-right: 10px;
        height: 30vw; /* Ajusta la altura a un porcentaje más pequeño */
        min-height: 170px;
    }

    .custom-row-5col .text-col span {
        font-size: 7vw;
    }

    .custom-row-5col .icon-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .custom-row-5col .icon-col img {
        width: 80%;
        max-width: 240px;
    }
}

/* Tablet */
@media (max-width: 1224px) {
    .custom-row-5col .text-col {
        min-height: 170px;
    } 
}

/* Mobile */
@media (max-width: 480px) {
    .custom-row-5col .text-col span {
        font-size: 8vw;
    }

    .custom-row-5col .icon-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .custom-row-5col .icon-col img {
        width: 90%;
        max-width: 210px;
    }
}
    

/* Corrige el subrayado título "Proceso" */
.titulo-proceso.linea-titulo::after {
    left: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
}





.box-red{
background-color: #de0122; 
color: white; 
/* padding: 1.5vw; */ 
font-weight: thin; 
text-align: center; 
min-height: 10rem !important; 
display: flex; 
align-items: center; 
justify-content: center;
box-shadow: 2px 10px 12px rgba(0, 0, 0, 0.3);
font-size: 1rem;
}
/* .right-side2 {
padding: 0rem 11rem 0vw 0 !important;
    } *//*        .left-side2 {
    padding: 13rem 0 17rem 17rem !important; 
    } */

@media (max-width: 1199px) {
    .custom-section2 {
    flex-direction: column !important;
    max-width: 95% !important;
    }

    .left-side2,
    .right-side2 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 6vw !important;
    
    }
    /*         .right-side2 {
    margin-top: 3vw;
    } */


    .left-side2 > div:last-child {
    align-items: center;
    }
}

@media (max-width: 768px) {
    .cp-col-left,
    .cp-col-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-bottom: 9vw !important;
    margin-right: 0 !important;
    }

    .cp-fila {
    margin-bottom: 5vw !important;
    /* margin-top: 5vw !important; */
    }

    .box-red{
    margin: 0 12vw;
    font-size: 1.2rem;
    }
}

.box-gris2{
    background-color: #f2f2f2; 
    padding: 2vw; 
    text-align: center; 
    margin: 0 3vw;
    margin-top: 59px;
}
.titulored{
    color: #de0122; 
    font-weight: bold; 
    font-size: 1.3rem; 
    margin-bottom: 0.5vw;
}
.tituloblack{
    font-weight: bold; 
    font-size: 1.5rem; 
    margin-bottom: 1.2vw;
}
.subtextos{
    font-size: 1.1rem; 
    line-height: 1.6;
}
.man-texto{
    font-size: clamp(1.2rem, 1.5vw, 1.4rem); 
    font-weight: 500; 
    line-height: 2; 
    /* margin-bottom: 4vw; */ 
    text-align: left ; 
    /* margin-top: 4vw ;  */
    padding: 0 5vw ;
}

.man-titulo{
    margin-bottom: 70px !important;
    margin-top: 30px !important;
}

.box-gris1{
    background-color: #f2f2f2; 
    padding: 2vw; 
    text-align: center;
    margin:0 3vw;
}
@media (max-width: 1822px) {
    .box-gris1{
    /* margin-top: 100px; */
    margin-top: 63px;
    }
    .man-texto{
    font-size: clamp(1.2rem, 1rem, 1.4rem);
    }

} 
@media (max-width: 1692px) {


}                         
@media (max-width: 1561px) {
    .box-gris2{
    margin-top: 68px;
    }
    .man-texto{
    font-size: clamp(1.1rem, 1rem, 1.4rem);
    }
    .box-gris1{
    margin-top: 82px;
    }
    .tituloblack{
    font-size: 1.2rem;
    }
    .titulored{
    font-size: 1.1rem;
    }
}
/*                             @media (max-width: 1543px) {

}
@media (max-width: 1493px) {

} */
@media (max-width: 1431px) {
    .man-texto{
    font-size: clamp(1rem, 1rem, 1.4rem);
    }
    .box-gris1{
    margin-top: 101px;
    }
    .subtextos{
    font-size: 1rem;
    }
    .box-gris2{
    margin-top: 70px;
    }
    .box-red{
    font-size: .9rem;
    }
}
@media (max-width: 1301px) {
    .box-gris2{
    margin-top: 100px;
    }
}
@media (max-width: 1296px) {
    .box-gris2{
    margin-top: 129px;
    }
}
@media (max-width: 1263px) {
    .titulored{
    font-size: 1rem;
    }
    .subtextos{
    font-size: .9rem;
    }
    .box-red{
    font-size: .8rem;
    }
    .tituloblack{
    font-size: 1.1rem;
    }
}
@media (max-width: 1199px) {
.box-red{
    min-height: 10rem !important; 
    font-size: 1rem;
}
.box-gris2{
    margin: 0 3vw;
    margin-top: 59px;
}
.titulored{
    font-size: 1.3rem; 
    margin-bottom: 0.5vw;
}
.tituloblack{
    font-size: 1.5rem; 
    margin-bottom: 1.2vw;
}
.subtextos{
    font-size: 1.1rem; 
    line-height: 1.6;
}
.man-texto{
    font-size: clamp(1.2rem, 1.5vw, 1.4rem); 
    font-weight: 500; 
    line-height: 2; 
    text-align: left ; 
    padding: 0 5vw ;
}

.man-titulo{
    margin-bottom: 70px !important;
    margin-top: 30px !important;
}

.box-gris1{
    padding: 2vw; 
    margin:0 3vw;
}
}
@media (max-width: 767px) {
    .box-red{
    font-size: 1.3rem;
    margin: 0px 18vw;
    }

}
@media (max-width: 1232px) {

}
@media (max-width: 600px) {
.buttonred{
    font-size: 15px !important;
}
.tituloblack {
    font-size: 1.2rem;
}
}



.beneficios-texto {
    font-size: 1.5rem;
    line-height: 3.2rem;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 767px) {
    .beneficios-texto {
    font-size: inherit !important;
    line-height: inherit !important;
    /* font-weight: inherit !important; */
    }
}



/* Centrar título, texto y botón solo en mobile */
    .centered-content {
    padding-left: 24px !important;
}
@media (max-width: 1199px) {
.v-container.accesorios-section {
    flex-direction: column !important;
    max-width: 95% !important;
}

div[style*="flex: 0 0 66.66%"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

div[style*="flex: 0 0 33.33%"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
}

/* Centrar título, texto y botón solo en mobile */
.centered-content {
    text-align: center !important;
    margin: 0 auto;
    padding-left: 0px !important;
}

.linea-titulo-accesorios::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Centrar el botón manualmente */
.buttonacc {
    margin-left: auto !important;
    margin-right: auto !important;
}
}

@media (max-width: 1903px) {
.v-container.accesorios-section {
    max-width: 100% !important;
}
}

@media (max-width: 768px) {
.centered-content {
    
    padding-left: 0 !important;
}
}

/* Desktop: mantener alineado a la izquierda */
@media (min-width: 1200px) {
.centered-content {
    text-align: left !important;
}

.linea-titulo-accesorios::after {
    left: 0 !important;
    transform: none !important;
}
}






.vet-text{
      font-size: 1.5rem; 
      line-height: 3.2rem;
      /* font-weight: 900; */
  }
@media (max-width: 768px) {
    .vet-text{
      font-size: 1.2rem;
      line-height: 2rem;
  }} 




.section-text{
    font-size: 1.6vw; 
    line-height: 1.6; 
    font-weight: 500; 
    text-align: left; 
    margin-bottom: 2vw;
}
.right-side {
    padding: 2vw 0vw;
    flex: 0 0 50%; 
    max-width: 50%; 
    display: flex; 
    align-items: flex-start; 
    justify-content: flex-start;
    }


/*.left-side {
    padding: 13rem 0 17rem 17rem !important; 
} */

.left-content{
    /* padding: 6vw; */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical dentro del contenedor */
    align-items: flex-start; /* Alinea a la izquierda dentro del contenedor */
    /* margin-left: 2vw;  *//* Desplazamiento a la derecha usando vw */
}

@media (max-width: 1199px) {
.custom-section {
    flex-direction: column !important;
    max-width: 95% !important;
}

.right-side{
    align-items: center;
    justify-content: center;
}

.left-side,
.right-side {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 6vw !important;

}


.app-buttons{
    gap: 2.5vw !important;
}
/* .right-side {
    margin-top: 3vw; 
} */

.section-text {
    text-align: center !important;
    font-size: inherit!important;
    padding-bottom: 4rem !important;
}

.left-side > div:last-child {
    align-items: center;
}
}





  /* ----------------------------- Slick Slider (Principal) ----------------------------- */
  .slick-precios .slick-slide {
    box-sizing: border-box;
    padding: 15px;
  }

  .slick-track {
    display: flex !important;
    align-items: stretch;
  }

  .slick-precios {
    max-width: 100%;
    overflow: hidden;
  }

  @media only screen and (min-width: 1264px) {
    .container.grid-list-lg .slick-precios {
      max-width: 1400px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      overflow: visible !important;
      position: relative;
    }

    .container.grid-list-lg .slick-slide {
      box-sizing: border-box;
    }

    .container.grid-list-lg .slick-arrow {
      display: block !important;
       z-index: 2; 
    }
  }

  
  .slider-card {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  .slick-precios .slick-list {
    margin: 0 -10px;
  }

  
  .slick-prev, .slick-next {
    background: transparent;
    color: #000 !important; 
    border: none;
    font-size: 36px; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    transition: color 0.3s ease; 
    font-weight: 500; 
  }

  
.slick-precios .slick-prev::before, .slick-precios .slick-next::before {
  content: none !important; 
}
  
  .slick-prev {
    left: -50px; 
  }

  
  .slick-next {
    right: -50px; 
  }

  
  .slick-prev:hover, .slick-next:hover {
    color: #6e6e6e; 
  }

  
  .slick-prev.slick-active, .slick-next.slick-active {
    color: #000!important; 
  }

  @media only screen and (max-width: 1024px) {
  .slick-precios .slick-prev,
  .slick-precios .slick-next {
    display: none !important;
  }
  }
  /* ----------------------------- Slick Banner (Banner Slider) ----------------------------- */
  .slick-banner .slick-slide {
    box-sizing: border-box;
    /* padding: 15px; */
  }

  .slick-banner .slick-track {
    display: flex !important;
    align-items: stretch;
  }

  .slick-banner {
    max-width: 100%;
    overflow: hidden;
  }


  .container.grid-list-lg .slick-banner {
      max-width: 1458px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      /* overflow: visible !important; */
      position: relative;
    }

  @media only screen and (min-width: 1264px) {
    .container.grid-list-lg .slick-banner {
      /* max-width: 1500px !important; */
      margin-left: auto !important;
      margin-right: auto !important;
      /* overflow: visible !important; */
      position: relative;
    }

    .container.grid-list-lg .slick-banner .slick-arrow {
      display: block !important;
        z-index: 2; 
    }
  }

  /* Tarjeta del slider */
  .slider-card-banner {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  .slick-banner .slick-list {
    margin: 0 -10px;
  }

  /* Estilos generales para las flechas */
  .slick-banner .slick-prev, .slick-banner .slick-next {
    background: transparent;
    color: #ffffff5c !important; /* Color negro por defecto */
    border: none;
    font-size: 36px; /* Tamaño más grande */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
    font-weight: 500; /* Grosor más fino de la flecha */
  }

  /* Eliminar el pseudo-elemento ::before generado automáticamente por Slick */
.slick-banner .slick-prev::before, .slick-banner .slick-next::before {
  content: none !important; /* Eliminar el contenido generado automáticamente */
}

  /* Flecha anterior (left) */
  .slick-banner .slick-prev {
    left: 30px; /* Ajuste la distancia de la flecha izquierda */
  }

  /* Flecha siguiente (right) */
  .slick-banner .slick-next {
    right: 30px; /* Ajuste la distancia de la flecha derecha */
  }

  /* Cambio de color cuando el mouse pasa sobre la flecha (hover) */
  .slick-banner .slick-prev:hover, .slick-banner .slick-next:hover {
    color: #b6b6b6; /* Gris oscuro cuando pasa el mouse */
  }

  /* Cambio de color cuando la flecha está seleccionada (activo) */
  .slick-banner .slick-prev.slick-active, .slick-banner .slick-next.slick-active {
    color: #ffffff!important; /* Color negro cuando está seleccionada */
  }
  @media only screen and (max-width: 1024px) {
  .slick-banner .slick-prev,
  .slick-banner .slick-next {
    display: none !important;
  }
}


  /* ----------------------------- Slick Reviews (Reviews Slider) ----------------------------- */
  .slick-reviews .slick-slide {
    box-sizing: border-box;
    padding: 15px;
  }

  .slick-reviews .slick-track {
    display: flex !important;
    align-items: stretch;
  }

  .slick-reviews {
    /* max-width: 100%; */max-width: 80% !important;
    /* overflow: hidden; */
    margin:15px;
  }

  @media only screen and (min-width: 1264px) {
    .container.grid-list-lg .slick-reviews {
      max-width: 1458px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      overflow: visible !important;
      position: relative;
    }

    .container.grid-list-lg .slick-reviews .slick-arrow {
      display: block !important;
       z-index: 2; 
    }
  }

  /* Tarjeta del slider */
  .slider-card-reviews {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  .slick-reviews .slick-list {
    margin: 0 -10px;
  }

 

  .slick-reviews {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  gap: 20px;
}

.review-box {
  width: 300px;
  height: 400px;
  background-color: white;
  border: 1px solid #636363;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  text-align: center;
}

.review-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.review-image img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.review-name {
  font-size: 16px;
  color: black;
  margin-bottom: 5px;
}

.review-date {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
}

.review-stars {
  margin-bottom: 10px;
}

.star {
  font-size: 20px;
  color: #ccc;
}

.star.filled {
  color: #f1c40f; /* Yellow */
}

.review-text {
  font-size: 14px;
  color: black;
  margin-bottom: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-logo img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
}




      /* Contenedor del botón flotante */
      .whatsapp-button {
        position: fixed;
        bottom: 50px;
        right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #25D366; /* Verde WhatsApp */
        border-radius: 50%;
        width: 60px;
        height: 60px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-decoration: none; /* Sin subrayado */
      }
    
      .whatsapp-button:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      }
    
      .whatsapp-button img {
        width: 40px;
        height: 40px;
      }






