@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap'); 
      
        
@font-face {
	font-family: 'amertha';
	src: url("amertha.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}
        
@font-face {
	font-family: 'formula';
	src: url("formula.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}        
  

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

.os-animation{
            opacity: 0;
 }  

.os-animation.animated{
            opacity: 1;
 }  
 h1,h2,h3,h4,h5,h6{ display:inline !important; font-weight: 400;}

#home{ width: 100%; height: 1000px; text-align: center; background: url("../imagenes/home.jpg") no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}

.texto1{ color:#431d06; font-size:80px; line-height: 100%; text-transform: uppercase; text-decoration:none;font-family: 'formula';text-shadow: 0px 0px 14px #f3ebd4; }
.texto2{ color:#ffffff; font-size:22px; font-weight:400; line-height: 180%; text-decoration:none; }
.texto3{ color:#ffffff; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; }
.texto4{ color:#ffffff; font-size:22px; font-weight:700; line-height: 140%; text-decoration:none; }
.texto4a{ color:#3cad00; font-size:22px; font-weight:700; line-height: 140%; text-decoration:none; }
.texto4b{ color:#ffdc00; font-size:22px; font-weight:700; line-height: 140%; text-decoration:none; }
.texto4c{ color:#ff6000; font-size:22px; font-weight:700; line-height: 140%; text-decoration:none; }
.texto4d{ color:#ff0000; font-size:22px; font-weight:700; line-height: 140%; text-decoration:none; }
.texto5{color:#fdfbee;font-size:90px; line-height: 100%; text-decoration:none;font-family: 'formula'; text-transform: uppercase;}        
.texto6{color:#fdfbee;font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; ;}        
.texto7{color:#4c3d34;font-size:60px; line-height: 120%; text-decoration:none;font-family: 'formula'; }        
.texto8{color:#008937;font-size:60px; line-height: 120%; text-decoration:none;font-family: 'formula'; }        
.texto10{color:#102f31;font-size:23px; line-height: 120%; text-decoration:none;font-weight: 500; }        

.lata{ display: inline-block;}

.fila-texto{display:flex;align-items:flex-start;}
.texto4a,.texto4b,.texto4c,.texto4d{ width:26px;flex-shrink:0;text-align:center;}
.texto-contenido{display:flex;flex-wrap:wrap;gap:4px;}


#rasgado, #rasgado1, #rasgado1a,#rasgado2,#rasgado3,#rasgado4,#rasgado5{display:inline-block;vertical-align:top;}
#rasgado{ width:100%; height: 70px; vertical-align:middle; text-align:center; z-index: 99; margin-top: -70px; }
#rasgado1{width:100%; height: 70px; margin-right:0px; text-align:left;background: url("../imagenes/se1.png") repeat-x 0 0 ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}
#rasgado2{width:100%; height: 70px; margin-right:0px; text-align:left;background: url("../imagenes/se2.png") repeat-x 0 0 ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}
#rasgado3{width:100%; height: 70px; margin-right:0px; text-align:left;background: url("../imagenes/se3.png") repeat-x 0 0 ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}


#enmother{ width: 100%; text-align: center; background-color: #003032; }

#colores{ width: 100%; text-align: center; background: url("../imagenes/fondo1.jpg") repeat-x center bottom;  }

#pimi, #pimi1,#pimi2,#pimi0{display:inline-block;vertical-align:top;}
#pimi{ width:1300px;vertical-align:middle; text-align:center; }
#pimi1{width:500px;margin-right:-4px; text-align:left;}
#pimi2{width:800px;margin-right:-4px; text-align:left; margin-top: 20px;}
#pimi0{ display: none;}


.pimi{ width: 100%; max-width: 580px;}

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

.infotext1{ width: 90%; max-width: 1030px; text-align: center; display: inline-block;}
.infotext2{ width: 90%; max-width: 700px; text-align: center; display: inline-block;}
.infotext5{ width: 90%; max-width: 250px; margin-top: 20px; text-align: center; display: inline-block;}

#disponibilidad{ width: 100%; text-align: center; background-color: #7cc996; margin-top: -10px;  }

#clientes, #clientes1,#clientes2{display:inline-block;vertical-align:top;}
#clientes{ width: 99%;max-width:1200px;vertical-align:middle; text-align:center;}
#clientes1{width:400px;margin-right:-4px; text-align:center; padding-bottom: 60px;}


#separador{ width: 100%; height: 700px;  text-align: center; background: url("../imagenes/fondo3.jpg") no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}


#nos, #nos1,#nos2,#nos0{display:inline-block;vertical-align:top;}
#nos{ width:1300px;vertical-align:middle; text-align:center; }
#nos1{width:700px;margin-right:-4px; text-align:left;}
#nos2{width:600px;margin-right:-4px; text-align:left; }


.lainfo-contenedor{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.lainfo-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.lainfo-bullet{
    width:30px;
    height:34px;
    min-width:30px;
    background-image:url("../imagenes/bullet.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.lainfo-texto{
    color:#ffffff;
    font-size:22px;
    line-height:1.4;
    font-weight:500; margin-top:5px;
}

.luno{ text-align: left;}




#distribucion{ width: 100%;  text-align: center; background: url("../imagenes/fondo5.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}


#ladistri, #ladistri1,#ladistri2,#ladistri3{display:inline-block;vertical-align:top;}
#ladistri{ width:1300px;vertical-align:middle; text-align:center; }
#ladistri1{width:580px;margin-right:-4px; text-align:left; margin-top: 50px;}
#ladistri2{width:340px;margin-right:-4px; text-align:center; }
#ladistri3{width:380px;margin-right:-4px; text-align:left; margin-top: 30px; }


#footer{  width: 100%;    aspect-ratio: 1920 / 200;   margin: auto;  background: url('../imagenes/foot.jpg') no-repeat center center; background-size: cover;  overflow: hidden;}

#capacidad{ width: 100%; text-align: center; background-color: #6a724b; }     
     
.lata{ display: inline-block;}


.titu1{ width: 95%; max-width: 1000px;}
.titu2{ width: 99%; max-width: 760px;}


.textocho3{ color:#102f31; font-size:22px; font-weight: 700; line-height:130%; font-family:"Arimo", sans-serif; text-shadow: 2px 0px 40px #f3ebd4;}


@media screen and (max-width:1320px)
 {
#ladistri{ width:1100px; }
#ladistri1{width:500px;}
#ladistri2{width:220px;}
     
#nos{ width:1100px; }
#nos1{width:700px;}
#nos2{width:400px; }     

     
#pimi{ width:1100px; }
#pimi1{width:500px; margin-top: 120px;}
#pimi2{width:600px;}
}


@media screen and (max-width:1120px)
 {
     
#ladistri{ width:90%;vertical-align:middle; text-align:center; }
#ladistri1{width:100%;margin-right:0px; text-align:center; margin-top: 0px;}
#ladistri2{width:100%;margin-right:0px; text-align:center; margin-top: 30px; }
#ladistri3{width:100%;margin-right:0px; text-align:center; margin-top: 30px; }    
     
#nos{ width:1000px; }
#nos1{width:700px;}
#nos2{width:300px;}     
     
#pimi{ width:1000px; }
#pimi1{width:450px; margin-top: 130px;}
#pimi2{width:550px;}
     
}


@media screen and (max-width:1020px)
 {
#nos{ width:90%;vertical-align:middle; text-align:center; }
#nos1{width:100%;margin-right:0px; text-align:left;}
#nos2{ display: none;}     
 
.luno{ text-align: center;}     
     
     
#pimi{ width:90%;vertical-align:middle; text-align:center; }
#pimi0{width:100%;margin-right:0px; text-align:left; display: inline-block;}
#pimi1{width:100%;margin-right:0px; text-align:center; margin-top: 80px;}
#pimi2{ display: none;}     
     
     
#separador{height: 600px;}     
      
}


@media screen and (max-width:920px){
    .distribuidores-item{flex:0 0 100%;    }
}


@media screen and (max-width:820px)
 {
 #home{ width: 100%; height: 900px; text-align: center; background: url("../imagenes/home.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}      
     
#separador{ width: 100%; height: 700px;  text-align: center; background: url("../imagenes/fondo4.jpg") no-repeat center center;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}     

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


@media screen and (max-width:620px)
 {
   
.texto7{font-size:50px;}        
.texto8{font-size:50px;}        
     
 .texto5{font-size:60px;}      
 #pimi1{margin-top: 40px;}   
     
#clientes1{width:90%; margin-right: 0;}
     
.texto2,.texto3,.texto4,.texto4a,.texto4b,.texto4c,.texto4d,.textocho3,.lainfo-texto,.texto10{font-size:20px; }

}


.nueva-contenedor{
    width:90%;
    max-width:1600px;
    margin:0 auto;
    padding: 0;
    box-sizing:border-box;
}

.nueva-flujo{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}


.nueva-item{
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1;
    min-width:220px;
}

.nueva-circulo{
    width:260px;
    height:260px;
    border:2px solid #ece3c9;
    border-radius:50%;
    color:#ece3c9;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:25px;
    font-size:18px;
    line-height:1.4;
    box-sizing:border-box;
}

.nueva-flecha{
    width:80px;
    height:2px;
    background:#ece3c9;
    position:relative;
    flex-shrink:0;-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;
}

.nueva-flecha::after{
    content:"";
    position:absolute;
    right:2px;
    top:-10px;
    width:20px;
    height:20px;
    border-top:2px solid #ece3c9;
    border-right:2px solid #ece3c9;
    transform:rotate(45deg);
}


.nueva-boton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    width:100%;
    max-width:350px;
    margin:60px auto 0 auto;
    padding:22px 40px;
    border:2px solid #8ec79a; background-color: #8ec79a;
    border-radius:14px;
    color:#fdfbee;
    text-decoration:none;
    font-size:20px; font-weight: 700;
    box-sizing:border-box;
    text-align:center; transition: 
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.nueva-boton:hover{
 color: #010101;    
}

.nueva-boton-flecha{
    width:32px;
    height:2px;
    background:#e6e0c9;
    position:relative;
   animation: none;
}

.nueva-boton:hover .nueva-boton-flecha{
    animation: nueva-flecha-mover 1s ease-in-out infinite; 
}

.nueva-boton-flecha::after{
    content:"";
    position:absolute;
    right:-1px;
    top:-4px;
    width:8px;
    height:8px;
    border-top:2px solid #e6e0c9;
    border-right:2px solid #e6e0c9;
    transform:rotate(45deg);
}

@keyframes nueva-flecha-mover {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(8px);
    }

}





.nueva-flecha {
    position: relative;
    width: 120px;
    height: 2px;
    background-color: #ece3c9;
    animation: flecha-horizontal 1.5s infinite ease-in-out;
}


.nueva-flecha::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #ece3c9;
    border-right: 2px solid #ece3c9;
    transform: translateY(-50%) rotate(45deg);
}


@keyframes flecha-horizontal {
    0%   { transform: translateX(0); }
    100%  { transform: translateX(15px); }
}





@media screen and (max-width:1100px){
    .nueva-flujo{
        flex-direction:column;
    }

   

    .nueva-boton{
        font-size:18px;
        flex-direction:column;
        gap:15px;
        text-align:center;
    }
    
.nueva-flecha {
        width: 2px;
        height: 120px;
        animation: flecha-vertical 1.5s infinite ease-in-out;
    }

    .nueva-flecha::after {
        right: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(50%) rotate(135deg);
    }
}



.loslogos-contenedor{
  width:182px;
  height:305px;
  position:relative; display: inline-block;
}

.loslogos-logo{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0;
  animation:loslogos-fade 10s infinite linear;
}

/* Cada logo tiene su imagen fija */
.loslogos-l1{background-image:url("../imagenes/logo1.png");animation-delay:0s;}
.loslogos-l2{background-image:url("../imagenes/logo2.png");animation-delay:2s;}
.loslogos-l3{background-image:url("../imagenes/logo3.png");animation-delay:4s;}
.loslogos-l4{background-image:url("../imagenes/logo4.png");animation-delay:6s;}
.loslogos-l5{background-image:url("../imagenes/logo5.png");animation-delay:8s;}

/* Animación base */
@keyframes loslogos-fade{
  0%{opacity:0;}
  10%{opacity:1;}
  20%{opacity:1;}
  30%{opacity:0;}
  100%{opacity:0;}
}








@keyframes flecha-vertical {
    0%   { transform: translateY(0); }
    100%  { transform: translateY(15px); }
}


.cell5{animation: bop 7s infinite linear;}

 @keyframes bop {
            0% { 
                transform:  scale(1) rotate(0deg); 
            }
             50% { 
                transform:  scale(.97) rotate(-1deg) ; 
            }
            100% { 
                transform:  scale(1) rotate(0deg); 
            }
        }