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

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

    --ligth: 211, 220, 231;
    --dark: 75, 87, 102;

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

    /* Food */
    --f_bg: 252, 212, 1;
    --f_nar: 247, 128, 1;
    --f_azu: 19, 67, 255;
}

/******************************
*   Reset
******************************/
*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    background: ;
    color: rgb(var(--dark), 1);
    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-weight: 700;
}
input,
select,
textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: rgb(var(--dark), .2);
    -moz-appearance: none;
    -webkit-appearance: none;
}
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 {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    position: relative;
    z-index: 1;
}
.c__center {
    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;
}
main section { position: relative; }
.s__contnt { padding: 60px 0; }

/******************************
*   Themes
******************************/
/*------------------- Theme: Square -------------------*/
.them__01 .cta { border-radius: 6px; }
.them__01 .cont__pag ul li a,
.them__01.cont__pag ul li a  { border-radius: 4px; }

.them__01 .arrow { border-radius: 6px; }

.them__01 .cont__slider .swiper-pagination-bullet { border-radius: 2px; }

.them__01 .btn__view { border-radius: 4px; }

.them__01 input,
.them__01 select { border-radius: 6px; }
.them__01 textarea { border-radius: 6px; }

.them__01 .c__check label input,
.them__01 .c__check label i { border-radius: 3px; }

.them__01 .cta__float a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/*------------------- Theme: Round Min -------------------*/
.them__02 .cta { border-radius: 16px; }
.them__02 .cont__pag ul li a,
.them__02.cont__pag ul li a { border-radius: 8px; }

.them__02 .arrow { border-radius: 16px; }

.them__02 .cont__slider .swiper-pagination-bullet { border-radius: 4px; }

.them__02 .btn__view { border-radius: 10px; }

.them__02 input,
.them__02 select { border-radius: 16px; }
.them__02 textarea { border-radius: 16px; }

.them__02 .c__check label input,
.them__02 .c__check label i { border-radius: 6px; }

.them__02 .cta__float a {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

/*------------------- Theme: Rounder -------------------*/
.them__03 .cta { border-radius: 100px; }
.them__03 .cont__pag ul li a,
.them__03.cont__pag ul li a { border-radius: 50%; }
.them__03 .arrow { border-radius: 50px; }

.them__03 .cont__slider .swiper-pagination-bullet { border-radius: 50%; }

.them__03 .btn__view { border-radius: 50%; }

.them__03 input,
.them__03 select { border-radius: 100px; }
.them__03 textarea { border-radius: 20px; }

.them__03 .c__check label input,
.them__03 .c__check label i { border-radius: 50%; }

.them__03 .cta__float a {
    border-top-left-radius: 1000px;
    border-bottom-left-radius: 1000px;
}

/*------------------- Theme: Border all -------------------*/
.them__b .c__cta .cta,
.them__b .cta,
.them__b a.cta,
.them__b .cont__pag ul li a,
.them__b .arrow,
.them__b a.arrow
{
    border-style: solid;
    border-width: 1px;
    background: rgb(var(--blanco), 1);
    color: rgb(var(--dark), 1);
    border-color: currentcolor;
}
.them__b .cont__slider .swiper-pagination-bullet {
    border-style: solid;
    border-width: 1px;
    background: rgb(var(--blanco), 1);
    color: rgb(var(--dark), 1);
    border-color: currentcolor;
}


.them__b.them__01 .cta,
.them__b .them__01 .cta,
.them__b.them__02 .cta,
.them__b .them__02 .cta,
.them__b.them__03 .cta,
.them__b .them__03 .cta,
.them__b .cont__pag ul li a,
.them__b .them__01 .arrow,
.them__b.them__01 .arrow,
.them__b .them__01 a.arrow,
.them__b.them__01 a.arrow,
.them__b .them__02 .arrow,
.them__b.them__02 .arrow,
.them__b .them__02 a.arrow,
.them__b.them__02 a.arrow,
.them__b .them__03 .arrow,
.them__b.them__03 .arrow,
.them__b .them__03 a.arrow,
.them__b.them__03 a.arrow
{
    border-style: solid;
    border-width: 1px;
    background: rgb(var(--blanco), 1);
    color: rgb(var(--dark), 1);
    border-color: currentcolor;
}
.them__b .them__01 .cont__slider .swiper-pagination-bullet,
.them__b .them__02 .cont__slider .swiper-pagination-bullet,
.them__b .them__03 .cont__slider .swiper-pagination-bullet {
    border-style: solid;
    border-width: 1px;
    background: rgb(var(--blanco), 1);
    color: rgb(var(--dark), 1);
    border-color: currentcolor;
}

/******************************
*   Back Page
******************************/
.bg__page {
    position: fixed;
    z-index: -1;
}
.bg__page > div { position: absolute; }
.bg__page,
.bg__page > div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

/******************************
*   Head Page
******************************/
.h__page {
    position: relative;
    width: 100%;
    /* min-height: 250px; */
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.h__page > * { grid-area: 1 / 1 / 2 / 2; }
.bg__head { position: relative; }
.bg__head figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.bg__head figure:nth-child(1) { position: relative; }
.bg__head figure picture { display: block; }
.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;
}
.txt__head {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    width: 100%;
    padding: 60px 15px;
    text-align: center;
    text-shadow: 0 0 12px rgb(var(--negro), 0.3);
    z-index: 1;
}
.txt__head > * + * { margin-top: 20px; }
.head__tit {
    text-transform: uppercase;
    color: rgb(var(--blanco), 1);
    font-size: 11vmin;
    line-height: 1;
}
.hed__extrct {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    color: rgb(var(--blanco), 1);
}

/******************************
*   Head Section
******************************/
.h__sect + *,
* + .h__sect { margin-top: 60px; }
.h__sect { text-align: center; }
.h__sect > * { line-height: 1.2; }
.h__sect > * + * { margin-top: 14px; }
.sect__tit {
    font-size: 8vmin;   
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.h__sect p {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    width: 90%;
}

/******************************
*   Cont Block
******************************/
.cont__block + * { margin-top: 60px; }
.cont__block .block__cols:nth-of-type(even) { flex-direction: row-reverse; }
.block__full {
    width: 100%;
    background: rgb(var(--dark), 1);
    color: rgb(var(--ligth), 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 + * { 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: 30px; }
.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;
}

/******************************
*   CTA
******************************/
.c__cta { text-align: center; }
.c__cta > div { margin-left: -10px; }
* + .c__cta { margin-top: 40px; }
.c__cta .cta,
.cta,
a.cta { color: rgb(var(--ligth), 1); }
.cta {
    display: inline-block;
    text-align: center;
    padding: 15px;
    line-height: 1;
    font-weight: bold;
    min-width: 150px;
    background: rgb(var(--dark), 1);
    margin: 10px;
    -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;
    cursor: pointer;
}
.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);
}
.cta i + *,
.cta * + i { margin-left: 8px; }

/******************************
*   Arrows: Cambiar
******************************/
.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: 110px;
    width: calc(100vw - 30px);
    padding: 0 15px;
    margin-left: 50%;
    margin-top: 30px;
    margin-bottom: 30px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
    /* overflow: hidden; */
}
.page__chng {
    display: flex;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.chng__prev { left: 15px; }
.chng__next { right: 15px; }
.arrow {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    background: rgb(var(--dark), 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,
a.arrow { color: rgb(var(--ligth), 1); }
.arrow i {
    font-size: 20px;
    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%);
}

/******************************
*   Paginador
******************************/
* + .cont__pag { margin-top: 40px; }
.c__cta + .cont__pag { margin-top: 30px; }
.cont__pag {
    margin-top: 40px;
    text-align: center;
}
.cont__pag ul {
    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-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.cont__pag ul li { margin: 3px; }
.cont__pag ul li a {
    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-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    line-height: 1;
    width: 30px;
    height: 30px;
    background: rgb(var(--dark), .4);
    color: rgb(var(--dark), 1);
}
.cont__pag ul li a i,
.cont__pag ul li i {
    font-size: 20px;
}
.cont__pag ul li a:hover {
    background: rgb(var(--dark), 1);
    color: rgb(var(--ligth), 1);
}

/******************************
*   Sliders
******************************/
.cont__slider + *,
* + .cont__slider { margin-top: 40px; }
.cont__slider {
    position: relative;
    /* padding: 0 45px; */
}
.cont__slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
    bottom: 0;
}
.cont__slider .swiper-pagination-bullet {
    display: inline-block;
    border-radius: 0;
    width: 10px;
    height: 10px;
}
.cont__slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: rgb(var(--dark), 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%;
}
.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%);
    -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;
    z-index: 100;
}
.swiper-controls .a__prev { left: 0px; }
.swiper-controls .a__next { right: 0px; }
.swiper-button-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Slide 01 */
.c__01 .swiper-controls .arrow { top: 35%; }
.slide__01 .item__info {
    /* padding: 0 15px; */
    text-align: center;
}
.slide__01 .item__info figure {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
.slide__01 .item__info a > * + * { margin-top: 20px; }
.slide__01 .item__info h4 { font-size: 20px; }
.slide__01 .item__info h4 span { display: block; }
.slide__01 .item__info h4 span + span { margin-top: 6px; }

/* Slide 02 */
.slide__02 .grid__item { padding: 15px 0; }
.slide__02 .indicatives .icon__indica {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/******************************
*   Reticulas
******************************/
.grid__item { padding: 30px 0; }
/* 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(--dark), .2)); }
.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(--ligth), 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%;
    margin: 0 auto;
}
.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%;
    padding-top: 30px;
    padding-bottom: 30px;
}
.grid__list .grid__item + .grid__item { border-top: 1px dotted rgb(var(--dark), .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%;
}
.img__recipe img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.info__cint {
    position: absolute;
    top: -15px;
    left: 15px;
    padding: 12px 15px;
    background: rgb(var(--dark), 1);
    color: rgb(var(--ligth), 1);
    font-size: 7vmin;
    line-height: 1;
    border-radius: 6px;
    z-index: 1;
    pointer-events: none;
}
.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;
}
.rec__type {
    font-size: 90%;
    line-height: .9;
}
.rec__name { font-size: 18px; }
.icon__recip { margin-left: 15px; }
.separate {
    border-top: 1px solid rgb(var(--dark), .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;
    margin-left: -6px;
}
.indicatives > div { margin: 6px }
.indicatives .icon__indica {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
* + .icon__indica { margin-right: 8px }
.icon__indica + * { margin-left: 8px }
.icon__recip .icon__indica { font-size: 22px; }

/******************************
*   Retiula productos
******************************/
.grid__prod > .grid__item { padding: 0; }
.card__prod {
    text-align: center;
    position: relative;
    z-index: 1;
}
.prod__img { position: relative; }
.prod__img > * {
    display: block;
    padding: 50px 20px;
    position: relative;
}
.prod__info { padding: 25px; }
.prod__info * + .c__cta { margin-top: 20px; }
.prod__info .c__cta .cta,
.prod__info .cta {
    display: block;
    margin: 0;
}
.prod__info .cta + .cta { margin-top: 16px; }

@media (max-width : 679px)  {
.grid__item + .grid__item { margin-top: 40px; }
}
@media (min-width : 680px) {
.grid__prod {
    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;
    gap: 60px 30px;
}
.grid__prod .grid__item { width: calc(33.33% - 20px); } 
}
@media (min-width : 680px) and  (max-width : 992px) {
.grid__prod .grid__item {
    width: calc(50% - 15px);
}
}


/******************************
*   LB WTB
******************************/
.lb__content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgb(var(--negro), .7);
    z-index: 1000;
    overflow: auto;
    display: none;
}
.cont__info {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 0;
    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;
}
.cont__info > * { width: 100%; }
.box__shop {
    margin: 0 auto;
    max-width: 700px;
    width: 100%;
    position: relative;
}
.pleca {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgb(var(--dark), 1);
    position: absolute;
    z-index: 10;
    border-radius: 50%;
}
.closer {
    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%);
    color: rgb(var(--blanco), 1);
    font-size: 25px;
    cursor: pointer;
    line-height: 1;
}
.shop__info {
    position: relative;
    padding: 60px 20px 40px;
    background: rgb(var(--blanco), 1);
    border-radius: 16px;
}
.shop__info > * { position: relative; }
.shop__info .h__sect h2 { font-size: 22px; }
.shop__info .sect__sub { margin-top: 20px; }
.cont__retailrs {
    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: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
}
.cont__retailrs > div {
    max-width: 170px;
    display: inline-block;
    /* padding: 5px; */
}
.cont__retailrs > div a { display: block; }
.cont__retailrs > div a figure {
    height: 40px;
    -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);
    /* -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8); */
}
.cont__retailrs > div a figure img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}
/* .cont__retailrs > div a:hover figure {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
} */

/******************************
*   Controles
******************************/
.c__contrls { margin: 30px 0 40px; }
/************* Vistas *************/
.cont__view {
    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;
}
.btn__view + .btn__view { margin-left: 10px; }
.btn__view {
    display: block;
    width: 35px;
    height: 35px;
    border: 1px solid rgb(var(--dark), 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(--dark), .4); }
.chnge__view.active {
    pointer-events: none;
    color: rgb(var(--ligth), 1);
    background: rgb(var(--dark), 1);
    border-color: rgb(var(--dark), 1);
}
.filter {
    text-align: center;
    position: relative;
    padding: 8px 0;
}
.filter > div { position: relative; }
.filter select {
    padding: 14px 36px;
    background: transparent;
    border: 1px solid rgb(var(--dark), 1);
    line-height: 1;
}
.filter .cta { margin: 0; }
.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: 0px;
    width: 36px;
    text-align: center;
}
.i__r { right: 8px; }

/******************************
*   Reels
******************************/
.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 {
    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 figure { height: 100%; }
.vid__media figure img {
    max-height: 70vh;
    max-height: 70dvh;
}
.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;
}

.recip__media .swiper-pagination-progressbar { background: rgb(var(--blanco), .3); }
.recip__media .swiper-pagination-progressbar-fill { background: rgb(var(--ligth), 1); }

.recip__media .plyr__video-embed,
.recip__media .plyr__video-wrapper--fixed-ratio { aspect-ratio: auto; }


/******************************
*   Info Detail
******************************/
.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;
    line-height: 1;
    font-weight: bold;
    border: 1px solid rgb(var(--dark), 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 { position: relative; }
.btn__share .cta { margin: 0; }
.share__fill {
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    margin-left: -10px;
}
.share__fill > div + div,
.btn__masck.cta { margin: 10px; }
.share__fill > div > div {
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.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; }
.acord + .acord { margin-top: 30px; }
.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(--dark), 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(--dark), .1); }

/******************************
*   Media
******************************/
.cont__media + .cont__media { margin-top: 30px; }
.cont__media span {
    display: block;
    margin-bottom: 6px;
}
.c__video {
    margin-left: auto;
    margin-right: auto;
    width: 130vh;
    max-width: 100%;
}
.c__audio .plyr--audio .plyr__controls {
    padding: 6px;
    border-radius: 6px;
    color: rgba(var(--ligth), 1);
}
.cont__media .plyr__control--overlaid,
.cont__media .plyr--full-ui input[type=range] { color: rgb(var(--ligth), 1); }
.cont__media .plyr--video .plyr__control:focus-visible,
.cont__media .plyr--video .plyr__control:hover,
.cont__media .plyr--video .plyr__control[aria-expanded=true],
.cont__media .plyr--audio .plyr__control:focus-visible,
.cont__media .plyr--audio .plyr__control:hover,
.cont__media .plyr--audio .plyr__control[aria-expanded=true] {
    background: rgb(var(--ligth), 1);
    color: rgb(var(--dark), 1);
}
.cont__media .plyr__control--overlaid,
.cont__media .plyr--audio .plyr__controls { background: rgb(var(--dark), 1); }

/******************************
*   Retailers
******************************/
.retailers {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

.retail {
    margin: 10px;
    max-width: 170px;
}
.retail a { display: block; }
.retail a figure { height: 30px; }
.retail a figure img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

/******************************
*   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(--ligth), 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%;
    margin: 0;
}
.grid__promo .rec__type { font-size: 80%; }

/******************************
*   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(--dark), .5); }
.nutri__tab:last-child table tbody tr:last-child td { border-bottom: 1px dotted rgb(var(--dark), .5); }
.nutri__tab + .nutri__tab {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid rgb(var(--dark), .25);
}

/******************************
*   Redes
******************************/
.item__red a {
    display: block;
    width: 100%;
}
.slide__redes .swiper-horizontal>.swiper-scrollbar,
.slide__redes .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: relative;
    bottom: 0;
    margin-top: 15px;
    left: 0;
    width: 100%;
}
.slide__redes .swiper-scrollbar-drag {
    background: rgb(var(--dark), 1);
}

/******************************
*   Contacto / gracias
******************************/
.data__contac .link__social {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.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(--dark), 1); }
.l__game {
    margin: 0 auto;
    width: 120px;
    max-width: 40%;
}
#gracias .sect__tit span {
    display: block;
    font-size: 150%;
}

/******************************
*  Promocion
******************************/
#promocion .header {
    position: relative;
    position: relative;
    position: relative;
    position: relative;
    position: relative;
    z-index: 100;
    top: 0;
}
#promocion .header .cont__menu {
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0);
}
.loader {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgb(var(--ligth), 1);
    z-index: 1000;
}
.logo__brand {
    width: 100px;
    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%);
}
.opt__sect {
    top: 0px;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    z-index: 300;
    overflow: auto;
    background: rgb(var(--ligth), 1);
    color: rgb(var(--dark), 1);
    text-align: center;
}
.opt__sect::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.opt__sect > div {
    display: inline-block;
    white-space: nowrap;
}
.opt__sect > div ul {
    display: flex;
    justify-content: center;
}
.opt__sect > div ul li a {
    display: block;
    padding: 15px;
    font-weight: bold;
}
.opt__sect > div ul li a:hover {
    background: rgb(var(--dark), 1);
    color: rgb(var(--ligth), 1);
}

/**************** Teaser ****************/
.teaser {
    height: 100vh;
    height: 100dvh;
    background: red;
}
.teaser picture { height: 100%; }
.teaser .graf__hero,
.teaser .graf__hero img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.teaser .download { display: none; }

/**************** Banner ****************/
.graf__hero {
    overflow: hidden;
    height: 100%;
}
.graf__hero,
.graf__hero img { width: 100%; }
.graf__hero picture { display: block; }
.h__ele {
    position: absolute;
    top: 0;
    left: 0;
    top: 0;
}
.h__bg { position: relative; }

/**************** Dinamica ****************/
.item__din > div + div { margin-top: 20px; }
.din__img {
    margin: 0 auto;
    width: 90%;
}
.din__info { text-align: center; }
.consult {
    font-size: 80%;
    margin-top: 15px;
}
.din__info p {
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
}
.din__info .bnt__aps {
    max-width: 300px;
    margin: 20px auto 0;
}

/**************** Premios ****************/
.item__pre { text-align: center; }
.item__pre > div + div { margin-top: 20px; }
.nota {
    text-align: center;
    font-size: 80%;
}
div + .nota { margin-top: 40px; }

/**************** Productos ****************/
.item__pro { text-align: center; }
.item__pro > div + div { margin-top: 20px; }
.item__pro > div:nth-child(1) figure {
    -webkit-transform: rotate(15deg) scale(.6);
    -moz-transform: rotate(15deg) scale(.6);
    -ms-transform: rotate(15deg) scale(.6);
    -o-transform: rotate(15deg) scale(.6);
    transform: rotate(15deg) scale(.6);
    -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);
}
.item__pro > div:nth-child(2) {
    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;
}
.swiper-slide-active .item__pro > div:nth-child(1) figure {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.swiper-slide-active .item__pro > div:nth-child(2) { opacity: 1; }

/**************** Datos ****************/
.datos__content { display: none; }
.datos__content:nth-child(1) { display: block; }
.content__info > div + div { margin-top: 30px; }
.datos__content .cont__pag ul {
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.retail__optins {
    text-align: center;
}
.opt__r.active {
    background: rgb(var(--ligth), 1);
    color: rgb(var(--dark), 1);
    pointer-events: none;
}
.cont__bloques::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.cont__bloques {
    width: 100vw;
    text-align: center;
    white-space: nowrap;
    overflow: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    position: relative;
}
.cont__bloques .cta {
    min-width: initial;
    font-size: 14px;
    margin: 0 0 0 10px;
}
.cont__bloques button.active {
    pointer-events: none;
    background: rgb(var(--ligth), 1);
    color: rgb(var(--dark), 1);
}
.date__block {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}
.cont__tab {
    margin: 0 auto;
    max-width: 600px;
    width: 95%;
    padding-top: 30px;
    border-top: 1px solid rgb(var(--dark), .5);
}
.cont__tab table {
    width: 100%;
}
.cont__tab table thead {
    text-align: center;
    font-weight: bold;
}
.cont__tab table td {
    padding: 10px 8px;
    text-align: center;
}
.cont__faqs {
    margin: 0 auto;
    max-width: 800px;
}
.cont__faqs h3 {
    font-family: 'Open Sans', sans-serif;
    padding: 15px 35px 10px 15px;
    position: relative;
    z-index: 1;
    font-size: 100%;
    font-weight: bold;
}
.cont__faqs div + h3.ui-accordion-header {
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid rgb(var(--dark), .6);
}
.cont__faqs .ui-icon {
    width: 15px;
    padding-top: 15px;
    height: auto;
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    text-indent: 0;
    background-image: none;
}
.cont__faqs .ui-icon::before,
.cont__faqs .ui-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentcolor;
    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%);
    -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);
}
.cont__faqs .ui-icon::after {
    -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);
}
.cont__faqs .ui-state-active .ui-icon::after {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
}
.cont__faqs .ui-accordion-content { padding: 15px 15px 20px; }

.btn__float {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    z-index: 300;
    bottom: 30px;
}
.cta__float {
    position: absolute;
    bottom: 20px;
    right: 0;
}
.cta__float a {
    display: block;
    background: #25d366;
    color: #1c1e21;
    color: rgb(var(--blanco), 1);
    padding: 16px;
    line-height: 1;
    font-weight: bold;
    font-size: 18px;
}

/******************************
*   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 currentcolor;
    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(--dark), .8);
}
.res__list li a h3 {
    font-size: 22px;
    margin-bottom: 6px;
}

/******************************
*   Legal
******************************/
.info__legal h5 {
    font-size: 18px;
    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(--dark), 1); }


/******************************
*   Mobile
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
/************** Reticulas **************/
.grid__list .info__cint { display: none; }
}
@media (min-width : 480px) {
/************** Reticulas **************/
.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__promo {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.grid__item { padding: 15px; }
.content__grid.grid__reti .grid__item, .grid__promo .grid__item { width: 50%; }
.info__cint { font-size: 20px; }
.grid__list .r__fil:nth-child(1) .fil__col:nth-child(1) { width: 200px; }
}

@media (max-width : 679px) {
/************** Cont Block **************/
.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); }
}

@media (min-width : 680px) {
/************** Head Page **************/
/* .h__page,
.bg__head {
    height: 70vh;
    height: 70dvh;
} */
.head__tit { font-size: 7vmin; }
.hed__extrct { font-size: 18px; }

/************** Head Section **************/
.sect__tit { font-size: 46px; }
.h__sect p { font-size: 122%; }

/************** Cont Block **************/
.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: 60px;
    padding-bottom: 60px;
}
.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); }

/************** Retailers **************/
.retail a figure { height: 40px; }

}

/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
/************** Slider **************/
.cont__slider { padding: 0 45px; }

/************** Controles **************/
.cntlors__recip + .cntlors__recip { margin-top: 20px; }

/************** Info Detail **************/
.col__flex + .col__flex { margin-top: 30px; }
.detail__list { display: none; }
}

/* Medium Devices to Large Devices */
@media (min-width : 768px) {
/************** Controles **************/
.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; }
.cont__view {
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

/************** Reticulas **************/
.content__grid.grid__reti .grid__item,
.grid__promo .grid__item { width: 33.33%; }
.content__grid.grid__reti .c__recipe:hover { filter: drop-shadow(0px 0px 8px rgb(var(--dark), .4)); }

/************** Info Detail **************/
.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;
}
.btn__share strong {
    position: absolute;
    bottom: 100%;
    line-height: 1;
}
.lis__bull {
    display: inline-table;
    width: calc(100% - 30px);
}
.detail__head { pointer-events: none; }
.detail__head h4 i { display: none; }
.detail__head::after { max-width: 350px; }

/************** Contacto **************/
.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; }

.arrow {
    width: 45px;
    height: 45px;
}
.arrow i { font-size: 25px; }
}

/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
/************** Slider **************/
.swiper-controls .a__prev { left: -20px; }
.swiper-controls .a__next { right: -20px; }
}
/* Large Devices, Wide Screens */

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

@media (max-width : 991px) {
/************** Detalle Info **************/
.detail__col + .detail__col { margin-top: 60px; }
}
@media (min-width : 992px) {
/************** Detalle Info **************/
.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(30% - 20px);
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 120px;
}
.col__detail { width: calc(70% - 20px); }
}

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

@media (min-width : 1200px) {
.content__grid.grid__reti .grid__item,
.grid__promo .grid__item { width: 25%; } 
}

@media (min-width : 992px) and (max-width : 1200px) {
/************** Slider **************/
.swiper-controls .a__prev { left: -20px; }
.swiper-controls .a__next { right: -20px; }
}
@media (min-width : 1200px) and (max-width : 1299px) {
/************** Slider **************/
.swiper-controls .a__prev { left: -30px; }
.swiper-controls .a__next { right: -30px; }
}
@media (min-width : 1300px) {
.swiper-controls .a__prev { left: -60px; }
.swiper-controls .a__next { right: -60px; }
}



/******************************
*   Joy Download
******************************/
.download {
    position: relative;
    width: 70%;
}
.txt__down { width: 100%; }
.bnt__aps {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}
.bnt__aps > div + div { margin-left: 3vw }

/*------------------- 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 {
    margin: 0 auto;
    padding: 30px 0px 35px;
}
.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%;
    margin-left: 3vw;
}
}
/* 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: 5%;
    left: 2%;
}
.download > div + div { margin-left: 1vw }
.bnt__aps > div + div { margin-left: 1vw }
.txt__down {
    position: absolute;
    width: 100%;
    bottom: calc(100% + 1vw);
}
.txt__down figure { width: 65%; }
.joy__down { width: 25%; }
.bnt__aps { width: 75%; }
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 768px) and (max-width : 1200px) {
}
@media (max-width : 991px) {
}
@media (min-width : 992px) {
#dinamica .arrow { display: none; }
}
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (min-width : 1200px) {
}

/******************************
*   Cintillo
******************************/
.cintillos { background: rgb(var(--dark), 1); }
.cinto + .cinto { margin-top: 10px; }
.cinto {
    width: 100%;
    background: rgb(var(--blanco), 1);
    padding: 20px;
}
.c01 {
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
.cont__log {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.l__re {
    width: 120px;
    margin: 6px;
}
.l__re figure {
    width: 100%;
    height: 40px;
}
.l__re figure img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.cc_02 { text-align: center; }
.cc_02 a {
    display: inline-block;
    border-radius: 6px;
    font-weight: bold;
    padding: 16px 25px;
    color: rgb(var(--blanco), 1);
    line-height: 1;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}
.cc_02 a + a { margin-left: 20px; }
.cat01 { background: rgb(var(--dark), 1); }
.cat02 { background: rgb(var(--dark), 1); }


/*------------------- 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) {
.cinto { text-align: center; }
.cont__log {
    width: 100%;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.cont__log > div figure img {
    object-fit: contain;
    object-position: center center;
    height: 100%;
}
.col__cin + .col__cin,
.c02__col + .c02__col { margin-top: 30px; }
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.cinto { padding: 1vw 0; }
.c02 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
.cc_01 { font-size: 1.8vw; }
.c02__col {
    width: 50%;
    padding: 0 1vw;
}
.cc_02 a {
    font-size: 1.5vw;
    padding: 1.5vw 1.8vw;
    border-radius: 1vw;
}
.cc_02 a + a { margin-left: 1.3vw; }
/* .l__re figure { height: 2vw; } */
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
.c02__col { padding: 0 20px; }
/* .l__re figure { height: 4vw; } */
}
/* Large Devices, Wide Screens */
@media (min-width : 768px) and (max-width : 1200px) {
.cinto { padding: 2vw 0; }
/* .c01 {
    margin: 0 auto;
    width: 60%;
} */
.c02 { margin-top: 3vw; }
.cont__log > div + div { margin-left: 2vw; }
}
@media (min-width : 992px) and (max-width : 1200px) { 
}
@media (min-width : 1200px) {
.cinto {
    padding: 1vw 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.c01 {
    width: 40%;
    padding-right: .5vw;
}
.cont__log { padding: 0 1vw; }
.cont__log > div + div { margin-left: 0.6vw; }
.c02 {
    width: 60%;
    border-left: 1px solid;
    padding-left: 0.5vw;
}
.cc_01 { font-size: 1vw; }
.cc_02 a {
    font-size: 1vw;
    padding: 1vw 1.3vw;
    border-radius: 0.4vw;
}
}

/******************************
*   Joy
******************************/
.joy {
    background: var(--j_bg);
    color: rgb(var(--blanco), 1);
    padding: 30px 15px 40px;
    font-family: 'Houschka Pro';
    font-weight: 500;
    font-style: normal;
    text-align: center;
}
.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) {
.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%; }

.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){
.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: 3vw 15px; }    
.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) {
.joy { padding: 1vw 15px; }
.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; }
}


/******************************
*   Food for Joy
******************************/
.food__joy {
    background: rgb(var(--f_bg), 1);
    color: rgb(var(--blanco), 1);
    padding: 30px 15px 40px;
    font-family: 'Houschka Pro';
    font-weight: 500;
    font-style: normal;
    text-align: center;
}
.food__joy a {
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}
.fil__food > div * { line-height: 1.2; }
.filf__02 {
    color: rgb(var(--f_nar), 1);
    font-weight: 500;
}
.filf__02 strong {
    display: block;
    font-size: 22px;
    color: rgb(var(--f_azu), 1);
    margin-bottom: 12px;
}
.filf__03 .cta__food {
    display: inline-block;
    line-height: 1;
    font-size: 20px;
    font-weight: bold;
    padding: 18px 30px;
    border-radius: 1000px;
    color: rgb(var(--blanco), 1);
    background: rgb(var(--f_nar), 1);
    white-space: nowrap;
}

/*------------------- 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) {
.fil__food + .fil__food { margin-top: 30px; }
.logo__food {
    max-width: 180px;
    width: 50%;
    margin: 20px auto;
}
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.food__joy > div {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-around;
    -webkit-justify-content: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.food__joy { padding: 3vw 15px; }
.filf__01 { width: 13%; }
.filf__02 strong { font-size: 2.5vw; }
.filf__02 p { font-size: 1.9vw; }
.filf__03 .cta__food {
    font-size: 2vw;
    padding: 2vw 2.3vw;
    margin-right: 5.5vw;
}
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 768px) and (max-width : 1200px) {
.filf__02 strong { margin-bottom: 1.2vw; }
.fil__food + .fil__food { margin-left: 3%; }
}
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (min-width : 1200px) {
.food__joy { padding: 1vw 15px; }
.filf__01 { width: 8%; }
.filf__02 > 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;
}
.filf__02 > div * + * { margin-left: 1%; }
.filf__02 strong {
    font-size: 1.5vw;
    margin: 0;
}
.filf__02 p { font-size: 1.1vw; }
.filf__03 .cta__food {
    font-size: 1.2vw;
    padding: 1vw 1.3vw;
    margin-right: 5.5vw;
}
}



/******************************
*   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(--dark), 1);
    color: rgb(var(--ligth), 1);
    padding: 8px 10px;
    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;
    -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 {
    position: absolute;
    overflow: hidden;
    left: 20px;
}
.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-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.link__social li.follow {
    width: 100%;
    font-weight: bold;
    padding: 0 12px 6px;
}
.link__social li a { font-size: 20px; }
.cont__opt { font-size: 18px; }
.cont__opt ul li { overflow: hidden; }
.cont__opt ul li div a {
    display: block;
    font-weight: 500;
    line-height: 1;
}
.cont__opt ul.opt__list li div a { padding: 12px; }
.cont__opt ul.link__social li div a { padding: 12px; }
.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;
}
.cont__opt .btn__search {
    margin-right: 6px;
    padding: 0 12px;
}
.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,
.close__men span { background: rgb(var(--ligth), 1); }
.btn__mob .bars span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    -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; }
.close__men {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.close__men span {
    position: absolute;
    display: block;
    width: 80%;
    height: 2px;
    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%);
}
.close__men span:nth-child(1) {
    -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);
}
.close__men span:nth-child(2) {
    -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);
}
.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(--dark), 1);
    color: rgb(var(--dark), 1);
    padding-right: 40px;
}
.search__camp button {
    position: absolute;
    top: 0;
    right: 0;
    color: rgb(var(--dark), 1);
    height: 100%;
    width: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*------------------- Mobile 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) {
#srch__d { display: none; }
.menu {
    display: none;
    position: absolute;
    background: rgb(var(--dark), 1);
    overflow: auto;
    width: calc(100% - 18px);
    height: 100vh;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
}
.cont__opt { padding: 60px 30px; }
.cont__opt ul li a { padding: 16px; }
.opt__list li div a i { margin-right: 5px; }
.btn__mob { margin-left: 4px; }
.cont__opt ul + *,
.cont__opt * + ul { margin-top: 30px; }
}
/* Medium Devices to Large Devices */
@media (min-width : 992px){
.btn__mob,
#srch__m,
.opt__list li div a i,    
.link__social li.follow,
.close__men { display: none; }
.cont__menu { padding: 0 10px 0 0; }
.cont__opt,
.cont__opt ul {
    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;
}
.cont__opt { text-align: center; }
.cont__opt ul.opt__list li div a { padding: 27px 10px; }
.cont__opt ul.link__social li div a { padding: 8px; }
.link__social {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
}
@media (min-width : 992px) and (max-width : 1200px) {
}


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

/*------------------- Mobile Footer -------------------*/ 
@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 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) {
}