@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: #ece3c9;
}
	
* { 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: 850px; margin-top: 0;}

.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:#431d06; font-size:24px; font-weight:400; line-height: 120%; text-decoration:none;text-shadow: 0px 0px 14px #f3ebd4; }
.texto2a{ color:#6a724b; font-size:24px; font-weight:400; line-height: 120%; text-decoration:none; }
.texto3{ color:#ffffff; font-size:15px; font-weight:400; line-height: 180%; text-decoration:none; }
.texto4{color:#431d06;font-size:60px; line-height: 100%; text-decoration:none;font-family: 'formula'; text-transform: uppercase;}        
.texto5{color:#6a724b;font-size:110px; line-height: 100%; text-decoration:none;font-family: 'amertha';margin-top: -35px !important;}  
.texto4a{color:#ece3c9;font-size:60px; line-height: 100%; text-decoration:none;font-family: 'formula'; text-transform: uppercase;}        
.texto5a{color:#adb883;font-size:110px; line-height: 100%; text-decoration:none;font-family: 'amertha';margin-top: -35px !important;}  
.texto6{color:#431d06;font-size:30px; line-height: 100%; text-decoration:none;font-family: 'formula'; text-transform: uppercase;}        
.texto7{ color:#6a724b; font-size:15px; font-weight:400; line-height: 150%; text-decoration:none; }
.texto7a{ color:#ffffff; font-size:17px; font-weight:400; line-height: 150%; text-decoration:none; }
.texto8{ color:#ffffff; font-size:45px; font-weight:700; line-height: 100%; text-decoration:none; }
.texto9{ color:#ffffff; font-size:20px; font-weight:400; line-height: 100%; text-decoration:none; letter-spacing: 0px; }
.texto10{ color:#ece3c9; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; letter-spacing: 0px; }
.texto11{ color:#6a724b; font-size:20px; font-weight:400; line-height: 140%; text-decoration:none; letter-spacing: 0px; }

#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;}
#rasgado1a{width:100%; height: 70px; margin-right:0px; text-align:left;background: url("../imagenes/se1a.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;}
#rasgado4{width:100%; height: 70px; margin-right:0px; text-align:left;background: url("../imagenes/se4.png") repeat-x 0 0 ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}
#rasgado5{width:100%; height: 70px; margin-right:0px; text-align:left;background: url("../imagenes/se5.png") repeat-x 0 0 ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}


#somos{ width: 100%; height: 1150px; margin-top: -10px; text-align: center; background: url("../imagenes/fon1.jpg") no-repeat center center;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}

.infotext1{ width: 90%; max-width: 880px; text-align: center; display: inline-block;}
.infotext2{ width: 90%; max-width: 700px; text-align: center; display: inline-block;}


#variedades{ width: 100%; text-align: center; display: inline-block; background-color: #ece3c9; margin-top: -10px; }

#loschampis, #loschampis1,#loschampis2,#loschampis3,#loschampis4{display:inline-block;vertical-align:top;}
#loschampis{ width: 95%;max-width:1540px;vertical-align:middle; text-align:center;}
#loschampis1{width:308px;margin-right:-4px; text-align:center; padding-bottom: 120px;}

.infotext3{ width: 248px; text-align: center; display: inline-block; }
.infotext4{ width: 278px; text-align: center; display: inline-block;}

#lainfo, #lainfo1,#lainfo2,#lainfo3,#lainfo4{display:inline-block;vertical-align:top;}
#lainfo{ width: 95%;max-width:1600px;vertical-align:middle; text-align:center;}
#lainfo1{width:100%;margin-right:0px; text-align:center; padding-bottom: 60px;}
#lainfo2{width:100%; height: 4px; background-color:#ece3c9 ; margin-right:0px; text-align:center;}

#loschampiis, #loschampiis1,#loschampiis2{display:inline-block;vertical-align:top;}
#loschampiis{ width: 100%;max-width:1500px;vertical-align:middle; text-align:center;}
#loschampiis1{width:500px;margin-right:-4px; text-align:center; padding-bottom: 90px;}


#tradicionales{ width: 100%; text-align: center; display: inline-block; background-color: #6A724B; margin-top: -10px; }

#lavoz{ width: 100%; text-align: center; background-color: #ece3c9;  }

#clientes, #clientes1,#clientes2{display:inline-block;vertical-align:top;}
#clientes{ width: 100%;max-width:1500px;vertical-align:middle; text-align:center;}
#clientes1{width:500px;margin-right:-4px; text-align:center; padding-bottom: 90px;}

.infotext5{ width: 90%; max-width: 430px; margin-top: 40px; text-align: center; display: inline-block;}


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

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


#productores{ width: 100%; text-align: center; display: inline-block; background-color: #d2c7af; }


#distribuidores{ width: 100%; text-align: center; display: inline-block; background-color: #bbb19b; }

#rasgadonuevo{width:100%; height: 70px; margin-right:0px; text-align:left;background: url("../imagenes/se5.png") repeat-x 0 0 ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}

.lali{width: 90%;    max-width: 1600px;   height: 4px;   background-color: #ece3c9;   position: absolute;   left: 50%;   transform: translateX(-50%); }


.distribuidores-seccion{width:100%;   display:flex;    justify-content:center;    padding:40px 0;}

.distribuidores-contenedor{width:90%;    max-width:1600px;   display:flex;   justify-content:space-between;  align-items:flex-start;   gap:40px;
    flex-wrap:nowrap;}

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

.distribuidores-item p{margin:0;    color:#ffffff;    font-size:23px;    line-height:140%;   text-align:left;}

.distribuidores-icono{    width:28px;    height:28px;    min-width:28px;    border:2px solid #ffffff;    border-radius:6px;    position:relative;}

.distribuidores-icono::after{    content:"";    position:absolute;    width:6px;    height:12px;    border-right:3px solid #ffffff;    border-bottom:3px solid #ffffff;    transform:rotate(45deg);    left:9px;    top:3px;}

#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: 99%; max-width: 900px;}
.titu2{ width: 99%; max-width: 760px;}

.logon{ width:112px;}

#menudencia{
font-family: 'Signika', sans-serif;
font-size:22px;
text-decoration:none; 
text-transform:uppercase;
position: absolute;
    top:0;
    left:0;
    width: 100%;
	height:150px;
	z-index:5;
	background-image:url(../imagenes/head.png);
	font-weight:700;
}


#menudencia a:link, #menudencia a:visited {
    color: #431d06; text-decoration:none;
}


#menudencia a:hover {
    color: #b1cd49;
}

#menudo{ width:1200px;}


@media screen and (max-width:1520px)
 {
#loschampiis1,#clientes1{width:450px;}  
     
#separador{height: 750px;}     
     
}

@media screen and (max-width:1420px){    
    .distribuidores-contenedor{flex-wrap:wrap;    }
    .distribuidores-item{flex:0 0 calc(50% - 20px);    }

#home{ height: 800px;}
}


@media screen and (max-width:1370px)
 {
  
     
#loschampiis1,#clientes1{width:400px;}
.texto8{font-size:40px;} 
     
#separador{height: 700px;} 
}


@media screen and (max-width:1300px)
 {
#menudo{ width:800px;}
}
     
@media screen and (max-width:1020px)
 {
#separador{height: 600px;}     
     
.texto4,.texto4a{font-size:60px;}        
.texto5,.texto5a{font-size:80px;margin-top: -25px !important;}
     
}


@media screen and (max-width:920px){
    #menudo{ width:600px;}
    #menudencia{font-size:18px;}
    
    .distribuidores-item{flex:0 0 100%;    }
}


@media screen and (max-width:820px)
 {
       
     
#separador{ width: 100%; height: 600px;  text-align: center; background: url("../imagenes/separador.jpg") no-repeat center center;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}     
     
     
#home{ height: 750px;}
     
.texto1{font-size:60px; }
.texto2{font-size:22px; }
    
#somos{ width: 100%; height: 1150px; margin-top: -10px; text-align: center; background: url("../imagenes/fon1.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}     
     
}


@media screen and (max-width:620px)
 {
.logon{ width:80px;}    
#menudo{ width:95%; margin-top: 20px;}

#menudencia{
font-size:16px;
}     

    #separador{ height: 400px;}      
     
     
.texto10{font-size:20px;}     
     
#loschampiis1,#clientes1{width:90%; margin-right: 0;}
     
.texto4{font-size:50px;}        
.texto1{font-size:50px; }
}

@media screen and (max-width: 500px)
 {
.logon{ width:60px;}

#menudencia{
font-size:14px;
height:95px;
}
     
}

.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:1600px;
    margin:60px auto 0 auto;
    padding:22px 40px;
    border:2px solid #e6e0c9;
    border-radius:14px;
    color:#f2f0e6;
    text-decoration:none;
    font-size:20px;
    box-sizing:border-box;
    text-align:center; 
}


.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);
    }
}


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


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

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