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

:root {
    --black: 0, 0, 0; /* #000000 */
    --white: 255, 255, 255; /* #FFFFFF */

    --orange_alter: 255, 126, 5;
    --orange: 227, 105, 29; /* #E3691D */
    --yellow: 249, 231, 59; /* #F9E73B */
    --near_b: 39, 37, 31;/* #27251f */
    --gray_d: 112, 112, 112; /* #707070 */
    --gray_l: 215, 216, 215; /* #D7D8D7 */

    /* Products */
    --bolitas: 195, 59, 52; /* #C33B34 */
    --colmillos: 35, 53, 93; /* #23355D */
    --flamin_hot: 103, 47, 106; /* #672F6A */
    --torciditos: 204, 74, 39; /* #CC4A27 */
    --nacho: 75, 166, 91; /* #4BA65B */
    --palomitas: 33, 33, 33; /* #212121 */
    --poff: 46,108, 177; /* #2E6CB1 */

    --cheese_g: linear-gradient(to bottom,  rgba(255,212,19,1) 1%,rgba(243,111,33,1) 100%); /* #F36F21 - #FFD413 */
    --orange_d: 160, 56,4; /* #A03804 */

    --swiper-navigation-color: rgb(var(--near_b));

    --plyr-color-main: rgb(var(--yellow), 0.5);
    --plyr-video-control-color: rgb(var(--yellow));
    --plyr-video-control-color-hover: rgb(var(--white));
}

::selection {
    color: rgba(var(--white), 1);
    background: rgb(var(--black), 1);
}
::-moz-selection {
    color: rgba(var(--white), 1);
    background: rgba(var(--black), 1);
}
::-webkit-selection {
    color: rgba(var(--white), 1);
    background: rgba(var(--black), 1);
}

/******************************
*   Reset
******************************/
*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
html {
    scroll-behavior: smooth;
    scroll-padding: 90px;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: 'Galano Grotesque';
    font-weight: normal;
    font-style: normal;
    line-height: 1.6;
    font-size: 16px;
    color: rgb(var(--white), 1); 
    background: rgb(var(--orange_alter), 1); 
}
 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;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
ul,
ol {
    margin: 0;
    padding: 0;
    padding-inline-start: 20px;
}
li + li { margin-top: 15px; }
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    margin: 0;
}
input,
select,
textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    color: rgb(var(--near_b), 1);
    background: rgba(var(--white), 0);
    border: 2px solid rgb(var(--orange), 1);
    border-radius: 1000px;
    -moz-appearance: none;
    -webkit-appearance: none;
}
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--near_b));
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
input::placeholder,
textarea::placeholder { color: rgb(var(--near_b), .8); }
button { background: transparent; }
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }

strong { font-weight: 600; }
p { margin: 0; }
p + *,
* + p,
* + ol,
* + ul { margin-top: 20px; }
ol + *,
ul + *,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 { margin-top: 40px; }

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

/******************************
*   Loader
******************************/
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.loader svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: rgb(var(--orange_alter), 1);
}
.cont__logo {
    width: 250px;
    max-width: 50%;
    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%);
}

/******************************
*   General
******************************/
body { position: relative; }
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/trama-mob.webp') center top;
    background-size: 100%;
    mix-blend-mode: color-dodge;
    will-change: filter;
    opacity: .2;
    z-index: -1;
}
main {
    min-height: calc(100vh - 80px);
    position: relative;
    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;
    position: relative;
}
main > * { width: 100%; }
main section {
    padding: 60px 0;
    position: relative;
}

.bg__motitas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .7;
    overflow: hidden;
    mix-blend-mode: soft-light;
    will-change: filter;
    z-index: -1;
}
.bg__motitas > div figure {
    mix-blend-mode: soft-light;
    will-change: filter;
}
.m__shape { position: absolute; }
.m__01 {
    width: 10%;
    min-width: 70px;
    left: 12%;
    top: 4%;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.m__02 {
    width: 18%;
    min-width: 90px;
    left: 40%;
    top: -100px;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.m__03 {
    width: 8%;
    min-width: 50px;
    left: 80%;
    top: 10%;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}

.main__content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    z-index: 1;
}
.main__content > * { grid-area: 1 / 1 / 2 / 2; }
.bg__page {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bg__elemnts {
    width: 100%;
    height: 100%;
    background: rgb(var(--white), 1);
    overflow: hidden;
    position: relative;
}
.main__content section {
    padding-top: 90px;
    min-width: 0;
    color: rgb(var(--near_b), 1);
    overflow: hidden;
}
.sect__yellow {
    background: rgb(var(--yellow), 1);
    color: rgb(var(--near_b), 1);
    overflow: hidden;
    position: relative;
    margin-top: -10%;
    padding-top: calc(10% + 30px);
}
.sect__yellow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/trama-mob.webp') center;
    background-size: 100%;
    mix-blend-mode: soft-light;
    will-change: filter;
    opacity: .8;
}
.sect__yellow > * { position: relative; }
.sect__yellow .h__sect h2,
.sect__yellow .h__sect h3 { color: rgb(var(--near_b), 1); }
.sect__yellow .card__content a:hover .card::after { border-color: rgb(var(--orange_alter), 1); }

.bg__yellow {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    mix-blend-mode: color-burn;
    opacity: .8;
}
.b01 { height:100%; }
.b02 { padding-top: 85%; }
.y__shape {
    position: absolute;
}
.sha__01 {
    width: 12%;
    min-width: 80px;
    top: 9%;
    left: 5%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sha__02 {
    width: 10%;
    min-width: 50px;
    top: 4%;
    right: 5%;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}
.sha__03 {
    width: 18%;
    min-width: 150px;
    top: 31%;
    left: 50%;
    -webkit-transform: rotate(32deg);
    -moz-transform: rotate(32deg);
    -ms-transform: rotate(32deg);
    -o-transform: rotate(32deg);
    transform: rotate(32deg);
}
.sha__04 {
    width: 13%;
    min-width: 80px;
    top: 49%;
    left: 10%;
    -webkit-transform: rotate(-31deg);
    -moz-transform: rotate(-31deg);
    -ms-transform: rotate(-31deg);
    -o-transform: rotate(-31deg);
    transform: rotate(-31deg);
}
.sha__05 {
    width: 20%;
    min-width: 130px;
    top: 74%;
    left: 70%;
    -webkit-transform: rotate(22deg);
    -moz-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    -o-transform: rotate(22deg);
    transform: rotate(22deg);
}
.sha__06 {
    width: 12%;
    min-width: 100px;
    top: 88%;
    left: 21%;
    -webkit-transform: rotate(41deg);
    -moz-transform: rotate(41deg);
    -ms-transform: rotate(41deg);
    -o-transform: rotate(41deg);
    transform: rotate(41deg);
}

/* Wave */
.cont__wave { position: relative; }
.w__top { margin-bottom: -2px; }
.w__bot { margin-top: -2px; }
.cont__wave > div { min-width: 680px; }
.cont__wave svg {
    display: block;
    width: 100%;
}
.motita {
    position: absolute;
    width: 8%;
    min-width: 56px;
}
.motita_2  {
    width: 12%;
    min-width: 66px;
}
.tall .motita_1:nth-child(1) {
    left: 20%;
    top: 20%;
}
.tall .motita_1:nth-child(2) {
    left: 65%;
    top: 10%;
}
.tall .motita_1:nth-child(3) {
    top: 60%;
    left: 70%;
}
.tall .motita_1:nth-child(4) {
    top: 30%;
    left: -4%;
}
.tall .motita_1:nth-child(5) {
    top: 76%;
    left: 18%;
}
.tall .motita_1:nth-child(6) {
    top: 31%;
    left: 71%;
}
.tall .motita_2:nth-child(7) {
    top: 34%;
    right: -3%;
}
.tall .motita_2:nth-child(8) {
    top: 40%;
    left: 34%;
}
.tall .motita_2:nth-child(9) {
    top: 60%;
    left: -3%;
}
.tall .motita_2:nth-child(10) {
    top: 80%;
    left: 86%;
}
.tall .motita_2:nth-child(11) {
    top: 80%;
    left: 40%;
}
.tall .motita_2:nth-child(12) {
    top: 0%;
    left: -4%;
}
.short .motita_1:nth-child(1) {
    left: 20%;
    top: 20%;
}
.short .motita_1:nth-child(2) {
    left: 65%;
    top: 10%;
}
.short .motita_1:nth-child(3) {
    top: 60%;
    left: 70%;
}
.short .motita_2:nth-child(4) {
    top: 34%;
    right: -3%;
}
.short .motita_2:nth-child(5) {
    top: 40%;
    left: 34%;
}
.short .motita_2:nth-child(6) {
    top: 60%;
    left: -3%;
}

/* Head Section */
* + .h__sect { margin-top: 120px; }
.h__sect + * { margin-top: 40px; }
.h__sect > * + *{ margin-top: 0; }
.h__sect h2,
.h__sect h3 {
    text-align: center;
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    color: rgb(var(--orange), 1);
}
.h__sect h2 i,
.h__sect h3 i {
    display: block;
    font-style: normal;
}
.h__sect h2 i { font-size: 11vw; }
.h__sect h3 i { font-size: 7vw; }
.cont__curv {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.cont__curv > * { grid-area: 1 / 1 / 2 / 2; }
.h__sect h2 > * + * { margin-top: -3%; }
.h__sect h2 .cont__curv {
    font-size: 13vw;
    font-family: 'Cheetos Curvy';
    font-weight: normal;
    font-style: normal;
}
.h__sect h2 .curve__line div > * {
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: rgb(var(--orange), 1);
    color: rgb(var(--orange), 1);
}
.h__sect h2 .curve__text div > * {
    background: var(--cheese_g);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h__sect p { text-align: center; }

/* CTA */
.c__cta + *,
* + .c__cta { margin-top: 40px; }
.c__cta {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    gap: 15px;
}
.cta__center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.cta,
a.cta {
    display: inline-flex;
    gap: 14px;
    line-height: 1;
    padding: 14px 18px;
    border: 2px solid;
    border-radius: 100px;
    border-color: rgb(var(--orange), 1);
    color: rgb(var(--orange), 1);
    font-weight: 600;
    text-transform: uppercase;
}
.cta:hover {
    background: rgb(var(--orange), 1);
    text-decoration: none;
}
.cta:active,
.cta:focus {
    background: rgb(var(--orange_d), 1);
    border-color: rgb(var(--orange_d), 1);
}
.cta:hover,
.cta:active { color: rgb(var(--white), 1); }
.cta i {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
main a {
    text-decoration: underline;
    color: rgb(var(--orange), 1);
    font-weight: 600;
}
main a:hover {
    text-decoration: underline;
    color: rgb(var(--orange_d), 1);
}

.fil__section + * { margin-top: 60px; }

.indi__01 > *:nth-child(1),
.indi__02 > *:nth-child(-n+2),
.indi__03 > *:nth-child(-n+3),
.indi__04 > *:nth-child(-n+4),
.indi__05 > *:nth-child(-n+5) { color: rgb(var(--yellow), 1); }

.info__recipe .indi__01 > *:nth-child(1),
.info__recipe .indi__02 > *:nth-child(-n+2),
.info__recipe .indi__03 > *:nth-child(-n+3),
.info__recipe .indi__04 > *:nth-child(-n+4),
.info__recipe .indi__05 > *:nth-child(-n+5) {
    --red: 255, 66, 28;
    color: rgb(var(--red), 1);
}

.swiper-pagination {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.swiper-pagination .swiper-pagination-bullet {
    width: 80px;
    height: 3px;
    border-radius: 0;
}
.box__border .swiper-pagination {
    position: absolute;
    height: 40px;
    padding: 0 15px;
    bottom: 0;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
.swiper-pagination .swiper-pagination-bullet { background: rgb(var(--near_b), 1); }
.box__border .swiper-pagination .swiper-pagination-bullet { background: rgb(var(--white), 1); }
.box__border .swiper-pagination .swiper-pagination-bullet-active { background: rgb(var(--yellow), 1); }


/******************************
*   Home
******************************/
.cheetos__formas {
    position: absolute;
    width: 50%;
    height: 56%;
    pointer-events: none;
}
.cont01 {
    top: 0;
    left: 0;
}
.cont02 {
    top: 0;
    right: 0;
}
.cont03 {
    bottom: 0;
    left: 0;
}
.cont04 {
    bottom: 0;
    right: 0;
}
.cheeto {
    position: absolute;
    min-width: 40px;
    width: 3.5vw;
    filter: drop-shadow(0px 0px 10px rgb(var(--negro), .2));
    will-change: filter;
}

#home main { overflow: hidden; }
#home .bg__page image,
#home .bg__page .motita { display: none; } 

.inicio {
    text-transform: uppercase;
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70vh;
}
.inicio .cheetos__formas { z-index: -1 }
.cont__ini {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
}
.text__welcome {
    text-align: center;
    font-size: 9vw;
    line-height: 1;
    filter: drop-shadow(0px 0px 10px rgb(var(--orange), 1));
}
.text__welcome > div {
    display: inline-block;
    overflow: hidden;
}
.text__welcome > div span { display: inline-block; }
.text__queso {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 10vw;
    font-family: 'Cheetos Curvy';
    font-weight: normal;
    font-style: normal;
    font-size: 24vw;
    line-height: 1;
    display: flex;
    width: 100vw;
    z-index: -1;
    filter: drop-shadow(0px 0px 10px rgb(var(--orange), 1));
    will-change: filter;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.text__queso > * {
    overflow: hidden;
    width: 50%;
}
.mar__mask {
    width: 100vw;
    padding-bottom: 3vw;
}
.quso__01 { padding-left: 50%; }
.queso__marquee span {
    display: inline-block;
    -webkit-text-stroke-width: .2vw;
    -webkit-text-stroke-color: rgb(var(--white), 1);
    padding-bottom: 3vw;
}
.quso__01 span {
    color: transparent;
    background: url('../img/bg-queso.svg') no-repeat center;
    background-size: cover;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.grupo__empa {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.arrow {
    position: absolute;
    bottom: 5%;
    left: 100%;
    width: 50%;
}
.glow {
    position: absolute;
    top: 50%;
    left: 50%;
}
.glow__empa {
    width: 170%;
    -webkit-transform: translate(-50%, -50%) rotate(6deg);
    -moz-transform: translate(-50%, -50%) rotate(6deg);
    -ms-transform: translate(-50%, -50%) rotate(6deg);
    -o-transform: translate(-50%, -50%) rotate(6deg);
    transform: translate(-50%, -50%) rotate(6deg);
}
.glow__cheeto {
    opacity: .7;
    width: 120%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.img__paque {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.img__paque > * {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
}
.img__prod {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.img__prod > * { grid-area: 1 / 1 / 2 / 2; }
.cont__cheetos {
    position: absolute;
    width: 27%;
    bottom: 26%;
    left: 3%;
}
.img__prod {
    width: 55%;
    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%);
}
.img__prod > div {
    filter: drop-shadow(0px 0px 20px rgb(var(--yellow), .7));
    will-change: filter;
}
.img__prod > div figure {
    filter: drop-shadow(0px 0px 5px rgb(var(--orange_alter), 1));
    will-change: filter;
}
.img__paque > div figure {
    filter: drop-shadow(0px 0px 20px rgb(var(--black), .4));
    will-change: filter;
}
.img__prod div,
.img__paque div { opacity: 0; }
.bg__inicio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;
    opacity: .6;
    z-index: -1;
    mix-blend-mode: soft-light;
    will-change: filter;
    overflow: hidden;
}
.ini__moti figure {
    mix-blend-mode: soft-light;
    will-change: filter;
}
.ini__moti { position: absolute; }
.mo__01 {
    width: 10%;
    top: 5%;
    left: 8%;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
}
.mo__02 {
    width: 15%;
    top: -10%;
    left: 40%;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.mo__03 {
    width: 8%;
    top: 15%;
    right: 12%;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}
.mo__04 {
    width: 12%;
    top: 40%;
    left: 15%;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.mo__05 {
    width: 15%;
    top: 45%;
    right: 20%;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}

/* Home: Slider */
.slider {
    position: relative;
    z-index: 3;
}
.slider__hero .swiper-button-next,
.slider__hero .swiper-button-prev {
    font-weight: bold;
    color: rgb(var(--white), 1);
}
.slide__hero {
    width: 80%;
    margin: 0 auto;
}
.slide__hero a:hover {
    color: rgb(var(--white), 1);
    text-decoration: none;
}
.slide__hero .hero__info {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.slide__hero .hero__info > * {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    z-index: 1;
}
.ingo__img { width: 100%; }
.ingo__img > * {
    position: relative;
    width: 100%;
    height: 100%;
}
.ingo__img > *::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgb(var(--near_b), 0) 0%, rgb(var(--near_b), 1) 100%);
    opacity: .9;
    -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;
}
.ingo__img > * img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.info__text {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
.info__text > div {
    padding: 15px 20px;
    text-align: center;
}
.info__text > div h2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    color: rgb(var(--white), 1);
    font-size: 20px;
}
.info__text > div h2 > * { grid-area: 1 / 1 / 2 / 2; }
.info__text > div h2 > *:nth-child(1) {
    -webkit-text-stroke-width: 6px;
    -webkit-text-stroke-color: rgb(var(--near_b), 1);
    color: rgb(var(--near_b), 1);
}

/* Home: Productos */
.productos {
    padding-top: 0;
    position: relative;
    z-index: 2;
}
.productos .bg__page {
    position: absolute;
    top: -28%;
    left: 0;
    bottom: -5%;
    right: 0;
}
.productos .container {
    width: 100%;
    padding: 0;
}

/* Home: Social Media */
.social {
    /*margin-top: -12%;*/
    padding-top: calc(13% + 30px);
    position: relative;
}
* + .head__social,
.head__social + * { margin-top: 80px; }
.head__social {
    font-size: 28px;
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    gap: 30px;
}
.head__social > * {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.user__img {
    width: 70px;
    position: relative;
}
.user__img::after {
    content: '';
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    position: absolute;
    border: 3px solid rgb(var(--white), 1);
}
.user__img figure {
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.user__img figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.social__cta a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: rgb(var(--near_b), 1);
    color: rgb(var(--yellow), 1);
    text-transform: uppercase;
    line-height: 1;
    padding: 8px 16px;
    border-radius: 6px;
    overflow: hidden;
}
.social__cta a > * { position: relative; }
.icon__social {
    width: 30px;
    height: 30px;
    color: rgb(var(--near_b), 1);
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.icon__social > * { position: relative; }
.icon__social::before {
    position: absolute;
    content: '';
    border-radius: 50%;
    background: rgb(var(--yellow), 1);
    width: 100%;
    height: 100%;
    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 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;
}
.social__cta a:hover {
    color: rgb(var(--yellow), 1);
    background: transparent;
    text-decoration: none;
}
.social__cta a:hover .icon__social { color: rgb(var(--yellow), 1); }
.social__cta a:hover .icon__social::before {
    background: rgb(var(--orange_alter), 1);
    -webkit-transform: translate(-50%, -50%) scale(10);
    -moz-transform: translate(-50%, -50%) scale(10);
    -ms-transform: translate(-50%, -50%) scale(10);
    -o-transform: translate(-50%, -50%) scale(10);
    transform: translate(-50%, -50%) scale(10);
}
.card__social a { display: block; }
.card__social figure {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}
.card__social figure::before,
.card__social figure::after,
.card__social figure img {
    -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;
}
.card__social figure::before,
.card__social figure::after {
    position: absolute;
    content: '';
    z-index: 1;
}
.card__social figure::before {
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
}
.card__social figure::after {
    font-weight: 400;
    font-family: "Font Awesome 6 Brands";
    font-size: 26px;
    bottom: 15px;
    left: 15px;
    color: rgb(var(--white), 1);
    line-height: 1;
}
.slide__social__01 .card__social figure::after { content: "\f16d"; }
.slide__social__02 .card__social figure::after { content: "\e07b"; }
.slide__social__02 .card__social figure  { padding-top: 140%; }
.card__social figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/******************************
*   Productos
******************************/
/* Producto simple */
.cont__prod {
    width: 100%;
    position: relative;
    z-index: 1;
    /* border: 1px solid; */
}
.cont__prod img {
    width: 100%;
    max-width: inherit;
}
.cont__prod figure figcaption,
.producto__name figcaption,
.producto__graf figcaption { display: none; }
.prod__huella {
    width: 100%;
    position: absolute;
    top: 55%;
    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%);
    pointer-events: none;
}
.prod__ele {
    pointer-events: none;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.cont__prod .ele02  { z-index: 10; }
.product {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    position: relative;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product figure,
.product figure img {
    position: relative;
    z-index: 1;
}
.graf__sombra {
    display: block;
    position: relative;
    margin-top: -4%;
    margin-left: -4%;
    margin-right: -4%;
    padding-top: 11%;
    border-radius: 100%;
    background: rgb(var(--black), 1);
    filter: blur(10px);
    opacity: .6;
    will-change: filter;
}
.producto__name { padding-top: 26%; }
figure.producto__name img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Grid Productos */
.grid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    gap: 80px 0;
}
.grid__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.grid__item .product {
    flex-direction: column-reverse;
    gap: 0;
}
.grid__item .prod__huella { top: 40%; }
.grid__item .prod__ele {
    top: 0;
    bottom: inherit;
}

/* Slider Productos */
.swiper__show { overflow: visible; }
.prod__slide .swiper-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.prod__more .swiper-wrapper {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}
.show-arrows .swiper-button-next,
.show-arrows .swiper-button-prev { display: none; }

.prod__content {
    -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);
}
.prod__content a { display: block; }
.prod__content a .cont__prod .prod__ele {
    filter: drop-shadow(0px 0px 15px rgb(var(--orange), .6));
    will-change: filter;
}

/******************************
*   Productos Home
******************************/
#page-products .container { width: 90%; }


/* Grid productos */
.grid .prod__content {
    width: 90%;
    margin: 0 auto;
}

/******************************
*   Producto Detalle
******************************/
.prod__detail {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.detail__col .cont__prod {
    margin: 0 auto;
    width: 90%;
}
.detail__col .cont__prod .prod__ele {
    filter: drop-shadow(0px 0px 5px rgb(var(--near_b), .4)); 
    will-change: filter;
}
.detail__col h2  { text-transform: uppercase; }
.detail__col .c__cta .cta { color: rgb(var(--white), 1); }
.detail__col > .producto__name {
    padding-top: 15%;
    filter: drop-shadow(0px 0px 10px rgb(var(--black), .2)); 
    will-change: filter;
}
.detail__col > figure.producto__name img { object-position: left; }
.opt__info { display: none; }
.acor__opt + .acor__opt { margin-top: 10px; }
.opt__title {
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid;
}
.opt__title span:nth-child(1) {
    text-transform: uppercase;
    font-family: 'Galano Grotesque';
    font-weight: 500;
}
.arrw {
    width: 15px;
    height: 15px;
    position: relative;
}
.arrw::before,
.arrw::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    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);
}
.arrw::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);
}
.active .arrw::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);
}
.opt__txt { padding: 12px 0; }

/* .prod__more .prod__content {
    margin: 0 auto;
    width: calc(100% - 80px);
} */
.prod__more .cont__prod .product {
    flex-direction: column-reverse;
    gap: 0;
}
.prod__more .prod__huella { top: 40%; }
.prod__more .prod__ele {
    top: 0;
    bottom: inherit;
}
#page-product-detail main {
    overflow: hidden;
    filter: drop-shadow(0 0 10px rgb(var(--yellow), .4));
    will-change: filter;
}
#page-product-detail .bg__page {
    -webkit-mask-image: url('../img/bg-mask.svg');
    mask-image: url('../img/bg-mask.svg');
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
}
#page-product-detail .bg__content {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bg__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/ruido.svg') center;
    width: 100%;
    height: 100%;
}
#page-product-detail .fil__section,
#page-product-detail .footer {
    position: relative;
    z-index: 1;
}

/******************************
*  Grid / Cards
******************************/
.cards__slide .swiper-scrollbar {
    position: relative !important;
    margin-top: 25px;
    top: inherit;
    bottom: inherit;
    height: 6px;
    background: rgb(var(--orange_d), .2);
}
.cards__slide .swiper-scrollbar-drag { background: rgb(var(--orange), 1); }
.grid__cards {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.grid__rece .box__titulo { text-transform: uppercase; }
.grid__blog .card__info {
    position: relative;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}
.card__content a { font-weight: 500; }
.card__content a:hover { text-decoration: none; }
.card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    
    position: relative;
}
.card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-width: 4px;
    border-style: solid;
    border-color: rgb(var(--near_b), 1);
    border-radius: 28px;
    -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;
    pointer-events: none;
}
.card > div {
    grid-area: 1 / 1 / 2 / 2;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    position: relative;
}
.card__graf { padding-top: 130%; }
.card__graf figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
}
.card__graf figure::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: linear-gradient(to bottom,  rgb(var(--black),0) 0%, rgb(var(--black), .9) 100%);
    opacity: .6;
    -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;
}
.card__graf figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -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;
}
.card__info {
    position: relative;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}
.card__info > div {
    padding: 20px;
    color: rgb(var(--white), 1);
}
.type {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(var(--yellow),1);
    border-radius: 50%;
    margin: 0 0 0 auto;
    -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);
}
.type > * { width: 70%; }
.info__box { line-height: 1.2; }
.info__box > * + * { margin-top: 8px; }
.detail__fil {
    display: flex;
    align-items: center;
}
.detail__fil > span:nth-child(1) {
    display: inline-block;
    margin-right: 6px;
}
.box__disclaimer {
    text-transform: uppercase;
    font-size: 80%;
    font-weight: 600;
}
.share__btn .a2a_svg {
    border-radius: 50% !important;
    background-color: rgb(var(--orange), 1) !important;
    display: flex;
}
.share__btn .a2a_svg:hover {
    --red: 255, 66, 28;
    background-color: rgb(var(--red), 1) !important;
}
.share__btn .a2a_svg svg { width: 70%; }

/******************************
*   Recetas modulos
******************************/
* + .cont__filters,
.cont__filters + * { margin-top: 60px; }
.cont__filters > * + * { margin-top: 30px; }

.fil__search form,
.fil__filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px 15px;
    white-space: nowrap;
}
.fil__filter { flex-direction: column; }
.fil__search form * { line-height: 1; }
.fil__search button {
    display: flex;
    align-items: center;
    color: rgb(var(--white), 1);
    background: rgb(var(--orange), 1);
}
.filt__type {
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    color: rgb(var(--orange), 1);
    text-transform: uppercase;
    font-size: 32px;
}
.opt__cate { position: relative; }
.c__controls {
    position: absolute;
    top: -1px;
    bottom: -1px;
}
.c__prev {
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%);
    left: -1px;
}
.c__next {
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 100%);
    right: -1px;
}
.arrow__opt {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 26px;
    color: rgb(var(--near_b), .8);
    cursor: pointer;
}
.a__next { justify-content: flex-end; }
.filter__opt { width: 100%; }
.cont__cate {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}
.cont__cate::-webkit-scrollbar { display: none; }
.cate__scroll {display: inline-flex; }
.cate__scroll > * + * { margin-left: 10px; }
.info__recipe {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.info__recipe h2,
.info__recipe h3 {
    color: rgb(var(--orange), 1);
    text-transform: uppercase;
}
.info__recipe h2 { font-size: 42px; }
.info__recipe h3 { font-size: 32px; }
.sec_indicators { font-size: 24px; }
.sec_indicators .detail__fil > span:nth-child(1) {
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    color: rgb(var(--orange), 1);
    line-height: 1;
}
.indica__icons { color: rgb(var(--near_b), .1); }
.box__border {
    position: relative;
    background: rgb(var(--near_b), 1);
    border-radius: 28px;
}
.box__border::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-width: 4px;
    border-style: solid;
    border-color: rgb(var(--near_b), 1);
    border-radius: 28px;
    pointer-events: none;
    z-index: 1;
}
.box__border > div {
    overflow: hidden;
    border-radius: 28px;
}
.box__border > div:nth-child(1) {
    position: relative;
    z-index: 1;
}
.box__shadow {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 100%;
    height: 100%;
    background: rgb(var(--near_b), 1);
}
.graf__img {
    position: relative;
    padding-top: 120%;
}
.graf__middle { padding-top: 90%; }
.graf__img figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.graf__img figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -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;
}
.graf__img { position: relative; } 
.list__number {
    counter-reset: contador;
    padding-inline-start: 0px;
}
.list__number li {
    counter-increment: contador;
    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;
    gap: 20px;
}
.list__number li + li {
    padding-top: 15px;
    border-top: 1px solid rgb(var(--near_b), .2);
}
.list__number li > * { margin: 0; }
.list__number li span { content: counter(contador); }
.list__number li span::before {
    content: counter(contador) ". ";
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    color: rgb(var(--orange), 1);
    font-size: 26px;
}
#page-recipe-detail .main__content section { padding-bottom: 12%; }

* + .recetas__joy,
.recetas__joy + * { margin-top: 80px; }
.recetas__joy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    font-family: 'Houschka Pro';
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    text-align: center;
}
.joy__fil:nth-child(1) {
    width: 22%;
    min-width: 180px;
    filter: drop-shadow(0px 0px 15px rgb(var(--orange), .5));
}
.joy__fil:nth-child(2) {font-size: 26px; }
.joy__fil:nth-child(2) a {
    display: inline-block;
    font-size: 18px;
    padding: 16px;
    line-height: 1;
    color: rgb(var(--white));
    background: rgb(var(--orange_alter));
    border-radius: 12px;
    white-space: nowrap;
    text-decoration: none;
}

/******************************
*   Decubre modulos
******************************/
.box__text {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}
.box__text .h__sect,
.box__text .h__sect > * { text-align: left; }
.box__text .h__sect > * + * { margin-top: 12px; }
.box__text .h__sect span {
    display: block;
    font-family: 'Galano Grotesque';
    font-weight: 500;
    font-style: normal;
}
.box__text h3,
.box__text h4,
.box__text h5 { color: rgb(var(--orange), 1); }

.box__text figure + *,
.box__text * + figure { margin-top: 60px; }
.box__text figure,
.box__text figure img,
.box__text figure::before,
.box__text figure::after { border-radius: 28px; }

.box__text figure,
.box__text figure img {
    position: relative;
    background: rgb(var(--near_b), 1);
}
.box__text figure img { z-index: 1; }
.box__text figure::before,
.box__text figure::after {
    content: '';
    position: absolute;
}
.box__text figure::before {
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-width: 4px;
    border-style: solid;
    border-color: rgb(var(--near_b), 1);
    pointer-events: none;
    z-index: 2;
}
.box__text figure::after {
    top: 6px;
    left: 6px;
    width: 100%;
    height: 100%;
    background: rgb(var(--near_b), 1);
}
.box__text * + .sec_indicators { margin-top: 60px; }

/******************************
*   Legal
******************************/
#page-legal .main__content { z-index: auto; }
#page-legal,
#page-legal section { overflow: initial; }
.indice {
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
    color: rgb(var(--orange), 1);
}
.opt__indice ul li + li { margin-top: 8px }
.opt__indice ul li a {
    display: block;
    line-height: 1.2;
    font-size: 14px;
}
.opt__indice ul li.activo::marker,
.opt__indice ul li.activo a { color: rgb(var(--orange_d), 1); }
.info__legal h4,
.info__legal h5 {
    font-size: 24px;
    text-transform: uppercase;
}

/******************************
*   Comprar
******************************/
.cont__lb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgb(var(--black), .7);
    overflow: auto;
    z-index: 1000;
    display: none;
}
.lb__content {
    padding: 60px 0;
    min-height: 100vh;
    min-height: 100dvh;
    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;
}
.lb__content > * { width: 100%; }
.box__lb {
    position: relative;
    background: rgb(var(--white), 1);
    color: rgb(var(--near_b), 1);
    padding: 40px 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40px;
    box-shadow: 0 0 15px rgb(var(--black), .2);
}
.closr {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}
.closr > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 600">  <g>    <g id="visual">      <path class="cls-1" d="M451.8,59c45.3,27.1,87.9,57.6,112.2,99.2,24.2,41.4,30.2,93.6,31.7,146.6,1.4,53.1-1.8,106.9-24.5,151-22.8,43.9-65.4,78-112.1,101.7-46.6,23.6-97.4,36.8-146.7,34.4-49.4-2.5-97.3-20.6-144.7-43.8-47.4-23.1-94.4-51.4-124.3-92.9C13.5,413.5.5,358.8,4.8,306.5c4.3-52.4,25.7-102.2,55.3-144.3,29.6-42.1,67.3-76.4,110.4-104.5C213.7,29.4,262.4,7.3,310.6,7.9c48.2.7,96,24,141.2,51.1" fill="%23d8d8d8"/>    </g>  </g></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 20px;
}
.grid__retails {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: 16px;
}
.item__retail { width: calc(50% - 8px); }
.item__retail a {
    display: block;
    position: relative;
    width: 100%;
    -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__retail a::before,
.item__retail a::after {
    content: '';
    position: absolute;
    border-radius: 16px;
    -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;
}
.item__retail a::before {
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(var(--near_b), 1);
    pointer-events: none;
    z-index: 2;
}
.item__retail a::after {
    top: 4px;
    left: 4px;
    width: 100%;
    height: 100%;
    background: rgb(var(--near_b), 1);
}
.item__retail a > div {
    position: relative;
    width: 100%;
    padding-top: 40%;
    background: rgb(var(--white), 1);
    border-radius: 16px;
    z-index: 1;
}
.item__retail a > div figure {
    position: absolute;
    width: 70%;
    height: 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%);
}
.item__retail a > div figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    -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__retail a:hover {
    -webkit-transform: translate(4px, 4px);
    -moz-transform: translate(4px, 4px);
    -ms-transform: translate(4px, 4px);
    -o-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
}
.item__retail a:hover::before { border-color: rgb(var(--orange_alter), 1); }
.item__retail a:hover::after {
    background: rgb(var(--orange_alter), 1);
    left: 0;
    top: 0;
}
.item__retail a:hover > div figure img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}


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

.prod__slide .prod__content,
.prod__more .prod__content {
    width: 80%;
    margin: 0 auto;
}

}
@media (min-width : 680px) {

/* Slide Home */
.prod__slide .prod__content a .prod__huella figure,
.prod__more .prod__content a .prod__huella figure {
    opacity: 0;
    -webkit-transform: scale(.6) rotate(45deg);
    -moz-transform: scale(.6) rotate(45deg);
    -ms-transform: scale(.6) rotate(45deg);
    -o-transform: scale(.6) rotate(45deg);
    transform: scale(.6) rotate(45deg);
    -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);
}
.prod__slide .prod__content a .cont__prod .prod__ele,
.prod__slide .prod__content a .cont__prod .product .producto__name,
.prod__more .prod__content a .cont__prod .prod__ele,
.prod__more .prod__content a .cont__prod .product .producto__name {
    opacity: 0;
    pointer-events: none;
    -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);
}
.prod__slide .prod__content a .cont__prod .ele01,
.prod__more .prod__content a .cont__prod .ele01 {
    -webkit-transform: translate(-10%, -10%);
    -moz-transform: translate(-10%, -10%);
    -ms-transform: translate(-10%, -10%);
    -o-transform: translate(-10%, -10%);
    transform: translate(-10%, -10%);
}
.prod__slide .prod__content a .cont__prod .ele02,
.prod__more .prod__content a .cont__prod .ele02 {
    -webkit-transform: translate(-10%, 10%);
    -moz-transform: translate(-10%, 10%);
    -ms-transform: translate(-10%, 10%);
    -o-transform: translate(-10%, 10%);
    transform: translate(-10%, 10%);
}
.prod__slide .prod__content a .cont__prod .ele03,
.prod__more .prod__content a .cont__prod .ele03 {
    -webkit-transform: translate(10%, -10%);
    -moz-transform: translate(10%, -10%);
    -ms-transform: translate(10%, -10%);
    -o-transform: translate(10%, -10%);
    transform: translate(10%, -10%);
}
.prod__slide .prod__content a .cont__prod .ele04,
.prod__more .prod__content a .cont__prod .ele04 {
    -webkit-transform: translate(10%, 10%);
    -moz-transform: translate(10%, 10%);
    -ms-transform: translate(10%, 10%);
    -o-transform: translate(10%, 10%);
    transform: translate(10%, 10%);
}
.prod__slide .prod__content a .cont__prod .product .producto__name,
.prod__more .prod__content a .cont__prod .product .producto__name {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
.prod__slide .prod__content a .cont__prod .product .producto__graf,
.prod__more .prod__content a .cont__prod .product .producto__graf {
    -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(.85);
    -moz-transform: scale(.85);
    -ms-transform: scale(.85);
    -o-transform: scale(.85);
    transform: scale(.85);
}
.prod__slide .swiper-slide-active .prod__content a .prod__huella figure,
.prod__more .swiper-slide-active .prod__content a .prod__huella figure {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.prod__slide .swiper-slide-active .prod__content a .cont__prod .prod__ele,
.prod__more .swiper-slide-active .prod__content a .cont__prod .prod__ele {
    opacity: 1;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
}
.prod__slide .swiper-slide-active .prod__content a .cont__prod .product .producto__name,
.prod__more .swiper-slide-active .prod__content a .cont__prod .product .producto__name {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}
.prod__slide .swiper-slide-active .prod__content a .cont__prod .product .producto__graf,
.prod__more .swiper-slide-active .prod__content a .cont__prod .product .producto__graf {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    filter: drop-shadow(0px 0px 15px rgb(var(--black), .4));
}
.prod__slide .prod__content a:hover .prod__huella figure,
.prod__more .prod__content a:hover .prod__huella figure {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.prod__slide .prod__content a:hover .cont__prod .prod__ele,
.prod__more .prod__content a:hover .cont__prod .prod__ele {
    opacity: 1;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
}
.prod__slide .prod__content a:hover .cont__prod .product .producto__name,
.prod__slide .swiper-slide:nth-last-child(-n+3) .prod__content a:hover .cont__prod .product .producto__name,
.prod__more .prod__content a:hover .cont__prod .product .producto__name,
.prod__more .swiper-slide:nth-last-child(-n+3) .prod__content a:hover .cont__prod .product .producto__name {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}
.prod__slide .prod__content a:hover .cont__prod .product .producto__graf,
.prod__more .prod__content a:hover .cont__prod .product .producto__graf {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    filter: drop-shadow(0px 0px 15px rgb(var(--black), .4));
}

.prod__more .swiper-slide {
    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;
    pointer-events: none;
}
.prod__more .swiper-slide-prev,
.prod__more .swiper-slide-active,
.prod__more .swiper-slide-next {
    opacity: 1;
    pointer-events: all;
}
.prod__more .swiper-slide-prev .prod__content {
    -webkit-transform: scale(.8) rotate(-3deg);
    -moz-transform: scale(.8) rotate(-3deg);
    -ms-transform: scale(.8) rotate(-3deg);
    -o-transform: scale(.8) rotate(-3deg);
    transform: scale(.8) rotate(-3deg);
}
.prod__more .swiper-slide-next .prod__content {
    -webkit-transform: scale(.8) rotate(3deg);
    -moz-transform: scale(.8) rotate(3deg);
    -ms-transform: scale(.8) rotate(3deg);
    -o-transform: scale(.8) rotate(3deg);
    transform: scale(.8) rotate(3deg);
}


/* == Grid / Cards  ==*/
.grid__cards {
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.card__item { width: calc(50% - 15px); }
.card__content a:hover .card::after {
    border-width: 6px;
    border-color: rgb(var(--yellow), 1);
}
.card::after,
.card__graf figure { border-radius: 40px; }
.grid__rece .info__box .box__intenso,
.grid__rece .info__box .box__titulo,
.grid__rece .info__box .box__info {
    -webkit-transform: translateY(48px);
    -moz-transform: translateY(48px);
    -ms-transform: translateY(48px);
    -o-transform: translateY(48px);
    transform: translateY(48px);
    -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);
}
.grid__rece .box__info { opacity: 0; }
.card__content a:hover .card__graf figure::after  {
    height: 100%;
    opacity: .9;
}
.card__content a:hover .card__graf figure img {
    -webkit-transform: scale(1.1) rotate(-5deg);
    -moz-transform: scale(1.1) rotate(-5deg);
    -ms-transform: scale(1.1) rotate(-5deg);
    -o-transform: scale(1.1) rotate(-5deg);
    transform: scale(1.1) rotate(-5deg);
}
.card__content a:hover .type {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.grid__rece .card__content a:hover .info__box > *:nth-child(-n+3) {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.grid__rece .card__content a:hover .box__info { opacity: 1; }

/* == Decubre modulos == */
.box__text figure,
.box__text figure img,
.box__text figure::before,
.box__text figure::after { border-radius: 40px; }

/* == Recetas modulos  == */
.box__border,
.box__border::after,
.box__border > div { border-radius: 40px; }
.recetas__joy { flex-direction: row; }

}
@media (min-width : 680px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
.swiper-button-next,
.swiper-button-prev { width: auto; }
.swiper-button-next::after,
.swiper-button-prev::after { font-size:26px }


/* Grid productos */
.grid__item:nth-child(odd) .prod__content {
    -webkit-transform: rotate(-6deg) translateY(2%);
    -moz-transform: rotate(-6deg) translateY(2%);
    -ms-transform: rotate(-6deg) translateY(2%);
    -o-transform: rotate(-6deg) translateY(2%);
    transform: rotate(-6deg) translateY(2%);
}
.grid__item:nth-child(even) .prod__content {
    -webkit-transform: rotate(6deg) translateY(2%);
    -moz-transform: rotate(6deg) translateY(2%);
    -ms-transform: rotate(6deg) translateY(2%);
    -o-transform: rotate(6deg) translateY(2%);
    transform: rotate(6deg) translateY(2%);
}

/* == Legal == */
.btn__indi {
    margin-top: 30px;
    position: sticky;
    bottom: 20px;
}
.btn__indi > * {
    display: inline-block;
    padding: 14px 14px 14px 15px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    color: rgb(var(--white), 1);
    background: rgb(var(--orange), 1);
    margin-left: -15px;
}
.opt__indice {
    position: fixed;
    top: 0;
    left: -100%;
    max-width: 500px;
    width: 90%;
    height: 100%;
    background: rgb(var(--white), .8);
    box-shadow: 0 0 15px rgb(var(--black), .2);
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(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;
    z-index: 1000;
}
.opt__indice.active { left: 0; }
.opt__indice > * { padding: 60px 15px; }

}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {
body::before {
    background: url('../img/trama-des.webp') center top;
    background-size: 1200px;
}
.sect__yellow::before {
    background: url('../img/trama-des.webp') center;
    background-size: 1200px;
}

.mo__01 {
    width: 10%;
    top: 5%;
    left: 8%;
}
.mo__02 {
    width: 15%;
    top: -10%;
    left: 40%;
}
.mo__03 {
    width: 8%;
    top: 15%;
    right: 12%;
}
.mo__04 {
    width: 12%;
    top: 40%;
    left: 15%;
}
.mo__05 {
    width: 15%;
    top: 45%;
    right: 20%;
}

.main__content section { padding-top: calc(11% + 20px); }

/* == Head Section == */
.h__sect h2 > * + * { margin-top: -25px; }
.h__sect h2 i { font-size: 52px; }
.h__sect h3 i { font-size: 42px; }
.h__sect h2 .cont__curv { font-size: 80px; }

/* == Home == */
#home main { margin-top: -50px; }
.inicio {
    padding-top: 30px;
    min-height: 100vh;
    min-height: 100dvh;
}
.cont__ini { width: 90%; }
.text__welcome {
    width: 100%;
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    font-size: 5.5vw;
}
.text__queso {
    top: calc(2.5vw + 30px);
    font-size: 16vw;
}
.grupo__empa {
    max-width: 46vh;
    width: 36%;
}
.cont__cheetos {
    width: 18%;
    bottom: 6%;
    left: 3%;
}


/* == Home: Slider  ==*/
.slider__hero .swiper-button-prev { left: calc(18% - 9px); }
.slider__hero .swiper-button-next { right: calc(18% - 9px); }
.slide__hero {
    width: 100%;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    -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 .slide__hero {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/* == Home: Social Media == */
.card__social figure::before {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.card__social figure::after {
    top: 50%;
    left: 50%;
    bottom: inherit;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%);
    -o-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    font-size: 32px;
    color: rgb(var(--white), 0);
}

.card__social a:hover figure::before { opacity: 1; }
.card__social a:hover figure img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.card__social a:hover figure::after {
    -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(--white), 1);
}

/* == Recetas modulos == */
.info__recipe {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 60px;
}

.fil__01 { grid-area: 1 / 2 / 2 / 3; }
.fil__02 { grid-area: 1 / 1 / 3 / 2; min-width: 0; }
.fil__03 { grid-area: 2 / 2 / 3 / 3; }
.fil__04 { grid-area: 3 / 1 / 4 / 3; }
.fil__05 { grid-area: 4 / 1 / 5 / 2; }
.fil__06 { grid-area: 4 / 2 / 5 / 3; }
.fil__07 { grid-area: 5 / 1 / 6 / 3; }

#page-products .container { width: 95%; } 

/* Grid productos */
.grid {
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 60px 0;
}
.grid__item { width: 50%; }

/* == Producto Detalle ==*/
.prod__detail {
    flex-direction: row;
    align-items: center;
}
.detail__col { width: calc(50% - 15px); }
.detail__col .cont__prod { width: 100%; }
.detail__col .cont__pro .prod__huella { top: 48%; }
/* .detail__col > .producto__name {
    width: 60%;
    margin: 0 auto;
} */
.detail__02 .producto__name + * { margin-top: 40px; }

/* == Recetas modulos ==*/
.fil__filter { flex-direction: row; }
.filter__opt { width: calc(100% - 235px); }

/* == Legal ==*/
.btn__indi,
.opt__indice .closr { display: none; }
.fil__legal {
    display: flex;
    flex-direction: row-reverse;
    gap: 30px;
}
.legal__indi { min-width: 250px; }
.cont__indice {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 140px;
    height: calc(100vh - 140px);
    overflow: auto;
}
.opt__indice { margin-top: 10px; }
.cont__indice span { padding-left: 20px; }
.opt__indice ul li.activo::marker,
.opt__indice ul li.activo a { color: rgb(var(--orange_d), 1); }

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

.prod__slide .swiper-slide-prev .prod__content {
    -webkit-transform: scale(.8) rotate(-3deg);
    -moz-transform: scale(.8) rotate(-3deg);
    -ms-transform: scale(.8) rotate(-3deg);
    -o-transform: scale(.8) rotate(-3deg);
    transform: scale(.8) rotate(-3deg);
}
.prod__slide .swiper-slide-next .prod__content {
    -webkit-transform: scale(.8) rotate(3deg);
    -moz-transform: scale(.8) rotate(3deg);
    -ms-transform: scale(.8) rotate(3deg);
    -o-transform: scale(.8) rotate(3deg);
    transform: scale(.8) rotate(3deg);
}

}

@media (min-width : 768px) and (max-width : 991px) {
/* == Grid Productos == */
.grid__item:nth-child(1) .prod__content,
.grid__item:nth-child(4) .prod__content,
.grid__item:nth-child(5) .prod__content {
    -webkit-transform: rotate(-6deg) translateY(2%);
    -moz-transform: rotate(-6deg) translateY(2%);
    -ms-transform: rotate(-6deg) translateY(2%);
    -o-transform: rotate(-6deg) translateY(2%);
    transform: rotate(-6deg) translateY(2%);
}
.grid__item:nth-child(2) .prod__content,
.grid__item:nth-child(3) .prod__content,
.grid__item:nth-child(6) .prod__content {
    -webkit-transform: rotate(6deg) translateY(2%);
    -moz-transform: rotate(6deg) translateY(2%);
    -ms-transform: rotate(6deg) translateY(2%);
    -o-transform: rotate(6deg) translateY(2%);
    transform: rotate(6deg) translateY(2%);
}

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

/* == Grid Productos == */
.grid .prod__content {
    width: 80%;
    margin: 0 auto;
}

#page-product-detail .slide__prod .container { width: 100%; }

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

.m__shape { position: absolute; }
.m__01 { left: 8%; }
.m__02 { top: -200px; }
.m__03 { top: 3%; }


/* == Home == */
/* Home: Slider */
.info__text > div h2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    color: rgb(var(--white), 1);
    font-size: 1.8vw;
}

/* Home: Social Media */
.social .container { width: 80%; }

.prod__slide .swiper-wrapper {
    -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;
    /* gap: 40px 0; */
}
.prod__slide .swiper-slide { width: 25%; }
.prod__slide .swiper-slide:nth-last-child(-n+3) .product {
    flex-direction: column-reverse;
    gap: 0;
}
.prod__slide .swiper-slide:nth-last-child(-n+3) .prod__huella { top: 40%; }
.prod__slide .swiper-slide:nth-last-child(-n+3) .prod__ele {
    top: 0;
    bottom: inherit;
}
.prod__slide .swiper-slide:nth-last-child(-n+3) .prod__content a .cont__prod .product .producto__name {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
.prod__slide .swiper-slide:nth-child(1) .prod__content {
    -webkit-transform: rotate(-6deg) translateY(2%);
    -moz-transform: rotate(-6deg) translateY(2%);
    -ms-transform: rotate(-6deg) translateY(2%);
    -o-transform: rotate(-6deg) translateY(2%);
    transform: rotate(-6deg) translateY(2%);
}
.prod__slide .swiper-slide:nth-child(2) .prod__content {
    -webkit-transform: rotate(-3deg) translateY(-2%);
    -moz-transform: rotate(-3deg) translateY(-2%);
    -ms-transform: rotate(-3deg) translateY(-2%);
    -o-transform: rotate(-3deg) translateY(-2%);
    transform: rotate(-3deg) translateY(-2%);
}
.prod__slide .swiper-slide:nth-child(3) .prod__content {
    -webkit-transform: rotate(3deg) translateY(-2%);
    -moz-transform: rotate(3deg) translateY(-2%);
    -ms-transform: rotate(3deg) translateY(-2%);
    -o-transform: rotate(3deg) translateY(-2%);
    transform: rotate(3deg) translateY(-2%);
}
.prod__slide .swiper-slide:nth-child(4) .prod__content {
    -webkit-transform: rotate(6deg) translateY(2%);
    -moz-transform: rotate(6deg) translateY(2%);
    -ms-transform: rotate(6deg) translateY(2%);
    -o-transform: rotate(6deg) translateY(2%);
    transform: rotate(6deg) translateY(2%);
}
.prod__slide .swiper-slide:nth-child(5) .prod__content {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.prod__slide .swiper-slide:nth-child(7) .prod__content {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}

/* Grid Productos */
.grid { gap: 0; }
.grid__item { width: 33.33%; }
.grid__item:nth-child(1) .prod__content,
.grid__item:nth-child(4) .prod__content {
    -webkit-transform: rotate(-6deg) translateY(2%);
    -moz-transform: rotate(-6deg) translateY(2%);
    -ms-transform: rotate(-6deg) translateY(2%);
    -o-transform: rotate(-6deg) translateY(2%);
    transform: rotate(-6deg) translateY(2%);
}
.grid__item:nth-child(3) .prod__content,
.grid__item:nth-child(6) .prod__content {
    -webkit-transform: rotate(6deg) translateY(2%);
    -moz-transform: rotate(6deg) translateY(2%);
    -ms-transform: rotate(6deg) translateY(2%);
    -o-transform: rotate(6deg) translateY(2%);
    transform: rotate(6deg) translateY(2%);
}
.grid .prod__content { width: 100%; }
.grid .prod__content a .prod__huella figure {
    opacity: 0;
    -webkit-transform: scale(.6) rotate(45deg);
    -moz-transform: scale(.6) rotate(45deg);
    -ms-transform: scale(.6) rotate(45deg);
    -o-transform: scale(.6) rotate(45deg);
    transform: scale(.6) rotate(45deg);
    -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);
}
.grid .prod__content a .cont__prod .prod__ele,
.grid .prod__content a .cont__prod .product .producto__name {
    opacity: 0;
    pointer-events: none;
    -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);
}
.grid .prod__content a .cont__prod .ele01 {
    -webkit-transform: translate(-10%, -10%);
    -moz-transform: translate(-10%, -10%);
    -ms-transform: translate(-10%, -10%);
    -o-transform: translate(-10%, -10%);
    transform: translate(-10%, -10%);
}
.grid .prod__content a .cont__prod .ele02 {
    -webkit-transform: translate(-10%, 10%);
    -moz-transform: translate(-10%, 10%);
    -ms-transform: translate(-10%, 10%);
    -o-transform: translate(-10%, 10%);
    transform: translate(-10%, 10%);
}
.grid .prod__content a .cont__prod .ele03 {
    -webkit-transform: translate(10%, -10%);
    -moz-transform: translate(10%, -10%);
    -ms-transform: translate(10%, -10%);
    -o-transform: translate(10%, -10%);
    transform: translate(10%, -10%);
}
.grid .prod__content a .cont__prod .ele04 {
    -webkit-transform: translate(10%, 10%);
    -moz-transform: translate(10%, 10%);
    -ms-transform: translate(10%, 10%);
    -o-transform: translate(10%, 10%);
    transform: translate(10%, 10%);
}
.grid .prod__content a .cont__prod .product .producto__name {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
.grid .prod__content a .cont__prod .product .producto__graf {
    -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(.85);
    -moz-transform: scale(.85);
    -ms-transform: scale(.85);
    -o-transform: scale(.85);
    transform: scale(.85);
}
.grid .prod__content a:hover .prod__huella figure {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.grid .prod__content a:hover .cont__prod .prod__ele {
    opacity: 1;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
}
.grid .prod__content a:hover .cont__prod .product .producto__name {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}
.grid .prod__content a:hover .cont__prod .product .producto__graf {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    filter: drop-shadow(0px 0px 15px rgb(var(--black), .4));
}

/* == Grid / Cards == */
.card__item { width: calc(33.33% - 20px); }




}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
}
@media (min-width : 1200px) {
/* == Home == */
/* Inicio */  
.cont__ini {
    width: 70%;
    padding: 0;
}
.text__welcome { font-size: 4.5vw; }
.grupo__empa { width: 30%; }
.cont__cheetos {
    width: 14%;
    bottom: 10%;
    left: 6%;
}

/* Home: Slider */
.productos .container { width: 95%; }

/* == Productos == */
#page-products .container { width: 80%; }


}



header ul,
footer ul,
header ol,
footer ol {
    padding-inline-start: 0;
    list-style: none;
}
header li + li,
footer li + li { margin-top: 0; }
/******************************
*   Header
******************************/
.header {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    -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__menu {
    padding: 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;
}
.logo {
    width: 100px;
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 10;
}
.logo .bg__logo {
    position: absolute;
    right: -15%;
    bottom: -12%;
    width: 200%;
    filter: drop-shadow(0px 0px 5px rgb(var(--near_b), .1)); 
    will-change: filter;
    -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 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;
}
.logo .bg__logo svg {
    width: 100%;
    height: 100%;
    fill: rgb(var(--orange_alter), 1);
}
.header.scroll__active .logo .bg__logo {
    -webkit-transform: translate(0%);
    -moz-transform: translate(0%);
    -ms-transform: translate(0%);
    -o-transform: translate(0%);
    transform: translate(0%);
}
.header.scroll__active.menu__open .logo .bg__logo {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.logo a {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    filter: drop-shadow(0px 0px 5px rgb(var(--near_b), .3)); 
    will-change: filter;
}
.logo a > * { grid-area: 1 / 1 / 2 / 2; }
.logo a span {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    display: none;
}
.menu nav ul li { overflow: hidden; }
.menu nav ul li a {
    display: block;
    position: relative;
    line-height: 1;
    font-size: 8vw;
    padding: 4vw;
    text-transform: uppercase;
    font-family: 'Cheetos Normal';
    font-weight: normal;
    font-style: normal;
    color: rgb(var(--white), 1);
    text-align: center;
}
.btn__mob {
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 10;
    cursor: pointer;
}
.btn__mob svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    -ms-transform: translate(-50%, -50%) scale(1.1);
    -o-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
    fill: rgb(var(--yellow), 1);
}
.btn__mob .bars {
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn__mob .bars span {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: rgb(var(--orange_alter), 1);
    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, 9px) rotate(45deg);
    -moz-transform: translate(0px, 9px) rotate(45deg);
    -ms-transform: translate(0px, 9px) rotate(45deg);
    -o-transform: translate(0px, 9px) rotate(45deg);
    transform: translate(0px, 9px) 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, -9px) rotate(-45deg);
    -moz-transform: translate(0px, -9px) rotate(-45deg);
    -ms-transform: translate(0px, -9px) rotate(-45deg);
    -o-transform: translate(0px, -9px) rotate(-45deg);
    transform: translate(0px, -9px) rotate(-45deg);
}

.line__men {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 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;
    background: rgb(var(--orange_alter), 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
}
.line__men svg {
    width: 100%;
    fill: rgb(var(--orange_alter), 1);
    margin-bottom: -19px;
}

.bg__men {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}
.bg__men svg {
    width: 100%;
    height: 100%;
    fill: rgb(var(--orange_alter), 1);
}
#home .bg__men svg { fill: rgb(var(--orange), 1); }


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

.menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.menu nav {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}
.menu nav > div {
    width: 100%;
    padding: 60px 0;
    min-height: 100vh;
    min-height: 100dvh;
    display:  flex;
    flex-direction: column;
    justify-content: center;
}



}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {
.btn__mob { display: none; }
/*.header.active {
    background: rgb(var(--orange_alter), 1);
    filter: drop-shadow(0 0 10px rgb(var(--near_b), .4));
}*/
.header.active .line__men {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgb(var(--near_b), .4));
}
.cont__menu { padding: 30px 30px 15px 30px; }

.logo {
    width: 120px;
    top: 20px;
    left: 20px;
}

.menu nav ul {
    display: flex;
    gap: 28px;
}
.menu nav ul li a {
    font-size: 20px;
    padding: 0;
}
.menu nav ul li a::after {
    content: '';
    display: block;
    /*position: absolute;
    top: calc(100% + 4px);*/
    width: 100%;
    height: 4px;
    background: rgb(var(--yellow), 1);
    border-radius: 2px;
    -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: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 0% 0%;
}
.menu nav ul li a:hover::after {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}


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