/******************************
*   Tipografias
******************************/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap');
@import url('recurrent_typo.css');
@import url('typo.css');

:root {
    --blanco: 255, 255, 255;
    --negro: 0, 0, 0;
    --gris: 226, 226, 226;

    --azul_d: 0, 28, 133;
    --azul_m: 127, 205, 255;
    --azul_l: 232, 244, 255;
    --dorado: 199, 158, 51;
    --verde: 173, 212, 19;

    /* Joy */
    --j_bg: #4c00f5;
    --j_ama: #fbff14;
    --j_azu: #00edf3;

    --plyr-color-main: rgb(var(--azul_d), 1);
    --swiper-pagination-color: rgb(var(--dorado), 1);
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

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

/******************************
*   Reset
******************************/
*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    background: ;
    color: rgb(var(--azul_d), 1); 
    /* font-family: 'Open Sans', sans-serif; */
    font-family: 'AmsiPro';
    font-weight: normal;
    font-style: normal;
    line-height: 1.4;
}
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;
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: 'AmsiProCond';
    font-weight: 900;
    font-style: normal;
}
input,
select,
textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: rgb(var(--gris), .8);
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 9px;
}
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 150px;
}
/* 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: #0F5B28;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
input::placeholder,
textarea::placeholder { color: #565656; }
button { background: transparent; }
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }
p { margin: 0; }
p + p { margin-top: 20px; }

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

/******************************
*   General
******************************/
.wrapper { position: relative; }
main {
    overflow: hidden;
    min-height: calc(100vh - 71px);
    min-height: calc(100dvh - 71px);
    position: relative;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}
.c__cntr {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.bg__trama {
    background: url('../img/trama.svg') center;
    background-size: 70px;
    overflow: hidden;
}

/* Head Page */
.h__page {
    position: relative;
    width: 100%;
    min-height: 250px;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.bg__head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg__head::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(var(--negro), .25);
    z-index: 1;
}
.bg__head img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.h__page > div {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 60px 15px;
    text-align: center;
}
.head__tit {
    text-transform: uppercase;
    color: rgb(var(--blanco), 1);
    font-size: 12vmin;
    text-shadow: 0 0 12px rgb(var(--negro), 0.3);
}

/* Head Section */
* + .head__sect { margin-top: 60px; }
.head__sect + * { margin-top: 60px; }
.head__sect { text-align: center; }
.sect__tit {
    display: inline-block;
    position: relative;
    font-size: 8vmin;
    line-height: 1;
}
.tit__script {
    font-family: 'Yellowtail';
    font-weight: normal;
    font-style: normal;
}
.sect__tit::before,
.sect__tit::after {
    content: '';
    display: block;
    background: currentcolor;
    margin: 0 auto;
    border-radius: 1px;
}
.sect__tit::before {
    width: 14px;
    height: 14px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-bottom: 12px
}
.sect__tit::after {
    width: 60px;
    height: 2px;
    margin-top: 16px;
}
.sect__tit + p { margin-top: 30px; }
.sect__tit,
.head__sect p {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}
.head__sect p { font-size: 120%; }

/* Content page */
.contnt__page { padding: 60px 0px; }

/* CTA */
* + .c__cta { margin-top: 40px }
.c__cta { text-align: center; }
.cta {
    display: inline-block;
    text-align: center;
    padding: 15px;
    border-radius: 6px;
    line-height: 1;
    font-weight: bold;
    min-width: 150px;
}
.cta.cta__01,
.cta__01 {
    background: rgb(var(--dorado), 1);
    color: rgb(var(--blanco), 1);
}
.cta.cta__02,
.cta__02 {
    background: rgb(var(--azul_d), 1);
    color: rgb(var(--blanco), 1);
}
.cta i {
    display: inline-block;
    margin-left: 8px;
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}

/******************************
*   Header
******************************/
.header {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    z-index: 100;
    top: 0;
}
.cont__menu {
    background: rgb(var(--azul_d), 1);
    color: rgb(var(--blanco), 1);
    padding: 10px 10px 10px 15px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
}
.logo {
    width: 150.2345px;
    overflow: hidden;
}
.logo a {
    width: 100%;
    display: block;
}
.logo a span {
    opacity: 0;
    display: none;
    position: absolute;
    top: -100%;
    left: -100%;
}
.menu__opt,
.link__social {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.menu__opt {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.link__social {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.cont__opt {
    text-align: center;
    font-size: 18px;
}
.cont__opt ul li { overflow: hidden; }
.cont__opt ul li div a {
    display: block;
    font-weight: bold;
}
.btn__search {
    padding: 0 12px;
    font-size: 18px;
    border-right: 1px solid rgb(var(--blanco), .3);
    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;
}
.fadeOut {
    opacity: 0;
    pointer-events: none;
}
.btn__mob {
    width: 50px;
    height: 50px;
    position: relative;
    cursor: pointer;
}
.btn__mob > div { position: absolute; }
.bars {
    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);
}
.form__search {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 20px;
    background: rgb(var(--blanco), 1);
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
    display: none;
}
.search__camp {
    margin-left: auto;
    margin-right: auto;
    max-width: 750px;
    position: relative;
}
.search__camp input {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgb(var(--azul_d), 1);
    color: rgb(var(--azul_d), 1);
    padding-right: 40px;
}
.search__camp button {
    position: absolute;
    top: 0;
    right: 0;
    color: rgb(var(--azul_d), 1);
    height: 100%;
    width: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/******************************
*   Elementos
******************************/
.grid__item { padding: 15px 0; }
/* Arrows */
.arrow {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgb(var(--dorado), .8);
    color: rgb(var(--blanco), 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;
}
.arrow i {
    font-size: 25px;
    position: absolute;
    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%);
}
.swiper-controls .arrow {
    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: 100;
}
.swiper-controls .a__prev { left: -25px; }
.swiper-controls .a__next { right: -25px; }
.swiper-controls .swiper-button-disabled {
    opacity: .4;
    pointer-events: none;
}

/******************************
*   Recetas / Detalle
******************************/
/* Recipe elements */
.c__recipe {
    /* overflow: hidden; */
    position: relative;
    z-index: 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;
    height: 100%;
}
.fil__col { position: relative; }

/* Reticula */
.grid__item { width: 100%; }
.content__grid.grid__reti .c__recipe { filter: drop-shadow(0px 0px 8px rgb(var(--azul_d), .1)); }
.grid__reti .r__fil .fil__col:nth-child(2),
.grid__reti .r__fil:nth-child(2) { padding: 20px; }
.grid__reti .r__fil .fil__col:nth-child(1)::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 150vh;
    background: rgb(var(--azul_l), 1);
    left: 0;
    top: 100%;
    z-index: -1;
}
.bg__trama .grid__reti .r__fil .fil__col:nth-child(1)::before { background: rgb(var(--blanco), 1); }
.grid__reti .cta { width: 100%; }
.grid__reti .c__recipe a,
.grid__promo .c__recipe a {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* List */
.grid__list .grid__item { width: 100%; }
.grid__list .grid__item + .grid__item { border-top: 1px dotted rgb(var(--gris), .8); }
.grid__list .r__fil:nth-child(1) {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.grid__list .r__fil:nth-child(1) .fil__col:nth-child(1) { width: 120px; }
.grid__list .r__fil:nth-child(1) .fil__col:nth-child(2) {
    width: calc(100% - 120px);
    padding-left: 15px;
}
.grid__list .r__fil:nth-child(2) { display: none; }

.img__recipe {
    position: relative;
    width: 100%;
    padding-top: 100%;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('../img/mascara.svg');
    mask-image: url('../img/mascara.svg');
}
.img__recipe img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.cint {
    position: absolute;
    top: -15px;
    left: 15px;
    padding: 12px 15px;
    background: rgb(var(--verde), 1);
    font-family: 'Yellowtail';
    font-weight: normal;
    font-style: normal;
    color: rgb(var(--blanco), 1);
    font-size: 7vmin;
    line-height: 1;
    border-radius: 6px;
    z-index: 1;
}
.info__recip {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.rec__type {
    font-size: 90%;
    line-height: .9;
}
.rec__name { font-size: 22px; }
.icon__recip { margin-left: 15px; }
.separate {
    border-top: 1px solid rgb(var(--azul_d), .2);
    margin: 0;
}
.separate + *,
* + .separate { margin-top: 20px; }

.content__grid .indicatives { font-size: 90% }
.indicatives,
.indicatives > div {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    line-height: 1.1;
    margin-left: -8px;
}
.indicatives > div { margin: 8px }
.indicatives .icon__indica {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
* + .icon__indica { margin-right: 8px }
.icon__indica + * { margin-left: 8px }
.icon__recip .icon__indica { font-size: 22px; }

.c__contrls { margin: 20px 0; }
.cont__view {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}
.btn__view + .btn__view { margin-left: 10px; }
.btn__view {
    display: block;
    width: 35px;
    height: 35px;
    border: 2px solid rgb(var(--azul_d), 1);
    border-radius: 6px;
    -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;
}
.btn__view:hover { background: rgb(var(--azul_d), .2); }
.chnge__view.active {
    pointer-events: none;
    color: rgb(var(--blanco), 1);
    background: rgb(var(--dorado), 1);
    border-color: rgb(var(--dorado), 1);
}
.filter {
    text-align: center;
    position: relative;
    padding: 8px 0;
}
.filter > div { position: relative; }
.filter select {
    padding: 12px 32px;
    background: transparent;
    border: 2px solid rgb(var(--azul_d), 1);
    line-height: 1.1;
}
.i__sel {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none;
}
.i__l { left: 8px; }
.i__r { right: 8px; }
#preparacion { padding-left: 38px; }

/* Slider */
.cont__slider { position: relative; }
.cont__slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
    bottom: 0;
}
.cont__slider .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    display: inline-block;
    border-radius: 0;
}
.cont__slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: rgb(var(--dorado), 1)
}
.cont__slider .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.cont__slider .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px; }

.grid__reti .swiper-slide {
    height: initial;
}
.swiper-recipe .grid__item {
    width: 100%;
    height: 100%;
}
.recip__media {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgb(var(--negro), .9);
    z-index: 1000;
    display: none;
}
.cont__closr {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 100;
    font-size: 30px;
    line-height: 0;
}

.recip__media .swiper-controls {
    position: absolute;
    top: 50%;
    right: calc(40% + 15px);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 100;
}
.recip__media .swiper-controls .arrow {
    background: rgb(var(--blanco), .20);
    color: rgb(var(--blanco), 1);
}
.recip__media .swiper-controls .arrow {
    position: relative;
    display: block;
    top: initial;
    -webkit-transform: initial;
    -moz-transform: initial;
    -ms-transform: initial;
    -o-transform: initial;
    transform: initial;
    z-index: 100;
    left: 0;
    right: 0;
}
.recip__media .swiper-controls .arrow + .arrow { margin-top: 20px; }
.recip__media .swiper-controls .arrow.reel-prev {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.recip__media .swiper-controls .arrow.reel-next {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.recip__media .swiper {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}
.fill__med {
    height: 100vh;
    height: 100dvh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.med__col {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.vid__media {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.vid__media .plyr {
    width: auto;
    width: auto;
    display: inline-block;
}
.vid__media.vid__land .plyr audio, 
.vid__media.vid__land .plyr iframe, 
.vid__media.vid__land .plyr video {
    height: 100vh;
    width: auto;
}
.vid__media.vid__you .plyr {
    width: 100vh;
    max-width: 100%;
}
.med__info .col__content { padding: 15px; }
.c__indica {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.txt__descrip { margin-top: 15px; }
.descip__show::before {
    content: 'Ver más';
    cursor: pointer;
}
.descip__show.active::before { content: 'Ver menos'; }
.btn__lik {
    font-size: 20px;
    cursor: pointer;
}
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.1, 1.1);
    transform: scale3d(1.2, 1.1, 1.1);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  color: red;
}
.cont__cate { margin-bottom: 40px; }
.cont__cate > div {
    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;
    margin: 0 -8px -8px;
}
.opt__cate {
    display: inline-block;
    text-align: center;
    padding: 12px 15px;
    border-radius: 6px;
    line-height: 1;
    font-weight: bold;
    border: 1px solid rgb(var(--azul_d), 1);
    margin: 8px;
}
.fil____flex + .fil____flex { margin-top: 30px; }
.tit__recip { font-size: 32px; }
.fil____flex + .fil____flex.fil03 { margin-top: 60px; }
.btn__share {
    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;
    margin-left: -10px;
}
.btn__share > div {
    margin: 10px;
    position: relative;
}
.btn__share strong {
    position: absolute;
    bottom: calc(100% + 6px);
    line-height: 1;
    width: 100%;
}
.btn__masck + .btn__masck { margin-left: 10px; }
.btn__masck.cta {
    position: relative;
    min-width: 46px;
}
.btn__masck.cta a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.btn__masck.cta i { margin-left: 0; }


.cont__list > div + div { margin-top: 15px; }
.detail__head { cursor: pointer; }
.detail__head h4 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 6px;
    font-size: 22px;
}
.detail__head h4 i {
    -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;
}
.detail__head.active h4 i {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.detail__head::after {
    content: '';
    display: block;
    border-top: 2px solid rgb(var(--azul_d), 1);
}
.lis__bull li {
    padding: 8px 0 8px 20px;
    position: relative;
}
.lis__bull li::before {
    content: '•';
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 5px;
}
.lis__number li { padding: 12px 0; }
.detail__list ul li + li { border-top: 1px solid rgb(var(--azul_d), .1); }

/******************************
*   Media
******************************/
.cont__media + .cont__media { margin-top: 30px; }
.cont__media span {
    display: block;
    margin-bottom: 6px;
}
.c__video {
    margin: 0 auto;
    width: 130vh;
    max-width: 100%;
}
.c__audio .plyr--audio .plyr__controls {
    background: rgb(var(--azul_d), 1);
    border-radius: 6px;
    color: rgba(var(--blanco), 1);
    padding: 6px;
}
.c__audio .plyr--full-ui input[type=range]{ color: rgb(var(--dorado), 1); }

/******************************
*   Historia
******************************/
.cont__block + * { margin-top: 60px; }
.cont__block .block__cols:nth-of-type(odd) { flex-direction: row-reverse; }
.block__full {
    width: 100%;
    background: rgb(var(--azul_d), 1);
    color: rgb(var(--blanco), 1);
}
.col__info { position: relative; }
.block__full,
.col__info:nth-child(2) {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 15px;
    padding-right: 15px;
}
.img__block {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.img__block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.info__txt {
    text-align: center;
    margin: 0 auto;
    width: 90%;
}
.tit__his {
    text-align: center;
    font-size: 32px;
}
.tit__his::after {
    content: '';
    display: block;
    background: currentcolor;
    margin: 0 auto;
    border-radius: 1px;
    width: 40px;
    height: 2px;
    margin-top: 12px;
}
.tit__his + * { margin-top: 26px; }
.block__full.block__img {
    padding-top: 0;
    padding-bottom: 40px;
    text-align: center;
}
.block__img p {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.fil__images + * { margin-top: 40px; }
.fil__images {
    width: 100%;
    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;
}
.img__graf {
    width: 50%;
    padding: 15px;
    margin: 40px 0px 0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.img__graf figure {
    width: 70%;
    margin: 0 auto;
}

/******************************
*   Productos
******************************/
#producto-detalle main { overflow: initial; }
.swiper-prodcut .swiper-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.item__prod {
    padding: 15px;
    text-align: center;
}
.item__prod figure {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
.item__prod * + * { margin-top: 20px; }
.item__prod h4 { font-size: 20px; }
.graf__prod { position: relative; }
.square {
    position: absolute;
    width: 100%;
    height: 40vh;
    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%);
    z-index: -1;
}
.square img {
    object-position: center;
    object-fit: contain;
    height: 100%;
    margin: 0 auto;
}
.detail__nutri h4 {
    font-size: 24px;
    margin-bottom: 20px;
}
.nutri__tab { color: rgb(var(--negro), 1); }
.nutri__tab table { width: 100%; }
.nutri__tab table tr td {
    padding: 6px;
    line-height: 1.1;
}
.nutri__tab table tr td:nth-child(2) { text-align: right; }
.nutri__tab table tbody tr td:nth-child(1) { color: rgb(var(--negro), .5); }
.nutri__tab table tbody tr + tr td { border-top: 1px dotted rgb(var(--azul_d), .5); }
.nutri__tab:last-child table tbody tr:last-child td { border-bottom: 1px dotted rgb(var(--azul_d), .5); }
.nutri__tab + .nutri__tab {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid rgb(var(--azul_d), .25);
}
.chang__page {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 120px;
    width: 100vw;
    margin-left: 50%;
    margin-bottom: -55px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 100;
    overflow: hidden;
}
.chng__prev { left: 0; }
.chng__next { right: 0; }

/******************************
*   Promos
******************************/
.img__promo {
    position: relative;
    width: 100%;
    padding-top: 100%;
}
.img__promo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.img__promo::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 150vh;
    background: rgb(var(--azul_l), 1);
    left: 0;
    top: 100%;
    z-index: -1;
}
.grid__promo .r__fil .fil__col:nth-child(2),
.grid__promo .r__fil:nth-child(2) { padding: 20px; }
.grid__promo .cta { width: 100%; }
.grid__promo .rec__type { font-size: 80%; }

/******************************
*   Contacto / gracias
******************************/
.log__contc {
    margin: 0 auto;
    width: 70%;
    max-width: 200px;
}
.log__contc + * { margin-top: 30px; }
.data__contac { text-align: center; }
.data__contac a { display: inline-block; }
.data__contac > * + * { margin-top: 8px; }
.data__contac h4 { font-size: 20px; }
.data__contac .link__social li a {
    display: block;
    padding: 6px;
    font-size: 20px;
}
.campo { padding: 15px 0; }

.c__check { padding: 4px 0; }
.c__check label {
    font-weight: normal;
    padding-left: 26px;
    line-height: 1;
    position: relative;
    cursor: pointer;
}
.c__check label input,
.c__check label i {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
}
.c__check label input {
    background: transparent;
    opacity: 0;
}
.c__check label i {
    pointer-events: none;
    z-index: 10;
    border: 1px solid;
}
.c__check label input:checked + i { background: rgb(var(--azul_d), 1); }
.l__game {
    margin: 0 auto;
    width: 120px;
    max-width: 40%;
}
#gracias .sect__tit span {
    display: block;
    font-size: 150%;
}

/******************************
*   Resultados
******************************/
.res__cate + .res__cate { margin-top: 60px; }
.t__res {
    overflow: hidden;
    font-size: 26px;
    margin-bottom: 30px;
}
.t__res span {
    display: inline-block;
    padding-right: 15px;
    position: relative;
}
.t__res span::before {
    content: '';
    position: absolute;
    width: 100vw;
    border-top: 2px solid rgb(var(--azul_d), 1);
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.res__list li + li {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dotted rgb(var(--gris), .8);
}
.res__list li a h3 {
    font-size: 22px;
    margin-bottom: 6px;
}

.cont__pag {
    margin-top: 40px;
    text-align: center;
}
.cont__pag ul li { display: inline-block; }
.cont__pag ul li a {
    display: block;
    padding: 6px;
    font-weight: bold;
    opacity: .7;
}
.cont__pag ul li a:hover { opacity: 1; }
.cont__pag ul li a.arrw { opacity: 1; }

/******************************
*   Retailers
******************************/
.retailers {
    text-align: center;
}
.retail {
    display: inline-block;
    margin: 10px;
}
.retail a { display: block; }
.retail a figure { height: 30px; }
.retail a figure img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

/******************************
*   Redes
******************************/
.img__red figure {
    padding-top: 100%;
    position: relative;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
}
.img__red figure img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/******************************
*   Legal
******************************/
.info__legal h5 {
    font-size: 18px;
    font-family: 'AmsiPro';
    font-weight: bold;
    font-style: normal;
}
.info__legal h5 + p,
.info__legal h5 + ul,
.info__legal h5 + ol,
.info__legal h5 + div { margin-top: 8px; }
.info__legal p + h5,
.info__legal ul + h5,
.info__legal ol + h5,
.info__legal div + h5 { margin-top: 40px; }
.info__legal ul + p,
.info__legal ol + p,
.info__legal p + ul,
.info__legal p + ol,
.info__legal ul + ol,
.info__legal ol + ul,
.info__legal ul + div,
.info__legal ul + div,
.info__legal div + ul,
.info__legal div + ol,
.info__legal div + div,
.info__legal p + div,
.info__legal div + p { margin-top: 20px; }
.info__legal ul li + li,
.info__legal ol li + li { margin-top: 15px; }
.info__legal ul,
.info__legal ol { padding-inline-start: 20px; }
.info__legal ul { list-style: disc; }
.info__legal ol { list-style: decimal; }
.info__legal ul[type='a'],
.info__legal ol[type='a'] { list-style: lower-latin; }
.info__legal ul[type='i'],
.info__legal ol[type='i'] { list-style: lower-roman; }
.info__legal ul li::marker,
.info__legal ol li::marker { color: rgb(var(--dorado), 1); }

.info__legal .cont__tab table thead tr td {
    color: rgb(var(--blanco), 1);
    text-align: center;
}
.info__legal .cont__tab table thead tr td::before { background: rgb(var(--azul_d), 1); }
.info__legal .cont__tab table { width: 100%; }
.info__legal .cont__tab table td {
    position: relative;
    padding: 6px;
}
.info__legal .cont__tab table td::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.info__legal .cont__tab table tr td  { border-bottom: 1px solid rgb(var(--negro), .1); }

/******************************
*   Mobile
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
.grid__list .cint { display: none; }
.img__red:nth-child(2),
.img__red:nth-child(3) { display: none; }
}
@media (min-width : 480px) {
/* Grid */
.content__grid {
    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;
    margin-left: -15px;
    margin-right: -15px;
}
.grid__item { padding: 15px; }
.content__grid.grid__reti .grid__item,
.grid__promo .grid__item { width: 50%; }
.cint { font-size: 20px; }
.grid__list .r__fil:nth-child(1) .fil__col:nth-child(1) { width: 200px; }
.grid__list .r__fil:nth-child(1) .fil__col:nth-child(2) {
    width: calc(100% - 200px);
    padding-left: 30px;
}
.fil__img {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.img__red {
    width: 50%;
    padding: 15px;
}
}
@media (max-width : 679px) {
.col__info:nth-child(1) { padding-top: 60%; }
.fil__images { justify-content: center; }
.img__graf:nth-child(2n + 2) { border-left: 1px solid rgb(var(--blanco), .5); }
.chng__prev { margin-left: -10px; }
.chng__next { margin-right: -10px; }
}
@media (min-width : 680px) {
.h__page {
    height: 45vh;
    height: 45dvh;
}
.head__tit { font-size: 8vmin; }
/* .sect__tit { font-size: 5vmin; } */
.sect__tit { font-size: 46px; }
.block__cols {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.col__info {
    width: 50%;
    min-height: 30vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.block__full,
.col__info:nth-child(2) {
    padding-top: 80px;
    padding-bottom: 80px;
}
.info__txt {
    max-width: 700px;
    width: 80%;
}
.img__graf { width: 33.33%; }
.img__graf:nth-child(3n + 2),
.img__graf:nth-child(3n + 3) { border-left: 1px solid rgb(var(--blanco), .5); }
.chang__page { width: 95vw; }
.retail a figure { height: 40px; }
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
.content__grid .indicatives { font-size: 85%; }
.img__red:nth-child(3) { display: none; }
}
/* Small Devices, Nav */
@media (max-width : 767px) {
.contc__col + .contc__col { margin-top: 30px;}
.campo .cta__01 {
    display: block;
    margin: 0 auto;
}
.cntlors__recip + .cntlors__recip { margin-top: 20px; }
.col__flex + .col__flex { margin-top: 30px; }
.detail__list { display: none; }
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.swiper-controls .a__prev { left: -56px; }
.swiper-controls .a__next { right: -56px; }

.content__grid.grid__reti .c__recipe:hover { filter: drop-shadow(0px 0px 8px rgb(var(--azul_d), .2)); }
.fil__images {
    width: 85%;
    margin: 0 auto;
}
.fil__contact {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    margin-left: -15px;
    margin-right: -15px;
}
.contc__col { padding: 0 15px; }
.contc__col:nth-child(1) { width: 30%; }
.contc__col:nth-child(2) { width: 55%; }
.col__camp {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}
.col__camp > div + div { margin-left: 20px; }
.content__grid.grid__reti .grid__item,
.grid__promo .grid__item { width: 33.33%; }
.c__contrls {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
}
.cntlors__recip + .cntlors__recip { margin-bottom: 20px; }
.cont__filtros {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.filter { padding: 8px; }
.fil____flex {
    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;
    margin: 0 -15px;
}
.col__flex { padding: 0 15px; }
.fil02 .col__flex:nth-child(odd),
.fil03 .col__flex:nth-child(odd) { width: 45%; }
.fil02 .col__flex:nth-child(even),
.fil03 .col__flex:nth-child(even) { width: 55%; }
.fil01 {
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}
.fil01,
.fil02 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.lis__bull { display: inline-table; }
.detail__head { pointer-events: none; }
.detail__head h4 i { display: none; }
.detail__head::after { max-width: 350px; }
.img__red { width: 33.33%; }
}

@media (max-width : 849px) {
.recip__media .swiper-controls { display: none; }
.cont__closr { color: rgb(var(--blanco), 1); }
.med__info {
    position: absolute;
    bottom: 0;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.77) 20%);
    z-index: 100;
}
.med__info .col__content { color: rgb(var(--blanco), 1); }
.btn__rece { margin-left: 15px; }
.btn__rece .cta {
    font-size: 12px;
    padding: 10px;
    min-width: 110px;
}
.descip__detail {
    display: none;
    padding-bottom: 6px;
}
}
@media (min-width : 850px) {
.med__col:nth-child(1) { width: 60%; }
.med__col:nth-child(2) { width: 40%; }
.med__info { background: rgba(var(--blanco), 1); }
.med__info .col__content { padding: 30px; }
.vid__media { width: calc(80% - 35px); }
.info__desc {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding-bottom: 80px;
    position: relative;
}
.btn__rece {
    position: absolute;
    bottom: 0;
    left: 0;
}
.info__recip { grid-area: 1 / 1 / 2 / 2; }
.txt__descrip { grid-area: 3 / 1 / 4 / 2; }
.icon__details { grid-area: 2 / 1 / 3 / 2; }
.descip__show::before { display: none; }
}

/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
/* Large Devices, Wide Screens */
@media (max-width : 991px) {
.detail__col + .detail__col { margin-top: 60px; }
.graf__prod {
    margin: 0 auto;
    width: 400px;
    max-width: 70%;
}
.img__red:nth-child(4) { display: none; }
}
@media (min-width : 992px) {
.prod__detail {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}
.detail__col { padding: 0 20px; }
.col__graf {
    width: calc(40% - 20px);
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 120px;
}
.col__detail { width: calc(60% - 20px); }
.img__red { width: 25%; }
}
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (min-width : 1200px) {
.content__grid.grid__reti .grid__item,
.grid__promo .grid__item { width: 25%; }
}


/******************************
*   Joy
******************************/
.download {
    position: relative;
    width: 70%;
    margin: 20px auto;
}
.download div { padding: 0 1.6vw }
.txt__down { width: 100%; }
.bnt__aps {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

/* Cintillo */
.joy {
    background: var(--j_bg);
    color: rgb(var(--blanco), 1);
    padding: 40px 15px;
    font-family: 'Houschka Pro';
    font-weight: 500;
    font-style: normal;
    text-align: center;
    position: relative;
    z-index: 1;
}
.joy a {
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}
.fil__joy { position: relative; }
.fil__01 strong {
    display: block;
    color: var(--j_ama);
    font-size: 22px;
}
.fil__02 .cta__joy {
    display: inline-block;
    border-radius: 6px;
    background: var(--j_azu);
    font-weight: bold;
    padding: 18px 30px;
    color: var(--j_bg);
    font-size: 20px;
    line-height: 1;
}
.fil__02 strong {
    display: block;
    font-size: 22px;
    color: var(--j_ama);
}
.btn__store {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

/*------------------- Mobile -------------------*/ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
.download > div + div { margin-top: 5%; }
.joy__down {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.icon__app { width: 25%; }
.txt__down { width: 75%; }

.fil__joy + .fil__joy { margin-top: 40px; }
.logo__joy {
    max-width: 170px;
    width: 40%;
    margin: 20px auto;
}
.fil__01 p br { display: none; }
.fil__02 strong { margin: 30px 0; }
.btn__store a + a { margin-left: 30px; }
.btn__store a {
    width: 42%;
    max-width: 150px;
}
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.download {
    position: absolute;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 25%;
    bottom: 6%;
    left: 1%;
    margin: 0;
}
.download div { padding: 0 .5vw }
.txt__down {
    position: absolute;
    width: 100%;
    bottom: calc(100% + 1vw);
}
.txt__down figure { width: 65%; }
/* .joy__down { width: 25%; } */
.bnt__aps { width: 75%; }

.joy > div,
.fil__02 {
    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-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.joy {
    padding-top: 1vw;
    padding-bottom: 1vw;
}    
.logo__joy {
    width: 23%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.fil__01 > div { text-align: left; }
.fil__01 strong {
    font-size: 2.5vw;
    margin-bottom: 1.6vw;
}
.fil__01 p { font-size: 1.9vw; }
.fil__02 .cta__joy {
    font-size: 2vw;
    padding: 2vw 2.3vw;
    border-radius: 1vw;
    margin-right: 5.5vw;
}
.fil__02 strong { font-size: 2.5vw; }
.btn__store { margin-left: 5.3vw; }
.btn__store a { width: 15vw; }
.btn__store a + a { margin-left: 3vw; }
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 768px) and (max-width : 1200px) {
.fil__joy + .fil__joy { margin-top: 4vw; }
.fil__01 {width: 100%; }

.fil__01 > div {
    padding-left: 18%;
    display: inline-block;
    text-align: left;
    position: relative;
}
.logo__joy { width: 20%; }
}
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (min-width : 1200px) {
.fil__joy + .fil__joy { margin-left: 5.5vw; }
.fil__01 { padding-left: 11%; }
.fil__01 strong {
    font-size: 1.5vw;
    margin-bottom: .6vw;
}
.fil__01 p { font-size: 1vw; }
.fil__02 .cta__joy {
    font-size: 1.2vw;
    padding: 1vw 1.3vw;
    border-radius: 0.4vw;
    margin-right: 5.5vw;
}
.fil__02 strong { font-size: 1.5vw; }
.btn__store { margin-left: 3.3vw; }
.btn__store a { width: 10vw; }
.btn__store a + a { margin-left: 3vw; }
}


/******************************
*   Footer
******************************/
.footer {
    background: rgb(var(--azul_d), 1);
    color: rgb(var(--blanco), 1);
    font-family: 'Myriad Pro Light Cond';
    font-weight: bold;
    padding: 30px;
    line-height: 1.3;
}
.footer a {
    display: block;
    text-transform: uppercase;
}
.footer a + a { margin-top: 6px; }
.logo__foo figure {
    /* width: 180px; */
    width: 220px;
    margin: 0 auto;
}

/*------------------- Mobile -------------------*/ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
.footer > div + div { margin-top: 30px; }
.footer > div { text-align: center; }
.footer br { display: none; }
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.footer {
    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-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
.logo__foo {
    width: 100%;
    margin-bottom: 30px;
}
}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) { 
}
@media (min-width : 1999px) {
}

/******************************
*   Header
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) 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) {
}
/* Large Devices, Wide Screens */
@media (max-width : 991px) {
.menu {
    display: none;
    position: absolute;
    background: rgb(var(--azul_d), .9);
    overflow: auto;
    width: 100%;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    top: 100%;
    left: 0;
    z-index: 100;
}
.cont__opt ul li a { padding: 16px; }
.btn__mob { margin-left: 4px; }
}
/* Medium Devices to Large Devices */
@media (min-width : 992px){
.btn__mob { display: none; }
.cont__menu { padding: 15px 20px; }
.cont__opt,
.cont__opt ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.cont__opt ul + ul { margin-left: 66px; }
.cont__opt ul li + li { margin-left: 16px; }
.btn__search {
    position: absolute;
    top: 50%;
    right: 114px;
    padding: 0 12px;
    font-size: 18px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
}
@media (min-width : 992px) and (max-width : 1200px) {
}