:root {
    --color1: #ED1C24;
    --color2: #121212;
    --color3: #FCEE21;
    --color4: #C1272D;
    --jost:'Jost', 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;
}
/*HEADER*/
.containerMenu{
  padding: 0 !important;
  margin: 0 !important;
}
.logo-container{
  margin-top: 15px;
}
.logo-container img{
  max-height: 100px;
}
.slogan{
  color: var(--color2);
  font-size: 19px;
  margin: 15px 0px;

}
.navPc{
  background: #f2f2f2;
  padding: 20px 0px;
}
.navPc .nav-link{
  color: #121212;
  font-size: 18px;
  margin: 0px 10px;
  transition: all 0.3s ease;

}
.nav-link:hover{
  text-decoration: none;
  color: #121212 !important;
  font-weight: 600;
  transition: all 0.3s ease;
}
.navPc .nav-link.active{
  background: var(--color3);
  
  color: #121212;
  font-weight: 600;
}
@media (max-width:1000px) {
  .logo-container{
    width: 90%;
    margin: auto;
    margin-top: 15px;
  }
  #navbarNav ul{
    display: block ;
    background: #f2f2f2;
  }
  #navbarNav ul li a{
    padding: 15px 0px;
    color: #121212;
  }
  #navbarNav ul li a.active{
    background: var(--color3);
  }
  #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;
}
      
}
.c-slider .slick-dots{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  margin-bottom: 10px;
  text-align: center;
}

.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);
  display: none;
}
.c-slider .slick-dots .slick-active{
     background: var(--boton);
 }
 .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;
 }
/*CORTE BANNER*/
.banner.bannerCorte{
  height: 450px;
}
.banner.bannerCorte img{
  min-height: 450px
}
.tituloCorte{
  font-size: 52px;
  font-family: 'arial-black';
  line-height: 60px;
}
.over-top{
  width: 80%;
  max-width: 450px;
  padding: 50px 30px;
  padding-left: 45px;
  border-left: 15px solid var(--color1);
  background: #fff;
  position: absolute;
  transform: translateY(-10%) translateX(-10%);
  z-index: 3;
  box-shadow: 8px 14px 20px 0px rgba(0,0,0,0.35);
-webkit-box-shadow: 8px 14px 20px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 8px 14px 20px 0px rgba(0,0,0,0.35);
-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;
}
.over-top .tituloWeb{
  font-size: 28px;
}
.comodinBannerCorte{
  margin-top: 60px;
}
.texto-over{
  font-size: 21px;
  line-height: 21px;

}
.boton-over h4{
  color: #fff;
  cursor: pointer;
  margin-top: 40px;
  font-size: 20px;

  font-weight: 600;

}
.boton-over h4 a{
  text-decoration: none;
  color: #fff;
  clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
    background: var(--color1);
    padding: 7.5px 35px;
    font-size: 20px;
    font-weight: 600;
}
@media (max-width:1000px) {
  #SliderButtonNext{
    left: 94% !important;
    margin-left: 0 !important; 
    margin-right: 10% !important;
     }
  .over-top{
    width: 80%;
    max-width: 450px;
    border-left: 15px solid var(--color1);
    background: #fff;
    position: relative;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
  }
  .comodinBannerCorte{
    position: relative;
    margin: 0;
  }
  .over-top{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: auto;
  }
  .over-top .tituloWeb{
    font-size: 22px;
  }
  .texto-over{
    font-size: 16px;
  }
  .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;
  }
  .flechaSlider{
    font-size: 22px;
   }
   #SliderButtonNext{
    left: 94% !important;
    margin-left: 0 !important; 
    margin-right: 10% !important;
     }
}
/*PORQUE*/
.divPorque{
  margin: 50px auto;
}
.titulosElegirnos{
  font-size: 28px;
}
.textoElegirnos{
  font-size: 22px;
  line-height: 22px;

}
.porqueRight{
  text-align: right;
}
.divPorque img{
  width: 100%;
}
.editarImagenElegirnos{
  margin: 15px;
}
@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{
  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{
  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*/
.banner.bannerContacto{
  height: 650px;
}
.banner.bannerContacto img{
  min-height: 650px
}
.texto-banner,.texto-bannerCorto{
  position: absolute;
  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: 220px;
  object-fit: contain;
  object-position: center;
}
.clienteVista .card,.unClienteVista{
  border: none;
  margin: 0 !important;
  padding: 0 !important;
}
/*FOOTER*/
.footer {
    background-color: #f2f2f2;
    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;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
    background: var(--color1);
}
  .icono-rojo i{
    display: block;
    margin: auto;
    color: #fff;
    font-size: 18px;
  }
  .texto-icono-rojo{
    color: #121212;
    margin-left: 10px;
  }
  .arroba{
    font-weight: 100;
  }
  /*XX*/
  .logo-footer img{
    display: block;
    margin: 30px auto;
  }
  .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(--color1);
    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;
  }
.justificaFooter{
  justify-content: end;
  align-items: center;

}
#enviarContacto{
  padding: 15px 45px;
  background: var(--color1);
  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: 180px;
}
#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*/
.empresaPrincipal{
  padding: 30px 0px !important;
  background: #f2f2f2;
}
.empresaContainer{
  width: 100%;
  position: relative;
}
.imagenEmpresaContainer{
  width: 100%;
  max-width: 60%;
}
.banner.empresaImagenContainer{
  height: 650px !important;
}
.banner.empresaImagenContainer img{
  min-height: 650px !important;
}
#bannerEmpresa label,#bannerEmpresa button{
  left: 0%;
  width: 180px;
}
.textoEmpresaContainer{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 90%;
  max-width: 40%;
  padding: 75px;
  background: #fff;
  right: 0;
  margin-right:7.5%;

  -webkit-box-shadow: 10px 8px 15px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 10px 8px 15px 0px rgba(0,0,0,0.15);
  box-shadow: 10px 8px 15px 0px rgba(0,0,0,0.15);
}
.textoEmpresaContainer .tituloWeb{
  font-size: 48px;
  line-height: 48px;
}
.textoEmpresaPrincipal{
  font-size: 19px;
}
@media (max-width:1200px) {
 
  .imagenEmpresaContainer{
    width: 100%;
    max-width: 700px;
  }
  .banner.empresaImagenContainer{
    height: 600px !important;
  }
  .banner.empresaImagenContainer img{
    min-height: 600px !important;
  }
  .textoEmpresaContainer{
    max-width: 500px;
    padding: 50px;
  }
  .textoEmpresaContainer .tituloWeb{
    font-size: 48px;
    line-height: 48px;
  }
  .textoEmpresaPrincipal{
    font-size: 18px;
  }
}
@media (max-width:992px) {
 
  .imagenEmpresaContainer{
    width: 100%;
    max-width: 600px;
  }
  .banner.empresaImagenContainer{
    height: 550px !important;
  }
  .banner.empresaImagenContainer img{
    min-height: 550px !important;
  }
  .textoEmpresaContainer{
    max-width: 450px;
    padding: 50px;
  }
  .textoEmpresaContainer .tituloWeb{
    font-size: 36px;
    line-height: 36px;
  }
  .textoEmpresaPrincipal{
    font-size: 16px;
  }
}
@media (max-width:768px) {
  .empresaContainer {
    width: 100%;
  }
  .imagenEmpresaContainer {
    max-width: 100%;
  }
  .banner.empresaImagenContainer {
    height: auto !important;
  }
  .banner.empresaImagenContainer img {
    min-height: auto !important;
  }
  #bannerEmpresa label,
  #bannerEmpresa button {
    left: auto;
    width: auto;
  }
  .textoEmpresaContainer {
    position: relative;
    top: auto;
    transform: translateY(0);
    z-index: auto;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    background: #fff;
    right: auto;
    margin-right: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .textoEmpresaContainer .tituloWeb {
    font-size: 36px;
    line-height: 36px;
  }
  .textoEmpresaPrincipal {
    font-size: 18px;
  }
  .empresaPrincipal  {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .textoEmpresaContainer {
    text-align: center;
    width: 100%;
    padding: 30px 5%; 
  }
  .textoEmpresaContainer .tituloWeb{
    font-size: 24px;
    line-height: 24px;
  }
  
  .textoEmpresaContainer .textoEmpresaPrincipal{
    font-size: 16px;
  }
  .logo-footer img{
    width: 90%;
  }
}
/*MISIONVISION*/
.MisionVision{
  position: relative;
}
.MisionVision div{
  margin: 0;
  padding: 0;
}
.divider{
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px !important;
  background: #fff;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}
.MisionVision div section{
  width: 70%;
  margin: 50px auto;
  overflow: hidden;
}
.misionVisionVista img{
  height: 75px;
}
.mvTitulo{
  font-size: 24px;
  margin: 20px 0px !important;
}
@media (max-width:768px) {
.divider{
  display: none;
}
.MisionVisionContainer{
  width: 70%;
  margin: 30px auto;
  overflow: hidden;
}
}
/*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;
}
.botonTodos{
  margin: auto;
  text-align: center;
  margin-bottom: 80px;
}
.botonTodos a{
  text-align: center;
  text-decoration: none;
  color: #121212;
  background: var(--color3);
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); 
}
.separadorNuevoComodin{
  height: 1px;
  width: 100%;
}

/*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;
}