@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:950px;    position:relative;    overflow:hidden;    text-align:center;  background: url("../imagenes/home.jpg") no-repeat center center fixed;    background-size: cover;}


.pleca-azul{    position:absolute;    bottom:0;    left:0;    width:100%;  height: calc(90px + (100vw - 1920px) * 0.08);  min-height:90px; background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'>\
<path d='\
M0,200 \
L0,120 \
C400,155 760,175 960,170 \
C1160,175 1520,155 1920,120 \
L1920,200 Z' fill='%2300333A'/>\
</svg>") no-repeat center bottom;    background-size:100% 100%;}


.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; }
.texto4aa{ color:#00373a; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; }
.texto4bb{ color:#FFFFFF; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; }
.texto4cc{ color:#00373a; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; }
.texto4dd{ color:#FFFFFF; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; }
.texto4cc{ color:#00373a; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; }
.texto4dd{ color:#FFFFFF; font-size:22px; font-weight:400; line-height: 140%; text-decoration:none; }
.texto4a{ color:#dd5e5f; font-size:16px; font-weight:700; line-height: 200%; text-decoration:none; }
.texto4b{ color:#00373a; font-size:16px; font-weight:700; line-height: 200%; text-decoration:none; }
.texto4c{ color:#ef535a; font-size:16px; font-weight:700; line-height: 200%; text-decoration:none; }
.texto4d{ color:#00373a; font-size:16px; font-weight:700; line-height: 200%; text-decoration:none; }
.texto5{color:#00373a;font-size:80px; line-height: 100%; text-decoration:none;font-family: 'formula'; }        
.texto6{color:#ff5056;font-size:80px; line-height: 100%; text-decoration:none;font-family: 'formula'; } 
.texto7{color:#00373a;font-size:50px; line-height: 110%; text-decoration:none;font-family: 'formula'; }        
.texto8{color:#ff785b;font-size:50px; line-height: 110%; text-decoration:none;font-family: 'formula'; } 
.texto9{color:#8ac581;font-size:50px; line-height: 110%; 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;}


#westcoast{ width: 100%; text-align: center; background-color: #00333A; }

#manzana{ width: 100%; text-align: center; background-color: #f8f3e0;  }
#pera{ width: 100%; text-align: center; background-color: #fd5f60;  }
#pimientos{ width: 100%; text-align: center; background-color: #8abe7c;  }
#champis{ width: 100%; text-align: center; background-color: #ff8060;  }

.manzana{ width: 100%; max-width: 675px; }
.pera{ width: 100%; max-width: 716px; }
.pimientos{ width: 100%; max-width: 751px; }
.champis{ width: 100%; max-width: 737px; }


#man, #man1,#man2,#man0{display:inline-block;vertical-align:top;}
#man{ width:1300px;vertical-align:middle; text-align:center; }
#man1{width:510px;margin-right:-4px; text-align:left;}
#man2{width:790px;margin-right:-4px; text-align:left;}
#man0{ display: none;}


#per, #per1,#per2,#per0{display:inline-block;vertical-align:top;}
#per{ width:1300px;vertical-align:middle; text-align:center;  overflow: hidden;}
#per1{width:690px;margin-right:-4px; text-align:left; margin-top: 50px;}
#per2{width:610px;margin-right:-4px; text-align:left;}
#per0{ display: none;}


#pim, #pim1,#pim2,#pim0{display:inline-block;vertical-align:top;}
#pim{ width:1300px;vertical-align:middle; text-align:center; }
#pim1{width:700px;margin-right:-4px; text-align:left;}
#pim2{width:600px;margin-right:-4px; text-align:left; margin-top: 100px;}
#pim0{ display: none;}


#champi, #champi1,#champi2,#champi0{display:inline-block;vertical-align:top;}
#champi{ width:1300px;vertical-align:middle; text-align:center;  overflow: hidden;}
#champi1{width:650px;margin-right:-4px; text-align:left; margin-top: 140px;}
#champi2{width:650px;margin-right:-4px; text-align:left;}
#champi0{ display: none;}


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


#dife, #dife1,#dife2,#dife0{display:inline-block;vertical-align:top;}
#dife{ width:1500px;vertical-align:middle; text-align:center; }
#dife1{width:700px;margin-right:-4px; text-align:left;}
#dife2{width:800px;margin-right:-4px; text-align:left; margin-top: 50px;}
#dife0{ display: none;}

.nina{ width: 95%; max-width: 752px;}

.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:#00373a;    font-size:22px;    line-height:1.4;    font-weight:500; margin-top:5px;}

.luno{ text-align: left;}


#diferenciamos{ width: 100%;  text-align: center; background-color: #fed000;}

#distribucion{ width: 100%;  text-align: center; background-color: #ecdead; margin-top: -5px;}

#ladistri, #ladistri1,#ladistri2,#ladistri3{display:inline-block;vertical-align:top;}
#ladistri{ width:1400px;vertical-align:middle; text-align:center; }
#ladistri1{width:350px;margin-right:-4px; text-align:left; margin-top: -40px;}
#ladistri2{width:590px;margin-right:-4px; text-align:left; margin-top: 60px;  }
#ladistri3{width:460px;margin-right:-4px; text-align:left; margin-top: 60px; }

.ladis{ width: 90%; max-width: 465px; display: inline-block;}

#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: 95%; max-width: 780px;}


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


@media screen and (max-width:1520px)
 {
#dife{ width:1300px; }
#dife1{width:600px;}
#dife2{width:700px; margin-top: 30px;}
}


@media screen and (max-width:1420px)
 {
#ladistri{ width:1200px;}
#ladistri1{width:330px;}
#ladistri2{width:470px; }
#ladistri3{width:400px;}     
 
.texto7,.texto8,.texto9{font-size:43px; }        
     
}
     
@media screen and (max-width:1320px)
 {
#dife{ width:1100px; }
#dife1{width:550px; margin-top: 87px;}
#dife2{width:550px; margin-top: 0px; padding-bottom: 40px;}     
     
#champi{ width:1100px;}
#champi1{width:550px; margin-top: 90px;}
#champi2{width:550px;}     
     
     
#pim{ width:1100px;}
#pim1{width:600px;}
#pim2{width:500px;margin-top: 70px;}
  
     
#man{ width:1100px; }
#man1{width:600px; margin-top: 20px;}
#man2{width:500px;}
     
#per{ width:1100px;}
#per1{width:550px;}
#per2{width:550px;}
     
}


@media screen and (max-width:1220px)
 {
#ladistri{ width:1100px;}
#ladistri1{width:330px;}
#ladistri2{width:420px; }
#ladistri3{width:350px;}     
 
.texto7,.texto8,.texto9{font-size:40px; }        
     
}


@media screen and (max-width:1120px)
 {
#dife{ width:90%; }
#dife1{ display: none;}
#dife2{width:100%; margin-right: 0; text-align: left; margin-top: 0px; padding-bottom: 40px;}       
#dife0{width:100%;margin-right:0px; text-align:center; display: inline-block;}
     
     
#champi{ width:1000px;}
#champi1{width:500px; margin-top: 40px;}
#champi2{width:500px;} 
     
#pim{ width:1000px;}
#pim1{width:550px;}
#pim2{width:450px;margin-top: 70px;}
  
     
#man{ width:1000px; }
#man1{width:450px; }
#man2{width:550px;} 
     
     
#per{ width:1000px;}
#per1{width:500px; margin-top: 30px;}
#per2{width:500px;}     
     
#ladistri{ width:90%;vertical-align:middle; text-align:center; }
#ladistri1{width:100%;margin-right:0px; text-align:center; margin-top: 50px;}
#ladistri2{width:100%;margin-right:0px; text-align:center; margin-top: 30px; }
#ladistri3{width:100%;margin-right:0px; text-align:center; margin-top: 30px; }    
     
.ladis{ text-align: center; max-width: 1000px;}
  
.texto7,.texto8,.texto9{font-size:50px; }  
}


@media screen and (max-width:1020px)
 {
#champi{ width:90%;}
#champi1{width:100%;margin-right:0px; text-align:left; margin-top: 50px;}
#champi0{width:100%;margin-right:0px; text-align:center; display: inline-block;}     
#champi2{ display: none;} 
     
     
#pim{ width:90%;}
#pim1{width:100%;margin-right:0px; text-align:center;margin-top: 20px;}
#pim2{width:100%;margin-right:0px; text-align:left;margin-top: 40px;}     
     
#per{ width:90%; }
#per1{width:100%;margin-right:0px; text-align:left; margin-top: 50px;}
#per0{width:100%;margin-right:0px; text-align:center; display: inline-block;}
#per2{ display: none;}     
     
#man{ width:90%;vertical-align:middle; text-align:center; }
#man1{width:100%;margin-right:0px; text-align:center; margin-top: 0px;}
#man2{width:100%;margin-right:0px; text-align:left; }    
     
     

 
.luno{ text-align: center;}     
 
     
}


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


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

.texto5,.texto6{font-size:70px;}   
}


@media screen and (max-width:620px)
 {
 .manzana{ margin-left: 5%; }
     
.fila-texto{display: block; }
.texto-contenido{display: inline; }   
     
     
.texto7,.texto8,.texto9{font-size:40px; }       
     
.texto5,.texto6{font-size:60px;}      
     
#clientes1{width:90%; margin-right: 0;}
     
.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:380px;
    margin:60px auto 0 auto;
    padding:22px 40px;
    border:2px solid #dd5e5f; background-color: transparent;
    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{
  background-color: #dd5e5f;    
}

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

}



.titulo-seleccion{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.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 7s infinite linear;}

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



.cell4{animation: bop4 4s infinite linear;}

 @keyframes bop4 {
            0% { 
                transform:  scale(1) ; 
            }
             50% { 
                transform:  scale(.95)  ; 
            }
            100% { 
                transform:  scale(1) ; 
            }
        }


.cell3{
    animation: shakeVertical 7s infinite ease-in-out;
}

@keyframes shakeVertical {
    /* Movimiento rápido (0s a 0.6s aprox = 10.7%) */
    0%   { transform: translateY(0); }
    2%   { transform: translateY(-10px); }
    4%   { transform: translateY(6px); }
    6%   { transform: translateY(-10px); }
    8%  { transform: translateY(0); }

    100% { transform: translateY(0); }
}


.cell2{
    animation: shakeVertical 6s infinite ease-in-out;
}

@keyframes shakeVertical {
    /* Movimiento rápido (0s a 0.6s aprox = 10.7%) */
    0%   { transform: translateY(0); }
    2%   { transform: translateY(-10px); }
    4%   { transform: translateY(6px); }
    6%   { transform: translateY(-10px); }
    8%  { transform: translateY(0); }

    100% { transform: translateY(0); }
}