@import url(https://fonts.gstatic.com);
@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Oswald:wght@400;500;600&display=swap);

:root {
    --azul: #273325;
    --salmon: #f98b77;
    --violeta: #5857b9;
    --text: #e3e3e3;
    --fuente1:'Manrope', sans-serif;
    --fuente2:'Oswald', sans-serif;
}

/*Clases particulares*/
.bg-violet{background: var(--violeta);}
.bg-azul{background: var(--azul);}
.text{color:#e3e3e3;}
.violeta{color:#5857b9;}
.salmon{color:#f98b77;}
.azul{color:#273325;}

*{box-sizing: border-box;list-style: none;margin:0px;padding: 0px;}
body {margin: 0;padding: 0px;font-family: var(--fuente1);overflow-x: hidden;max-width: 100%;}
header{background-color: var(--azul);transition: .3s;position: fixed;width: 100%;top:0px;z-index: 9999999;}
header #logo{filter: brightness(10);}
header .container{padding: 0px 10px;}
header.navActive {box-shadow: 2px 2px 25px rgb(0 0 0 / 50%);}

.container{padding: 50px 15px;max-width: 1440px;width: 100%;margin: 0px auto;}
.first{overflow-x: hidden;}
.first .container{padding: 50px 15px;margin-top: 83px;position: relative;}
.first .wrap{display: flex;align-items: flex-start;}
.first .column{width: calc(50% - 10px);margin: 0px 5px;}
.column img {width: 100%;}
.column img#botellaMobile{max-width: 270px;max-height: 350px;object-fit: contain;margin: 0px auto;width: 100%;display: block;}
img#esfera {position: absolute;top: -70px;right: -120px;width: 90%;max-height:400px;}

/*section 1*/
#logoDesktop{display: none;}
#botellaDesktop{display: none;}
img#logoMobile {width: 130%;z-index: 1;max-width: 250px;position: absolute;}
.first .container h1{color:var(--salmon);margin-top: 160%;font-weight: 400;font-size: 20px;}


.wrap{display: flex;flex-flow: row wrap;}
.column{width: 100%;position: relative;}
.column:first-child{margin-bottom: 20px;}
.column.r{order: 1;}
h2{font-size: 50px; line-height: 60px; font-weight: 400;margin-bottom: 20px;font-family: var(--fuente2);text-transform: uppercase;}
#venta h3{font-size: 18px; line-height: 26px; font-weight: 400;margin-bottom: 20px;font-family: var(--fuente2);display: flex;align-items: flex-start;}
#venta h3::before{content: '';background-image: url(../img/iso.svg);display: block;height: 35px;width: 35px; min-width: 35px; display: flex;margin-right: 10px;background-repeat: no-repeat;}
p{font-size: 14px;margin-bottom: 20px;line-height: 22px;}
p.none{display: none;}
#ocultoUno,#ocultoUnoDE,#ocultoUnoPT,#ocultoUnoEN,#ocultoUnoFR{display: none;}
a.seguirLeyendo{font-size: 12px;text-transform: uppercase;text-decoration: underline;cursor: pointer;}
.cien{width: 100%;max-width: 100%; margin:0px auto;display: block;}
img#circulo {position: absolute;width: 55px;right: calc(50% - 110px);}
img#circuloDos {position: absolute;width: 155px;right: calc(50% - 150px);bottom: -30px;}


/*Menu*/
.smm__toggle--open #nav-icon3{background: transparent;}
.smm__toggle--open #nav-icon3 span{background: var(--azul);}
header .smm__container--open #logo{filter: none;}
#nav-icon3 {background: var(--azul); width: 30px;height: 20px;position: relative;margin: 0px auto;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span { display: block;position: absolute;height: 3px;width: 100%;background: var(--text);border-radius: 9px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon3 span:nth-child(1) { top: 0px;}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 8px;}
#nav-icon3 span:nth-child(4) {  top: 16px;}
#nav-icon3.open span:nth-child(1) { top: 16px; width: 0%; left: 50%;}
#nav-icon3.open span:nth-child(2) {-webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);}
#nav-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#nav-icon3.open span:nth-child(4) {top: 18px;width: 0%;left: 50%;}

.smm li a.idioma {font-size: 11px;}
.smm {width: 100%;top: 0;left: 0;max-width: 1440px;margin: 0px auto;}
img#logo {width: 150px;margin: 10px 0px;}
.smm li > a{cursor: pointer;}
.smm ul {margin: 0;padding: 0;list-style: none;}
.smm li {display: inline-block;position: relative;}
.smm li > a {display: block;position: relative;padding: 6px 12px;color: var(--azul);text-transform: uppercase;font-size: 14px;text-decoration: none;font-weight: 500;text-align: center;}
.smm li > a:focus,.smm li > a:hover {color: #000;text-decoration: none;}
.smm__container {display: flex;align-items: center;justify-content: space-between;padding: 15px 0;transition: background .4s ease, padding .4s ease;}
.smm__logo-wrapper {margin: 0;transition: margin .4s ease;}
.smm__toggle {border-radius: 0;border:none;display: block;}
.smm__toggle:focus,.smm__toggle:hover,.smm__toggle:active,.smm__toggle:active:hover {background-color: transparent;border:none!important;box-shadow: none;outline: none;}
.smm__collapse {display: flex;align-items: center;justify-content: flex-end;flex-grow: 1;padding-left: 30px;}
.smm__primary-menu li > a:after {content: '';position: absolute;height: 2px;right: 12px;bottom: 4px;top: 35px;left: 12px;background-color:var(--azul);transform: scale(0,1);transition: transform .25s ease;}
.smm__primary-menu li:focus > a:after,.smm__primary-menu li:hover > a:after {transform: scale(1,1);}
.smm__primary-menu li > a > .fa {margin-right: 6px;}
.smm__secondary-menu li:before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;border-radius: 3px;transform: scale(0);transition: transform .25s ease;}
.smm__secondary-menu li:nth-child(1):before {background-color: #3a559f;}
.smm__secondary-menu li:nth-child(2):before {background-color: #dc3489;}
.smm__secondary-menu li:nth-child(3):before {background-color: #55acee;}
.smm__secondary-menu li:nth-child(4):before {background-color: #0077b5;}
.smm__secondary-menu li:focus:before,.smm__secondary-menu li:hover:before {transform: scale(1);}
.smm__secondary-menu li:focus > a,.smm__secondary-menu li:hover > a {color: #fff;}
.smm__secondary-menu li > a {font-size: 1.142em;transition: color .25s ease;}

.idiomas {display: flex;justify-content: flex-end;}

/*//section*/
.item .container{position: relative;}
.bg-salmon{color:var(--violeta);}
.bg-violeta{color:var(--salmon);}
.item .container .column:first-child{margin-bottom: 0px;}
.item .container .column.bg-violeta::before {content: '';background: var(--violeta);position: absolute;left: 0px;right: 0px;height: -webkit-fill-available;z-index: -1;}
.item .container .column.bg-salmon::before {content: '';background: var(--salmon);position: absolute;left: 0px;right: 0px;height: -webkit-fill-available;z-index: -1;}
.item .container .wrap .column .box{display: flex;justify-content: center;align-items: flex-end;}
.item .container .wrap .column .box:nth-child(1){padding-bottom: 60px;}
.item .container .wrap .column .box img{width: 120px;}
.item .container .wrap .column .box .content {padding: 0px;}
.item .container .wrap .column .box .content h3{font-size: 70px;font-family: var(--fuente2);}
.item .container .wrap .column .box .content h3 span{font-weight: 100;}
.item .container .wrap .column .box .content ul li{font-size: 14px;font-weight: 600;}
.item .container .wrap .column .box .content ul li:nth-child(2){margin: 10px 0px; padding: 10px 0px;}
.item .container .wrap .column:nth-child(1) .box .content ul li:nth-child(2){border-top: 1px solid var(--violeta);border-bottom: 1px solid var(--violeta)}
.item .container .wrap .column:nth-child(2) .box .content ul li:nth-child(2){border-top: 1px solid var(--salmon);border-bottom: 1px solid var(--salmon)}
.item .container .wrap .column .box .content img.etiqueta{margin-top: 20px;min-width: 190px;}

/*Textura*/
img#textura{display: none;}
img#texturaDos{display: none;}
img#ciculoblanco{display: none;}

#presentacion .container {padding: 0px;}
.item .container .wrap .column .box {padding: 50px 0px;}

footer{background:var(--text);}
footer .container{display: flex;padding: 30px 0px;}
footer .container .d-flex {display: block;margin: 0px auto;text-align: center;}
footer .container .d-flex a{display: block; color:var(--azul);text-decoration: none;font-size: 16px;font-weight: 400;}
footer .container .d-flex .d-flex {display: flex;justify-content: center;}
footer .container .d-flex .d-flex a{width: 35px;display: flex;margin: 10px;transition: .3s;}
footer .container .d-flex .d-flex a:hover{transform: scale(1.2);}
footer .container .d-flex .d-flex a img{width: 35px;max-width: 35px;}


/*Logos*/
.logos {display: flex;justify-content: flex-start;align-items: center; flex-flow: row wrap; margin: 20px 0px; border-bottom: 1px solid #fff;padding-bottom: 20px;}
.logos img {width: 25%;}

/*Carrusel*/
.owl-dots {position: absolute;width: 100%;transform: translateY(-50px);}
.first .owl-carousel .owl-item img.item {width: 100%;height: 100%;object-fit: cover;display: none;}
.first .owl-carousel .owl-item img.mobile {width: 100%;height: 100%;object-fit: cover;display: block;}


/*Secion Formulario*/
#myModal h2 {text-align: center;font-family: var(--fuente1);font-size: 30px;}
#myModal form {width: 100%;max-width: 600px; margin: 0px auto;display: flex;flex-wrap: wrap;}
.form-group {width: 100%;display: block;margin-bottom: 20px;}
.form-group input{max-width: 100%; width: 100%; border: none;border-bottom: 1px solid var(--text);padding: 10px;font-family: var(--fuente1);}
.form-group:nth-child(3) {width: 100%;flex-grow: 100;}
.form-group:nth-child(3) textarea { width: 100%;max-width: 100%;resize: none;border-radius: 0px;border: none;border-bottom: 1px solid var(--text);padding: 10px;font-family: var(--fuente1);}
#myModal button { width: 100%;max-width: 100%;padding: 10px;background: var(--salmon); font-size: 14px;color: white;text-transform: uppercase; font-weight: bold;letter-spacing: 1px;border: none;}
.modal {display: none;position: fixed;z-index: 4730000000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.8);}
.modal-content {background-color: #fefefe;margin: 15% auto;padding: 20px;  border: 1px solid #888;width: 100%;max-width: 650px;}
.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}


img.marcaUruguay {
    max-width: 100px;
    margin: 0px auto 10px;
    text-align: center;
    width: 100%;
    display: block;
}

@media(min-width: 600px){
  img#logoMobile {width: 100%;z-index: 1;max-width: 250px;position: relative;}
  .first .container h1{color:var(--salmon);margin-top: 20px;font-weight: 400;font-size: 20px;}
}

@media(min-width: 767px){


  img.marcaUruguay {
    max-width: 100px;
    margin: 0px 30px 0px 0px;
    text-align: center;
    width: 100%;
    display: block;
}

    .item .container .column:first-child::before,
    .item .container .column:last-child::before{content:none;}
  .column{width: calc(100% - 20px); margin: 0px 10px; position: relative;}
  .wrap {flex-flow: nowrap;}
  .column img.cien{position: sticky;top: 100px;max-width: 400px;}  
  img#circulo {width: 95px;right: calc(50% - 170px);z-index: 1;}
  img#circuloDos {position: absolute;width: 185px;right: calc(50% - 180px);bottom: 0px;z-index: 1;}

  #ocultoUno, #ocultoUnoDE, #ocultoUnoPT, #ocultoUnoFR, #ocultoUnoEN{display: block;}
  #ocultoDos, #ocultoDosDE, #ocultoDosPT, #ocultoDosFR, #ocultoDosEN{display: block;}
  #seguirLeyendoDos,#seguirLeyendoDosDE,#seguirLeyendoDosPT,#seguirLeyendoDosFR,#seguirLeyendoDosEN{display: none;}

  .container.vaso {background: url(../img/vaso.png);background-repeat: no-repeat;background-position: 173%;}
  .container.vaso #vaso{display: none;}

  section.item {position: relative;}
  section.item::before{content: '';background: linear-gradient(90deg, rgba(249,139,119,1) 50%, rgba(88,87,185,1) 50%);;position: absolute;width: -webkit-fill-available;height: 100%;top: 0;}  
  .item .container .wrap .column:nth-child(1) .box{justify-content: flex-end;padding-right: 20px;}
  .item .container .wrap .column:nth-child(2) .box{justify-content: flex-start;padding-left: 20px;}
  .item .container .wrap .column .box img{width: 140px;}

  #logoMobile{display: none;}
  #logoDesktop{display: block;width: 130%;}  

  /*form*/
  .form-group {width: calc(50% - 20px);margin:10px;display: block;margin-bottom: 20px;}
  .form-group:nth-child(4){width: 100%;}

  .first .owl-carousel .owl-item img.item {width: 100%;height: calc(100vh - 105.02px); max-height: 830px; object-fit: cover;display: block;}
  .first .owl-carousel .owl-item img.mobile {width: 100%;height: 100%;object-fit: cover;display: none;}

  /*footer*/
  footer .container .d-flex{display: inline-flex;; align-items: center;}
  footer .container .d-flex a{font-size: 20px;margin-right: 10px;}
}

@media(min-width: 850px){
  .container.vaso {background-position: 150%;}
}

@media(min-width: 930px){

  .container.vaso {background-position: 130%;}
}

@media(min-width: 992px){
  header{background-color: var(--text);transition: .5s;position: relative;}
  header.navActive{position: fixed;width: 100%;background-color: var(--azul);transition: .5s;}
  header #logo{filter: none;}
  header.navActive #logo{filter: brightness(10);}
  header.navActive .smm li > a{color:var(--text);}
  header.navActive .smm__primary-menu li > a:after{background-color:var(--text); }
  img#logo {width: 190px;}
  .smm__toggle{display: none;}

  /*Primer Slider*/
  .first .container{margin-top: 0px;position: relative;}
  .wrap{align-items: center;}  
  .first .container h1{color:var(--salmon);font-weight: 400;font-size: 20px;margin-top: 30px;}
  .first .container h1 br:first-child{display: none;}
  .first .wrap{align-items: center;}
  .column img#botellaMobile{display: none;}
  #botellaDesktop{display: block;max-height: 550px;width: auto;margin: 0px auto;}
  .first::before {width: 700px;height: 700px;top: -220px;right: -50px;}
  img#esfera {top: -320px;right: -120px;width: 720px;max-height: 1000px;}
  .container.vaso {background-position: 120%}

  .smm li a.idioma {font-size: 11px;}

  
 
}

@media(min-width: 1080px){ 
  .container.sp #botellasDos{display: none;}
  .container.vaso {background-position: 100%;}
  section.frutas {background: url(../img/botellas.jpg);background-repeat: no-repeat;background-position: 141%;background-size: 60%;}
  section.vaso {background: url(../img/vaso-bg.png);background-repeat: no-repeat;background-position: right;position: relative;}
  img#ciculoblanco {display: block;width: 479px;background-repeat: no-repeat;height: 100%;position: absolute;z-index: 1;top: -229px;right: 0px;z-index: 0;clip-path: polygon(0 0, 100% 0, 100% 59%, 0 59%);}
  section.vaso .column img.cien{display: none;}  

  /*Textura*/
  img#textura{max-width: 100%;position: absolute;bottom: -50px;left: -130px;display: block;}
  img#texturaDos{max-width: 100%;position: absolute;top: -50px;right: 0px;display: block;}

  img#circuloDos{right: calc(50% - 210px);}

  /*Logos*/  
  .logos img {width: 16%;}
  .flex{display: flex;align-items: flex-end;}
  .col1{width: 65%;}
  .col2{width: 30%;margin-left: 5%;}
  .logos img{width: 130px;}
  .col3{width: 45%;}
  .col4{width: 60%;margin-left: 5%;}
}




@media(min-width: 1280px){
  section.frutas {background-position: 100%;background-size: 40%;background-attachment: initial;}

  .logos img{width: 170px;}
}

@media(min-width: 1440px){
  section.vaso::before{z-index: 1;}
  section.vaso{background-size: 500px;}
  img#ciculoblanco {display: block;width: 516px;background-repeat: no-repeat;height: 100%;position: absolute;z-index: 1;top: -249px;right: 0px;z-index: 0;clip-path: polygon(0 0, 100% 0, 100% 89%, 0 109%);}

  .logos img{width: 180px;}
}

@media(max-width: 991px) {
  main {padding: 100px 0 20px;}
  .smm__container {padding: 10px 0;}
  .smm__container--open {position: fixed;justify-content: center;flex-direction: column;width: 100%;height: 100vh;top: 0;left: 0;overflow-y: auto;padding: 65px 65px 15px;background-color: rgba(255,255,255,1);}
  .smm__container--open .smm__collapse {display: block;flex-grow: 0;padding-left: 0;}
  .smm__container--open .smm__logo-wrapper {margin-bottom: 15px;text-align: center;}
  .smm__toggle--open {position: fixed;top: 15px;right: 15px;background: transparent;}
  .smm__collapse {display: none;}
  .smm__primary-menu {display: flex;align-items: center;justify-content: center;flex-direction: column;}
  ul.smm__primary-menu {margin-bottom: 30px;}
  .smm__primary-menu li > a {padding: 10px 12px;}
  .smm__secondary-menu {text-align: center;}

}

@media(max-width: 991px) and (max-height: 479px) {
  .smm__container--open {justify-content: flex-start;}
}