@font-face {
    font-family: monmed;
    src: url('../fonts/Montserrat-Medium.otf');
}
@font-face {
    font-family: monbold;
    src: url('../fonts/Montserrat-Bold.ttf');
}
@font-face {
    font-family: monblack;
    src: url('../fonts/Montserrat-Black.otf');
}
@font-face {
    font-family: monlight;
    src: url('../fonts/Montserrat-Light.otf');
}
@font-face {
    font-family: monsemi;
    src: url('../fonts/Montserrat-SemiBold.ttf');
}
@font-face {
    font-family: monreg;
    src: url('../fonts/Montserrat-Regular.otf');
}
@media only screen and (min-width: 1080px){
    .btn-whatsapp {
        display: none;
    }
    .logomovil{
        display: none;
    }
    .barradecontacto{
        display: none;
    }
body{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
.regresoflecha{
    width: 3%;
    height: auto;
    position: fixed;
    top: 46vw;
    right: 8vw;
}
.flechis{
    width: 100%;
    height: auto;
    box-shadow: 12px 12px 12px gary;
}
.cuerpocompleto{
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: auto;
}
.bannerinfo{
    width: 100%;
    height: 2.2vw;
    background-color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    font-family: monmed;
    font-size: .7vw;
    color: white;
}
.ban1{
    width: 10.3vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
    margin-left: 18.7vw;
}
.ban2{
    width: 9.3vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
}
.ban3{
    width: 19.5vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
}
.ban4{
    width: 20.8vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
}
.ban5{
    width: 9vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
}
.icon{
    width: 2%;
    height: auto;
    margin-right: .3vw;
}
.ban3 .icon {
    width: 6%;
    height: auto;
}
.ban5 .icon{
    margin-right: 1vw;
}
.ventanslidermovil{
    display: none;
}
.ventanslider{
    width: 100%;
    height: 50vw;
    overflow: hidden;
}
.ventanagrande{
width: 300%;
height: 50vw;
transition: transform 2.5s cubic-bezier(0.77, 0, 0.175, 1);
display: flex;
flex-direction: row;
}
.ventana1{
    width: 33.3%;
    height: 50vw;
    flex-shrink: 0;
    background-image: url('../img/fondoslide1.jpg');
    background-size: cover;
}
.ventana2{
    width: 33.3%;
    height: 50vw;
    background-image: url('../img/fondoslide2.jpg');
    background-size: cover;
}
.ventana3{
    width: 33.3%;
    height: 50vw;
    background-image: url('../img/fondoslide3.jpg');
    background-size: cover;
}
.barramenu{
    width: 63.5%;
    height: 4.7vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}
.fijar{
    width: 100%;
    height: auto;
    position: fixed;
    z-index: 99999;
    background-color: rgba(0, 0, 0, .5);
}
.logoprincipal{
    width: 21.5%;
    height: auto;
}
.log1{
    width: 100%;
    height: auto;
}
.menudesk{
    font-family: monbold;
    color: white;
    font-size: .8vw;
    margin-left: 8.2vw;
    width: 90%;
    height: auto;
}
.opcionesmenu{
    text-decoration: none;
    color: white;
    margin-right: .7vw;
}
.opcionesmenu:hover{
    text-decoration: none;
    color: rgb(9, 154, 198);
    margin-right: .7vw;
}
.opcionesmenucat{
    text-decoration: none;
    color: white;
    margin-right: .7vw;
    background-color:rgb(50, 182, 210);
    padding: .2vw;
}
.logomediano{
    width: 40.5%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 7vw;
}
.imglog{
    width: 100%;
    height: auto;
}
.mensajeuno{
    font-family: monblack;
    font-size: 3.3vw;
    color: white;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 5.9vw;
}
.masinfo{
    width: 100%;
    height: auto;
    margin-top: 4.8vw;
    text-align: center;
}
.masinfomovil{
    display: none;
}
.infoboton{
    font-family: monbold;
    font-size: 1vw;
    color: white;
    background-color: rgb(50, 182, 210);
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    padding-bottom: 1.5vw;
    padding-top: 1.5vw;
    text-decoration: none;
}
.veiticindo{
    width: 100%;
    height: 47.5vw;
    background-image: url('../img/fondoveinticinco.jpg');
    background-size: contain;
}
.derecha{
    width: 50%;
    height: auto;
    float: right;
}
.tituloveinti{
    width: 3.7vw;
    font-family: monsemi;
    font-size: .86vw;
    margin-top: 4.5vw;
    margin-left: 1.5vw;


    padding-left: 3.2vw;
    padding-right: 3.7vw;
    padding-top: .5vw;
    padding-bottom: .5vw;
}
.encabezados{
    font-family: monblack;
    font-size: 2.5vw;
    color: black;
    margin-left: 1.6vw;
    margin-top: 1.2vw;
    line-height: 3.15vw;
}
.veve{
    font-size: 4.55vw;
}
.textoempresa{
    width: 54.9%;
    font-family: monmed;
    font-size: .83vw;
    margin-top: 1.8vw;
    margin-left: 1.6vw;
    letter-spacing: .04vw;
    line-height: 1.2vw;
}
.v1{
    margin-top: 1.5vw;
}
.v2{
    margin-top: 1.8vw;
}
.btcontactanos{
    width: 25%;
    height: auto;
    margin-top: 4.5vw;
    margin-left: 1.7vw;
}
.botoncontacto{
    text-decoration: none;
    color: white;
    background-color: rgb(0, 106, 167);
    font-family: monbold;
    font-size: 1.05vw;
    padding-left: 2.2vw;
    padding-right: 2.2vw;
    padding-bottom: 1.2vw;
    padding-top: 1.2vw;
}
.botoncontacto:hover{
    color: rgb(68, 68, 68);
    background-color: rgb(198, 234, 255);
}
.productos{
    width: 100%;
    height: 51vw;
    background-image: url('../img/fondo3.jpg');
    background-size: cover;
}
.renglonextra{
    width: 100%;
    height: 4.9vw;
}
.tituloproductos{
    width: 8.5%;
    height: 1.3vw;
    font-family: monsemi;
    font-size: .86vw;
    color: white;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: .3vw;
    padding-top: .3vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.tituloprod{
    font-family: monblack;
    font-size: 1.84vw;
    width: 100%;
    height: auto;
    text-align: center;
    color: white;
    margin-top: 2vw;
}
.cuadroproducto{
    width: 19.6%;
    height: auto;
    margin-top: 4vw;
}
.uno{
    margin-left: 19.2vw;
    float: left;
}
.imagencuad{
    width: 100%;
    height: auto;
}
.imagenproduct{
    width: 100%;
    height: auto;
}
.cuadrotext{
    background-color: white;
    width: 100%;
    height: 13vw;
    padding-top: 2vw;
    text-align: center;
}
.titprod{
    font-family: monblack;
    font-size: 1.55vw;
    color:  rgb(0, 106, 167);
    width: 100%;
    height: auto;
    text-align: center;
}
.descprod{
    font-family: monmed;
    font-size: .73vw;
    width: 90%;
    height: auto;
    text-align: center;
    margin-top: .7vw;
    line-height: 1vw;
    margin-left: auto;
    margin-right: auto;
}
.botcat{
    width: auto;
    height: auto;
    margin-top: 3vw;
}
.botcat3{
    width: auto;
    height: auto;
    margin-top: 1vw;
}
.botcat2{
    width: auto;
    height: auto;
    margin-top: 4.7vw;
}
.botoncatalogo{
    font-family: monblack;
    text-decoration: none;
    color: white;
    background-color: rgb(0, 106, 167);
    font-size: 1.05vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: .5vw;
    padding-top: .5vw;
}
.dos{
    float: left;
    margin-left: 1.5vw;
}
.tres{
    float: left;
    margin-left: 1.5vw;
}
.bannerbordar{
    width: 100%;
    height: 19vw ;
    background-image: url('../img/FONDO4.jpg');
    background-size: cover;
    background-attachment: fixed;
}
.tituloempresa{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: monblack;
    font-size: 2.9vw;
    color:  rgb(45, 178, 255);
    padding-top: 3.4vw;
    letter-spacing: .08vw;
}
.subtitutloempresa{
    font-family: monmed;
    font-size: 2vw;
    width: 100%;
    height: auto;
    text-align: center;
    color: white;
    letter-spacing: .08vw;
}
.tercertituloempresa{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: monmed;
    font-size: 1.14vw;
     color: white;
    letter-spacing: .08vw;
    margin-top: .8vw;
}
.btcontacta{
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 3vw;
}
.servicios{
    width: 100%;
    height: 65.3vw;
    background-image: url('../img/fondo5.jpg');
}
.tituloservicios{
    width: 100%;
    height: auto;
    padding-top: 4vw;
    display: flex;
    justify-content: center;
}
.textserv{
    width: 8.7vw;
    font-family: monmed;
    font-size: .8vw;
    height: 1.2vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: .5vw;
    padding-bottom: .5vw;
    text-align: center;
}
.megatituloservicios{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: monblack;
    font-size: 1.85vw;
    margin-top: 1.5vw;
}
.barraopcionesservicios{
    width: 56%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-around;
    margin-top: 2.2vw;
}
.botonservicios{
    font-family: monmed;
    font-size: .8vw;
    color: black;
    width: 16.5%;
    height: 2.6vw;
    border: solid;
    border-width: 3px;
     border-color: rgb(137, 191, 77);
     border-radius: 2vw;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}
.botonservicios:hover{
    font-family: monbold;
    font-size: .8vw;
    color: white;
    width: 16.5%;
    height: 2.6vw;
    border: solid;
    border-width: 3px;
     border-color: rgb(87, 132, 38);
     background-color: rgb(137, 191, 77) ;
     border-radius: 2vw;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}
.ventainfoservicios{
    width: 73%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.2vw;
}
.ventanainterior{
    width: 100%;
    height: auto;
}
.fotosservicios{
    width: 49.6%;
    height: auto;
    float: left;
}
.ftsrv{
    width: 100%;
    height: auto;
}
.tituloydescripcion{
    width: 45%;
    height: auto;
    float: left;
    margin-left: 3vw;
}
.logdescripcion{
    width: 60%;
    height: auto;
}
.textodescripcion{
    font-family: monreg;
    font-size: 1.4vw;
    color: black;
    margin-top: 1vw;
}
.botoncotiza{
     width: 45%;
    height: auto;
    float: left;
    margin-left: 3vw;
    margin-top: 4.6vw;
}
.btncot{
    font-family: monblack;
    font-size: 1vw;
    color: white;
     background-color: rgb(0, 106, 167);
     padding-left: 4.6vw;
     padding-right: 4.6vw;
     padding-top: .6vw;
     padding-bottom: .6vw;
     text-decoration: none;
}
.cuadrocaract{
    width: 45%;
    height: auto;
    float: left;
    margin-left: 2.6vw;
    margin-top: 7.5vw;
}
.rengloncaract{
    width: 100%;
    height: auto;
}
.paloma{
    width: 2.5%;
    height: auto;
    float: left;
}
.palo{
    width: 100%;
    height: auto;
}
.textorenglon{
    width: 90%;
    height: auto;
    float: left;
    margin-left: .8vw;
}
.titudesc{
    font-family: monbold;
    font-size: .85vw;
}
.desc{
    font-family: monreg;
    font-size: .85;
}
.sep{
    margin-top: 1.4vw;
}
/*.activado{
    display: block;
}
.desactivado{
    display: none;
}*/
.formatocontacto{
    width: 100%;
    height: 38vw;
    background-image: url('../img/fondo\ contacto.jpg');
    background-size: contain;
}
.titulocontacto{
    font-family: monblack;
    font-size: 2.4vw;
    color: rgb(137, 191, 77);
    margin-left: 18.5vw;
    padding-top: 3vw;

}
.lineaverde{
    margin-left: 18.5vw;
    width: 25%;
    height: 1vw;
    border: solid;
    border-color: rgb(137, 191, 77);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
}
.textocontacto{
    font-family: monmed;
    font-size: 1.15vw;
    color: white;
    margin-left: 18.5vw;
}
.formatocon{
    width: 50%;
    height: auto;
    margin-left: 18.5vw;
    margin-top: 2.5vw;
}
.campo1{
    width: 28%;
    height: 3vw;
    background-color: white;
    color: gray;
    font-family: monmed;
    font-size: 1vw;
    margin-right: 1.9vw;
    margin-bottom: 1vw;
    padding-left: .5vw;
}
.campo2{
     width: 62.5%;
    height: 10vw;
    background-color: white;
    color: gray;
    font-family: monmed;
    font-size: 1vw;
    margin-right: 1.9vw;
    margin-bottom: 1vw;
    padding-left: .5vw;
}
.envio{
    width: 25%;
    height: auto;
    font-family: monblack;
    font-size: .8vw;
    color: white;
    background-color: rgb(137, 191, 77) ;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 1vw;
    padding-top: 1vw;
  margin-left: 9vw;
}
.barradeclientes{
    width: 100%;
    height: 16vw;
    background-image: url('../img/findo\ clientees.jpg');
}
.tituclientes{
     width: 100%;
    height: auto;
    padding-top: 2.5vw;
    display: flex;
    justify-content: center;
}
.textclien{
    width: 10vw;
    font-family: monmed;
    font-size: .8vw;
    height: 1.3vw;
    padding-left: .5vw;
    padding-right: .5vw;
    padding-top: .5vw;
    padding-bottom: .3vw;
    text-align: center;
}
.barraiconos{
    width: 100%;
    height: auto;
    margin-top: 3vw;
    text-align: center;
}
.logsclie{
    width: 60%;
    height: auto;
}
.footer{
    width: 100%;
    height: 20vw;
    background-image: url('../img/backfooter.png');
    background-size: cover;
}
.columna1{
    width: 21%;
    height: 18vw;
    margin-left: 23vw;
    float: left;
}
.lgft{
    width: 100%;
    height: auto;
    margin-top: 4.3vw;
}
.columna2{
    width: 8%;
    height: 18vw;
    float: left;
    display: flex;
    flex-direction: column;
    margin-left: 12vw;
    padding-top: 3.5vw;
}
.columna2 a{
    font-family: monbold;
    font-size: .85vw;
    text-decoration: none;
    color: white;
    margin-bottom: .5vw;
}
.iconofotterredes{
    display: flex;
    flex-direction: row;
}
.iconfot{
    width: 60%;
    height: auto;
    margin-right: 1vw;
}
.columna3{
       width: 15%;
    height: 18vw;
    float: left;

    margin-left: 3.2vw;
    padding-top: 3.8vw;
    color: white;
    font-family: monbold;
    font-size: .8vw;
}


#logprin {
  opacity: 0;
  transform: translateX(-50px); /* empieza a la izquierda */
  transition: opacity 1s ease, transform 1s ease;
}
#tituani {
  opacity: 0;
  transform: translateX(50px); /* derecha → izquierda */
  transition: opacity 1s ease, transform 1s ease;
}
.fade-left,
.fade-right {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Direcciones iniciales */
.fade-left {
  transform: translateX(-40px);
}

.fade-right {
  transform: translateX(40px);
}

/* Estado visible */
.aparecer {
  opacity: 1;
  transform: translateX(0);
}
#tit1 { transition-delay: 0s; }
#tit2 { transition-delay: 0.1s; }
#tit3 { transition-delay: 0.2s; }
#tit4 { transition-delay: 0.3s; }


.veiticindo {
  overflow: visible;
}

.fade-up {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.aparecer-up {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados */
#cuad1 { transition-delay: 0s; }
#cuad2 { transition-delay: 0.15s; }
#cuad3 { transition-delay: 0.3s; }



/* ---------- BOTÓN ACTIVO ---------- */
.botonservicios.activo {
  background-color: rgb(137, 191, 77);
  color: white;
  border-color: rgb(87, 132, 38);
}

/* ---------- VENTANITAS ---------- */
.ventanita {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Estado inicial */
.from-right {
  transform: translateX(80px);
}

.from-left {
  transform: translateX(-80px);
}

/* Visible */
.ventanita.activa {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}


/* CONTENEDOR */
.whatsapp-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* BOTÓN FLOTANTE */
.whatsapp-float {
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.whatsapp-float img {
  width: 32px;
}

/* CHAT */
.whatsapp-chat {
  width: 300px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: absolute;
  bottom: 80px;
  right: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all .4s ease;
}

/* ACTIVO */
.whatsapp-chat.activo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* HEADER */
.wa-header {
  background: #075E54;
  color: #fff;
  padding: 12px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titw1{
    font-family: monbold;
    float: left;
    margin-top: .3vw;
}
.titw{
    font-family: monlight !important;
    font-size: .4vw !important;
    float: left;
}
.imgw{
    width: 15% !important;
    margin-right: .5vw;
    height: auto;
    float: left;
}
.wa-header span {
  font-size: 12px;
}

.wa-close {
  cursor: pointer;
  font-size: 20px;
}

/* BODY */
.wa-body {
  padding: 15px;
  font-size: 14px;
  font-family: monmed;
  color: #333;
}

/* FOOTER */
.wa-footer {
  display: flex;
  border-top: 1px solid #eee;
  border-radius: 12px 12px 12px 12px;
}

.wa-footer input {
  flex: 1;
  border: none;
  padding: 10px;
  outline: none;
   border-radius: 12px 12px 12px 12px;
}

.wa-footer button {
  background: #25D366;
  border: none;
  color: white;
  padding: 0 15px;
  cursor: pointer;
}
/* estilos catalogo */
.titucatalogo{
    font-size: 7vw !important;
    margin-top: 4vw;
}
}


/*movil version*/
@media only screen and (max-width: 1079px){
body{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
.regresoflecha{
    width: 10%;
    height: auto;
    position: fixed;
    z-index: 6;
    top: 172vw;
    left: 4vw;
}
.flechis{
    width: 100%;
    height: auto;
    box-shadow: 12px 12px 12px gary;
}
.cuerpocompleto{
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.bannerinfo{
    display: none;
}

.icon{
    width: 9%;
    height: auto;
    margin-right: .3vw;
}
.ban3 .icon {
    width: 6%;
    height: auto;
}
.ban5 .icon{
    margin-right: 1vw;
}
.ventanslider{
    display: none;
}
.ventanslidermovil{
    width: 100%;
    height: 132vw;
    overflow:hidden;
}
.ventanagrandemovil{
width: 300%;
height: 132vw;
transition: transform 2.5s cubic-bezier(0.77, 0, 0.175, 1);

}
.ventana1movil{
    width: 33.3%;
    height: 132vw;
    float: left;
    background-image: url('../img/slide1movil.jpg');;
    background-size: cover;
}
.ventana2movil{
    width: 33.3%;
    height: 132vw;
   float: left;
    background-image: url('../img/slide2movil.jpg');
    background-size: cover;
}
.ventana3movil{
    width: 33.3%;
    height: 132vw;
    float: left;
    background-image: url('../img/slide3movil.jpg');
    background-size: cover;
}
.barramenu{
    display: none;
}
.logomovil{
    width: 83%;
    height: 17vw;
    background-color: rgb(0, 0, 0);
    display: flex;

    align-items: center;
}
.logmovil1{
    width: 55%;
    height: auto;
    margin-left: 7vw;

}
.barradecontacto{
    width: 100%;
    height: 13vw;
    background-color: #c2c2c2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.botonconta{
    font-family: monbold;
    font-size: 2.6vw;
    color: white;
    text-decoration: none;
    background-color: rgb(50, 182, 210);
    padding-left: 7vw;
    padding-right: 7vw;
    padding-bottom: 3vw;
    padding-top: 3vw;
    border-radius: 2vw;
}









.fijar{
    width: 100%;
    height: auto;
    position: fixed;
    z-index: 99999;
    background-color: rgba(0, 0, 0, .5);
}
.logoprincipal{
    width: 21.5%;
    height: auto;
}
.log1{
    width: 100%;
    height: auto;
}
.menudesk{
    font-family: monbold;
    color: white;
    font-size: .8vw;
    margin-left: 8.2vw;
    width: 80%;
    height: auto;
}
.opcionesmenu{
    text-decoration: none;
    color: white;
    margin-right: .7vw;
}
.opcionesmenu:hover{
    text-decoration: none;
    color: rgb(9, 154, 198);
    margin-right: .7vw;
}
.opcionesmenucat{
    text-decoration: none;
    color: white;
    margin-right: .7vw;
    background-color:rgb(50, 182, 210);
    padding: .2vw;
}
.logomediano{
    width: 75%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 14vw;
}
.imglog{
    width: 100%;
    height: auto;
}
.mensajeuno{
    font-family: monblack;
    font-size: 7.3vw;
    color: white;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 14.9vw;
}
.masinfomovil{
    width: 100%;
    height: auto;
    margin-top: 59.8vw;
    text-align: center;
}
.infoboton{
    font-family: monbold;
    font-size: 2.5vw;
    color: white;
    background-color: rgb(50, 182, 210);
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 2vw;
    padding-top: 2vw;
    text-decoration: none;
    border-radius: 2vw;
}
/* 25 aós */
.veiticindo{
    width: 100%;
    height: 177vw;
    background-image: url('../img/fondomovil25.jpg');
    background-size: cover;

}
.derecha{
    width: 100%;
    height: auto;
    text-align: center;
}
.tituloveinti{
    width: 3.7vw;
    font-family: monsemi;
    font-size: .86vw;
    margin-top: 0vw;
    margin-left: 1.5vw;


    padding-left: 3.2vw;
    padding-right: 3.7vw;
    padding-top: 0vw;
    padding-bottom: .5vw;
}
.encabezados{
    font-family: monblack;
    font-size: 6vw;
    color: black;
    margin-left: 1.6vw;
    margin-top: 18vw;
    line-height: 7vw;
}
.veve{
    font-size: 12vw;
}
.textoempresa{
    text-align: left;
    width: 80%;
    font-family: monmed;
    font-size: 3vw;
    margin-top: 6vw;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: .04vw;
    line-height: 3vw;
}
.v1{
    margin-top: 1.5vw;
}
.v2{
    margin-top: 1.8vw;
}
.btcontactanos{
    width: 100%;
    height: auto;
    margin-top: 15.5vw;
    margin-left: 0px;
}
.botoncontacto{
    text-decoration: none;
    color: white;
    background-color: rgb(0, 106, 167);
    font-family: monbold;
    font-size: 3vw;
    padding-left: 4.5vw;
    padding-right: 4.5vw;
    padding-bottom: 3vw;
    padding-top: 3vw;
}
.botoncontacto:hover{
    color: rgb(68, 68, 68);
    background-color: rgb(198, 234, 255);
}
/* productos */
.productos{
    width: 100%;
    height: 178vw;
    background-image: url('../img/fondo3.jpg');
    background-size: cover;
}
.renglonextra{
    width: 100%;
    height: 4.9vw;
}
.tituloproductos{
    width: 100%;
    height: 18vw;
    font-family: monsemi;
    font-size: .86vw;
    color: white;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: .3vw;
    padding-top: .3vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.tituloprod{
    font-family: monblack;
    font-size: 5vw;
    width: 78%;
    height: auto;
    text-align: center;
    color: white;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
}
.cuadroproducto{
    width: 70%;
    height: 113vw;
    margin-top: 4vw;
    float: left;
}
.uno{
    margin-left: 16vw;
    float: left;
}
.imagencuad{
    width: 100%;
    height: auto;
}
.imagenproduct{
    width: 100%;
    height: auto;
}
.cuadrotext{
    background-color: white;
    width: 100%;
    height: 51vw;
    padding-top: 8vw;
    text-align: center;
}
.titprod{
    font-family: monblack;
    font-size: 5.5vw;
    color:  rgb(0, 106, 167);
    width: 100%;
    height: auto;
    text-align: center;
}
.descprod{
    font-family: monmed;
    font-size: 2.7vw;
    width: 85%;
    height: auto;
    text-align: center;
    margin-top: .7vw;
    line-height: 2.5vw;
    margin-left: auto;
    margin-right: auto;
}
.botcat{
    width: auto;
    height: auto;
    margin-top: 14vw;
}
.botcat3{
    width: auto;
    height: auto;
    margin-top: 4vw;
}
.botcat2{
    width: auto;
    height: auto;
    margin-top: 4.7vw;
}
.botoncatalogo{
    font-family: monblack;
    text-decoration: none;
    color: white;
    background-color: rgb(0, 106, 167);
    font-size: 4vw;
    padding-left: 6vw;
    padding-right: 6vw;
    padding-bottom: 2vw;
    padding-top: 2vw;
}
.dos{
    display: none;
}
.tres{
    display: none;
}
.bannerbordar{
    width: 100%;
    height: 51vw ;
    background-image: url('../img/FONDO4.jpg');
    background-size: cover;
    background-attachment: fixed;
}
.tituloempresa{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: monblack;
    font-size: 5vw;
    color:  rgb(45, 178, 255);
    padding-top: 7.4vw;
    letter-spacing: .08vw;
}
.subtitutloempresa{
    font-family: monmed;
    font-size: 5vw;
    width: 100%;
    height: auto;
    text-align: center;
    color: white;
    letter-spacing: .08vw;
}
.tercertituloempresa{
    width: 80%;
    height: auto;
    text-align: center;
    font-family: monmed;
    font-size: 3vw;
     color: white;
    letter-spacing: .08vw;
    margin-top: .8vw;
    margin-left: auto;
    margin-right: auto;
}
.btcontacta{
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 8vw;
}
.servicios{
    width: 100%;
    height: 215vw;
    background-image: url('../img/fondo5.jpg');
}
.tituloservicios{
    width: 100%;
    height: auto;
    padding-top: 4vw;
    display: flex;
    justify-content: center;
}
.textserv{
    width: 8.7vw;
    font-family: monmed;
    font-size: .8vw;
    height: 1.2vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: .5vw;
    padding-bottom: .5vw;
    text-align: center;
}
.megatituloservicios{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: monblack;
    font-size: 3.5vw;
    margin-top: 1.5vw;
}
.barraopcionesservicios{
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-around;
    margin-top: 4vw;
}
.botonservicios{
    font-family: monmed;
    font-size: 1.5vw;
    color: black;
    width: 16.5%;
    height: 4.5vw;
    border: solid;
    border-width: 3px;
     border-color: rgb(137, 191, 77);
     border-radius: 2vw;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}
.botonservicios:hover{
    font-family: monbold;
    font-size: .8vw;
    color: white;
    width: 16.5%;
    height: 2.6vw;
    border: solid;
    border-width: 3px;
     border-color: rgb(87, 132, 38);
     background-color: rgb(137, 191, 77) ;
     border-radius: 2vw;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}
.ventainfoservicios{
    width: 73%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7vw;
}
.ventanainterior{
    width: 100%;
    height: auto;
}
.fotosservicios{
    width: 65%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.ftsrv{
    width: 100%;
    height: auto;
}
.tituloydescripcion{
    width: 100%;
    height: auto;
    margin-left: 3vw;
}
.logdescripcion{
    width: 90%;
    height: auto;
    margin-top: 2vw;

}
.textodescripcion{
    font-family: monreg;
    font-size: 3vw;
    color: black;
    margin-top: 11vw;
}
.botoncotiza{
     width: 100%;
    height: auto;
    margin-left: 0vw;
    margin-top: 14vw;
    text-align: center;
}
.btncot{
    font-family: monblack;
    font-size: 2vw;
    color: white;
     background-color: rgb(0, 106, 167);
     padding-left: 11vw;
     padding-right: 11vw;
     padding-top: 3vw;
     padding-bottom: 3vw;
     text-decoration: none;
}
.cuadrocaract{
    width: 90%;
    height: auto;
    float: left;
    margin-left: 2.6vw;
    margin-top: 7.5vw;
}
.rengloncaract{
    width: 100%;
    height: auto;
    margin-top: 10vw;
}
.paloma{
    width: 4.5%;
    height: auto;
    float: left;
    margin-left: -2vw;
}
.palo{
    width: 100%;
    height: auto;
}
.textorenglon{
    width: 90%;
    height: auto;
    float: left;
    margin-left: 1vw;
}
.titudesc{
    font-family: monbold;
    font-size: 3vw;
}
.desc{
    font-family: monreg;
    font-size: 2.6vw;
}
.sep{
    margin-top: 1.4vw;
}
/*.activado{
    display: block;
}
.desactivado{
    display: none;
}*/
.formatocontacto{
    width: 100%;
    height: 177vw;
    background-image: url('../img/fondo\ contacto.jpg');
    background-size: cover;
}
.titulocontacto{
    font-family: monblack;
    font-size: 6vw;
    color: rgb(137, 191, 77);
    margin-left: 10vw;
    padding-top: 9vw;

}
.lineaverde{
    margin-left: 10vw;
    width: 35%;
    height: 2vw;
    border: solid;
    border-color: rgb(137, 191, 77);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
}
.textocontacto{
    font-family: monmed;
    font-size: 3vw;
    color: white;
    margin-left: 10vw;
}
.formatocon{
    width: 80%;
    height: auto;
    margin-left: 11vw;
    margin-top: 6vw;
}
.campo1{
    width: 45%;
    height: 7vw;
    background-color: white;
    color: gray;
    font-family: monmed;
    font-size: 3vw;
    margin-right: 1.9vw;
    margin-bottom: 3vw;
    padding-left: 0vw;
}
.campo2{
     width: 95%;
    height: 24vw;
    background-color: white;
    color: gray;
    font-family: monmed;
    font-size: 1vw;
    margin-right: 1.9vw;
    margin-bottom: 1vw;
    padding-left: .5vw;
}
.envio{
    width: 45%;
    height: auto;
    font-family: monblack;
    font-size: 3vw;
    color: white;
    background-color: rgb(137, 191, 77) ;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 1vw;
    padding-top: 2vw;
  margin-left: 22vw;
  margin-top: 2vw;
}
.barradeclientes{
    width: 100%;
    height: 16vw;
    background-image: url('../img/findo\ clientees.jpg');
}
.tituclientes{
     width: 100%;
    height: auto;
    padding-top: 2.5vw;
    display: flex;
    justify-content: center;
}
.textclien{
    width: 10vw;
    font-family: monmed;
    font-size: .8vw;
    height: 1.3vw;
    padding-left: .5vw;
    padding-right: .5vw;
    padding-top: .5vw;
    padding-bottom: .3vw;
    text-align: center;
}
.barraiconos{
    width: 100%;
    height: auto;
    margin-top: 3vw;
    text-align: center;
}
.logsclie{
    width: 60%;
    height: auto;
}
.footer{
    width: 100%;
    height: 80vw;
    background-image: url('../img/backfooter.png');
    background-size: cover;
}
.columna1{
    width: 70%;
    height: 18vw;
    margin-left: 15vw;
    padding-top: 4vw;
}
.lgft{
    width: 100%;
    height: auto;
    margin-top: 4.3vw;
}
.columna2{
    display: none;
}
.columna2 a{
    font-family: monbold;
    font-size: .85vw;
    text-decoration: none;
    color: white;
    margin-bottom: .5vw;
}
.iconofotterredes{
    display: none;
}
.iconfot{
    width: 60%;
    height: auto;
    margin-right: 1vw;
}
.columna3{
       width: 90%;
    height: 18vw;
    text-align: center;
    margin-left: 3.2vw;
    padding-top: 7vw;
    color: white;
    font-family: monbold;
    font-size: 2vw;
}


#logprin {
  opacity: 0;
  transform: translateX(-50px); /* empieza a la izquierda */
  transition: opacity 1s ease, transform 1s ease;
}
#tituani {
  opacity: 0;
  transform: translateX(50px); /* derecha → izquierda */
  transition: opacity 1s ease, transform 1s ease;
}
.fade-left,
.fade-right {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Direcciones iniciales */
.fade-left {
  transform: translateX(-40px);
}

.fade-right {
  transform: translateX(40px);
}

/* Estado visible */
.aparecer {
  opacity: 1;
  transform: translateX(0);
}
#tit1 { transition-delay: 0s; }
#tit2 { transition-delay: 0.1s; }
#tit3 { transition-delay: 0.2s; }
#tit4 { transition-delay: 0.3s; }


.veiticindo {
  overflow: visible;
}

.fade-up {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.aparecer-up {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados */
#cuad1 { transition-delay: 0s; }
#cuad2 { transition-delay: 0.15s; }
#cuad3 { transition-delay: 0.3s; }



/* ---------- BOTÓN ACTIVO ---------- */
.botonservicios.activo {
  background-color: rgb(137, 191, 77);
  color: white;
  border-color: rgb(87, 132, 38);
}

/* ---------- VENTANITAS ---------- */
.ventanita {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Estado inicial */
.from-right {
  transform: translateX(80px);
}

.from-left {
  transform: translateX(-80px);
}

/* Visible */
.ventanita.activa {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}


/* CONTENEDOR */
.whatsapp-widget {
    display: none;
 
}
/* what movil */
.btn-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #fff;
  padding: 14px 18px;
  border-radius: 50px;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 999;
}

.btn-whatsapp:active {
  transform: scale(0.95);
}

/* BOTÓN FLOTANTE */
.whatsapp-float {
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.whatsapp-float img {
  width: 32px;
}

/* CHAT */
.whatsapp-chat {
  width: 300px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: absolute;
  bottom: 80px;
  right: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all .4s ease;
}

/* ACTIVO */
.whatsapp-chat.activo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* HEADER */
.wa-header {
  background: #075E54;
  color: #fff;
  padding: 12px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titw1{
    font-family: monbold;
    float: left;
    margin-top: .3vw;
}
.titw{
    font-family: monlight !important;
    font-size: .4vw !important;
    float: left;
}
.imgw{
    width: 15% !important;
    margin-right: .5vw;
    height: auto;
    float: left;
}
.wa-header span {
  font-size: 12px;
}

.wa-close {
  cursor: pointer;
  font-size: 20px;
}

/* BODY */
.wa-body {
  padding: 15px;
  font-size: 14px;
  font-family: monmed;
  color: #333;
}

/* FOOTER */
.wa-footer {
  display: flex;
  border-top: 1px solid #eee;
  border-radius: 12px 12px 12px 12px;
}

.wa-footer input {
  flex: 1;
  border: none;
  padding: 10px;
  outline: none;
   border-radius: 12px 12px 12px 12px;
}

.wa-footer button {
  background: #25D366;
  border: none;
  color: white;
  padding: 0 15px;
  cursor: pointer;
}
/* estilos catalogo */
.titucatalogo{
    font-size: 7vw !important;
    margin-top: 4vw;
}
}