@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;
    }
.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: 9%;
    height: auto;
    margin-right: .3vw;
}
.ban3 .icon {
    width: 6%;
    height: auto;
}
.ban5 .icon{
    margin-right: 1vw;
}
.ventana1{
    width: 100%;
    height: 30vw;
    background-image: url('../img/fondo1.jpg');
    background-size: contain;
}
.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: 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: 40.5%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 7vw;
}
.imglog{
    width: 100%;
    height: auto;
}
.mensajeuno{
    font-family: monblack;
    font-size: 7vw;
    color: white;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 12vw;
}
.masinfo{
    width: 100%;
    height: auto;
    margin-top: 4.8vw;
    text-align: center;
}
.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: 36vw;
    background-color: rgb(229, 229, 229);
    background-size: contain;
    background-repeat: no-repeat;
}
.derecha{
    width: 100%;
    height: auto;
    text-align: center;

}
.tituloveinti{
    width: 26vw;
    font-family: monsemi;
    font-size: 3.5vw;
    letter-spacing: .4vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.9vw;
    color: rgb(0, 106, 167);
}
.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: auto;
    font-family: monsemi;
    font-size: .86vw;
    color: white;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: .3vw;
    padding-top: .3vw;
    border: solid;
    border-width: 6px;
    border-color: rgb(137, 191, 77);
    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: 100%;
    height: auto;
    text-align: center;
    margin-top: .7vw;
    line-height: 1vw;
}
.botcat{
    width: auto;
    height: auto;
    margin-top: 3vw;
}
.botcat2{
    width: auto;
    height: auto;
    margin-top: 4vw;
}
.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: 25vw;
    background-color: white;
}
.tituloservicios{
    width: 100%;
    height: auto;
    padding-top: 4vw;
    display: flex;
    justify-content: center;
}
.textserv{
    width: 8.7vw;
    font-family: monmed;
    font-size: .8vw;
    border: solid;
    border-width: 3px;
    border-color: rgb(137, 191, 77);
    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;
    border: solid;
    border-width: 5px;
    border-color: rgb(137, 191, 77);
    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;
}

/* catalogos */
.cuadroopciones{
    width: 65.5%;
    height: 12vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: .7vw;
    display: flex;
    justify-content: space-between;
}
.cuadroopciones2{
    width: 52%;
    height: 12vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: .7vw;
    display: flex;
    justify-content: space-between;
}
.opcionuni1{
    width: 11.4vw;
    height: 11vw;
    text-align: center;
}
.imagenopcionuniforme{
    width: 100%;
    height: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logouni{
    width: 73%;
    height: auto;
}
.btnunidescarga{
    width: 100%;
    height: auto;
    margin-top: 1.1vw;
}
.botonuniforme{
    font-family: monsemi;
    font-size: 1vw;
    text-decoration: none;
    color: white;
    background-color: rgb(0, 106, 167);
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    padding-top: .5vw;
    padding-bottom: .5vw;
}
.botonuniforme:hover{
    font-family: monsemi;
    font-size: 1vw;
    text-decoration: none;
    color: white;
    background-color: rgb(5, 34, 50);
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    padding-top: .5vw;
    padding-bottom: .5vw;
}
.bl{
    width: 84%;
}
.b2{
    width: 50%;
}
.b3{
    width: 89%;
    margin-top: .7vw;
}
.b4{
    width: 90%;
    margin-top: .7vw;
    margin-left: .5vw;
}
.ba{
    margin-left: 1.2vw;
}
.b5{
    width: 78%;
    margin-top: 1.9vw;
}
.b6{
    width: 100%;
    margin-top: 2.4vw;
}
.b7{
    width: 100%;
    margin-top: 2.1vw;
}
.b8{
    width: 50%;
    margin-top: 1vw;
}
.souvenir{
    width: 27%;
    height: 21vw;
    margin-left: 20.5vw;
    float: left;
}
.titusouvenir{
    font-family: monsemi;
    font-size: 2.2vw;
    color: rgb(0, 106, 167);
    margin-left: 5vw;
    margin-top: 4.2vw;
    letter-spacing: .4vw;
}
.c1{
    margin-top: 1.3vw;
    float: left;
}
.c2{
    margin-left: 2vw;
}
.b10{
    width: 79%;
    margin-top: 1vw;
    margin-left: .5vw;
}
.b11{
    width: 95%;
    margin-left: 1vw;
    margin-top: 1.5vw;
}
.b12{
    width: 49%;
    margin-top: .5vw;
}
.b13{
    width: 80%;
}
.reconoci{
     width: 27%;
    height: 21vw;
    margin-left: 6vw;
float: left;
}
.titureco{
    font-family: monsemi;
    font-size: 2.2vw;
    color: rgb(0, 106, 167);
    margin-left: 1.3vw;
    margin-top: 4.2vw;
    letter-spacing: -.05vw;
}
}

@media only screen and (max-width: 1079px){
    
 .btn-whatsapp {
        display: none;
    }
.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: 9%;
    height: auto;
    margin-right: .3vw;
}
.ban3 .icon {
    width: 6%;
    height: auto;
}
.ban5 .icon{
    margin-right: 1vw;
}
.ventana1{
    width: 100%;
    height: 30vw;
    background-image: url('../img/fondo1.jpg');
    background-size: contain;
}
.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: 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: 40.5%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 7vw;
}
.imglog{
    width: 100%;
    height: auto;
}
.mensajeuno{
    font-family: monblack;
    font-size: 7vw;
    color: white;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 12vw;
}
.masinfo{
    width: 100%;
    height: auto;
    margin-top: 4.8vw;
    text-align: center;
}
.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: 232vw;
    background-color: rgb(229, 229, 229);
    background-size: contain;
    background-repeat: no-repeat;
}
.derecha{
    width: 100%;
    height: auto;
    text-align: center;

}
.tituloveinti{
    width: 26vw;
    font-family: monsemi;
    font-size: 3.5vw;
    letter-spacing: .4vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.9vw;
    color: rgb(0, 106, 167);
}
.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: auto;
    font-family: monsemi;
    font-size: .86vw;
    color: white;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: .3vw;
    padding-top: .3vw;
    border: solid;
    border-width: 6px;
    border-color: rgb(137, 191, 77);
    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: 100%;
    height: auto;
    text-align: center;
    margin-top: .7vw;
    line-height: 1vw;
}
.botcat{
    width: auto;
    height: auto;
    margin-top: 3vw;
}
.botcat2{
    width: auto;
    height: auto;
    margin-top: 4vw;
}
.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: 65vw;
    background-color: white;
}
.tituloservicios{
    width: 100%;
    height: auto;
    padding-top: 4vw;
    display: flex;
    justify-content: center;
}
.textserv{
    width: 8.7vw;
    font-family: monmed;
    font-size: .8vw;
    border: solid;
    border-width: 3px;
    border-color: rgb(137, 191, 77);
    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: 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 {
  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;
}

/* catalogos */
.cuadroopciones{
    width: 90%;
    height: 60vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 9.7vw;
  ;
}
.cuadroopciones2{
    width: 90%;
    height: 60vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40vw;
    ;
    ;
}
.opcionuni1{
    width: 100%;
    height: 20vw;
    text-align: center;
    
}
.imagenopcionuniforme{
    width: 100%;
    height: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logouni{
    width: 73%;
    height: auto;
}
.btnunidescarga{
    width: 100%;
    height: auto;
    margin-top: 1.1vw;
}
.botonuniforme{
    font-family: monsemi;
    font-size: 1vw;
    text-decoration: none;
    color: white;
    background-color: rgb(0, 106, 167);
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    padding-top: .5vw;
    padding-bottom: .5vw;
}
.botonuniforme:hover{
    font-family: monsemi;
    font-size: 1vw;
    text-decoration: none;
    color: white;
    background-color: rgb(5, 34, 50);
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    padding-top: .5vw;
    padding-bottom: .5vw;
}
.bl{
    width: 84%;
}
.b2{
    width: 50%;
}
.b3{
    width: 89%;
    margin-top: .7vw;
}
.b4{
    width: 90%;
    margin-top: .7vw;
    margin-left: .5vw;
}
.ba{
    margin-left: 1.2vw;
}
.b5{
    width: 78%;
    margin-top: 1.9vw;
}
.b6{
    width: 100%;
    margin-top: 2.4vw;
}
.b7{
    width: 100%;
    margin-top: 2.1vw;
}
.b8{
    width: 50%;
    margin-top: 1vw;
}
.souvenir{
    width: 27%;
    height: 21vw;
    margin-left: 20.5vw;
    float: left;
}
.titusouvenir{
    font-family: monsemi;
    font-size: 2.2vw;
    color: rgb(0, 106, 167);
    margin-left: 5vw;
    margin-top: 4.2vw;
    letter-spacing: .4vw;
}
.c1{
    margin-top: 1.3vw;
    float: left;
}
.c2{
    margin-left: 2vw;
}
.b10{
    width: 79%;
    margin-top: 1vw;
    margin-left: .5vw;
}
.b11{
    width: 95%;
    margin-left: 1vw;
    margin-top: 1.5vw;
}
.b12{
    width: 49%;
    margin-top: .5vw;
}
.b13{
    width: 80%;
}
.reconoci{
     width: 27%;
    height: 21vw;
    margin-left: 6vw;
float: left;
}
.titureco{
    font-family: monsemi;
    font-size: 2.2vw;
    color: rgb(0, 106, 167);
    margin-left: 1.3vw;
    margin-top: 4.2vw;
    margin-bottom: 3vw;
    letter-spacing: -.05vw;
}
}