/******************************
*   Tipografias
******************************/
@import url('all.css');
@import url('typo.css');
@import url('epura.css');

:root {
    --negro: 0, 0, 0;
    --blanco: 255, 255, 255;
    --azul_d: 11, 28, 53;
    --azul_m: 7, 16, 141;
    --azul_l: 54, 206, 231;
    --verde: 134, 195, 15;
    --ama_d: 253, 173, 3;
    --ama_l: 248, 236, 59;
    --rosa: 224, 59, 156;
    --gris: 232, 232, 232;
}

::selection {
    color: rgb(var(--azul_d));
    background: rgb(var(--blanco));
}
::-moz-selection {
    color: rgb(var(--azul_d));
    background: rgb(var(--blanco));
}
::-webkit-selection {
    color: rgb(var(--azul_d));
    background: rgb(var(--blanco));
}

/******************************
*   Reset
******************************/
*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
html {
    scroll-behavior: smooth;
    scroll-padding: 80px;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: 'Futura Std';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    line-height: 1.4;
    font-size: 16px;
    color: rgb(var(--blanco)); 
    background: rgb(var(--azul_d)); 
}
figure {
    /* pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; */
}
figure img { margin: 0 auto; }
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a, a:link, a:hover, a:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
ul,
ol {
    margin: 0;
    padding: 0;
    padding-inline-start: 20px;
}
li + li { margin-top: 15px; }
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
}
h2 { font-size: clamp(32px, 2.55vw, 118px); }
h3 { font-size: clamp(26px, 1.55vw, 68px); }
h4 { font-size: clamp(22px, 1.35vw, 52px); }
h5 { font-size: clamp(18px, 1.04vw, 40px); }
input,
select,
textarea {
    display: block;
    width: 100%;
    padding: .8em 1em; /* 12px 16px */
    color: rgb(var(--azul_d));
    background: rgb(var(--blanco));
    font-family: 'Chillax';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    border-radius: .9em;
    -moz-appearance: none;
    -webkit-appearance: none;
}
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: ;
  -webkit-box-shadow: 0 0 0px 1000px rgb(var(--blanco)) inset;
  transition: background-color 5000s ease-in-out 0s;
}
input::placeholder,
textarea::placeholder { color: rgba(var(--azul_d), .6); }
button { background: transparent; }
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }

p { margin: 0; }
p + *,
* + p,
* + ol,
* + ul { margin-top: 1.3em; }
ol + *,
ul + *,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 { margin-top: 3em; }

ul > li::marker,
ul > li > ul > li::marker { color: rgb(var(--name), 1); }

/******************************
*   Loader
******************************/

/******************************
*   General
******************************/
.wrapper { position: relative; }
main {
    width: 100%;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
section {
    padding: 4em 0;
    position: relative;
}

/* Background */
.bg__page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
}
.bg__page figure {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
}
.bg__page figure img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* Head Section */
.head__sect + *,
* + .head__sect { margin-top: 3.5em; }
.head__sect { text-align: center; }
.head__sect * + * { margin-top: 32px; }
.head__sect *:nth-child(1):has(+ h2) {
    display: block;
    text-transform: uppercase;
}
.head__sect * + p { margin-top: 20px; }
.head__sect p { font-size: 110%; }
.head__sect figure {
    margin-left: auto;
    margin-right: auto;
    height: 7vh;
    min-height: 60px;
}
.head__sect figure img {
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* CTA */
* + .c__cta { margin-top: 60px; }
.c__cta + .c__cta { margin-top: 20px; }
.c__cta {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 20px;
}
.cta,
a.cta {
    display: inline-flex;
    justify-content: center;
    align-items: baseline;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    padding: 14px 20px;
    gap: 8px;
    border-radius: 1000px;
    font-family: 'Chillax';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.cta i {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.cta__rosa { background: rgb(var(--rosa)); }
.cta__azul { background: rgb(var(--azul_l)); }

/* Video Media */
.cont__media {
    width: 120vh;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.cont__media > div {
    position: relative;
    padding-top: 56.66%;
}
.cont__media > div > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Sliders */
.cont__slide {
    margin-right: auto;
    margin-left: auto;
}
.swiper-slide { height: auto; }
.cont__controls {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}
.swiper-button-disabled {
    pointer-events: none;
    opacity: .3;
}
.arrow {
    width: 1.8em; /* Puede ser 50px */
    height: 1.8em; /* Puede ser 50px */
    border-radius: 1000px;
    background: rgb(var(--blanco));
    color: rgb(var(--azul_d));
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/******************************
*   Home
******************************/
#home .bg__02,
#home .bg__03 { opacity: 0; }

/* Inicio */
.cont__disc { font-weight: 500; }
.disc__col p + p { margin-top: initial; }
.frase__01 p { overflow: hidden; }
.disc__col p span { display: inline-block; }
.frase__01 { font-size: 6vw; }
.frase__02 { font-size: 7vw; }
.botella__ini {
    width: 40%;
    margin: 0 auto;
}
.botella__ini img {
    max-width: initial;
    width: 100%;
}

/* Video */
.fra__head {
    display: block;
    line-height: 1;
}
.fra__01 {
    font-size: clamp(22px, 1.35vw, 52px);
    text-transform: uppercase;
}
.fra__02 { font-size: clamp(32px, 2.55vw, 118px); }

/* Productos */
.productos { overflow: hidden; }
.productos .swiper { overflow: visible; }
.item__prod {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: 100%;
    opacity: 0;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.swiper-slide-active .item__prod { opacity: 1; }
.prof__info > * + * { margin-top: 60px; }
.prod__logo figure {
    width: 22%;
    min-width: 180px;
    margin: 0 auto;
}
.prod__graf {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr;
}
.prod__graf > * { grid-area: 1 / 1 / 2 / 2; }
.prod__graf > * img {
    width: 100%;
    max-width: inherit;
}

/* Prodcutos: Animaciones */
.prod__graf figure  { opacity: 0; }
.swiper-slide-active .prod__graf figure {
    -webkit-transition: all 1.2s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 1.2s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 1.2s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 1.2s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 1.2s cubic-bezier(0.68, -0.1, 0.265, 1.55);
}

/* Prodcutos: Natural */
.swiper-slide[aria-label="1 / 3"] .prod__graf figure {
    -webkit-transform: scale(.75);
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    transform: scale(.75);
    transform-origin: 50% 100%;
}
.swiper-slide[aria-label="1 / 3"] .prod__graf figure:nth-child(1) { transition-delay: .2s }
.swiper-slide[aria-label="1 / 3"] .prod__graf figure:nth-child(2) { transition-delay: .4s }
.swiper-slide[aria-label="1 / 3"] .prod__graf figure:nth-child(3) { transition-delay: .6s }
.swiper-slide[aria-label="1 / 3"] .prod__graf figure:nth-child(4) { transition-delay: .8s }
.swiper-slide[aria-label="1 / 3"] .prod__graf figure:nth-child(5) { transition-delay: 1s }
.swiper-slide-active[aria-label="1 / 3"] .prod__graf figure {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/* Prodcutos: Bebe */
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(1) {
    -webkit-transform: scale(.75) rotate(90deg);
    -moz-transform: scale(.75) rotate(90deg);
    -ms-transform: scale(.75) rotate(90deg);
    -o-transform: scale(.75) rotate(90deg);
    transform: scale(.75) rotate(90deg);
}
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(2) {
    -webkit-transform: scale(.75);
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    transform: scale(.75);
    transform-origin: 50% 100%;
}
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(3),
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(4) {
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    -ms-transform: translateX(-30%);
    -o-transform: translateX(-30%);
    transform: translateX(-30%);
}
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(5),
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(6) {
    -webkit-transform: translateX(30%);
    -moz-transform: translateX(30%);
    -ms-transform: translateX(30%);
    -o-transform: translateX(30%);
    transform: translateX(30%);
}
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(7),
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(8),
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(9),
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(10) {
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    -o-transform: translateY(-30%);
    transform: translateY(-30%);
}
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(1) { transition-delay: .4s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(2) { transition-delay: .2s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(3) { transition-delay: .6s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(4) { transition-delay: .7s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(5) { transition-delay: .8s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(6) { transition-delay: .9s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(7) { transition-delay: 1s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(8) { transition-delay: 1.1s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(9) { transition-delay: 1.2s }
.swiper-slide[aria-label="2 / 3"] .prod__graf figure:nth-child(10) { transition-delay: 1.3s }
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(1) {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(2) {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(3),
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(4),
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(5),
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(6),
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(7),
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(8),
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(9),
.swiper-slide-active[aria-label="2 / 3"] .prod__graf figure:nth-child(10) {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

/* Prodcutos: Jugo */
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(3),
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(4) {
    -webkit-transform: scale(.75);
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    transform: scale(.75);
    transform-origin: 50% 100%;
    z-index: 1;
}
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(1) {
    -webkit-transform: translateX(30%) rotate(-35deg);
    -moz-transform: translateX(30%) rotate(-35deg);
    -ms-transform: translateX(30%) rotate(-35deg);
    -o-transform: translateX(30%) rotate(-35deg);
    transform: translateX(30%) rotate(-35deg);
}
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(2) {
    -webkit-transform: translateX(-30%) rotate(35deg);
    -moz-transform: translateX(-30%) rotate(35deg);
    -ms-transform: translateX(-30%) rotate(35deg);
    -o-transform: translateX(-30%) rotate(35deg);
    transform: translateX(-30%) rotate(35deg);
}
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(5),
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(6) {
    -webkit-transform: scale(.75);
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    transform: scale(.75);
}
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(3) { transition-delay: .2s }
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(4) { transition-delay: .4s }
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(1) { transition-delay: .6s }
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(2) { transition-delay: .6s }
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(5) { transition-delay: .8s }
.swiper-slide[aria-label="3 / 3"] .prod__graf figure:nth-child(6) { transition-delay: .8s }
.swiper-slide-active[aria-label="3 / 3"] .prod__graf figure:nth-child(3),
.swiper-slide-active[aria-label="3 / 3"] .prod__graf figure:nth-child(4),
.swiper-slide-active[aria-label="3 / 3"] .prod__graf figure:nth-child(5),
.swiper-slide-active[aria-label="3 / 3"] .prod__graf figure:nth-child(6) {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.swiper-slide-active[aria-label="3 / 3"] .prod__graf figure:nth-child(1),
.swiper-slide-active[aria-label="3 / 3"] .prod__graf figure:nth-child(2) {
    -webkit-transform: translateY(0%) rotate(0);
    -moz-transform: translateY(0%) rotate(0);
    -ms-transform: translateY(0%) rotate(0);
    -o-transform: translateY(0%) rotate(0);
    transform: translateY(0%) rotate(0);
    opacity: 1;
}

/* Contacto */
.contacto { background: rgb(var(--azul_m)); }
.contact__logo {
    margin-right: auto;
    margin-left: auto;
    width: 50%;
    max-width: 200px;
}

/* Cierre */
.cierre {
    padding: 0;
    background: #3bb5fa;
    overflow: hidden;
}
.cierre picture{ display: block; }
.cierre picture * {
    max-width: initial;
    width: 100%;
}
.word__ama {
    position: absolute;
    top: 10%;
    width: 70%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;
}

/******************************
*   Formularios
******************************/
* + .cont__form,
.cont__form + * { margin-top: 3.5em; }
.cont__camp {
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.camp textarea {
    min-height: 150px;
    resize: none;
}

/******************************
*  Pedido E pura
******************************/
.prod__pedido {
    width: 50vh;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr;
}
.prod__pedido > * { grid-area: 1 / 1 / 2 / 2; }
.prod__pedido > * img {
    width: 100%;
    max-width: inherit;
}

/******************************
*  Respponsabilidad
******************************/
#responsabilidad {
    --verde: 45, 186, 26;
    overflow-x: hidden;
}
#responsabilidad main {
    background: linear-gradient(to right,  #f4f9fc 0%, #e9e6f1 51%, #fefdf9 100%);
    color: rgb(var(--azul_d));
    overflow: hidden;
}
/* Botella */
.botella {
    overflow: hidden;
    padding: 0;
}
.cont__ini { position: relative; }
.cont__ini .head__sect + *,
.cont__ini * + .head__sect { margin-top: 1.5em; }
.ini__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
    right: -50px;
    left: -50px;
    overflow: hidden;
}
.ini__bg figure { height: 100%; }
.ini__bg figure img {
    object-position: center;
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.ini__info {
    padding: 4em 0;
    color: rgb(var(--blanco));
    position: relative;
}
.ini__info h2 { color: rgb(var(--verde)); }
.cont__compo {
    width: 48vh;
    max-width: 90%;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding: 3% 0;
}
.cont__botellas {
    position: absolute;
    width: calc(100% + 40px);
    padding-top: calc(100% + 40px);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.cont__botellas > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.bottles {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
}
.b__big {
    width: 10%;
    opacity: .5;
}
.b__small {
    width: 6%;
    height: 90%;
    opacity: .3;
}
.b__xsmall {
    width: 4.5%;
    opacity: .12;
}
.bottles figure {
    position: absolute;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.bottles figure img { display: block; }
.bottles figure:nth-child(1) { top: 0; }
.bottles figure:nth-child(2) { bottom: 0; }
.bottles figure:nth-child(2) img {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.b001 {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.b003 {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    -o-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.b005 {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}
.b007 {
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    -moz-transform: translate(-50%, -50%) rotate(135deg);
    -ms-transform: translate(-50%, -50%) rotate(135deg);
    -o-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
}
.b002 {
    -webkit-transform: translate(-50%, -50%) rotate(22.5deg);
    -moz-transform: translate(-50%, -50%) rotate(22.5deg);
    -ms-transform: translate(-50%, -50%) rotate(22.5deg);
    -o-transform: translate(-50%, -50%) rotate(22.5deg);
    transform: translate(-50%, -50%) rotate(22.5deg);
}
.b004 {
    -webkit-transform: translate(-50%, -50%) rotate(67.5deg);
    -moz-transform: translate(-50%, -50%) rotate(67.5deg);
    -ms-transform: translate(-50%, -50%) rotate(67.5deg);
    -o-transform: translate(-50%, -50%) rotate(67.5deg);
    transform: translate(-50%, -50%) rotate(67.5deg);
}
.b006 {
    -webkit-transform: translate(-50%, -50%) rotate(112.5deg);
    -moz-transform: translate(-50%, -50%) rotate(112.5deg);
    -ms-transform: translate(-50%, -50%) rotate(112.5deg);
    -o-transform: translate(-50%, -50%) rotate(112.5deg);
    transform: translate(-50%, -50%) rotate(112.5deg);
}
.b008 {
    -webkit-transform: translate(-50%, -50%) rotate(157.5deg);
    -moz-transform: translate(-50%, -50%) rotate(157.5deg);
    -ms-transform: translate(-50%, -50%) rotate(157.5deg);
    -o-transform: translate(-50%, -50%) rotate(157.5deg);
    transform: translate(-50%, -50%) rotate(157.5deg);
}
.b009 {
    -webkit-transform: translate(-50%, -50%) rotate(12deg);
    -moz-transform: translate(-50%, -50%) rotate(12deg);
    -ms-transform: translate(-50%, -50%) rotate(12deg);
    -o-transform: translate(-50%, -50%) rotate(12deg);
    transform: translate(-50%, -50%) rotate(12deg);
}
.b010 {
    -webkit-transform: translate(-50%, -50%) rotate(32deg);
    -moz-transform: translate(-50%, -50%) rotate(32deg);
    -ms-transform: translate(-50%, -50%) rotate(32deg);
    -o-transform: translate(-50%, -50%) rotate(32deg);
    transform: translate(-50%, -50%) rotate(32deg);
}
.b011 {
    -webkit-transform: translate(-50%, -50%) rotate(57.5deg);
    -moz-transform: translate(-50%, -50%) rotate(57.5deg);
    -ms-transform: translate(-50%, -50%) rotate(57.5deg);
    -o-transform: translate(-50%, -50%) rotate(57.5deg);
    transform: translate(-50%, -50%) rotate(57.5deg);
}
.b012 {
    -webkit-transform: translate(-50%, -50%) rotate(77.5deg);
    -moz-transform: translate(-50%, -50%) rotate(77.5deg);
    -ms-transform: translate(-50%, -50%) rotate(77.5deg);
    -o-transform: translate(-50%, -50%) rotate(77.5deg);
    transform: translate(-50%, -50%) rotate(77.5deg);
}
.b013 {
    -webkit-transform: translate(-50%, -50%) rotate(102deg);
    -moz-transform: translate(-50%, -50%) rotate(102deg);
    -ms-transform: translate(-50%, -50%) rotate(102deg);
    -o-transform: translate(-50%, -50%) rotate(102deg);
    transform: translate(-50%, -50%) rotate(102deg);
}
.b014 {
    -webkit-transform: translate(-50%, -50%) rotate(122deg);
    -moz-transform: translate(-50%, -50%) rotate(122deg);
    -ms-transform: translate(-50%, -50%) rotate(122deg);
    -o-transform: translate(-50%, -50%) rotate(122deg);
    transform: translate(-50%, -50%) rotate(122deg);
}
.b015 {
    -webkit-transform: translate(-50%, -50%) rotate(147.5deg);
    -moz-transform: translate(-50%, -50%) rotate(147.5deg);
    -ms-transform: translate(-50%, -50%) rotate(147.5deg);
    -o-transform: translate(-50%, -50%) rotate(147.5deg);
    transform: translate(-50%, -50%) rotate(147.5deg);
}
.b016 {
    -webkit-transform: translate(-50%, -50%) rotate(167.5deg);
    -moz-transform: translate(-50%, -50%) rotate(167.5deg);
    -ms-transform: translate(-50%, -50%) rotate(167.5deg);
    -o-transform: translate(-50%, -50%) rotate(167.5deg);
    transform: translate(-50%, -50%) rotate(167.5deg);
}
.botella__reci {
    position: relative;
    margin: 0 auto;
    width: 28%;
    filter: drop-shadow(0px 0px 20px rgb(var(--negro), .5));
    will-change: filter;
}
.botella__reci img {
    max-width: inherit;
    width: 100%;
}
.l__recicla {
    position: absolute;
    width: 56%;
    bottom: 28%;
    right: -20%;
    filter: drop-shadow(0px 0px 10px rgb(var(--negro), .3));
    will-change: filter;
}

/* Info */
.fil__info .icon-epura {
    display: inline-block;
    transform: translateY(16%);
}
.fil__info + .fil__info { margin-top: 3em; }
.fil__info {
    display: flex;
    gap: 4em 2em;
    flex-direction: column;
}
.fil__blaco {
    background: rgb(var(--blanco));
    padding: 1.5em;
    border-radius: 1em;
    box-shadow: 0 0 2em rgba(var(--azul_d), .05);
    align-items: center;
    position: relative;
}
.col__item .graf__card {
    width: 100%;
    padding-top: 120%;
    position: relative;
    filter: drop-shadow(0px 0px 5px rgb(var(--negro), .2));
    will-change: filter;
    overflow: hidden;
    border-radius: 1em;
}
.col__item .graf__card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.info__col:nth-child(2) .col__item .graf__card { padding-top: 100%; }
.item__graf { position: relative; }
.graf__ele {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: drop-shadow(0px 0px 10px rgb(var(--negro), .4));
    will-change: filter;
}
.ele__01 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8%;
    transform: rotate(24deg);
}
.ele__01 > *:nth-child(1) { width: 36%; }
.ele__01 > *:nth-child(2) { width: 20%; }
.ele__02 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: translate(5%, -10%) rotate(24deg);
}
.ele__02 > * {
    width: 65%;
    margin: 0 auto;
}
.icon__graf {
    position: absolute;
    width: 30%;
    right: -15%;
    top: 60%;
    filter: drop-shadow(0px 0px 10px rgb(var(--negro), .1));
    will-change: filter;
}
.grf__round { position: relative; }
.grf__round > *:nth-child(1) {
    overflow: hidden;
    border-radius: 1000px;
}
.grf__round .icon__graf {
    width: 18%;
    right: -4%;
    top: 0;
}
.fil__02 h4 {
    color: rgb(var(--verde));
    font-size: 2em;
}
.fil__03 { text-align: center; }
.fil__03 p:nth-child(2) {
    color: rgb(var(--verde));
    font-size: 1.5em;
}
.fil__03 figure { mix-blend-mode: multiply; }

/* Materiales */
.materiales {
    background: rgb(var(--blanco));
    font-family: 'Chillax';
    font-weight: normal;
    font-style: normal;
}
.materiales .head__sect * + * { margin-top: .6em; }
.materiales .head__sect { color: rgb(var(--azul_m)); }
.cont__tabs + * { margin-top: 2em; }
.cont__tabs {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1em;
}
.tab__opt {
    display: block;
    cursor: pointer;
    padding: .8em 1.3em;
    border-radius: 100px;
    background: rgba(var(--gris), .5);
    color: rgba(var(--azul_m), .5);
    font-size: .9em;
    font-weight: 500;
    line-height: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.tab__opt:hover {
    background: rgb(var(--gris));
    color: rgb(var(--azul_m));
}
.tab__content { display: none; }
.tab__content.active { display: block; }
.info__tabs {
    margin-left: -15px;
    margin-right: -15px;
}
.info__tabs .swiper-horizontal { padding: 0 15px; }
.info__item {
    position: relative;
    overflow: hidden;
    border-radius: 1em;
    color: rgb(var(--blanco));
    font-weight: 500;
    height: 100%;
}
.item__01 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1em;
    padding: 1em;
    position: relative;
}
.item__01 .fil__top { position: relative; }
.item__01 .fil__bot {
    display: flex;
    gap: .8em;
    justify-content: space-between;
}
.item__01 .fil__top > *:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: .5em;
    align-items: flex-start;
}
.item__01 .fil__top > *:nth-child(1) span {
    font-size: 130%;
    padding-right: 50px;
}
.item__01 .fil__top > *:nth-child(1) i {
    display: inline-block;
    border: 1px solid rgba(var(--blanco), .6);
    border-radius: 1000px;
    padding: .3em .5em;
    font-size: 90%;
}
.item__01 .fil__top > *:nth-child(2) {
    width: 12%;
    min-width: 20px;
    position: absolute;
    top: 0;
    right: 0;
}
.item__01 .fil__bot { font-size: 90%; }
/* .item__01 .fil__bot > * { position: relative; } */
.item__01 .fil__bot > *:nth-child(1) { width: 65%; }
.item__01 .fil__bot > *:nth-child(2) { width: 35%; }
.item__01 .fil__bot > *:nth-child(2) figure { position: absolute; }
.item__01 .fil__bot > *:nth-child(2) figure img {
    -webkit-transition: all .9s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all .9s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all .9s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all .9s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all .9s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    opacity: 0;
    -webkit-transform: translateY(50%) rotate(45deg);
    -moz-transform: translateY(50%) rotate(45deg);
    -ms-transform: translateY(50%) rotate(45deg);
    -o-transform: translateY(50%) rotate(45deg);
    transform: translateY(50%) rotate(45deg);
}
.active .item__01 .fil__bot > *:nth-child(2) figure img {
    opacity: 1;
    -webkit-transform: translateY(0%) rotate(0);
    -moz-transform: translateY(0%) rotate(0);
    -ms-transform: translateY(0%) rotate(0);
    -o-transform: translateY(0%) rotate(0);
    transform: translateY(0%) rotate(0);
}
#tab-1 .item__01 .fil__bot > *:nth-child(2) figure {
    width: 30%;
    top: 33%;
    left: 70%;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
#tab-2 .item__01 .fil__bot > *:nth-child(2) figure {
    width: 44%;
    top: 41%;
    left: 70%;
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
#tab-3 .item__01 .fil__bot > *:nth-child(2) figure {
    width: 30%;
    top: 40%;
    left: 75%;
    -webkit-transform: rotate(-24deg);
    -moz-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    -o-transform: rotate(-24deg);
    transform: rotate(-24deg);
}
#tab-4 .item__01 .fil__bot > *:nth-child(2) figure {
    width: 45%;
    top: 52%;
    left: 70%;
    -webkit-transform: rotate(-24deg);
    -moz-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    -o-transform: rotate(-24deg);
    transform: rotate(-24deg);
}
#tab-5 .item__01 .fil__bot > *:nth-child(2) figure {
    width: 75%;
    top: 41%;
    left: 60%;
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
}
.item__02 { padding-top: 85%; } 
.item__02 figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.item__02 figure img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
.item__text {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1em;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
}
.item__text span {
    display: block;
    font-size: 130%;
}
#tab-1 .item__01 { background: linear-gradient(to bottom, #1F2896 0%,#3E4BFF 100%); }
#tab-2 .item__01 { background: linear-gradient(to bottom, #EA8521 0%,#FDAD02 100%); }
#tab-3 .item__01 { background: linear-gradient(to bottom, #BA2F81 0%,#FF6EC3 100%); }
#tab-4 .item__01 { background: linear-gradient(to bottom, #2DBA1A 0%,#91C446 100%); }
#tab-5 .item__01 { background: linear-gradient(to bottom, #1F2896 0%,#37CEE7 100%); }

.tab__opt.active {
    color: rgb(var(--blanco));
    pointer-events: none;
}
.active[data-tab="1"] { background: #3E4BFF; }
.active[data-tab="2"] { background: #EA8521; }
.active[data-tab="3"] { background: #BA2F81; }
.active[data-tab="4"] { background: #2DBA1A; }
.active[data-tab="5"] { background: #1F2896; }

.info__tabs .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: relative;
    margin-top: 20px;

    --swiper-scrollbar-bg-color: rgba(var(--azul_d), .1);
    --swiper-scrollbar-drag-bg-color: rgba(var(--azul_d), .7);
    --swiper-scrollbar-size: 8px;
}

.hoja {
    position: absolute; 
    min-width: 120px;
    filter: drop-shadow(0px 30px 5px rgb(var(--negro), .2));
    will-change: filter;
}

.hoja__01 {
    width: 10%;
    top: 0%;
    right: 3%;
}
.hoja__02 {
    width: 10%;
    top: 18%;
    left: -3%;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}
.hoja__03 {
    width: 12%;
    bottom: -5%;
    right: 80%;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.hoja__04 {
    width: 12%;
    min-width: 100px;
    bottom: -5%;
    left: 85%;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.hoja__05 {
    width: 10%;
    top: -3%;
    left: 5%;
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    transform: rotate(-25deg);
}

/******************************
*   Legal
******************************/
#legal { background: #0F144A }
#legal main .container { max-width: 768px; }

/******************************
*   Mobile
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
@media (max-width : 679px) {

/* Inicio */
.cont__disc { text-align: center; }
.disc__col + .disc__col { margin-top: 30px; }

/* Responsabilidad: Info */
.fil__3 .info__col {
    margin: 0 auto;
    max-width: 400px;
    width: 75%;
}

}
@media (min-width : 680px) {
main { min-height: calc(100vh - 86px); }

/* Sliders */
.swiper-button-disabled { opacity: 0; }
.control__middle .cont__controls { margin-top: 0px; }
.control__middle .button__control {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 50;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.control__middle .swiper-prev { left: 0; }
.control__middle .swiper-next { right: 0; }
.control__middle .swiper-prev.swiper-button-disabled .arrow {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}
.control__middle .swiper-next.swiper-button-disabled .arrow {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

/* Inicio */
.cont__disc {
    width: 90vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 60px 0;
}
.frase__01 {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    align-items: flex-end;
}
.frase__02 {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    align-items: flex-start;
}
.product__graf { grid-area: 1 / 1 / 3 / 2; }
.botella__ini { width: 23vh; }

/* Productos */
.productos .cont__slide { width: 90%; }
.item__prod { padding: 0 60px; }

/* Formularios */
.cont__form {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

/* Responsabilidad: Info */
.fil__blaco { padding: 3em; }
.fil__info { flex-direction: row; }
.fil__2 > .info__col { width: calc(50% - 1em); }
.fil__3 > .info__col { width: calc(33.33% - 1em); }

.fil__03 { flex-direction: row-reverse; }
.fil__01,
.fil__04 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.fil__01 .info__col:nth-child(2) { padding-top: 6em; }
.fil__04 .info__col:nth-child(odd) { padding-top: 3em; }

.hoja__01 {
    top: -3%;
    right: 3%;
}
.hoja__02 {
    top: 12%;
    left: 3%;
}
.hoja__03 {
    bottom: -5%;
    right: 95%;
}
.hoja__04 {
    bottom: -5%;
    left: 95%;
}
.hoja__05 {
    top: -6%;
    left: 5%;
}


}
@media (min-width : 680px) and (max-width : 767px) {
}
@media (min-width : 680px) and (max-width : 991px) {

/* Inicio */
.frase__01 { font-size: 3.5vw; }
.frase__02 { font-size: 5vw; }

}
/* Small Devices, Nav */
@media (max-width : 767px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {

/* Head Section */
.head__sect p {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Cierre */
.word__ama {
    position: absolute;
    top: 7%;
    width: 30%;
}

/* Formularios */
.cont__camp { flex-flow: row wrap; }
.camp__col { width: calc(33.33% - 1.34em); }
.camp__full { width: 100%; }

/* Materiales */
.materiales .container { width: 100%; }

}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {

}
@media (max-width : 991px) {
}
@media (min-width : 992px) {

/* Inicio */
.cont__disc {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 0;
}
.frase__01 {
    grid-area: 1 / 1 / 2 / 2;
    font-size: calc(1.4vw + 1.4vh);
}
.frase__02 {
    grid-area: 1 / 3 / 2 / 4;
    font-size: calc(2.2vw + 2.2vh);
}
.product__graf { grid-area: 1 / 2 / 2 / 3; }
.frase__01,
.frase__02 { align-items: center; }
.frase__01,
.frase__02 {
    -webkit-transform: translateY(-12%);
    -moz-transform: translateY(-12%);
    -ms-transform: translateY(-12%);
    -o-transform: translateY(-12%);
    transform: translateY(-12%);
}
.frase__01 > * { margin-right: -30%; }
.frase__02 > * { margin-right: -30%; }

/* Productos */
.productos .cont__slide { width: 50%; }

/* Responsabilidad: Info */
.fil__01 .info__col:nth-child(2) { padding-top: 12em; }
.fil__04 .info__col:nth-child(odd) { padding-top: 6em; }

.fil__info { gap: 4em; }
.fil__3 > .info__col { width: calc(33.33% - 2em); }
.fil__2 > .info__col { width: calc(50% - 2em); }

.hoja__01 { right: 10%; }
.hoja__02 { left: 10%; }
.hoja__03 { right: 95%; }
.hoja__04 { left: 90%; }
.hoja__05 { left: 10%; }

}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
}
@media (min-width : 1200px) {

/* Inicio */
.cont__disc { width: 80vw; }

}

@media (min-width : 1650px) {

/* Materiales */
.materiales .container { width: 80%; }

}
@media (min-width : 2560px) {
body { font-size: 27px; }

.container { width: 1560px;  }

.cta,
a.cta {
    padding: 26px 36px;
    gap: 26px;
}

/* Contacto */
.contact__logo { max-width: 360px; }

}
@media (min-width : 3840px) {
body { font-size: 40px; }

.container { width: 2340px;  }

.cta,
a.cta {
    padding: 32px 40px;
    gap: 26px;
}

}




/* ----------- iPad ----------- */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-width: 820px) and (max-width: 834px) and (min-height: 1100px) and (max-height: 1190px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-width: 768px) and (max-width: 768px) and (min-height: 1024px) and (max-height: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

    .inicio {
        min-height: calc(100vh - 86px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .botella__ini { width: 20vh; }

}
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {

    .cont__disc {
        width: 90vw;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 60px 0;
    }
    .frase__01 {
        grid-area: 1 / 2 / 2 / 3;
        display: flex;
        align-items: flex-end;
        font-size: 3.5vw;
    }
    .frase__02 {
        grid-area: 2 / 2 / 3 / 3;
        display: flex;
        align-items: flex-start;
        font-size: 5vw;
    }
    .product__graf { grid-area: 1 / 1 / 3 / 2; }


}
@media screen and (min-width: 740px) and (max-height: 600px) and (orientation: landscape) {

    .botella__ini { width: 40%; }

}





header ul,
footer ul,
header ol,
footer ol {
    padding-inline-start: 0;
    list-style: none;
}
header ul + ul,
header li + li,
footer li + li { margin-top: 0; }

header,
footer {
    font-family: 'Chillax';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
header { font-weight: 500; }

/******************************
*   Header
******************************/
.header {
    background: rgba(var(--azul_m), .4);
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;
    z-index: 1000;
    box-shadow: 0px 0px 5px rgb(var(--azul_d), .5);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.header.active { background: rgba(var(--azul_m), 1); }
.header__cont {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px 15px;
}
.header__cont > * {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.header__cont > *:nth-child(1) { z-index: 10; }
.header__cont > *:last-child {
    z-index: 10;
    justify-content: flex-end;
}
.header__cont > * > * { pointer-events: all; }
.logo { width: 100px; }
.logo a { overflow: hidden; }
.logo a span {
    position: absolute;
    top: -100%;
    opacity: 0;
}
.cont__nav { width: 100%; }
.cont__nav nav ul li a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 20px;
    padding: 12px;
    border-radius: 1000px;
    font-weight: 500;
    line-height: 1;
}
.cont__nav nav ul.nav__f li a:hover { background: rgb(var(--azul_l)); }
.cont__nav nav ul.nav__s,
.cont__nav nav ul.nav__s li ul { gap: 15px; }
.cont__nav nav ul.nav__s > li:last-child a { background: rgb(var(--rosa)); }
.cont__nav nav ul.nav__social { display: flex; }
.cont__nav nav ul.nav__social li a {
    background: rgb(var(--blanco));
    color: rgb(var(--azul_d));
    padding: 0;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100%;
}
.btn__mob {
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.btn__mob .bars {
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn__mob .bars span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background: rgb(var(--blanco), 1);
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.btn__mob .bars span + span {  margin-top: 6px; }
.btn__mob.active .bars span:nth-child(1) {
    -webkit-transform: translate(0px, 8px) rotate(45deg);
    -moz-transform: translate(0px, 8px) rotate(45deg);
    -ms-transform: translate(0px, 8px) rotate(45deg);
    -o-transform: translate(0px, 8px) rotate(45deg);
    transform: translate(0px, 8px) rotate(45deg);
}
.btn__mob.active .bars span:nth-child(2) {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}
.btn__mob.active .bars span:nth-child(3) {
    -webkit-transform: translate(0px, -8px) rotate(-45deg);
    -moz-transform: translate(0px, -8px) rotate(-45deg);
    -ms-transform: translate(0px, -8px) rotate(-45deg);
    -o-transform: translate(0px, -8px) rotate(-45deg);
    transform: translate(0px, -8px) rotate(-45deg);
}

/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
@media (max-width : 679px) {
}
@media (min-width : 680px) {
.logo { width: 120px; }
}
@media (min-width : 680px) and (max-width : 1279px) {
.cont__nav nav { text-align: center; }
.nav__social { justify-content: center; }
ul.nav__f li + li { margin-top: 10px; }
.nav__social { margin: 19px auto 35px; }
}
/* Small Devices, Nav */
@media (max-width : 767px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
@media (max-width : 991px) {
}
@media (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
}
@media (min-width : 1200px) {
}
@media (max-width : 1279px) {
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--azul_d), .4);
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
header.show__men::before { opacity: 1; }
.cont__nav {
    position: absolute;
    top: 0;
    opacity: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    background: url('../img/bg-01.jpg') center;
    background-size: cover;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.cont__nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--azul_d), .3);
}
.cont__nav nav {
    position: relative;
    z-index: 1;
    padding: 120px 15px 30px;
    overflow: auto;
    width: 100%;
    height: 100%;
    height: 100vh;
}
.show__men .cont__nav {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}
.nav__social { margin: 14px auto 30px   ; }

}
@media (min-width : 1280px) {
.btn__mob { display: none; }
.cont__nav nav {
    display: flex;
    justify-content: space-between;
}
.cont__nav nav ul { display: flex; }
.cont__nav nav ul li a { font-size: 14px; }
}
@media (min-width : 2560px) {
.header__cont { padding: 36px; }
.logo { width: 190px; }
.cont__nav nav ul li a {
    font-size: 24px;
    padding: 24px;
}
.cont__nav nav ul.nav__s,
.cont__nav nav ul.nav__s li ul { gap: 38px; }
.cont__nav nav ul.nav__social li a {
    width: 72px;
    height: 72px;
}
}
@media (min-width : 3840px) {
.header__cont { padding: 50px; }
.logo { width: 320px; }
.cont__nav nav ul li a {
    font-size: 32px;
    padding: 32px;
}
.cont__nav nav ul.nav__s,
.cont__nav nav ul.nav__s li ul { gap: 50px; }
.cont__nav nav ul.nav__social li a {
    width: 96px;
    height: 96px;
}
}


/******************************
*   Footer
******************************/
footer {
    text-align: center;
    padding: 50px 15px;
    font-size: 14px;
    background: url('../img/bg-01.jpg') center top;
    background-size: cover;
}
footer > * + * { margin-top: 30px; }
.foo__logo {
    margin: 0 auto;
    max-width: 150px;
    width: 60%;
}
.fil__legal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
@media (max-width : 679px) {
.fil__legal i { display: none; }
}
@media (min-width : 680px) {
.fil__legal {
    flex-direction: row;
    gap: 15px;
}
}
@media (min-width : 680px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
@media (max-width : 991px) {
}
@media (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
}
@media (min-width : 1200px) {
}
@media (min-width : 2560px) {
footer {
    padding: 80px 15px;
    font-size: 24px;
}
.foo__logo {
    width: 8%;
    max-width: initial;
    min-width: 200px;
}
}
@media (min-width : 3840px) {
footer { font-size: 30px; }
}


/* Ocultar elementos */
.bg__page { opacity: 0; }

#home main,
#pedido main,
#responsabilidad main,
#gracias main,
#error main { opacity: 0; }