@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html,body{
width:100%;
	height:100%;
font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100; background-color: #010101;
}
	
* { margin: 0px;
padding: 0px; outline: 0;
}
iframe { display:block; border:none; }

.os-animation{
            opacity: 0;
 }  

.os-animation.animated{
            opacity: 1;
 }  
 
#elhead{ width:100%; text-align:center; height:90px; top:10px; left:0; background-color: transparent; z-index:9999; position:absolute;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; z-index:9998;}

.texto1{ color:#ffffff; font-size:55px; font-weight:400; line-height: 100%; text-decoration:none; }
.texto2{ color:#6bc72a; font-size:15px; font-weight:600; line-height: 180%; text-decoration:none; }
.texto3{ color:#ffffff; font-size:15px; font-weight:400; line-height: 180%; text-decoration:none; }
.texto4{ color:#1e1e1e; font-size:15px; font-weight:600; line-height: 150%; text-decoration:none; }
.texto4a{ color:#006328; font-size:15px; font-weight:600; line-height: 150%; text-decoration:none; }
.texto5{ color:#006328; font-size:58px; font-weight:400; line-height: 120%; text-decoration:none; }
.texto6{ color:#ffffff; font-size:20px; font-weight:700; line-height: 100%; text-decoration:none; }
.texto7{ color:#1e1e1e; font-size:17.5px; font-weight:400; line-height: 180%; text-decoration:none; }
.texto8{ color:#c4ec8f; font-size:17.5px; font-weight:300; line-height: 180%; text-decoration:none; }
.texto9{ color:#ffffff; font-size:16px; font-weight:400; line-height: 180%; text-decoration:none; }
.texto10{ color:#6bc72a; font-size:17.5px; font-weight:700; line-height: 180%; text-decoration:none; }
.texto11{ color:#6bc72a; font-size:100px; font-weight:400; line-height: 100%; text-decoration:none; }
.texto12{ color:#006328; font-size:22px; font-weight:400; line-height: 130%; text-decoration:none; }
.texto13{ color:#6bc72a; font-size:14px; font-weight:400; line-height: 130%; text-decoration:none; }
.texto14{ color:#FFFFFF; font-size:17.5px; font-weight:400; line-height: 180%; text-decoration:none; }
.texto15{ color:#11284b; font-size:17.5px; font-weight:400; line-height: 180%; text-decoration:none; }
.texto16{ color:#6bc72a; font-size:50px; font-weight:400; line-height: 150%; text-decoration:none; }


#arriba, #arriba1,#arriba2,#arriba3,#arriba4{display:inline-block;vertical-align:top;}
#arriba{ width: 95%; max-width:1400px;vertical-align:middle; text-align:center;}
#arriba1{width:30%;margin-right:-4px; text-align:left;  margin-top:10px;}
#arriba2{width:70%;margin-right:-4px;text-align:right;  margin-top:45px;}
#arriba3{width:100%;margin-right:0px;text-align:right;  margin-top:10px;}


#soluciones{ width:100%; text-align:center; background-color: #010101;}

#lasoluciones, #lasoluciones1,#lasoluciones2,#lasoluciones3,#lasoluciones4{display:inline-block;vertical-align:top;}
#lasoluciones{ width:1400px;vertical-align:middle; text-align:center;}
#lasoluciones1{width:770px;margin-right:-4px; text-align:left;}
#lasoluciones2{width:630px;margin-right:-4px;text-align:left; margin-top: 10px;}

.infotext{ width: 100%; max-width:420px ; text-align: left; display: inline-block;}

.invi{ width:100%; height: 84px;}

#contribuimos{ width:100%; text-align:center; background-color: #ffffff;}

#contri, #contri1,#contri2,#contri3,#contri4{display:inline-block;vertical-align:top;}
#contri{ width:1400px;vertical-align:middle; text-align:center;}
#contri1{width:100%;margin-right:0px; text-align:left;}
#contri2{width:100%;margin-right:0px;text-align:left; margin-top: 50px;}

#iconos, #iconos1,#iconos2,#iconos3,#iconos4{display:inline-block;vertical-align:top;}
#iconos{ width:1400px;vertical-align:middle; text-align:center;}
#iconos1{width:430px;margin-right:-4px; text-align:left; background-color: #6bc72a; margin-bottom: 50px;}
#iconos2{width:55px;margin-right:-4px;text-align:left;}
#iconos3{width:55px;margin-right:-4px;text-align:left;}

.lima2{ width:95%; max-width: 166px;}
.lima3{ display: none;}

.infotext2{ width: 90%; max-width:420px ; text-align: left; display: inline-block;}

#alcances{ width:100%; text-align:center; background-color: #181818;}
.lima{ width: 100%; max-width: 938px;}
.infotext3{ width: 95%; max-width:1400px ; text-align: left; display: inline-block;}


#upmait{ width:100%; text-align:center; background-color: #ffffff;}


#losdatos, #losdatos1,#losdatos2,#losdatos3,#losdatos4{display:inline-block;vertical-align:top;}
#losdatos{ width:1400px;vertical-align:middle; text-align:center;}
#losdatos1{width:350px;margin-right:-4px; text-align:center;}
#losdatos2{width:175px;margin-right:-4px;text-align:center; margin-top: 120px;}
#losdatos3{width:175px;margin-right:-4px;text-align:center; margin-top: 120px;}

.infotext4{ width: 95%; max-width:400px ; text-align: left; display: inline-block;}


#productos{ width:100%; text-align: center;  background:url("../imagenes/fondo4.jpg") no-repeat center center fixed;background-size:cover;  z-index:999;}


#lospros, #lospros1,#lospros2,#lospros3,#lospros4{display:inline-block;vertical-align:top;}
#lospros{ width:1400px;vertical-align:middle; text-align:center;}
#lospros1{width:100%;margin-right:0px; text-align:left;}
#lospros2{width:650px;margin-right:-4px;text-align:left;}
#lospros3{width:650px;margin-right:-4px;text-align:left;}
#lospros4{width:100px;margin-right:-4px;text-align:left;}

.invi2{ width: 100%; height: 125px;}


#modelo{ width:100%; text-align:center; background-color: #e7ad00;}

#elmo, #elmo1,#elmo2,#elmo3,#elmo4{display:inline-block;vertical-align:top;}
#elmo{ width:1400px;vertical-align:middle; text-align:center;}
#elmo1{width:221px;margin-right:-4px; text-align:left; margin-top: -82px;}
#elmo2{width:70px;margin-right:-4px;text-align:left;}
#elmo3{width:1109px;margin-right:-4px;text-align:left; margin-top: 40px;}


#footer{ width:100%; text-align:center; background-color: #181818;}

#lali{ width: 100%; height: 1px; background-color: #ffffff;}


#abajo, #abajo1,#abajo2,#abajo3,#abajo4{display:inline-block;vertical-align:top;}
#abajo{ width:1400px;vertical-align:middle; text-align:center;}
#abajo1{width:70%;margin-right:-4px; text-align:left;}
#abajo2{width:30%;margin-right:-4px;text-align:right;}


#carrusel{
	background:url("../imagenes/textos.svg")center repeat-x;
	animation:200s para reverse infinite linear;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	    aspect-ratio: 1920 / 213;  
	width: 100% ;
	text-align: center; 
}

@keyframes para {
	100% {
		background-position: 
		7680px;
	}
}

.elboton{ opacity: 1;  transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}
.elboton:hover{ opacity: .7; }


@media screen and (max-width:1420px)
 {
#abajo{ width:1200px;}
#abajo1{width:60%;}
#abajo2{width:40%;}     
     
#elmo{ width:1200px;}
#elmo3{width:909px;}     
     
 #lospros{ width:1200px;}
#lospros2{width:550px;}
#lospros3{width:550px;}
     
     
.texto11{font-size:80px; }
.texto12{font-size:18px;} 
 
#losdatos{ width:1200px;}
#losdatos1{width:300px;}
#losdatos2{width:150px;}
#losdatos3{width:150px;}
     
.texto7{font-size:17px;}     
     
#iconos{ width:1200px;}
#iconos1{width:380px;}
#iconos2{width:30px;}
#iconos3{width:30px;}     
     
#lasoluciones,#contri{ width:1200px;}
#lasoluciones1{width:700px;}
#lasoluciones2{width:500px;}
}


@media screen and (max-width:1220px)
 {
#abajo{ width:1000px;}
#abajo1{width:50%;}
#abajo2{width:50%;}     
     
#elmo{ width:1000px;}
#elmo3{width:709px;}       
     
#lospros{ width:1000px;vertical-align:middle; text-align:center;}
#lospros2{width:460px;}
#lospros3{width:460px;}
#lospros4{width:80px;}     
     
.texto11{font-size:80px; }
.texto12{font-size:18px;} 
 
#losdatos{ width:1000px;}
#losdatos1{width:300px;}
#losdatos2{width:50px; margin-top: 200px;}
#losdatos3{width:50px;margin-top: 200px;}   
     
.texto7{font-size:17px;}     
     
#iconos{ width:1000px;}
#iconos1{width:320px;}
#iconos2{width:20px;}
#iconos3{width:20px;}       
     
#lasoluciones,#contri{ width:1000px;}
#lasoluciones1{width:500px;}
#lasoluciones2{width:500px;}
.invi{height: 40px;}     

.texto5{font-size:55px;}     
     
}


@media screen and (max-width:1020px)
 {
 #abajo{ width:95%;vertical-align:middle; text-align:center;}
#abajo1{width:100%;margin-right:0px; text-align:center;}
#abajo2{width:100%;margin-right:0px;text-align:center;}    
     
#elmo{ width:95%;vertical-align:middle; text-align:center;}
#elmo1{width:100%;margin-right:0px; text-align:center; }
#elmo3{width:100%;margin-right:0px; text-align:center; margin-top: 0px; margin-bottom: 10px; }

#elmo2{ display: none;}
     
#lospros{ width:95%;vertical-align:middle; text-align:center;}
#lospros1{width:100%;margin-right:0px; text-align:center;}
#lospros2{width:100%;margin-right:0px;text-align:center;}
#lospros3{width:100%;margin-right:0px;text-align:center;}
#lospros4{ display: none;}     
     
.texto11{font-size:100px; }
.texto12{font-size:22px;} 
 
#losdatos{ width:350px;}
#losdatos1{width:350px; margin-bottom: 0;}
#losdatos2,#losdatos3{ width: 100%; text-align: center; margin-right: 0; margin-top: 0;}
 
.lima2{ display: none;}
.lima3{ display: inline-block;}     
     

.infotext3,.infotext4{text-align: center;}
     
.texto7{font-size:17.5px;}     
.infotext2{ text-align: center;}     
#iconos{ width:400px;margin-right:0px;}
#iconos1{width:400px;margin-right:0px;}
#iconos2,#iconos3{ display: none;}
     
.texto5{font-size:50px;}     
     
#contri1,#contri2{width:100%;margin-right:0px; text-align:center;}
.infotext{ text-align: center;}
     
#lasoluciones,#contri{ width:95%;vertical-align:middle; text-align:center;}
#lasoluciones1{width:100%;margin-right:0px; text-align:center;}
#lasoluciones2{width:100%;margin-right:0px;text-align:center; margin-top: 30px;}     
     
#carrusel{aspect-ratio: 1920 / 300; }
}


@media screen and (max-width:820px)
 {
.texto5{font-size:45px;}   
}

@media screen and (max-width:620px)
 { .texto9{font-size:14px;}
.texto5{font-size:40px;}   
}

#menumovil{ display:none;}
.button_container {
  position: absolute;
  top: -20px;;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #ffffff;
}
.button_container.active .middle {
  opacity: 0;
  background: #ffffff;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #ffffff;
}
.button_container span {
  background: #ffffff;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background-color:rgba(0,0,0,0.9);
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInUp .5s ease forwards;
  -moz-animation: fadeInUp .5s ease forwards;
          animation: fadeInUp .5s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  -moz-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
  -moz-animation-delay: .55s;
          animation-delay: .55s;
}
.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
          animation-delay: .6s;
}

.overlay.open li:nth-of-type(7) {
  -webkit-animation-delay: .65s;
  -moz-animation-delay: .65s;
          animation-delay: .65s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 40%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  text-align: center;

}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  min-height: 60px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  font-size: 30px;
  opacity:1; line-height:120%; font-weight:400; text-transform:uppercase;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
  opacity:.5;-webkit-transition: .25s;
  transition: .25s; text-decoration:underline;
}
.overlay ul li a:after {
  opacity:.9;-webkit-transition: .25s;
  transition: .25s;
  
}


/* Outline Out */
.hvr-outline-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative; color: #ffffff; font-size: 14px; text-transform: uppercase; text-decoration: none;
}
.hvr-outline-out:before {
  content: '';
  position: absolute;
  border: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.hvr-outline-out:hover:before {
  top: -7px;
  right: -15px;
  bottom: -7px;
  left: -15px;border: #6bc72a solid 2px; border-radius: 100px;
}

@media screen and (max-width:1000px){

#arriba{width:95%;vertical-align:middle; text-align:left; }
#larriba1{width:100%;margin-right:0px;  }
#arriba2,#arriba3{display:none;}

#menumovil{ z-index:9999;position: absolute;top:69px;
  right: 2%;
  height: 27px;
  width: 35px; display:block;}


}


.ball{-moz-animation:spin 1.5s infinite linear;-webkit-animation:spin 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}
@-webkit-keyframes spin{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(6px);}
}
@-o-keyframes spin{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(6px);}
}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}


.ball2{-moz-animation:spin2 1.5s infinite linear;-webkit-animation:spin2 1.5s infinite linear;-0-animation:spin2 1.5s infinite linear;animation:spin2 1.5s infinite linear;}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(-6px);}
}
@-webkit-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(-6px);}
}
@-o-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(-6px);}
}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(-6px);}
}




.tabla-wrapper {
      max-width: 1400px;
      width: 98%; display: inline-block;
    }

    .tablauno {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; /* 🔑 Fuerza a ajustar columnas */
    }

    .tablauno thead th {
      text-align: left;
      padding: clamp(8px, 1.5vw, 15px);
      font-size: clamp(12px, 2vw, 30px);
      font-weight: 400; color: #fff;
      border-bottom: 1px solid #fff;
    }

    .tablauno thead th .header-box {
      display: flex;
      align-items: center;
      gap: clamp(4px, 1vw, 10px);
    }

    .tablauno .tabla-numero {
      background: #6bc72a;
      color: #000;
      font-weight: 700;
      text-align: center;
      border-radius: 6px;
      width: clamp(24px, 4vw, 40px);
      height: clamp(24px, 4vw, 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(12px, 1.8vw, 20px);
      flex-shrink: 0;
    }

    .tablauno tbody td {
      padding: clamp(8px, 1.5vw, 15px);
      font-size: clamp(11px, 1.6vw, 16px);
      border-bottom: 1px solid #fff;
      vertical-align: middle; text-align: left; color: #FFFFFF;
    }

    /* Líneas verticales */
    .tablauno th:not(:last-child),
    .tablauno td:not(:last-child) {
      border-right: 1px solid #fff;
    }



.tablaproductos {
       max-width: 1400px;
      width: 99%; display: inline-block;
    }

    .tablaproductos h2 {
      text-align: center;
      color: #fff;
      margin-bottom: 15px;
      font-size: clamp(16px, 2.5vw, 28px);
      font-weight: 600;
    }

    .tablaproductos table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; /* 🔑 mantiene proporciones */
    }

   /* Encabezados */

.tablaproductos h2 {
  display: block;
  width: 100%;
  background: #000;   /* Fondo negro */
  color: #fff;        /* Texto blanco */
  margin:0;  /* Deja un pequeño margen inferior */
    padding-top: 10px; padding-bottom: 10px;
  text-align: center;
  font-size: clamp(14px, 2.5vw, 22px);
}

.tablaproductos thead th {
  text-align: center;
  font-size: clamp(11px, 2vw, 18px);
  font-weight: 600;
  border-bottom: 2px solid #fff;
  background: #fff;
  color: #008000; /* Verde */
  height: 50px; /* Ajuste de alto */
}

    /* Filas */
    .tablaproductos tbody td {
      padding: clamp(8px, 1.5vw, 15px);
      font-size: clamp(10px, 1.6vw, 16px);
      border-bottom: 1px solid #fff;
      vertical-align: middle;
      color: #fff;      /* Texto blanco */
    }

    .tablaproductos tbody td strong {
      font-weight: 600;
    }

    /* Líneas verticales */
    .tablaproductos th:not(:last-child),
    .tablaproductos td:not(:last-child) {
      border-right: 1px solid #fff;
    }
      
      /* alto fijo de 50px en las dos primeras filas */
.tablaproductos tbody tr:nth-child(1),
.tablaproductos tbody tr:nth-child(2) {
  height: 50px;
}