:root {
    --boton: #293671;
    --color1: #293671;
    --color2: #121212;
    --color3: #FCEE21;
    --color4: #ED1C24;
    --color5: #FE413D;
    --jost:"Libre Franklin", sans-serif;
    --noto:'Noto Sans', sans-serif;
    --poppins:'Poppins', sans-serif;
}
*{ margin: 0;padding: 0;  scroll-behavior: smooth;  font-family: var(--poppins);}
.container{
  width: 90% !important;
  max-width:1100px !important;
}
body{
    overflow-x: hidden;
}
.container-xxl{
  max-width: 90%;
  margin: auto;
}
/*HEADER*/
.barraDatos{
  background: #121212;
  margin: 0 !important;
  padding: 0% !important;
}
.barraDatos p{
  margin: 0 !important;
  padding: 0;
  padding: 10px 0px !important;
  font-size: 12px;
}

.barraDatos .container-xxl{
  color: #fff;
}
.barraDatos p a{
  text-decoration: none;
  color: #fff;
  margin: 0;
  padding: 0;
}
.containerMenu{
  padding: 0 !important;

}
.logo-container{
  margin: 20px auto !important;

}
.logo-container img{
  max-height: 80px;
}
.slogan{
  color: #fff;
  font-size: 17px;
  background: var(--color4);
  padding: 10px 0px;

}
.slogan p{
  margin: 0 !important;
}
.navPc{
  background: var(--color1);
 
}
.navPc .nav-link{
  color: #fff;
  font-size: 16px;
  margin: 0px 10px;
  transition: all 0.3s ease;
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: 600;
}
.nav-link:hover{
  text-decoration: none;
  font-weight: 600;
  color: #fff !important;
  transition: all 0.3s ease;
}
.navPc .nav-link.active{
  background: #fff;
  
  color: #121212;
  font-weight: 600;
}
.navPc .nav-link.active:hover{
  color: #121212 !important;

}
.c-slider .slick-dots{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  margin: 0 !important;
  text-align: center;
  padding: 0 !important;
  margin-bottom: 10px !important;
}

.c-slider .slick-dots li{
  list-style: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-box-shadow: 6px 6px 3px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 6px 6px 3px 0px rgba(0,0,0,0.15);
  box-shadow: 6px 6px 3px 0px rgba(0,0,0,0.15);
  border-radius: 50%;
  background: #fff;
  margin: 4px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.15);
}
.c-slider .slick-dots li button{
  display: none;
}
.c-slider .slick-dots .slick-active{
     background: var(--boton);
 }
@media (max-width:1000px) {
  .logo-container{
    width: 90%;
    margin: auto;
    margin-top: 15px;
  }
.slogan p{
  font-size: 14px;
}

  #navbarNav ul{
    display: block ;
    background: #f2f2f2;
  }
  #navbarNav ul li a{
    padding: 15px 0px;
    color: #121212;
  }
  #navbarNav ul li a.active{
    background: var(--color4);
    color: #fff;
  }
  #botonMenuCel{
    width: 100%;
  }
  #botonMenuCel{
    padding: 15px 0px;
    background: var(--color1);
  }
}
/*SLIDER*/

.fondoslider{
  position: relative;
}
.un-slider .banner{
  width: 100%;
  height: 600px;
}
.un-slider .banner img{
  min-height: 600px;
}
.fix-slider{
  margin: auto;
}
@media (max-width:768px) {
  
.real-slider{
  height: 450px;
}
      
}

 .flechaSlider{
  font-size: 52px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--color3) !important;
  margin-left: 3.5% !important;
  cursor: pointer;
 }
 #SliderButtonNext{
left: 95% !important;
margin-left: 0 !important; 
margin-right: 5% !important;
 }
 /*PRODUCTOS INICIO*/
.flechaProductos{
  height: 40px;
  width: 40px;
  display: flex;
  border: 1px solid rgba(0,0,0,0.25);
  margin-left: 10px;
  overflow: hidden;
}
.flechaProductos i{
  display: block;
  margin: auto;
  padding: 9px;
  font-size: 22px;
  cursor: pointer;
  color: rgba(0,0,0,0.35);
}

.botonTodos{
  margin: auto;
  text-align: center;
  margin-bottom: 80px;
}
.botonTodos a{
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--color4);
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
}
@media only screen and (max-width: 770px) and (orientation: portrait) {
.flechaProductos{
  margin: 0;
  margin-right: 10px;
}
.editorProductosInicio p{
  margin: 0 !important;
}
.editorProductosInicio .tituloWeb{
  margin: 0px !important;
}
.flechasDeLosProductos{
  margin: 10px 0px;
  margin-bottom: 20px !important;
}
}
#slickListaProd{
  margin-bottom: 30px;
}
.slickItemsProd .col .card{
  padding: 10px;
  margin: 10px;
  border-radius: 0 ;
}
.slickItemsProd .col img{
  height: 250px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.slickItemsProd .cardCuerpo{
  margin: 0px 5px;
}

.slickItemsProd h5{
  font-size: 16px;
  width: 100%;
  margin: 10px 0px;
  margin-top: 20px;
  font-weight: 600;
  color: rgba(0,0,0,0.65);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0,0,0,0.65);
}
.slickItemsProd p{
  font-size: 14px;
  margin: 20px 0px;
  color: rgba(0,0,0,0.65);
}
.slickItemsProd a{
  width: 100%;
  border-radius: 0;
  margin-bottom: 10px;
  
  background: var(--boton);
  color: #fff;
}
/*CORTE BANNER*/
.contenedorCorte{
  background: var(--color1);
  padding: 75px 0px;
}
.textoContenedorCorte .tituloCorte,.textoContenedorCorte .tituloWeb{
font-size: 32px;
}
.textoContenedorCorte .tituloWeb{
  margin-left: 75px;
}
.textoContenedorCorte .tituloCorte{
  padding: 10px 75px;
  padding-right: 10px;
  background: var(--color5);
  -webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.textoContenedorCorte .tituloCorte p,.textoContenedorCorte .tituloWeb p{
  margin: 0 !important;
}
.textoContenedorCorte .tituloWeb{

margin-bottom: 0px !important;
}
.boton-over h4{
  color: #fff;
  cursor: pointer;
  margin-top: 40px;
  font-size: 20px;
  margin-left: 75px;
  font-weight: 500;

}
.boton-over h4 a{
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;

    padding: 7.5px 35px;
    font-size: 16px;
    font-weight: 500;
}
.contenedorCorte{
  display: grid;
  grid-template-columns: 1fr minmax(500px,1fr);

}
.comodinBannerCorte{
  width: 100%;
  position: relative;
}
.circuloBannerTop{
  width: 60%;
  background: #F0F0F0;
  height: 200px;
  position: absolute;
  top: 0;
  margin-top: -75px;
  margin-left: 20px;
  -webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
.circuloBannerBottom{
  width: 60%;
  background: var(--color5);
  height: 200px;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: -75px;
  margin-right: 20px;
  -webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.comodinBannerCorte .banner{
  display: block;
  margin: auto !important;
  width: 70% !important;
  border-radius: 25px;
  box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.35);
-webkit-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.35);
  z-index: 2;
  }
.banner.bannerCorte{
  height: 250px;
  margin: auto !important;
}
.banner.bannerCorte img{
  min-height: 250px;
  width: 100%;
}
@media (max-width:992px) {
  .contenedorCorte{
    grid-template-columns: 1fr;
  }
  
.circuloBannerTop{
  width: 60%;
  background: #F0F0F0;
  height: 200px;
  position: absolute;
  top: 0;
  margin-top: -75px;
  margin-left: 20px;
}
.circuloBannerBottom{
  width: 60%;
  background: var(--color5);
  height: 200px;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: -75px;
  margin-right: 20px;
}
.comodinBannerCorte{
  margin-top: 100px;
}
.comodinBannerCorte .banner{
  display: block;
  margin: auto !important;
  width: 60% !important;
  border-radius: 25px;
  box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.35);
-webkit-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.35);
  z-index: 2;
  }
.banner.bannerCorte{
  height: 250px;
  margin: auto !important;
}
.banner.bannerCorte img{
  min-height: 250px;
  width: 100%;
}
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
  .comodinBannerCorte .banner{

    margin: auto !important;
    width: 50% !important;
    }
  .banner.bannerCorte{
    height: 300px;
    margin: auto !important;
  }
  .banner.bannerCorte img{
    min-height: 300px;
    width: 100%;
  }
}
@media only screen and (max-width: 770px) and (orientation: portrait){
  .contenedorCorte{
    background: var(--color1);
    padding: 50px 0px;
  }
  .textoContenedorCorte .tituloCorte,.textoContenedorCorte .tituloWeb{
    font-size: 22px;
    }
  .textoContenedorCorte .tituloWeb{
    margin-left: 30px;
  }
  .circuloBannerTop{
    margin-top: -50px;
    margin-left: 20px;
  }
  .circuloBannerBottom{
    margin-bottom: -50px;
    margin-right: 20px;
  }
  .textoContenedorCorte .tituloCorte{
    padding: 10px 30px;
    padding-right: 10px;
    background: var(--color5);
  }
  .boton-over h4{
    color: #fff;
    cursor: pointer;
    margin-top: 40px;
    font-size: 20px;
    margin-left: 30px;
    font-weight: 500;
  
  }
  .boton-over h4 a{
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
  
      padding: 7.5px 35px;
      font-size: 16px;
      font-weight: 500;
  }
  
.banner.bannerCorte{
  height: 200px;
  margin: auto !important;
}
.banner.bannerCorte img{
  min-height: 200px;
  width: 100%;
}
}
@media (max-width:1000px) {
  .boton-over h4 a{
    text-decoration: none;
    color: #fff;
      padding: 5px 25px;
      font-size: 16px;
      font-weight: 600;
  }
  .un-slider .banner{
    width: 100%;
    height: 400px;
  }
  .un-slider .banner img{
    min-height: 400px;
  }
}
@media only screen and (max-width: 770px) and (orientation: portrait) {
  /* Estilos CSS para pantallas con anchura máxima de 770px y en orientación vertical */
  /* Puedes agregar tus estilos aquí */
  .un-slider .banner{
    width: 100%;
    height: 180px;
  }
  .un-slider .banner img{
    min-height: 180px;
  }
}
/*PORQUE*/
.divPorque{
  margin: 50px auto;
}
.titulosElegirnos{
  font-size: 28px;
}
.textoElegirnos{
  font-size: 22px;
  line-height: 22px;

}
.porqueRight{
  text-align: right;
}
.porqueELegirnos img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
.editarImagenElegirnos{
  margin: 15px;
}

.capa-degradado {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  pointer-events: none; /* Para permitir hacer clic a través de la capa */
}
.porqueELegirnos .position-relative {
  position: relative;
  overflow: hidden;
}

.porqueELegirnos .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: white; /* Color de texto */
  transition: opacity 0.3s ease; /* Transición suave */
}
.overlay .editorCorto, .overlay .textoElegirnos{
  width: 80%;
  margin: auto;
}
.porqueELegirnos .overlay:hover {
  opacity: 1; /* Mostrar overlay al hacer hover */
}
.porqueELegirnos .overlay:hover {
  background: linear-gradient(to top, rgba(27,20,100,1), rgba(0, 0, 0, 0));
  bottom: 0;
  left: 0;
  padding-top: 150px;
}
.porqueELegirnos .titulosElegirnos {
  font-size: 24px; /* Tamaño del título */
  margin-bottom: 10px; /* Espacio inferior */
}

.porqueELegirnos .textoElegirnos {
  font-size: 18px; /* Tamaño del texto */
  line-height: 1.6; /* Espaciado entre líneas */
  display: none; /* Ocultar texto por defecto */
}

.porqueELegirnos .overlay:hover .textoElegirnos {
  display: block; /* Mostrar texto al hacer hover */
}

@media (max-width: 770px) {
  .porqueELegirnos .col-md-6 {
      width: 100%; /* En dispositivos móviles, ocupar todo el ancho */
  }
  .porqueELegirnos img{
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
   
  }
  .unaRazon{
    margin-bottom: 30px;
  }
.porqueELegirnos .titulosElegirnos {
  font-size: 16px; /* Tamaño del título */
  margin-bottom: 10px; /* Espacio inferior */
}

.porqueELegirnos .textoElegirnos {
  font-size: 14px; /* Tamaño del texto */
  line-height: 1.6; /* Espaciado entre líneas */
}

}


@media(max-width:1000px){
  
.editarImagenElegirnos{
  margin: 30px 15px;
}
.titulosElegirnos{
  font-size: 20px;
}
.textoElegirnos{
  font-size: 16px;
  line-height: 16px;

}
  .porqueRight{
    text-align: center;
  }
  .divPorque{
    text-align: center;
  }
  .divPorque img{
    margin-top: 20px;
  }
}
/*BANNER*/
.banner {
  width: 100%;
  height: 300px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center; /* Para centrar horizontalmente */
  position: relative;
  overflow: hidden;
}
.texto-banner .trumbowyg-box,.clientesSeccion .trumbowyg-box,.editorCorto .trumbowyg-box, .editorCorto .trumbowyg-box{
  height: 150px !important;
  min-height: 150px !important;
}
#vistaTituloContactoInicio.trumbowyg-editor,#vistaTituloClientes.trumbowyg-editor,#vistaPorqueElegirnos.trumbowyg-editor,
#vista1PorqueElegirnos.trumbowyg-editor,#vista2PorqueElegirnos.trumbowyg-editor,.editarCorto.trumbowyg-editor,#tituloOverCorte.trumbowyg-editor,
.editorCorto div.trumbowyg-editor,  .editorCorto div.trumbowyg-editor{
  height: 100px !important;
  min-height: 100px !important;

}
#btnCancelarTexto, #btnModificarTexto{
  z-index: 2;
}
.banner img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; /* Tomar todo el alto del contenedor */
  min-height: 300px; /* Altura mínima de 300px */
  object-fit: cover; /* Para mantener la proporción de aspecto */
}
/*BANNER CONTACTO*/
.separadorGrande{
  margin: 75px auto;
}
.bannerContacto{
  margin: 50px auto !important;
}
.wrapper{
  width: 90%;
  margin: auto;
}
@media (max-width:992px) {
  .separadorGrande{
    margin: 30px auto;
  } 
  .bannerContacto{
    margin: 30px auto !important;
  }
}
.banner.bannerContacto{
  height: 500px;
}
.banner.bannerContacto img{
  min-height: 500px
}
.texto-banner,.texto-bannerCorto{
  position: absolute;
  width: 85%;  
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  
}

.form-focuseable{
  transition: all 0.3s ease;
  padding: 5px 40px;

}
.form-focuseable:focus{
  transition: all 0.3s ease;
  
  padding: 5px 30px;
}
#mensajeContacto{
  resize: none !important;
}
/*CLIENTES*/
.separadorSeccion{
  margin: 50px auto;

}
 .tituloWeb{
  margin-bottom: 30px;
  font-size: 32px;
}
@media (max-width:1000px) {
  .separadorSeccion{
    margin: 30px auto;
    transition: all 0.3s ease;
  }  
}

.clienteVista img{
  width: 100%;
  height: 120px;
  object-fit: contain;
  object-position: center;
}
.clienteVista .card,.unClienteVista{
  border: none;
  margin: 0 !important;
  padding: 0 !important;
}
/*FOOTER*/
.footer {
    background-color: #1B1464;
    padding: 30px 0;

}
  .real-footer{
    margin: auto;
  }
  .logo-footer img{
    width: 300px;
  }
  .logo-footer{
    display: flex;
  }
  /*ICONO ROJO*/
  .div-rojo{
    display: inline-flex;
    text-decoration: none;
    margin: 5px 0px;
    align-items: center;
}
  .icono-rojo{
    width: 35px;
    height: 30px;
    display: flex;
    background: #fff;
  }
  .icono-rojo i{
    display: block;
    margin: auto;
    color: #1B1464;
    font-size: 18px;
  }
  .texto-icono-rojo{
    color: #fff;
    margin-left: 20px;
  }
  .arroba{
    font-weight: 100;
  }
  /*XX*/
  .logo-footer img{
    display: block;
    margin: 30px 0px;
  }
  .footer-iz div{
    color: #0000006b;
    text-align: justify;
  }
  .comodin-footer{
    max-width: 400px;
  }

  .footer .social-icons{
    color: white;
    text-decoration: none;
    display: inline-flex;
    margin: 0; 
    margin-top: 40px;
}
.footer .social-icons .icono-rojo{
    background: var(--color2);
    margin-right: 5px;
}
  .footer .social-icons a:hover {
    color: #ced4da;
  }
  .legal{
    background: var(--color4);
    padding: 15px 0px;
  }
  .legal .container{
    text-decoration: none;
    color: #fff;
    text-align: center;
  }
  .legal .container a{
    text-decoration: none;
    color: #fff;
    font-weight: 600;
  }
  #btnModificarTexto{
    margin-right: 2px;
  }
  .social-icons a{
    text-decoration: none;
  }
  .social-icons-container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
  }

  .social-icons {
    display: flex;
    margin-top: 30px !important;
  }
  .social-icons .icono-rojo{
    background: var(--color4) !important;
    border-radius: 50%;
    margin-right: 10px !important;
  }
  .social-icons .icono-rojo i{
    color: #fff;
  }
.justificaFooter{
  justify-content: end;
  align-items: center;

}
#enviarContacto{
  padding: 15px 45px;
  font-weight: 600;

}
@media (max-width:1000px) { 
  .comodin-footer{
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
  }
  .real-footer{
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  
.justificaFooter{
  justify-content: center;
  align-items: center;
}
.tituloWeb{
  font-size: 24px;
}
.clienteVista img{
  width: 100%;
  height: 120px;
}
#contactoForm{
  align-items: center;
  text-align: center;
  justify-content: center;
}
.banner label{
  display: none;
}
#enviarContacto{
  margin-top: 20px;
  padding: 10px 45px;

}
}
@media (max-width: 1000px) and (orientation: landscape) {
  /* Estilos CSS que se aplicarán cuando la pantalla tenga un ancho máximo de 1000px y esté en modo retrato */
  /* Por ejemplo: */
  .ladoDerechoFooter{
    margin-left: 75px !important;
  }
}
/*SEGUNDA PAGINA EMPRESA*/
.banner.bannerPagina{
  height: 170px;
}
.banner.bannerPagina img{
  min-height: 170px
}
.banner.bannerPagina div{
  margin: 0;
  height: auto;
  padding: 0;
  padding-top: 5px;
}
/*EMPRESA PRINCIPAL*/
.empresaContainer{
  padding: 75px 0px;
  display: grid;
  grid-template-columns: 1fr minmax(350px,1fr);
  align-items: center;
  grid-gap:50px;
}

.banner.empresaImagenContainer{
  height: 350px !important;
}
.banner.empresaImagenContainer img{
  min-height: 350px !important;
}
@media (max-width:768px) {
  .empresaContainer{
    padding: 30px 0px;
  grid-gap:30px;
  grid-template-columns: 1fr;

  } 
  .banner.empresaImagenContainer{
    height: 220px !important;
  }
  .banner.empresaImagenContainer img{
    min-height: 220px !important;
  }
}
/*MISIONVISION*/
.banner.empresaImagenPrincipal{
  height: 500px !important;
}
.banner.empresaImagenPrincipal img{
  min-height: 500px !important;
}
.comodinEmpresa {
  position: relative; /* Para posicionar elementos hijos */
  overflow: hidden;
}
.empresaImagenPrincipal label{
  left: 0;
  width: 200px;
}
#imagenBannerOfrecemos {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Para que la imagen cubra todo el div */
}
.textoBannerPorque {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,0.6) 0%, rgba(9,9,121,0.6) 35%, rgba(0,212,255,0.6) 100%); 
  align-items: center;
  justify-content: center;
  display: flex;
}
.textoBannerPorque h2 {
  text-align: center;
}
.comodinTextoBanner{
  display: block;
  margin: auto;
}

.editarPorque img{
  height: 70px;
  width: 70px;
  object-fit: contain;
  object-position: center;
}
.editarPorque{
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-gap: 30px;
  align-items: center;
}
.editarPorque p{
  margin: 0;
  color: #fff;
}
@media(max-width:768px){
  .textoBannerPorque {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: inherit;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,0.6) 0%, rgba(9,9,121,0.6) 35%, rgba(0,212,255,0.6) 100%); 
    align-items: center;
    justify-content: center;
    display: flex;
    transform: translateX(-50%) translateY(-50%);
    padding: 50px 0px;
  }
}
/*CONTACTO*/
.tituloContactoHtml{
  font-size: 32px;
  margin-bottom: 50px;
}
.textoContactoHtml{
  font-size: 16px;
  line-height: 16px;
}
.datosContactoHtml{
  text-align: center;
}
.datosContactoHtml h2{
  color: var(--color1);
  font-size: 17px;
  font-weight: 600;
  margin: 30px auto;
}
.datosContactoHtml h3{
  font-size: 17px;
  font-weight: 500;
}
.botonContactoHtml{
  margin: 30px auto;
}
.botonContactoHtml a{
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  padding: 7.5px 25px;
  border-radius: 7.5px;
  color: #fff !important;
}
.correoNegro a{
  color: #121212 !important;
  border: 1px solid #121212;
}
/*PRODUCTOS*/
.textoProductoReal{
  margin: 0 !important;
  padding: 0 !important;
  padding-right: 50px !important;
}
.vistaNombreProducto{
  text-align: center;
  font-weight: 600;
  color: #fff;
}
.descripcionProducto{
  font-size: 19px;
  line-height: 23px;
}
.descripcionProducto li{
  line-height: 38px;
}
.divImagenProducto img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
/*SLICK IMAGES*/
.slickImagenProducto img{
  height: 200px;
  width: 95%;
  margin: auto;
}
.divC,.slickImagenProducto{
  margin-top: 30px;
}
.comodinSlickSlider{
  position: relative;
}
.comodinSlickSlider .flechaSlick{
  height: 50px;
  width: 30px;
  font-size: 36px;
  line-height: 50px;
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}
#ImagenSlickPrev{
  left: 0;
  margin-left: -30px;
}
#ImagenSlickNext{
  right: 0;
  margin-right: -30px;
}
@media(max-width:993px){
  .textoProductoReal{
    margin: 0 !important;
    padding: 0 !important;
   }
   
.descripcionProducto{
  margin-top: 30px !important;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 0;
}
.descripcionProducto li{
  line-height: 20px;
} 
}
@media (max-width:769px) {
  .divImagenProducto img{
    height: 300px;
   }
  .slickImagenProducto img{
    height: 120px;
  }
  .comodinSlickSlider .flechaSlick{
    height: 30px;
    width: 22px;
    font-size: 21px;
    line-height: 22px;
  }
  #ImagenSlickPrev{
    left: 0;
    margin-left: -22px;
  }
  #ImagenSlickNext{
    right: 0;
    margin-right: -22px;
  }
 
.descripcionProducto{
  margin-top: 30px !important;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 0;
}
.descripcionProducto li{
  line-height: 20px;
} 
}
/*PRODUCTOS INICIO*/
.producto {
  margin-bottom: 30px !important;
  color: white;
  padding: 0px !important;
  overflow: hidden;
}
.producto a{
  width: 95%;
  display: flex;
  position: relative;
  margin: auto;
}
.producto a img{
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center;
  -webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

.producto .nombreProducto{
  position: absolute;
  bottom: 0;
  background: var(--color1);
  text-decoration: none;
  color: #fff;
  width: 100%;
  text-align: center;
  overflow: hidden;
  padding: 10px;
  font-weight: 600;
}
.separadorNuevoComodin{
  height: 1px;
  width: 100%;
}
.slickItemsProd .card-text{
  height: 70px;
  overflow-y: hidden;
}
/*WHATSAPP*/
.whatsapp {
  height: 50px;
  width: 50px;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0%;
  top: 100%;
  margin-top: -70px;
  margin-left: 20px;
  position: fixed;
  border-radius: 50%;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
}
.whatsapp a {
  display: flex;
  width: 50px;
  border-radius: 50%;
  height: 50px;
  background: rgb(0,255,0);
  text-decoration: none;
}
.whatsapp a i{
  display: block;
  margin: auto;
  font-size: 32px;
  color: #fff;
}
.arregoItemsProd{
  display: grid;
  grid-template-columns: repeat(3,minmax(200px,1fr));
}
@media(max-width:769px){
  .arregoItemsProd{
    display: grid;
    grid-template-columns: repeat(2,minmax(200px,1fr));
  }
  
}

@media(max-width:577px){
  .arregoItemsProd{
    display: grid;
    grid-template-columns: repeat(1,minmax(200px,1fr));
  }
  
}
#swal-textCliente{
  width: 70%;
  margin: auto;
}
/*loaderWeb*/
/* HTML: <div class="loaderWeb"></div> *//* Loader CSS */
/* Loader CSS *//* Loader CSS */
/* Loader Container */
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.hidden {
  display: none;
}

@keyframes l7 {
  to { background-position: 150% 0% }
}
/* HTML: <div class="loader"></div> */
.loaderWeb {
  width: 60px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  animation: l3-0 1s infinite alternate;
}
.loaderWeb:before,
.loaderWeb:after {
  content: "";
  width: 32px;
  background: #293671;
  animation: l3-1 0.5s infinite alternate;
}
.loaderWeb:after {
  background: #ED1C24;
  --s:-1;
}
@keyframes l3-0 {
   0%,40%   {transform: rotate(0)}
   80%,100% {transform: rotate(.5turn)}
}
@keyframes l3-1 {
   80%,100% {transform: translate(calc(var(--s,1)*34px))}
}