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

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

    --dark: 46, 46, 46;
    --darken: 62, 56, 56;

    --yellow-1000: 228, 181, 0;  /* amarillo oscuro / dorado */
    --yellow-900: 255, 200, 3;  /* amarillo oscuro / dorado */
    --yellow-700: 255, 221, 0;  /* amarillo principal */
    --yellow-500: 255, 239, 9;  /* amarillo claro / highlight */


    /* --r_01: 117, 19, 18;
    --r_02: 213, 1, 1;
    --r_03: 255, 61, 0;
    --r_04: 255, 157, 128;

    --m_01: 72, 20, 140;
    --m_02: 98, 0, 234;
    --m_03: 179, 136, 255;
    --m_04: 130, 177, 255;

    --a_01: 26, 35, 126;
    --a_02: 48, 79, 254;
    --a_03: 3, 191, 165;
    --a_04: 100, 255, 218;

    --v_01: 0, 77, 63;
    --v_02: 0, 200, 82;
    --v_03: 175, 234, 0;
    --v_04: 238, 255, 66; */

    /* Rojos */
    --red: 255, 0, 0;

    --red-900: 117, 19, 18;    /* rojo oscuro */
    --red-700: 213, 1, 1;      /* rojo principal */
    --red-500: 255, 61, 0;     /* rojo brillante / alerta */
    --red-300: 255, 157, 128;  /* rojo claro / highlight */

    /* Morados */
    --purple-900: 72, 20, 140;   /* morado oscuro */
    --purple-700: 98, 0, 234;    /* morado principal */
    --purple-500: 179, 136, 255; /* morado claro */
    --purple-300: 130, 177, 255; /* morado muy claro / pastel */

    /* Azules / Aqua */
    --blue-900: 26, 35, 126;    /* azul profundo */
    --blue-700: 48, 79, 254;    /* azul principal */
    --teal-700: 3, 191, 165;    /* verde azulado principal */
    --teal-300: 100, 255, 218;  /* verde azulado claro */

    /* Azules / Aqua */
    --green-900: 0, 77, 63;     /* verde oscuro */
    --green-700: 0, 200, 82;    /* verde principal */
    --lime-500: 175, 234, 0;    /* lima / verde limón */
    --yellow-300: 238, 255, 66; /* amarillo claro / highlight */

    /* Joy */
    --j_01: 20, 46, 157;
    --j_02: 249, 221, 62;
    --j_03: 226, 150, 72;
    --j_04: 19, 67, 255;
    --j_05: 67, 226, 244;
    --j_06: 230, 255, 0;
    --j_07: 255, 119, 0;
   
    --space-6: 6px;
    --space-10: 10px;
    --space-12: 12px;

    --swiper-theme-color: #ffdd00;
    --swiper-pagination-bullet-inactive-color: #ffdd00;
    --swiper-pagination-bullet-inactive-opacity: 0.6;

    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: 10px;

}


::selection {
    color: rgb(var(--negro), 1);
    background: rgba(var(--yellow-700), .7);
}
::-moz-selection {
    color: rgb(var(--negro), 1);
    background: rgba(var(--yellow-700), .7);
}
::-webkit-selection {
    color: rgb(var(--negro), 1);
    background: rgba(var(--yellow-700), .7);
}

/******************************
*   Reset
******************************/
*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
html {
    scroll-behavior: smooth;
    scroll-padding: 76px;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: 'Open Sans';
    font-weight: normal;
    font-style: normal;
    line-height: 1.4;
    font-size: 16px;
    color: rgb(var(--name), 1); 
    background: rgb(var(--name), 1); 
}
figure {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
figure img { margin: 0 auto; }
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a, a:link, a:hover, a:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
ul,
ol {
    margin: 0;
    padding: 0;
    padding-inline-start: 20px;
}
li + li { margin-top: 15px; }
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: 'FWC26 Normal';
    font-weight: bold;
    font-style: normal;
}
input,
select,
textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    color: rgb(var(--negro), 1);
    background: rgb(var(--blanco), 1);
    border-radius: var(--space-10);
    border: 1px solid currentcolor;
    -moz-appearance: none;
    -webkit-appearance: none;
    line-height: 1.2;
}
textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: ;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
input::placeholder,
textarea::placeholder { color: rgba(var(--negro), .5); }
button { background: transparent; }
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }

p { margin: 0; }
* + 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(--name), 1); }

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

/******************************
*   General
******************************/
main {
    min-height: calc(100vh - 76px);
    position: relative;
}
.m__center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.full__h { min-height: calc(100vh - 60px); }
main section {
    padding: 60px 0;
    position: relative;
}
.sect__m {
    padding-bottom: 43%;
    margin-bottom: -41%;
}

/* Head Section */
.head__s + *,
* + .head__s { margin-top: 40px; }
.head__s h2,
.head__s h3 {
    font-family: 'FWC26 Condensed';
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
}
.h__normal h2,
.h__normal h3 {
    font-family: 'FWC26 normal';
    font-weight: bold;
    font-style: normal;
}
.h__center { text-align: center; }
.head__s p {
    max-width: 800px;
    font-family: 'FWC26 Normal';
    font-weight: 100;
    font-style: normal;
}
.h__center p {
    margin-left: auto;
    margin-right: auto;
}
.head__s > i { font-size: 30px; }
.head__s > i + * { margin-top: 20px; }

/* CTA */
* + .c__cta,
.c__cta + * { margin-top: 60px; }
.c__cta {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}
.cta__center { justify-content: center; }
.cta,
a.cta {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: var(--space-6);
    border-radius: var(--space-6);
    font-family: 'FWC26 Condensed';
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 18px;
    position: relative;
    overflow: hidden;
}
.cta > * { position: relative; }
.cta::before {
    border-radius: 50%;
    content: '';
    height: 100%;
    padding-top: 100%;
    position: absolute;
    top: 0;
    -webkit-transform: scale(1) translateY(67px);
    -moz-transform: scale(1) translateY(67px);
    -ms-transform: scale(1) translateY(67px);
    -o-transform: scale(1) translateY(67px);
    transform: scale(1) translateY(67px);
    transition: transform 1s cubic-bezier(.66, 0, .34, 1);
    width: 100%;
}
.cta:hover::before { transform: scale(1.5) translateY(0px); }
.cta__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: rgb(var(--yellow-900));
    color: rgb(var(--blanco));
    border-radius: 4px;
    font-size: 20px;
}
.cta__icon > * {
    filter: drop-shadow(0px 0px 5px rgba(var(--negro), .2));
    will-change: filter;
}
.cta__01,
a.cta__01 {
    color: rgb(var(--negro));
    background: rgb(var(--yellow-700));
}
.cta__02,
a.cta__02 {
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
}
.cta span:not([class]) {
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -o-transform: translateY(2px);
    transform: translateY(2px);
    padding: 0 15px;
}
.cta__01::before { background: rgba(var(--yellow-1000), .3); }
.cta__02::before { background: rgba(var(--darken), 1); }

/* Slider */
.cont__slider { position: relative; }
.swiper-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
}
.button-swiper {
    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;
}
.swiper-button-disabled {
    opacity: .5;
    pointer-events: none;
}
.arrow {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: rgb(var(--yellow-700));
    background: rgb(var(--dark));
}

/******************************
*   Box text
******************************/
.box__text {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.box__text h3,
.box__text h4,
.box__text h5 {
    font-family: 'FWC26 Normal';
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
}


/******************************
*   Benner Top
******************************/
.banner__page {
    padding: 0;
    z-index: 10;
}
.banner__page picture, 
.banner__page picture > * {
    width: 100%;
    max-width: initial;
}
.banner__page .swiper-controls {
    position: absolute;
    width: 100%;
    z-index: 10;
    bottom: 10px;
    justify-content: center;
}

/******************************
*   Logos FIFA
******************************/
.cont__licencia { display: inline-block; }
.fifa__logos { height: 100px; }
/* .logo__over .fifa__logos.l__grup { height: 50px; } */
.fifa__logos > * + * { margin-top: 16px; }
.fifa__logos.l__grup > * + * { margin-top: 9px; }
.fifa__logos figure { height: 100%; }
.fifa__logos figure img {
    object-fit: contain;
    object-position: center;
    height: 100%;
    max-width: inherit;
}
.log__top { height: 100%; }
.log__top:has(+ .log__bot) { height: 70%; }
.log__bot { height: 14%; }
.log__top {
    display: flex;
    justify-content: center;
}
.logo__col { position: relative; }
.log__top > * + *::after {
    content: '';
    position: absolute;
    top: 0;
    left: -.5px;
    height: 100%;
    width: 1px;
    background: rgb(var(--negro));
}
.fifa__graf {
    position: relative;
    height: 100%;
}
.fifa__graf figure {
    position: absolute;
    width: 100%;
    height: 100%;
}
.fifa__graf figure:nth-child(1) { position: relative; }
.fifa__graf figure + * {
    top: 0;
    left: 0;
}
.log__top > * + * {
    padding-left: 12px;
    margin-left: 12px;
}

/* Colores en elementos */
.hero .log__top > * + *::after,
.hero .fi__number,
.hero .fi__text,
.hero .text__logo,
.banner__page .log__top > * + *::after,
.banner__page .fi__number,
.banner__page .fi__text,
.banner__page .text__logo,
.card__content .log__top > * + *::after,
.card__content .fi__number,
.card__content .fi__text,
.card__content .text__logo { filter: invert(100%); }

.logo__over {
    position: absolute;
    z-index: 10;
    right: 20px;
    bottom: 20px;
}
.logo__over .fifa__logos { height: 70px; }

.hero .logo__over {
    top: inherit;
    right: 15px;
    bottom: 40px;
}

/******************************
*   Cont Sections
******************************/
.cont__sections { position: relative; }
.elems__page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.cont__sections section { z-index: 1; }

/******************************
*   Hero
******************************/
.hero { padding: 0; }
.cont__slide a,
.cont__slide picture,
.cont__slide img { display: block; }
.cont__slide img {
    max-width: inherit;
    width: 100%;
}
.hero .swiper-controls .swiper-pagination-bullet { filter: drop-shadow(0px 0px 5px rgba(var(--negro), .3)); }

/******************************
*   Slider Brands
******************************/
.cta__brand {
    border-radius: var(--space-6);
    background: rgb(var(--blanco));
    padding: 10px;
}
.cta__brand a {
    display: block;
    width: 100%;
}
.cta__brand figure {
    width: 100%;
    height: 5vh;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.cta__brand figure img {
    object-fit: contain;
    object-position: center;
    height: 100%;
}

/******************************
*   Products y Slider Products
******************************/
.productos { background: rgb(var(--bg__prod)); }
.productos { overflow: hidden; }
.productos .cont__slider .swiper { overflow: visible; }
.s__products > * + * { margin-top: 30px; }
.s__products .swiper-controls { justify-content: flex-end; }
.prod__img {
    width: 100%;
    padding-top: 100%;
    border-radius: var(--space-10);
    position: relative;
    overflow: hidden;
    background: rgb(var(--bg__card));
    filter: drop-shadow(0px 0px 10px rgba(var(--negro), .1));
    will-change: filter;
}
.prod__img::before,
.prod__img::after {
    content: '';
    position: absolute;
    z-index: 1;
}
.prod__img::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    opacity: .6;
}
.prod__img::after {
    width: 80%;
    height: 80%;
    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%);
    border-radius: 50%;
    background: rgb(var(--blanco));
    filter: blur(20px);
    will-change: filter;
    opacity: .3;
}
.prod__img figure {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 85%;
    -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: 2;
}
.prod__img figure::before {
    content: '';
    position: absolute;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    filter: blur(2px);
    will-change: filter;
    left: 10%;
    right: 10%;
    height: 3%;
    bottom: -4px;
    opacity: .5;
}
.prod__img figure img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
    filter: drop-shadow(0px 0px 10px rgba(var(--negro), .2));
    will-change: filter;
    position: relative;
    z-index: 1;
}
.prod__name > * {
    display: block;
    text-align: center;
}
.name__brand {
    font-weight: 100;
    font-style: normal;
    font-size: 80%;
}

/******************************
*   Slider Marcar
******************************/
.marcas * + .cont__slider { margin-top: 40px; }
.marcas .cont__slider {
    overflow: hidden;
    padding: 0 15px;
}
.marcas .cont__slider .swiper { overflow: visible; }

/******************************
*   Head Brand
******************************/
.head__brad {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}
.brand__log figure { height: 15vh; }
.brand__log figure img {
    height: 100%;
    object-position: center;
    object-fit: contain;
}
.brand__share {
    font-family: 'FWC26 Condensed';
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
    line-height: 1.2;
}
.social__media {
    padding-inline-start: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.social__media > * { margin: 0; }
.social__media > li > a {
    width: 40px;
    height: 40px;
    border-radius: var(--space-6);
    font-size: 20px;
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
    display: flex;
    justify-content: center;
    align-items: center;
}

/******************************
*   Card content
******************************/
.card__content {
    border-radius: var(--space-10);
    position: relative;
    overflow: hidden;
    color: rgb(var(--negro));
    filter: drop-shadow(0px 0px 10px rgba(var(--negro), .1));
    will-change: filter;
}
.card__circle {
    position: absolute;
    width: 120%;
    padding-top: 120%;
    border-radius: 50%;
    bottom: 20%;
    right: 15%;
    -webkit-transition: transform .8s cubic-bezier(.66,0,.34,1);
    -moz-transition: transform .8s cubic-bezier(.66,0,.34,1);
    -ms-transition: transform .8s cubic-bezier(.66,0,.34,1);
    -o-transition: transform .8s cubic-bezier(.66,0,.34,1);
    transition: transform .8s cubic-bezier(.66,0,.34,1);
}
.card__content { background: rgb(var(--yellow-700)); }
.card__circle { background: rgb(var(--yellow-500)); }
.carf__info {
    position: relative;
    display: flex;
    gap: 15px;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}
.carf__info * + .c__cta,
.carf__info .c__cta + * { margin-top: 30px; }
.top__col,
.head__title span {
    position: relative;
    font-family: 'FWC26 Normal';
    font-weight: 100;
    font-style: normal;
    font-size: 16px;
}
.top__col:nth-child(1) { padding-right: 20%; }
.top__col:nth-child(2) {
    padding-left: 20%;
    pointer-events: none;
}
.top__head > * { display: block; }
.top__head > * + * { margin-top: 6px; }
.head__title {
    font-size: 16px;
    text-transform: uppercase;
}
.head__title span {
    display: block;
    margin-top: 6px;
}
.icon__status {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    font-size: 28px;
    line-height: 1;
    color: rgb(var(--blanco));
    mix-blend-mode: difference;
    will-change: filter;
}
.icon__status::before {
    display: block;
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
}
.mas-popular .icon__status::before { content: "\e0d3"; }
.ultimos-agregados .icon__status::before { content: "\e0d5"; }
.por-terminar .icon__status::before { content: "\e0d2"; }
.finalizadas .icon__status::before { content: "\f273"; }

.top__cont + .top__cont,
* + .cta__info { margin-top: 12px; }
.cta__info {
    display: inline-block;
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
    padding: 10px 15px;
    font-family: 'FWC26 Condensed';
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: var(--space-6);
    line-height: 1;
} 

.mid__img {
    width: 60%;
    margin: 0 0 0 auto;
}
.mid__img figure {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 50%;
}
.mid__img figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.fil__bot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    font-size: 12px;
}
.bot__info > * { display: block; }
.bot__info > * + * { margin-top: 12px; }
.bot__info figure { height: 50px; }
.bot__info figure img {
    object-fit: contain;
    object-position: center;
    height: 100%;
    margin: inherit;
}
.card__content .fifa__logos { height: 60px; }
.card__content .fifa__logos > * + * { margin-top: 10px; }

.grid__item a {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.color__01 {
    color: rgb(var(--blanco));
    background: rgb(var(--blue-900));
}
.color__01 .card__circle { background: rgb(var(--purple-300)); }
.color__02 {
    color: rgb(var(--blanco));
    background: rgb(var(--red-500));
}
.color__02 .card__circle { background: rgb(var(--red-300)); }
.color__03 {
    color: rgb(var(--blanco));
    background: rgb(var(--red-900));
}
.color__03 .card__circle { background: rgb(var(--red-300)); }
.color__04 {
    color: rgb(var(--blanco));
    background: rgb(var(--purple-500));
}
.color__04 .card__circle { background: rgb(var(--red-500)); }
.color__05 {
    color: rgb(var(--blanco));
    background: rgb(var(--green-700));
}
.color__05 .card__circle { background: rgb(var(--green-900)); }
.color__06 {
    color: rgb(var(--blanco));
    background: rgb(var(--lime-500));
}
.color__06 .bot__info > * { color: rgb(var(--negro)); }
.color__06 .card__circle { background: rgb(var(--teal-700)); }
.color__07 {
    color: rgb(var(--blanco));
    background: rgb(var(--teal-700));
}
.color__07 .card__circle { background: rgb(var(--blue-700)); }
.color__08   {
    color: rgb(var(--blanco));
    background: rgb(var(--purple-500));
}
.color__08 .card__circle { background: rgb(var(--purple-700)); }
.color__09   {
    color: rgb(var(--blanco));
    background: rgb(var(--teal-300));
}
.color__09 .card__circle { background: rgb(var(--blue-700)); }

.confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    filter: drop-shadow(0px 0px 5px rgba(var(--negro), .6));
    will-change: filter;
}
.item__s .confetti img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

.grid__item.no-results {
    width: 100%;
    display: flex;
}
.res__detail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: rgba(var(--blanco), .1);
    border-radius: var(--space-10);
}


/******************************
*   Grid
******************************/
.cont__grid { margin-bottom: -16px; }
.grid {
    margin-left: -8px;
    margin-right: -8px;
}
.grid__item {
    width: 100%;
    padding: 0 8px;
    margin-bottom: 16px;
}

/******************************
*   Calendario Item
******************************/
.calendar .mid__img figure {
    border-radius: 0%;
    padding: 0;
}
.calendar .mid__img figure img { position: relative; }
.card__content.calendar .log__top > * + *::after,
.card__content.calendar .fi__number,
.card__content.calendar .fi__text,
.card__content.calendar .text__logo { filter: initial; }

.calendar .top__col:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.calendar .mid__img {
    width: 75%;
    max-width: 300px;
}
.calendar .fil__bot { margin-top: -10px; }


/******************************
*   Filtros
******************************/
.cont__filters {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
    font-family: 'FWC26 Condensed';
    font-weight: 500;
    font-style: normal;
}
.filters__panel { display: none; }
.cont__filters > * {
    overflow: auto;
    overflow: scroll;
    text-align: right;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cont__filters > *::-webkit-scrollbar { display: none; }
.cont__scroll { display: inline-block; }
.cont__scroll > * {
    display: flex;
    gap: 15px;
}
.btn__filter {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 10px 15px;
    border-radius: var(--space-6);
    border: none;
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    -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__filter figure { height: 26px; }
.btn__filter figure img {
    object-position: center;
    object-fit: cover;
    height: 100%;
}
.is__active {
    background: rgb(var(--yellow-700)) !important;
    color: rgb(var(--negro)) !important;
}
.is__active .fa-angle-down {
    -webkit-transform: rotateX(180deg) translateY(2px);
    -moz-transform: rotateX(180deg) translateY(2px);
    -ms-transform: rotateX(180deg) translateY(2px);
    -o-transform: rotateX(180deg) translateY(2px);
    transform: rotateX(180deg) translateY(2px);
}
#filter__brands .btn__filter { padding: 8px 15px; }
/* .fil__full.cont__filters {
    width: 100vw;
    transform: translateX(-50%);
    margin-left: 50%;
}
.fil__full.cont__filters > * {
    text-align: center;
    padding: 0 15px;
} */

.wrapper#home .btn__filter,
.wrapper#calendario .btn__filter,
.wrapper#promociones .btn__filter { background: rgba(var(--blanco), .15); }

/******************************
*   Banner Joy
******************************/
.banner__joy {
    color: rgb(var(--blanco));
    background: rgb(var(--j_04));
}
.banner__joy .top__col:nth-child(1) { padding-right: 0%; }
.banner__joy .top__col:nth-child(2) {
    padding-left: 0%;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.banner__joy .top__head { color: rgb(var(--blanco)) !important; }
.banner__joy .head__title { font-size: 22px; }
.banner__joy .top__col:nth-child(1) .c__cta .cta__icon { color: rgb(var(--negro)); }
.banner__joy .mid__img {
    margin: 0 auto;
    width: 65%;
    -webkit-transform: translateY(24px);
    -moz-transform: translateY(24px);
    -ms-transform: translateY(24px);
    -o-transform: translateY(24px);
    transform: translateY(24px);
}
.banner__joy .mid__img figure {
    padding: 0;
    border-radius: initial;
    overflow: initial;
}
.banner__joy .mid__img figure img {
    position: relative;
    width: 100%;
    height: initial;
}
.banner__joy .logo__joy {
    margin-left: auto;
    margin-right: auto;
}
.banner__joy .logo__joy > * { height: auto; }
.banner__joy .card__circle {
    top: 70%;
    bottom: initial;
    right: 0%;
}
.banner__joy .card__circle .plus {
    position: absolute;
    width: 4%;
}
.p__01 {
    bottom: 100%;
    right: 64%;
}
.p__02 {
    bottom: 80%;
    left: 95%;
}
.banner__joy .card__circle .plus span {
    display: block;
    width: 100%;
    padding-top: 100%;
}
.banner__joy .card__circle .plus span::before,
.banner__joy .card__circle .plus span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 30%;
    top: 0;
    left: 0;
}
.banner__joy .card__circle .plus span::after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.banner__joy.ban__01 .card__circle { background: rgb(var(--j_06)) !important; }
.banner__joy.ban__02 .card__circle { background: rgb(var(--j_07)) !important; }
.banner__joy.ban__03 .card__circle { background: rgb(var(--j_05)) !important; }
.ban__01 .card__circle .p__01 span::before,
.ban__01 .card__circle .p__01 span::after { background: rgb(var(--j_07)); }
.ban__01 .card__circle .p__02 span::before,
.ban__01 .card__circle .p__02 span::after { background: rgb(var(--j_05)); }
.ban__02 .card__circle .p__01 span::before,
.ban__02 .card__circle .p__01 span::after { background: rgb(var(--j_05)); }
.ban__02 .card__circle .p__02 span::before,
.ban__02 .card__circle .p__02 span::after { background: rgb(var(--j_06)); }
.ban__03 .card__circle .p__01 span::before,
.ban__03 .card__circle .p__01 span::after { background: rgb(var(--j_07)); }
.ban__03 .card__circle .p__02 span::before,
.ban__03 .card__circle .p__02 span::after { background: rgb(var(--j_06)); }

/******************************
*   Banners
******************************/
.banner__cont {
    overflow: hidden;
    border-radius: var(--space-10);
    position: relative;
}
.bg__ban  {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.bg__ban > * {
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.banner__info { position: relative; }

/* Banner Promo */
.ban__promo {
    --yellow-500: 255, 215, 4;
    --yellow-1000: 255, 187, 4;
    color: rgb(var(--negro));
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(to right,  rgba(var(--yellow-500),1) 20%,rgba(var(--yellow-1000),1) 100%);
}
.ban__promo .bg__ban { opacity: .5; }
.ban__promo .banner__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px;
}
.promo__logo { width: 80%; }
.promo__prem {
    max-width: 400px;
    width: 100%;
}
.ban__promo .banner__text { width: 100%; }
.promo__prem img { margin-top: -11%; }
.ban__promo .c__cta { justify-content: center; }
.banner__cont * + .c__cta,
.banner__cont .c__cta + * { margin-top: 40px; }

/* Banner Joy */
.ban__joy {
    text-transform: uppercase;
    text-align: center;
}
.ban__joy .banner__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px;
    color: rgb(var(--blanco));
}
.ban__joy .c__cta { justify-content: center; }
.logo__pase {
    max-width: 350px;
    width: 60%;
}
.pase__fan { max-width: 400px; }

.ban__joy h3 {
    font-family: 'FWC26 UltraCondensed';
    font-weight: 500;
    font-style: normal;
    font-size: 40px;
    line-height: .8;
}
.ban__joy h3 span {
    display: block;
    color: rgb(var(--yellow-700));
}
.pase__fan > * { margin-bottom: -30px; }


@media (max-width : 679px) {
}
@media (min-width : 680px) {
/* Banner Promo */
.ban__promo { text-align: left; }
.ban__promo .bg__ban { width: 65%; }
.ban__promo .banner__info {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    padding: 30px 40px;
}
.promo__logo {
    width: calc(26% - 15px);
    -webkit-transform: translateY(-80%) scale(1.2);
    -moz-transform: translateY(-80%) scale(1.2);
    -ms-transform: translateY(-80%) scale(1.2);
    -o-transform: translateY(-80%) scale(1.2);
    transform: translateY(-80%) scale(1.2);
    transform-origin: 0 0;
}
.promo__prem { width: calc(34% - 15px); }
.ban__promo .banner__text { width: calc(40% - 30px); }
.ban__promo .c__cta { justify-content: initial; }
.banner__cont * + .c__cta,
.banner__cont .c__cta + * { margin-top: 30px; }

/* Banner Joy */
.ban__joy .banner__info {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 30px 40px;
}
.logo__pase { width: calc(20% - 15px); }
.pase__fan { width: calc(35% - 15px); }
.ban__joy .banner__text { width: calc(45% - 30px); }

}
@media (min-width : 680px) and (max-width : 991px) {
/* Banner Promo */
.ban__promo h3 { font-size:18px }

/* Banner Joy */
.ban__joy h3 { font-size: 30px; }
.ban__joy h3 span { display: contents; }

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






/******************************
*   Calendario Page
******************************/
.wrapper#calendario {
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
}
.calendar .head__title { font-size: 22px; }
.banner__calen .card__content { border-radius: 0; }
.banner__calen .carf__info {
    padding-top: 120px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
}
.banner__calen .info__fil {
    max-width: 1500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.banner__calen .top__col:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.banner__calen .top__col:nth-child(2) { padding-top: 0; }
.banner__calen .mid__img {
    width: 40vh;
    max-width: 100%;
    margin: 0 auto;
}

.promo__item + .promo__item { border-top: 1px solid rgba(var(--blanco), .3); }
.promo__item {
    width: 100%;
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.item__col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.item__col:nth-child(2) {
    flex: 1;
    justify-content: start;
}
.cont__date {
    padding: 12px;
    border-radius: var(--space-10);
    background: rgb(var(--blanco));
    color: rgb(var(--negro));
    text-align: center;
    width: 100%;
    opacity: ;
}
.cont__date span { line-height: 1.1; }
.date__mounth {
    font-family: 'FWC26 Condensed';
    font-weight: 500;
    font-style: normal;
}
.date__day {
    font-family: 'FWC26 Normal';
    font-weight: 300;
    font-style: normal;
}
.img__promo {
    width: 100px;
    min-width: 100px;
    position: relative;
}
.img__promo figure {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.img__promo figure img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
}
.text__promo > * + * { margin-top: 10px; }
.text__promo {
    font-family: 'FWC26 Normal';
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
}
.text__promo h3 {
    font-family: 'FWC26 Condensed';
    font-weight: bold;
    font-style: normal;
    font-size: 18px;
} 
.item__col .cta { white-space: nowrap; }
.item__col .cta[href="#"] {
    color: rgb(var(--blanco));
    background: rgba(var(--blanco), .15);
    pointer-events: none;
}
.item__col .cta[href="#"] .cta__icon { background: rgba(var(--blanco), .1); }

/******************************
*   Detalle
******************************/
#detalle-promocion .head__s h2,
#detalle-promocion .head__s h3 {
    font-family: 'FWC26 Normal';
    font-weight: bold;
}
#detalle-promocion .cont__sections {
    font-family: 'FWC26 Normal';
    font-weight: 100;
    font-style: normal;
}
.cont__summary {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: 15px;
}
.summary__item {
    padding: 15px;
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
    display: flex;
    gap: 15px;
    align-items: center;
    border-radius: var(--space-6);
}
.s__icon { font-size: 34px; }
.s__text {
    font-family: 'FWC26 Normal';
    font-style: normal;
    font-size: 14px;
}
.s__text > * { display: block; }
.s__text > *:nth-child(1) { font-weight: 100; }
.s__text > *:nth-child(2) {
    font-weight: bold;
    color: rgb(var(--yellow-700));
}
.s__end .s__text > *:nth-child(2) { color: rgb(var(--red-700)); }

.cont__brand { padding: 0; }

/* ----- */
.scrollmagic-pin-spacer { pointer-events: none; }
.frase__cont {
    overflow: hidden;
    padding: 0;
}
.cont__text {
    width: 100%;
    display: flex;
    white-space: nowrap;
    will-change: transform;
    align-items: center;
}
.text {
    text-transform: uppercase;
    font-size: 25vw;
    font-size: clamp(90px, 40vw, 350px);
    font-family: 'FWC26 UltraCondensed';
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    margin: 0;
    padding: 0 5vw;
    color: rgb(var(--color_frase));
    filter: drop-shadow(0px 0px 10px rgba(var(--negro), .2));
    will-change: filter;
}

/* ----- */
.media {
    width: 120vh;
    max-width: 100%;
    margin: 0 auto;
}

/* ----- */
.short__legal {
    text-align: center;
    font-size: 75%;
}

/* ----- */
.page__change {
    display: flex;
    flex-flow: wrap;
    gap: 30px;
}

.change__col { display: flex; }
.change__logo {
    width: 100%;
    justify-content: center;
}
.change__control { width: calc(50% - 15px); }
.change__col:nth-child(3) { justify-content: flex-end; }

* + .refe { margin-top: 30px; }
.refe {
    text-align: center;
    font-size: 90%;
}

/******************************
*   Joy
******************************/
.joy {
    font-size: 16px;
    color: rgb(var(--blanco));
    background: rgb(var(--j_01));
    padding: 30px;
    text-align: center;
    line-height: 1.2;
}
.joy > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    gap: 30px;
}
.fil__joy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.fil__01 { gap: 20px; }
.fil__01 > * { margin-top: 0; }
.fil__02 { gap: 30px; }
.logo__joy { width: 120px; }
.logo__joy > * {
    display: block;
    width: 100%;
    height: 100%;
} 
.logo__joy > * > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}
.buscando {
    font-size: 24px;
    color: rgb(var(--j_02));
    line-height: 1;
}
.download {
    line-height: 1;
    border-radius: var(--space-10);
    background: rgb(var(--j_03));
    padding: 15px;
    white-space: nowrap;
}
.btn__store {
    display: flex;
    gap: 30px;
    justify-content: center;
    width: 100%;
    max-width: 342px;
    min-width: 330px;
}

/******************************
*   Mixto
******************************/
* + .mix__sect { margin-top: 40px; }

/******************************
*   Marquee
******************************/
.wrapper__marquee {
    background: rgb(var(--red));
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 0;
    overflow: hidden;
    padding: 16px 0;
    z-index: 10;
}
.marquee {
    display: flex;
    width: max-content;
    gap: 40px;
    white-space: nowrap;
    animation: move__text 30s linear infinite;
    will-change: transform;
}
.marquee p {
    margin: 0;
    color: #fff;
    font-family: 'FWC26 Normal';
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
@-webkit-keyframes move__text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@keyframes move__text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@keyframes move__text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/******************************
*   Home
******************************/
#home {
    background: rgb(var(--negro));
    color: rgb(var(--blanco));
}
/******************************
*   Pormociones
******************************/
.wrapper#promociones {
    background: rgb(var(--negro));
    color: rgb(var(--blanco));
}

/******************************
*   LB
******************************/
.lb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(var(--negro), .7);
    z-index: 1000;
    display: none;
}
.lb__cont {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 15px;
}
.cont__box {
    padding: 40px 30px;
    position: relative;
    border-radius: var(--space-10);
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 10px rgba(var(--negro), .3);
}
.box__b {
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
}
.box__w {
    color: rgb(var(--negro));
    background: rgb(var(--blanco));
}
.closr {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.box__b .closr { color: rgb(var(--yellow-900)); }

.g__ret {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: 10px;
}
.ret__item a {
    display: block;
    background: rgb(var(--blanco));
    padding: 10px;
    border-radius: var(--space-10);
}
.ret__item a figure { height: 30px; }
.ret__item a figure img {
    object-fit: contain;
    object-position: center;
    height: 100%;
}
* + .lb__nota { margin-top: 60px }
.lb__nota {
    font-size: 80%;
    opacity: .5;
    margin-bottom: -20px;
}
.lb__cont .c__cta { justify-content: center; }

/******************************
*   Resultados de busqueda
******************************/
.list__result ul {
    list-style: none;
    padding-inline-start: 0;
}
.list__result li {
    margin: 0;
    position: relative;
}
.list__result li + li::before {
    content: '';
    position: absolute;
    width: 200px;
    border-top: 1px solid rgba(var(--negro), .1);
    top: 0;
    left: 0;
}
.list__result li a {
    display: flex;
    gap: 20px;
}
.list__result li a {
    padding: 20px 15px;
    border-radius: var(--space-10);
}
.list__result li a:hover { background: rgba(var(--negro), .05); }
.result__info > * + * { margin-top: 10px; }
.info__tit {
        font-family: 'FWC26 Condensed';
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
}

/******************************
*   Mensajes
******************************/
.cont__mess {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    font-family: "FWC26 Normal";
    font-weight: 100;
    font-style: normal;
    font-size: 20px;
}
.txt__top {
    display: flex;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    font-style: normal;
}

/******************************
*   Circ Page
******************************/
.circ__page {
    position: absolute;
    width: 160%;
    padding-top: 160%;
    border-radius: 50%;
    bottom: 40%;
    right: 15%;
    background: rgb(var(--blanco));
    opacity: .1;
}

/******************************
*   Error
******************************/
#error {
    color: rgb(var(--blanco));
    background: rgb(var(--negro));
}
#error main section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#error .txt__top {
    color: rgb(var(--yellow-700));
    font-size: 56px;
    gap: 6px;
}

/******************************
*   Contacto
******************************/
#contacto .circ__page {
    background: rgb(var(--negro));
    opacity: .03;
}
#contacto main { min-height: calc(100vh - 160px); }
.info__cont {
    max-width: 800px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
}
.info__cont + .cont__fomr { margin-top: 40px; }
.number__tel {
    text-align: center;
    margin-bottom: 30px;
}
.number__tel * + * { margin-top: 6px; }
.call__us {
    font-family: 'FWC26 normal';
    font-weight: bold;
    font-style: normal;
}
.call__us span {
    font-family: 'FWC26';
    font-weight: 500;
    font-weight: normal;
    display: inline-block;
    margin-right: 5px;
}
.call__us a { font-size: 24px; }
.time {
    font-size: 12px;
    font-family: 'FWC26';
    font-weight: normal;
}
.call__us span,
.time { opacity: .6; }

.letter {
    display: flex;
    gap: 20px;
    align-items: center;
    font-family: 'FWC26 normal';
    font-weight: bold;
    font-style: normal;
    font-size: 32px;
}
.letter span { opacity: .3; }
.letter hr {
    width: 100%;
    border-top: 1px solid #cfcfcf;
}

/******************************
*   Formularios
******************************/
* + .cont__fomr,
.cont__fomr + * { margin-top: 60px; }
.cont__fomr .form__camps {
    display: flex;
    flex-flow: wrap;
    align-items: flex-end;
    gap: 30px;
}
.fomr__s .form__camps { max-width: 500px; }
.fomr__m .form__camps { max-width: 800px; }
.fomr__l .form__camps { width: 100%; }

.fomr__s .form__camps,
.fomr__m .form__camps,
.fomr__l .form__camps { margin: 0 auto; }

.form__camps .camp { flex: 0 0 100%; }


@media (min-width : 768px) {
    .form__2 .form__camps .camp { flex: 0 1 calc((100% - (30px * 1)) / 2); }
    .form__3 .form__camps .camp { flex: 0 1 calc((100% - (30px * 2)) / 3); }
}


.cont__fomr .form__camps .text__large,
.cont__fomr .form__camps .cta__send {
    flex: 0 0 100%;
    max-width: 100%;
}
.camp label {
    font-family: 'FWC26';
    font-weight: 500;
}
.camp,
.camp > div { position: relative; }
.camp > div input,
.camp > div select,
.camp > div textarea { padding-left: 40px; }
.camp > div textarea {
    min-height: 150px;
}
.camp > div select { padding-right: 30px; }
.camp__icon {
    position: absolute;
    top: 12px;
    opacity: .6;
    pointer-events: none;
    -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;
}
.icon__l { left: 10px; }
.icon__r { right: 10px; }

.camp > div *:focus + * { opacity: 1; }

.cta__send { text-align: center; }

/******************************
*   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 : 550px) {
.hero .logo__over { bottom: 9vw; }
.logo__over .fifa__logos { height: 14vw; }
.log__top > * + * {
    padding-left: 2vw;
    margin-left: 2vw;
}
.fifa__logos > * + *,
.fifa__logos.l__grup > * + * { margin-top: 2vw; }

}

@media (max-width : 679px) {

/* Slider: Hero */
.hero .button-swiper {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.hero .button-prev { left: 15px; }
.hero .button-next { right: 15px; }

/* Calendario Page */
.calendar .card__circle {
    width: 200%;
    padding-top: 200%;
    bottom: 30%;
    right: -20%;
}
.calendar .top__col:nth-child(1) { padding-right: 0%; }
.calendar .top__col:nth-child(2) {
    padding-left: 0%;
    padding-top: 20px;
}
.calendar .mid__img { margin: 0 auto; }

}
@media (min-width : 680px) {
.sect__m {
    padding-bottom: 39%;
    margin-bottom: -37%;
}

/* Logos FIFA */
/* .log__top > * + *::after {
    left: -1px;
    width: 2px;
} */
/* .logo__over .fifa__logos { height: 100px; } */
/* .logo__over .fifa__logos.l__grup { height: 70px; } */
.fifa__logos.l__grup > * + * { margin-top: 16px; }

.carf__info .log__top > * + *::after {
    left: -0.5px;
    width: 1px;
}

/* Head Brand */
/* .head__brad {
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
} */
.brand__log figure { height: 15vh; }
/* .social__media { justify-content: flex-end; } */

/* Card content */
.carf__info { padding: 24px; }

/* Detalle */
.page__change {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.change__col {
    width: auto;
    align-items: center;
}
.change__col:nth-child(1) {
    grid-area: 1 / 2 / 2 / 3;
    justify-content: center;
}
.change__col:nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
.change__col:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }

/* Marquee */
.marquee p { font-size: 28px; }

/* Circ Page */
.circ__page {
    width: 120%;
    padding-top: 120%;
    bottom: 30%;
    right: 15%;
}

/* Calendario page */
.promo__item {
    flex-direction: row;
    align-items: center;
}
.cont__date {
    padding: 20px 10px;
    font-size: 18px;
    width: 80px;
    opacity: 1;
}
.cont__date span { display: block; }
.item__col { flex: none; }
.text__promo { font-size: 16px; }
.text__promo h3 { font-size: 20px; }

/* Erro */
#error .txt__top { font-size: 85px; }

/* Card content */
a:hover .card__circle {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.fil__top {
    display: grid;
    grid-template-columns: 1fr;
}
.fil__top > * { grid-area: 1 / 1 / 2 / 2; }
.top__col:nth-child(1) { padding-right: 50%; }
.top__col:nth-child(2) {
    padding-left: 50%;
    padding-top: 20px;
}
.mid__img { margin: 0 auto; }

/* Banner Joy */
.banner__joy .top__col:nth-child(1) {
    padding-right: 0%;
    padding-left: 50%;
    padding-bottom: 100px;
    text-align: right;
}
.banner__joy .top__col:nth-child(1) .c__cta { justify-content: flex-end; }
.banner__joy .top__col:nth-child(2) {
    padding-right: 50%;
    padding-left: 0%;
}
.banner__joy .logo__joy {
    position: absolute;
    width: 100px;
    top: initial;
    right: 30px;
    left: initial;
    bottom: -24px;
}
.banner__joy .card__circle {
    width: 80%;
    padding-top: 80%;
    top: 30%;
    bottom: initial;
    right: 40%;
}

/* Calendario Page */
.banner__calen .fil__bot { margin-top: -60px; }
.calendar .carf__info { gap: 0; }
.calendar .head__title { font-size: 32px; }

/* Banner Joy */
.banner__joy .head__title { font-size: 32px; }

/* Calendario Item */
.calendar .mid__img { width: 50%; }
.calendar .fil__bot { margin-top: -50px; }

}
@media (min-width : 680px) and (max-width : 767px) {
/* Banner Joy */
.banner__joy .mid__img {
    width: 100%;
}

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

/* Slider: Hero */
.hero .logo__over {
    right: 15px;
    top: 100px;
    bottom: inherit;
}
.hero .cont__slide {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(var(--negro), 1) 15%);
    mask-image: linear-gradient(to top, transparent 0%, rgba(var(--negro), 1) 15%);
}

.hero .swiper-controls {
    right: 30px;
    bottom: 90px;
    position: absolute;
}
.swiper-controls .swiper-pagination {
    position: relative;
    display: flex;
    bottom: 0;
}

/* Marcas */
#home .marcas {
    padding-top: 0;
    margin-top: -80px;
    z-index: 1;
}

/* Slider Brands */
.cta__brand figure {
    height: 8vh;
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
}
.cta__brand:hover figure {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}


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

/* Calendario Item */
.calendar .mid__img { width: 60%; }

}
@media (max-width : 991px) {
}
@media (min-width : 992px) {
.sect__m {
    padding-bottom: 28%;
    margin-bottom: -26%;
}

/* 992 */
.item__l { width: 100%; }
.item__m { width: 66.66%; }
.item__s { width: 33.333%; }

.grid__item .card__content,
.grid__item .carf__info { height: 100%; }
.item__l .mid__img { width: 40%; }

/* .item__l .carf__info,
.item__m .carf__info { gap: 0px; } */

.item__s .card__circle {
    width: 130%;
    padding-top: 130%;
    bottom: 35%;
    right: 0%;
}
.item__s .top__col:nth-child(2) { padding-top: 52px; }
.item__s .mid__img { width: 90%; }

.item__l .head__title { font-size: 42px; }
.item__m .head__title { font-size: 38px; }
.item__s .head__title { font-size: 16px; }


}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1099px) {
}
@media (min-width : 1100px) {
}
@media (max-width : 1199px) {
.s__top { padding-top: 60px; }
}
@media (min-width : 1200px) {

/* Slider: Hero */
.hero .logo__over {
    right: 30px;
    top: 30px;
}

/* Calendario Page */
.wrapper#calendario .carf__info { padding-top: 60px; }

/* Joy */
.joy { overflow: hidden; }
.joy > * {
    margin: 0 auto;
    max-width: 1920px;
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
}
.fil__joy {
    flex-direction: row;
}
.fil__01 {
    padding-left: 120px;
    gap: 30px;
}
.logo__joy {
    position: absolute;
    width: 100px;
    top: -10px;
    bottom: -34px;
    left: 0;
}
.buscando,
.joy__txt { max-width: 428px; }



}





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,
footer { color: rgb(var(--negro)); }

/******************************
*   Header
******************************/
.header {
    position: FIXED;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 15px 0 15px;
}
.cont__menu {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: rgb(var(--yellow-700));
    border-radius: var(--space-12);
    padding: 5px;    
}

/* Logo */
.logo {
    width: 60px;
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 10;
    pointer-events: all;
    filter: drop-shadow(0px 0px 5px rgba(var(--negro), .1));
    will-change: filter;
    overflow: hidden;
}
.logo a { display: block; }
.logo a span {
    opacity: 0;
    position: absolute;
    top: -100%;
    left: -100%;
}

/* Menu */
.men__opt {
    font-family: 'FWC26 Normal';
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
}
.men__opt li a {
    display: block;
    display: inline-flex;
    gap: 15px;
    align-items: center;
    padding: 15px;
    line-height: 1;
}
.men__opt li.cta__user a {
    padding: 16px;
    border-radius: var(--space-6);
    background: rgb(var(--yellow-500));
}

/* Search */
.btn__search > div {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
}
.search {
    font-family: 'FWC26 Normal';
    font-weight: 100;
}
.search input {
    padding-right: 40px;
    border-radius: 100px;
    border: 0;
}
.search button {
    position: absolute;
    top: 0;
    right: 0;
    width: 43px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Btn mobile */
.btn__mob {
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: relative;
    -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: 10;
}
.btn__mob::before,
.btn__mob > div,
.btn__mob > div span,
.btn__mob.active::before {
    -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::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -o-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    background: rgb(var(--blanco));
    opacity: 0;
}
.btn__mob > div {
    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 > div span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgb(var(--negro));
}

.btn__mob > div span + span { margin-top: 6px; }
.btn__mob.active > div 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 > div span:nth-child(1) {
    -webkit-transform: translate(0px, 8px) rotate(45deg);
    -moz-transform: translate(0px, 8px) rotate(45deg);
    -ms-transform: translate(0px, 8px) rotate(45deg);
    -o-transform: translate(0px, 8px) rotate(45deg);
    transform: translate(0px, 8px) rotate(45deg);
}
.btn__mob.active > div span:nth-child(3) {
    -webkit-transform: translate(0px, -8px) rotate(-45deg);
    -moz-transform: translate(0px, -8px) rotate(-45deg);
    -ms-transform: translate(0px, -8px) rotate(-45deg);
    -o-transform: translate(0px, -8px) rotate(-45deg);
    transform: translate(0px, -8px) rotate(-45deg);
}
.btn__mob.active > div {
    -webkit-transform: translate(-50%, -50%) scale(.8);
    -moz-transform: translate(-50%, -50%) scale(.8);
    -ms-transform: translate(-50%, -50%) scale(.8);
    -o-transform: translate(-50%, -50%) scale(.8);
    transform: translate(-50%, -50%) scale(.8);
}
.btn__mob.active::before {
    -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);
    opacity: 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) {
}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
@media (max-width : 991px) {
/* .container { width: 100%; } */
}
@media (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
.logo {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.menu {
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(var(--yellow-900));
    width: 100%;
    height: 100%;
    padding: 94px 0 60px;
    overflow: auto;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index: -1;
}
.menu.active {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

.men__opt li.cta__user { padding: 10px 15px; }

.btn__search {
    -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__search.hiden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.search {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    padding: 13px 20px;
    background: rgb(var(--yellow-700));
    border-radius: var(--space-12);
    -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;
    z-index: -1;
}
.search .cont__form {
    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;
}
.active.search {
    top: calc(100% - 10px);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    pointer-events: all;
    padding: 20px;
}
.active.search .cont__form { opacity: 1; }
.header.s__active .cont__menu { box-shadow: 0px 5px 5px rgba(var(--negro), 0); }

}
@media (min-width : 1200px) {
.header {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;
}

.btn__search,
.btn__mob { display: none; }
.header { padding: 0; }
.cont__menu {
    border-radius: 0;
    padding-right: 20px;
    box-shadow: 0px 5px 5px rgba(var(--negro), .1);
}

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

/* Menu */
.men__opt {
    display: flex;
    align-items: center;
}
.men__opt li a { padding: 25px 15px; }
.men__opt li.cta__user:not(.cta__user ~ .cta__user) { margin-left: 235px; }
.men__opt li.cta__user + .cta__user { margin-left: 15px; }

/* Search */
.search {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 393px;
}
.search .cont__form { width: 220px; }

}


/******************************
*   Footer
******************************/
footer {
    position: relative;
    z-index: 1;
}
.cont__prod {
    width: 100%;
    position: relative;
    margin-bottom: -90px;
    /* bottom: calc(100% - 90px); */
}
/* main > section:last-child {
    padding-bottom: 38%;
    min-height: calc(100vh - 76px);
}
main > * + section:last-child { min-height: calc(72vh - 76px); } */
.fil__prod {
    overflow: hidden;
    padding: 40px 3% 30px;
    width: 90%;
    margin: 0 auto;
}
.fil__prod > *,
.fil__prod figure { position: relative; }
.fil__prod img {
    max-width: inherit;
    width: 100%;
}
.prod__top {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    margin: 0 -13%;
}
.prod__top > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.prod01 { grid-area: 1 / 3 / 2 / 4; }
.prod02 { grid-area: 1 / 2 / 2 / 3; }
.prod03 { grid-area: 1 / 4 / 2 / 5; }
.prod04 { grid-area: 1 / 1 / 2 / 2; }
.prod05 { grid-area: 1 / 5 / 2 / 6; }
.prod02 { z-index: 2; }
.prod03 { z-index: 2; }
.prod02 .img__prod {
    width: 86%;
    margin: 0 0 0 auto;
    -webkit-transform: translateX(16%);
    -moz-transform: translateX(16%);
    -ms-transform: translateX(16%);
    -o-transform: translateX(16%);
    transform: translateX(16%);
}
.prod03 .img__prod {
    width: 90%;
    -webkit-transform: translateX(-16%);
    -moz-transform: translateX(-16%);
    -ms-transform: translateX(-16%);
    -o-transform: translateX(-16%);
    transform: translateX(-16%);
}
.prod04 .img__prod {
    width: 78%;
    margin: 0 0 0 auto;
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -ms-transform: translateX(60%);
    -o-transform: translateX(60%);
    transform: translateX(60%);
}
.prod05 .img__prod {
    width: 79%;
    -webkit-transform: translateX(-48%);
    -moz-transform: translateX(-48%);
    -ms-transform: translateX(-48%);
    -o-transform: translateX(-48%);
    transform: translateX(-48%);
}
.prod__bot {
    margin: -8% auto 0;
    display: flex;
    align-items: flex-end;
    z-index: 2;
}
.prod__bot > div { width: 50%; }
.prod06 .img__prod {
    width: 80%;
    margin: 0 auto;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
}
.prod07 .img__prod {
    width: 77%;
    margin: 0 0 0 6%;
}
.fil__prod .img__prod figure::before {
    content: '';
    position: absolute;
    filter: blur(2px);
    will-change: filter;
    border-radius: 100%;
}
.prod01 .img__prod figure::before {
    background: rgb(var(--negro));
    left: 0%;
    right: 0%;
    height: 11%;
    bottom: -2px;
    opacity: .5;
}
.prod01 .img__prod figure img { position: relative; }
.prod02 .img__prod figure::before {
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    left: -30%;
    right: -30%;
    height: 3%;
    bottom: -4px;
    opacity: .8;
}
.prod03 .img__prod figure::before {
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    filter: blur(2px);
    will-change: filter;
    left: -30%;
    right: -30%;
    height: 3%;
    bottom: -4px;
    opacity: .8;
}
.prod04 .img__prod figure::before {
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    filter: blur(2px);
    will-change: filter;
    left: -25%;
    right: -25%;
    height: 3%;
    bottom: -3px;
    opacity: .8;
}
.prod05 .img__prod figure::before {
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    filter: blur(2px);
    will-change: filter;
    left: -25%;
    right: -25%;
    height: 3%;
    bottom: -3px;
    opacity: .8;
}
.prod06 .img__prod figure::before {
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    filter: blur(2px);
    will-change: filter;
    left: 0%;
    right: 0%;
    height: 4%;
    bottom: 5%;
    opacity: .8;
}
.prod07 .img__prod figure::before {
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    filter: blur(2px);
    will-change: filter;
    left: 0%;
    right: 0%;
    height: 4%;
    bottom: 6%;
    opacity: .8;
}
.img__prod { position: relative; }
.img__prod span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.prod02 .img__prod span,
.prod03 .img__prod span {
    filter: blur(3px);
    will-change: filter;
    z-index: -1;
}
.prod02 .img__prod span::after,
.prod03 .img__prod span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 97%;
    opacity: .4;
    mask-repeat: no-repeat;
    mask-size: 100%;
    mask-position: 0% 100%;
}
.prod02 .img__prod span::after {
    background: rgb(var(--negro));
    -webkit-mask-image: url('../img/pro02.webp');
    mask-image: url('../img/pro02.webp');
    left: 6%;
}
.prod03 .img__prod span::after {
    background: rgb(var(--negro));
    -webkit-mask-image: url('../img/pro03.webp');
    mask-image: url('../img/pro03.webp');
    left: -6%;
}
.prod04 .img__prod span {
    -webkit-mask-image: url('../img/pro04.webp');
    mask-image: url('../img/pro04.webp');
    mask-repeat: no-repeat;
    mask-size: contain;
    background: linear-gradient(to right,  rgba(0,0,0,0) 40%,rgba(0,0,0,0.8) 100%);
}
.prod05 .img__prod span {
    -webkit-mask-image: url('../img/pro05.webp');
    mask-image: url('../img/pro05.webp');
    mask-repeat: no-repeat;
    mask-size: contain;
    background: linear-gradient(to right,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 30%);
}
.prod06 .img__prod span,
.prod07 .img__prod span {
    filter: blur(3px);
    will-change: filter;
    opacity: .3;
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
    transform: translateY(-5%);
}
.prod06 .img__prod span::before,
.prod07 .img__prod span::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    background: rgb(var(--negro));
}
.prod06 .img__prod span::before {
    -webkit-mask-image: url('../img/pro06.webp');
    mask-image: url('../img/pro06.webp');
    mask-repeat: no-repeat;
    mask-size: contain;
    
}
.prod07 .img__prod span::after {
    -webkit-mask-image: url('../img/pro07.webp');
    mask-image: url('../img/pro07.webp');
    mask-repeat: no-repeat;
    mask-size: contain;
}
.cont__info {
    background: rgb(var(--yellow-900));
    padding: 60px 0 40px;
    font-size: 12px;
}
.cont__prod + .cont__info { padding-top: 90px; }
.fil__info + .fil__info { margin-top: 30px; }
.fil__legal { text-align: center; }
.fil__logos { text-align: center; }
.fil__links {
    display: flex;
    flex-flow: wrap;
    gap: 15px 20px;
    justify-content: center;
}
.fil__links a { text-decoration: underline; }

/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-x : 480px) and (max-width : 767px) {
}
@media (max-width : 679px) {
}
@media (min-width : 680px) {
.cont__prod { margin-bottom: -140px; }
.cont__prod + .cont__info { padding-top: 160px; }

}
@media (min-width : 680px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
@media (max-width : 991px) {
}
@media (min-width : 992px) {
/* main > section:last-child { padding-bottom: 28%; } */
.fil__prod { width: 60%; }

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