:root {
    --color-global-red-1: #c10230;
    --color-global-red-2: #e1251b;
    --color-global-green-1: #2bd124;
    --color-global-green-2: #005265;
    --color-global-green-3: #BEEF62;
    --color-global-green-4: #72c240;
    --color-global-green-5: #ffc700;
    --color-global-green-6: #008200;
    --color-global-yellow-1: #dde5cd;
    --color-global-orange-1: #F4743B;
    --color-global-orange-2: #B94613;
    --color-global-violet: #070065b3;
    --color-global-gray-1: #60605f;
    --color-global-gray-2: #EDEDED;
    --color-global-gray-3: #727B78;
    --color-global-gradient-green: linear-gradient(90deg, #00b02c 0%, #00696a 100%);
    --color-global-gradient-yellow: linear-gradient(90deg, #fdbb34 0%, #fd7f03 100%);
    --color-global-dark: #1d1d1b;
    --color-global-white: #fff;

    --sizing-global-16: 16px;
    --sizing-global-24: 24px;
    --sizing-global-32: 32px;
    --sizing-global-40: 40px;
    --sizing-global-48: 48px;
    --sizing-global-56: 56px;
    --sizing-global-64: 64px;
    --sizing-global-80: 80px;
    --sizing-global-160: 160px;
    --sizing-global-240: 240px;
    --sizing-global-scale-xs: var(--sizing-global-16);
    --sizing-global-scale-s: calc(var(--sizing-global-scale-xs) * 2);
    --sizing-global-scale-m: calc(var(--sizing-global-scale-s) * 2);
    --sizing-global-scale-l: calc(var(--sizing-global-scale-m) * 2);
    --sizing-global-scale-xl: calc(var(--sizing-global-scale-l) * 2);

    --space-global-4: 4px;
    --space-global-8: 8px;
    --space-global-12: 12px;
    --space-global-16: 16px;
    --space-global-20: 20px;
    --space-global-24: 24px;
    --space-global-28: 28px;
    --space-global-32: 32px;
    --space-global-36: 36px;
    --space-global-40: 40px;
    --space-global-48: 48px;
    --space-global-56: 56px;
    --space-global-64: 64px;
    --space-global-80: 80px;
    --space-global-96: 96px;
    --space-global-112: 112px;
    --space-global-128: 128px;
    --space-global-144: 144px;
    --space-global-160: 160px;
    --space-global-176: 176px;

    --spacing-scale-xs: calc(var(--space-global-4));
    --spacing-scale-s: calc(var(--spacing-scale-xs) * 2);
    --spacing-scale-m: calc(var(--spacing-scale-s) * 2);
    --spacing-scale-l: calc(var(--spacing-scale-m) * 2);
    --spacing-scale-xl: calc(var(--spacing-scale-l) * 2);

    --border-radius-global-none: none;
    --border-radius-global-xs: 4px;
    --border-radius-global-s: 8px;
    --border-radius-global-m: 12px;
    --border-radius-global-l: 16px;
    --border-radius-global-xl: 20px;
    --border-radius-global-full: 100px;

    --border-global-width-s: 1px;
    --border-global-width-m: 2px;
    --border-global-width-l: 4px;
    --border-global-width-xl: 8px;

    --border-global-style-solid: solid;
    --border-global-style-dashed: dashed;

    --shadow-global-s: 0 2px 4px 1px rgba(0,0,0,0.12);
    --shadow-global-m: 0 10px 15px 2px rgba(0,0,0,0.12);
    --shadow-global-l: 0 10px 40px 20px rgba(0,0,0,0.12);
    --shadow-global-btn: 0 4px 0px 0px var(--color-global-orange-2);
    --shadow-global-btn-white: 0 4px 0px 0px var(--color-global-green-2);

    --font-family-game: 'Bungee';
    --font-family-manrope: 'Manrope';

    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;

    --font-line-height-120: 1.2;
    --font-line-height-150: 1.5;

    --font-global-size-f-4: 8px;
    --font-global-size-f-3: 10px;
    --font-global-size-f-2: 11px;
    --font-global-size-f-1: 14px;
    --font-global-size-f0: 16px;
    --font-global-size-f1: 19px;
    --font-global-size-f2: 22px;
    --font-global-size-f3: 26px;
    --font-global-size-f4: 31px;
    --font-global-size-f5: 37px;
    --font-global-size-f6: 43px;
    --font-global-size-f7: 51px;
    --font-global-size-f8: 61px;
    --font-global-size-f9: 72px;
    --font-global-size-f10: 85px;
    --font-global-size-f11: 100px;

    --font-text-case-uppercase: uppercase;
    --font-text-case-lowercase: lowercase;
    --font-text-case-capitalize: capitalize;
    --font-text-case-none: none;
    
    --font-text-decoration-none: none;
    --font-text-decoration-underline: none;
    --font-text-decoration-line-through: line-through;


    --sizing-component-button-height-m: var(--sizing-global-48);
    --sizing-component-button-height-l: var(--sizing-global-56);
    --sizing-component-button-height-xl: var(--sizing-global-64);

    --space-component-button-padding-vertical: var(--space-global-16);
    --space-component-button-padding-horizontal: var(--space-global-24);

    --space-component-elements-gap-xs: var(--space-global-16);
    --space-component-elements-gap-s: var(--space-global-8);
    --space-component-elements-gap-m: var(--space-global-32);
    --space-component-elements-gap-l: var(--space-global-48);

    --color-system-active: var(--color-global-dark);
    --color-system-white: var(--color-global-white);
    --color-system-inactive: var(--color-global-gray-1);
    --color-system-error: var(--color-global-red-2);
    --color-system-success: var(--color-global-green-4);
    --color-primary-green-dark: var(--color-global-green-2);
    --color-primary-green-med: var(--color-global-green-3);
    --color-primary-green-light: var(--color-global-green-1);
    --color-primary-yellow: var(--color-global-yellow-1);
    --color-secondary: var(--color-global-gray-2);

    --border-style-solid: var(--border-global-style-solid);
    --border-style-dashed: var(--border-global-style-dashed);

    --type-component-paragraph-body-font: var(--font-family-manrope); 
    --type-component-paragraph-body-weight: var(--font-weight-400); 
    --type-component-paragraph-body-size: var(--font-global-size-f0); 
    --type-component-paragraph-body-bold-font: var(--font-family-manrope); 
    --type-component-paragraph-body-bold-weight: var(--font-weight-700); 
    --type-component-paragraph-body-bold-size: var(--font-global-size-f0); 
    --type-component-paragraph-subtitle-font: var(--font-family-manrope); 
    --type-component-paragraph-subtitle-weight: var(--font-weight-700); 
    --type-component-paragraph-subtitle-size: var(--font-global-size-f2); --type-component-paragraph-titleparagraph-font: var(--font-family-manrope); 
    --type-component-paragraph-titleparagraph-weight: var(--font-weight-700); 
    --type-component-paragraph-titleparagraph-size: var(--font-global-size-f4); --type-component-paragraph-title-font: var(--font-family-manrope); 
    --type-component-paragraph-title-weight: var(--font-weight-700); 
    --type-component-paragraph-title-size: var(--font-global-size-f2); 
    --type-component-paragraph-display-font: var(--font-family-game); 
    --type-component-paragraph-display-weight: var(--font-weight-400); 
    --type-component-paragraph-display-size: var(--font-global-size-f4); 
    --type-component-paragraph-text-font: var(--font-family-manrope); 
    --type-component-paragraph-text-weight: var(--font-weight-500); 
    --type-component-paragraph-text-size: var(--font-global-size-f1); 

    --type-component-form-input-font: var(--font-family-manrope); 
    --type-component-form-input-weight: var(--font-weight-400); 
    --type-component-form-input-size: var(--font-global-size-f0); 
    --type-component-form-label-font: var(--font-family-manrope); 
    --type-component-form-label-weight: var(--font-weight-500); 
    --type-component-form-label-size: var(--font-global-size-f-1); 

    --type-component-button-m-font: var(--font-family-manrope); 
    --type-component-button-m-weight: var(--font-weight-700); 
    --type-component-button-m-size: var(--font-global-size-f0);
    --type-component-button-l-font: var(--font-family-game); 
    --type-component-button-l-weight: var(--font-weight-400); 
    --type-component-button-l-size: var(--font-global-size-f0);
    --type-component-button-xl-font: var(--font-family-game); 
    --type-component-button-xl-weight: var(--font-weight-400); 
    --type-component-button-xl-size: var(--font-global-size-f2); 

    --type-component-game-m-font: var(--font-family-manrope); 
    --type-component-game-m-weight: var(--font-weight-700); 
    --type-component-game-m-size: var(--font-global-size-f1); 
    --type-component-game-m-font: var(--font-family-game); 
    --type-component-game-m-weight: var(--font-weight-400); 
    --type-component-game-m-size: var(--font-global-size-f2); 
    --type-component-game-xl-font: var(--font-family-game); 
    --type-component-game-xl-weight: var(--font-weight-400); 
    --type-component-game-xl-size: var(--font-global-size-f3); 
}


/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

*,
:after,
:before {
    box-sizing: border-box;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

a[nohref] {
    cursor: pointer;
}

button {
    border: 0;
}

input:focus {
    border: none;
    outline: none;
}


/* BASE */
body {
    font-family: var(--font-family-manrope), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-paragraph-text-size);
    line-height: var(--font-line-height-120);
}

canvas {
    touch-action-delay: none;
    touch-action: none;
    -ms-touch-action: none;
    background: var(--color-primary-green-dark);
}

a {
    color: var(--color-primary-green-dark);
    text-decoration: underline;
    word-break: break-all;
}

strong {
    font-weight: 700;
}

.display {
    font-family: var(--type-component-paragraph-display-font), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-paragraph-display-size);
    font-weight: var(--type-component-paragraph-display-weight);
    line-height: var(--font-line-height-150);
}

.title {
    font-family: var(--type-component-paragraph-title-font), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-paragraph-title-size);
    font-weight: var(--type-component-paragraph-title-weight);
    line-height: var(--font-line-height-150);
}

.subtitle {
    font-family: var(--type-component-paragraph-subtitle-font), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-paragraph-subtitle-size);
    font-weight: var(--type-component-paragraph-subtitle-weight);
}

.text {
    font-family: var(--type-component-paragraph-body-font), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-paragraph-body-size);
    font-weight: var(--type-component-paragraph-body-weight);
}

p {
    font-family: var(--type-component-paragraph-text-font), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-paragraph-text-size);
    font-weight: var(--type-component-paragraph-text-weight);
}

label {
    font-family: var(--type-component-form-label-font), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-form-label-size);
    font-weight: var(--type-component-form-label-weight);
}

input {
    font-family: var(--type-component-form-input-font), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-form-input-size);
    font-weight: var(--type-component-form-input-weight);
}

ul li::before {
    content: "·";  
    color: var(--color-global-green-1); 
    font-weight: bold; 
    display: inline-block;
    width: 14px; 
    margin-left: -1em; 
    font-size: 14px;
    transform: scale(3) translateX(3px);
}

ul {
    font-family: var(--type-component-paragraph-body-size), Arial, Helvetica, sans-serif;
    font-size: var(--type-component-paragraph-body-size);
    font-weight: var(--type-component-paragraph-body-weight);
    list-style: none;
}

.btn {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: fit-content;
    align-self: center;
    text-decoration: none;
    margin: 0 auto;
}

.btn-l {
    font-family: var(--type-component-button-l-font);
    font-weight: var(--type-component-button-l-weight);
    font-size: var(--type-component-button-l-size);
    padding: var(--space-component-button-padding-vertical) var(--space-component-button-padding-horizontal);
    border-radius: var(--border-radius-global-full);
}

.btn-xl {
    font-family: var(--type-component-button-xl-font);
    font-weight: var(--type-component-button-xl-weight);
    font-size: var(--type-component-button-xl-size);
    padding: var(--space-component-button-padding-vertical) var(--space-component-button-padding-horizontal);
    border-radius: var(--border-radius-global-full);
}

.btn-degradate {
    background: var(--color-global-orange-1);
    color: var(--color-global-white);
    box-shadow: var(--shadow-global-btn);
}

.btn-white {
    background: var(--color-system-white);
    color: var(--color-primary-green-dark);
    box-shadow: var(--shadow-global-btn-white);
}

.btn.disabled {
    pointer-events: none;
    cursor: default;
    opacity: .5;
}

.btn-full {
    width: 100%;
}

/* ICONO USUARIO Y NOMBRE */
.user.user--vertical {
    display: grid;
    gap: var(--spacing-scale-s);
    text-align: center;
}

.user.user--vertical .user-img {
    margin: 0 auto;
}

.user .user-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 119px;
    height: 119px;
    background: var(--color-global-gray-2);
    border-radius: var(--border-radius-global-full);
}

.user .user-img img {
    width: 100%;
    height: auto;
}

.user .name {
    font-family: var(--font-family-game);
    font-weight: var(--font-weight-700);
    text-transform: var(--font-text-case-uppercase);
    font-size: var(--font-global-size-f1);
    line-height: 1;
}

/* HEADER */
.header {
    height: 77px;
    background-color: var(--color-primary-green-dark);
}

.header-bg {
    background-image: url(./../assets/fondo-header.jpg);
    background-size: cover;
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-scale-m);
    height: 100%;
    padding: 0 var(--space-global-32);
    position: relative;
}

.header .container .logo {
    width: 110px;
}

.header .container .logo img {
    width: inherit;
    height: auto;
}

.header .container .user,
.header .container .points {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto;
    gap: var(--spacing-scale-m);
}

.header .container .user .name,
.header .container .position .name,
.header .container .points .name {
    align-self: center;
    font-family: var(--font-family-game);
    color: var(--color-system-white);
    font-size: var(--font-global-size-f0);
    text-transform: var(--font-text-case-uppercase);
}

.header .container .user .user-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-global-36);
    height: var(--space-global-36);
    background: var(--color-global-gray-2);
    border-radius: var(--border-radius-global-full);
    padding: calc(var(--space-global-4) / 2);
}

.header .container .points .user-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-global-24);
    height: var(--space-global-24);
    padding: calc(var(--space-global-4) / 2);
}

.header .container .user .user-img img,
.header .container .points .user-img img {
    display: block;
    width: 100%;
}

.header .container .position span {
    color: var(--color-global-orange-1);
}

.header .container .user-container {
    animation: user 6s infinite;
}

.header .container .points-container {
    position: absolute;
    opacity: 0;
    animation: points 6s infinite;
    right: 32px;
}

.header .container .position-container {
    position: absolute;
    opacity: 0;
    animation: position 6s infinite;
    right: 32px;
}

@keyframes user {
    0% {
        opacity: 1;
    }
    32% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes points {
    0% {
        opacity: 0;
    }
    32% {
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes position {
    0% {
        opacity: 0;
    }
    32% {
        opacity: 0;
    }
    33% {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    66% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}




/* CONTENEDOR */
.body-content {
    min-height: calc(100vh - 77px);
}

.body-content .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 77px);
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-global-48) var(--space-global-32) var(--space-global-32);
    gap: var(--space-component-elements-gap-m);
}

.body-content .container .title {
    color: var(--color-primary-green-dark);
    text-align: center;
    text-wrap: pretty;
}

.body-content.body-content--full .container {
    min-height: inherit;
    margin-bottom: var(--space-global-40);
    padding: 0;
}

.body-content.body-content--full .container {
    color: var(--color-global-green-2);
}

.body-content.body-content--large .container {
    margin: 0;
}


.body-content.body-content--large .section-bg {
    height: auto;
    min-height: inherit;
}

.body-content.body-content--full.body-content--load .container {
    margin-bottom: 0;
    max-width: 100%;
}

.body-content--load .container .section-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(./../assets/fondo-bg-logo.jpg);
    background-size: cover;
    height: calc(100vh - 77px);
}

.body-content.body-content--load .container .img-container {
    max-width: 287px;
    width: 100%;
}



/* HOME */
.body-content .section-bg {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--space-component-elements-gap-m);
}

.body-content .section-bg.home {
   padding: var(--space-global-32) var(--space-global-32) 130px;
}

.body-content .section-bg .img-container {
    width: 200px;
    margin: 0 auto;
}

.body-content .section-bg .img-container.logos {
    width: 150px;
}

.body-content .section-bg .img-container img {
    width: inherit;
    height: auto;
}

.body-content .section-bg p {
    text-align: center;
}

.body-content .section-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--space-global-48);
}

.body-content .section-btn .img-container {
    display: flex;
    width: 100%;
    margin-top: -148px;
}

.body-content .section-btn .img-container img {
    width: inherit;
    height: 100%;
}

.body-content .section-btn .btn {
    margin-top: -12px;
}

@media(min-width: 768px) {
    .body-content.body-content--load .container .img-container {
        max-width: 400px;
    }
}

/* PÁGINA FORMULARIO */
.body-content-form .container {
    justify-content: flex-start;
}

.form-login {
    display: grid;
    gap: var(--spacing-scale-l);
    margin-bottom: var(--space-global-20);
}

.form-item {
    display: grid;
    color: var(--color-global-gray-1);
    gap: var(--space-global-4);
    width: 100%;
}

.form-error-text {
    display: none;
    color: var(--color-system-error);
    font-weight: var(--font-weight-500); 
    font-size: var(--font-global-size-f-1); 
    margin-top: var(--space-global-4);
}

.form-info-text {
    color: var(--color-primary-green-dark);
    font-weight: var(--font-weight-500); 
    font-size: var(--font-global-size-f-1); 
    margin-top: var(--space-global-4);
}

.form-item.form-error input {
    border-color: var(--color-system-error);
    color: var(--color-system-error);
}

.form-item.form-error .form-error-text {
    display: block;
}

.form-item input {
    border: none;
    border-bottom: var(--border-global-width-m) var(--border-style-solid) var(--color-global-gray-1);
    padding: var(--space-global-12) var(--space-global-16);
    border-radius: var(--border-radius-global-none);
}

.form-checks {
    display: flex;
    align-items: flex-start;
    position: relative;
    flex-wrap: wrap;
}

.form-checks.form-error .form-error-text {
    display: block;
    width: 100%;
    margin-left: var(--space-global-36);
}

.form-checks input[type="checkbox"] {
    position: absolute;
    width: var(--sizing-global-24);
    height: var(--sizing-global-24);
    min-width: var(--sizing-global-24);
    min-height: var(--sizing-global-24);
    cursor: pointer;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    z-index: 1;
}

.form-checks label {
    display: flex;
    font-family: var(--font-family-manrope); 
    font-weight: var(--font-weight-400); 
    font-size: var(--font-global-size-f0);
    margin-top: calc(var(--space-global-4) / 2);
}

.form-checks label a {
    display: contents;
    word-break: normal;
}

.form-checks label:before {
    content: "";
    display: block;
    width: var(--sizing-global-24);
    height: var(--sizing-global-24);
    min-width: var(--sizing-global-24);
    min-height: var(--sizing-global-24);
    border: var(--border-global-width-m) var(--border-style-solid) var(--color-global-green-1);
    border-radius: calc(var(--border-radius-global-s) / 2);
    margin-right: var(--space-global-12);
    margin-top: -2px;
}

.form-checks input[type="checkbox"]:checked + label:before {
    cursor: pointer;
    background-image: url(./../assets/Line.png);
    background-repeat: no-repeat;
    background-size: 26px;
    background-position-x: -3px;
    background-position-y: -3px;
    background-color: var(--color-global-green-1);
    border-color: var(--color-global-green-1);
}

.form-legals {
    display: grid;
    gap: var(--space-global-16);
    padding: var(--spacing-scale-m) 0;
}

.verification-code {
    display: grid;
    gap: var(--spacing-scale-l);
}

.verification-code .text {
    text-align: center;
    color: var(--color-primary-green-dark);
    padding: var(--spacing-scale-s) 0;
    font-weight: var(--font-weight-500);
}

@media(min-width: 768px) {
    .form-login {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: 3%;
    }
    
    .form-item {
        width: 47%;
    }

    .form-item--full {
        width: 100%;
    }
}


/* AVATARES */
.avatars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-self: center;
    gap: var(--spacing-scale-l);
    margin-bottom: var(--sizing-global-16);
}

.avatar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sizing-global-64);
    height: var(--sizing-global-64);
    border-radius: var(--border-radius-global-full);
    background-color: var(--color-global-gray-2);
    animation: all .4s;
    justify-self: center;
    align-self: center;
}

.avatars.select {
    gap: var(--space-component-elements-gap-m);
}

.avatars.select .avatar-item:not(.selected) {
    width: var(--sizing-global-48);
    height: var(--sizing-global-48);
    animation: all .4s;
}

.avatars.select .avatar-item.selected {
    width: 76px;
    height: 76px;
}

.avatar-item img {
    width: 90%;
    height: auto;
}

@media(min-width: 768px) {
    .avatars {
        max-width: 420px;
        height: 110px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .avatar-item {
        width: var(--sizing-global-80);
        height: var(--sizing-global-80);
    }

    .avatars.select .avatar-item.selected {
        width: 110px;
        height: 110px;
    }

    .avatars.select .avatar-item:not(.selected) {
        width: var(--sizing-global-64);
        height: var(--sizing-global-64);
        animation: all .4s;
    }
}


/* LOGOS */
.section-logos {
    display: grid;
    grid-template-rows: min-content min-content;
    gap: var(--space-global-16);
    margin-top: 30px;
}

.section-logos .title {
    font-size: var(--font-global-size-f-1);
}


/* PÁGINA CLASIFICACIÓN */

.section-classification .classification-container {
    display: grid;
    gap: var(--spacing-scale-l);
}

.classification {
    display: grid;
    width: 100%;
    gap: var(--spacing-scale-s);
}

.classification-item {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    height: var(--sizing-global-48);
    gap: var(--spacing-scale-s);
}

.classification-item .number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-game);
    font-size: 26px;
    width: 54px;
    height: 100%;
    background: var(--color-global-green-2);
    color: var(--color-system-white);
}

.classification-item:not(.winner) .number,
.classification-item:not(.winner) .result {
    background: rgba(0, 82, 101, .7)
}

.classification-item.winner .number {
    color: var(--color-global-orange-1);
}

.classification-item.user .number,
.classification-item.user .result {
    background: var(--color-global-green-1);
    color: white;
}

.classification-item .result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-family-game);
    font-size: 26px;
    width: 100%;
    height: var(--sizing-global-48);
    background: var(--color-global-green-2);
    color: var(--color-system-white);
    padding: 0 var(--spacing-scale-m);
    text-transform: var(--font-text-case-uppercase);
    font-size: var(--font-global-size-f1);
    font-weight: var(--font-weight-700);
}

.classification-item .result .user {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-scale-s);
}

.classification-item .result .user .user-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-global-gray-2);
    border-radius: var(--border-radius-global-full);
    width: var(--space-global-36);
    height: var(--space-global-36);
}

.classification-item .result .user .user-img img {
    width: 100%;
}

.classification-item .result .points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--color-global-white);
    gap: 4px;
}

.points-container {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
}

.classification-item .result .points img {
    width: var(--sizing-global-16);
    height: auto;
    margin-right: var(--space-global-8);
}

.classification-item .result .points span {
    line-height: 1;
}

.classification-item .result .points .time {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--space-component-elements-gap-s);
    font-family: var(--font-family-manrope);
    font-size: var(--font-global-size-f-3);
    font-weight: var(--font-weight-400);
}

.classification-item .name {
    font-family: var(--font-family-game);
    align-self: center;
}

.classification-item:not(.winner) .result .points span,
.classification-item:not(.winner) .name {
    font-size: var(--type-component-paragraph-body-size);
}

.classification-item:not(.winner) .points .time span {
    font-size: var(--font-global-size-f-3);
}


/* PERDEDOR */


.score-board {
    height: 126px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: linear-gradient(90deg, #7B84A6 0%, #161A23 100%);
    border-radius: var(--border-radius-global-s);
    padding: var(--spacing-scale-s);
}

.score-board-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: url(./../assets/fondo-score.jpg);
    background-size: cover;
    border-radius: var(--border-radius-global-s);
    position: relative;
}

.score-board-container span {
    width: 65%;
    text-align: center;
    font-family: var(--font-family-game);
    font-size: var(--font-global-size-f9);
    color: var(--color-system-white);
}

.score-board-container img {
    right: var(--spacing-scale-m);
}


/* 404 / PANTALLA VACIA */
.empty-page {
    display: grid;
    height: calc(100vh - 77px);
    padding: var(--space-global-64) var(--space-global-32);
}

.empty-page .container {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: var(--space-global-48);
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
    justify-content: center;
}

.empty-page .img-container {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
}

.empty-page .img-container.img-small {
    width: 221px;
}

.empty-page .img-container img {
    width: inherit;
}

.empty-page p {
    color: var(--color-global-gray-1);
    text-align: center;
}

.empty-page .subtitle {
    color: var(--color-global-dark);
}


/* MODAL */
.modal {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0, 0, 0, 0.45);
}

.modal-container {
    width: 311px;
    display: grid;
    gap: var(--spacing-scale-m);
}

.modal .close {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.modal .close-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sizing-global-24);
    height: var(--sizing-global-24);
    background-color: var(--color-system-white);
    border-radius: var(--border-radius-global-full);
    padding: var(--spacing-scale-xs);
    box-shadow: var(--shadow-global-m);
}

.modal .close-container img {
    display: block;
    width: 100%;
    height: auto;
}

.modal .loading {
    animation: loader 1.7s infinite linear;
    transform: rotate(40deg);
    width: var(--sizing-global-56);
}

@keyframes loader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.modal .modal-body {
    display: grid;
    background: var(--color-system-white);
    border-radius: var(--border-radius-global-m);
    padding: var(--space-global-40) var(--spacing-scale-l);
    gap: var(--spacing-scale-m);
    box-shadow: var(--shadow-global-m);
}

.modal .modal-body img {
    margin: 0 auto;
    width: 50px;
    height: auto;
}

.modal .modal-body p {
    text-align: center;
    color: var(--color-global-dark);
}

.modal .modal-body p:not(.subtitle) {
    color: var(--color-global-gray-1);
    font-size: var(--font-global-size-f0);
    font-weight: var(--font-weight-400);
    line-height: 1.5;
}

.modal.modal--legals .modal-body {
    max-height: 380px;
    padding: var(--space-global-40) var(--spacing-scale-l) var(--space-global-80);
    position: relative;
}

.modal.modal--legals .modal-body .modal-body-container {
    height: 100%;
    max-height: calc(320px - 80px);
    display: grid;
    gap: var(--spacing-scale-m);
    overflow: hidden;
    overflow-y: auto;
    padding-right: var(--spacing-scale-s);
    padding-bottom: var(--spacing-scale-m);
}

.modal.modal--legals .modal-body .modal-body-container::-webkit-scrollbar {
    -webkit-appearance: none;
}

.modal.modal--legals .modal-body .modal-body-container::-webkit-scrollbar:vertical {
    width: calc(var(--sizing-global-16) / 3);
}

.modal.modal--legals .modal-body .modal-body-container::-webkit-scrollbar-button:increment,
.modal.modal--legals .modal-body .modal-body-container::-webkit-scrollbar-button {
    display: none;
} 

.modal.modal--legals .modal-body .modal-body-container::-webkit-scrollbar:horizontal {
    height: calc(var(--sizing-global-16) / 2);
}

.modal.modal--legals .modal-body .modal-body-container::-webkit-scrollbar-thumb {
    background-color: var(--color-global-gray-1);
    border-radius: var(--border-radius-global-full);
}

.modal.modal--legals .modal-body .modal-body-container::-webkit-scrollbar-track {
    border-radius: var(--border-radius-global-full);  
}

.modal.modal--legals .modal-body .text {
    font-weight: var(--font-weight-900);
    color: var(--color-global-dark);
}

.modal.modal--legals .modal-body p {
    text-align: left;
}

.modal.modal--legals .modal-body p:not(.text) {
    font-size: var(--font-global-size-f-1);
}

.modal.modal--legals .btn {
    position: absolute;
    bottom: 20px;
    left: 90px;
}


/* LEGALS */
.legals .container {
    display: grid;
    max-width: 700px;
    margin: 0 auto;
    gap: var(--space-global-24);
    padding: var(--space-global-64) var(--space-global-32);
}

.legals .container p {
    color: var(--color-global-dark);
}

.legals .container p:not(.subtitle),
.legals .container li {
    color: var(--color-global-gray-1);
    font-weight: var(--font-weight-400);
    font-size: var(--font-global-size-f0);
}

.legals .container ul {
    padding-left: var(--sizing-global-24);
}

.legals .container li {
    padding-bottom: var(--sizing-global-24);
}

/* FOOTER */
.footer .footer-container {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto auto auto;
    gap: var(--space-component-elements-gap-s);
    padding: var(--space-global-8) var(--space-global-32) var(--space-global-16);
    justify-content: center;
}

.footer .footer-container a {
    font-size: 12px;
    color: var(--color-global-green-2);
    text-decoration: none;
    text-align: center;
}

.footer.footer-bg .footer-container {
    padding: var(--space-global-32) 0 0;
}

/* ESTILOS IFRAME JUEGO */
.juego {
    height: calc(100% - 77px);
    width: 100vw;
}

@supports (height: 100svb) {
    .juego {
        height: calc(100svb - 77px);
        width: 100vw;
    }
}

/* SLIDER */
.body-content--slider .container {
    display: block;
    height: auto;
    min-height: inherit;
    background-image: url(./../assets/fondo-cancha.jpg);
    background-size: cover;
    background-position: center;
    max-width: 100%;
}

.swiper {
    width: 100%;
    height: 100%;
    padding-bottom: var(--space-global-12);
}

.swiper-wrapper {
    min-height: 400px;
}

.swiper-slide {
    display: grid;
    grid-template-rows: min-content min-content min-content min-content;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    text-align: center;
    font-size: 18px;
    background: var(--color-global-green-2);
    border: var(--border-global-width-l) var(--border-style-solid) var(--color-system-white);
    border-radius: var(--border-radius-global-xl);
    padding: var(--space-global-32) var(--space-global-24) ;
}

.swiper-slide p {
    color: var(--color-global-white);
    font-weight: 400;
    font-size: var(--font-global-size-f2);
    margin-bottom: var(--space-global-28);
}

.swiper-slide .swiper-title {
    font-size: var(--font-global-size-f2);
    font-weight: var(--font-weight-700);
    text-transform: uppercase;
    color: var(--color-global-white);
}

.swiper-slide p.yellow {
    color: var(--color-global-green-5);
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0 auto var(--space-global-28) auto;
}

.swiper-slide img {
    width: 107px;
}

.swiper-slide .premio {
    width: 106px;
}

.swiper-slide .telefono {
    width: 74px;
}

.swiper-pagination {
    position: initial;
    margin-top: 20px;
}

.swiper-pagination-bullet {
    background: var(--color-system-white);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--color-global-green-1);
    transform: scale(1.5);
}

.swiper .btn {
    margin-top: 30px;
}



/* MODIFICADORES */
.nodisplay {
    display: none!important;
}

.yellow {
    color: var(--color-global-green-5);
}

.blue {
    color: var(--color-global-green-2)!important;
}

.green {
    color: var(--color-global-green-1)!important;
}


/* BANNER COOKIES */
#CybotCookiebotDialog {
    font-family: var(--font-family-manrope)!important;
    color: var(--color-global-dark)!important;
}

#CybotCookiebotDialogHeader {
    display: none!important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-bottom: 1px solid var(--color-global-green-2)!important;
    color: var(--color-global-green-2)!important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
    color: var(--color-global-green-2)!important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
    color: var(--color-global-gray-1)!important;
}

#CybotCookiebotDialogBodyContentText {
    font-weight: 300!important;
}

.CybotCookiebotDialogBodyButton {
    border-radius: var(--border-radius-global-full)!important;
}

#CybotCookiebotDialogBodyButtonDecline {
    background: var(--color-global-green-2)!important;
    color: var(--color-system-white)!important;
    border-color: var(--color-global-green-2)!important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    background: var(--color-global-green-1)!important;
    color: var(--color-system-white)!important;
    border-color: var(--color-global-green-1)!important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background: var(--color-system-white)!important;
    color: var(--color-global-green-2)!important;
    border-color: var(--color-global-green-2)!important;
}

#CybotCookiebotDialogPoweredByText a {
    font-weight: 700!important;
}

#CybotCookiebotDialogPoweredByText a span {
    font-size: 12px!important;
}

#CookiebotWidget .CookiebotWidget-header {
    border-bottom: none!important;
}

#CookiebotWidget * {
    color: var( --color-global-dark)!important;
    font-family: var(--font-family-manrope)!important;
}

#CookiebotWidget .CookiebotWidget-header .CookiebotWidget-close svg {
    color: var( --color-global-dark)!important;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: var(--color-global-green-1)!important;
}

#CookiebotWidget #CookiebotWidget-buttons button {
    border-radius: var(--border-radius-global-full)!important;
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    border-color: var(--color-global-green-2)!important;
    color: var(--color-global-green-2)!important;
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    border-color: var(--color-global-green-2)!important;
    background-color: var(--color-global-green-2)!important;
    color: var(--color-system-white)!important;
}

#CookiebotWidget #CookiebotWidget-buttons {
    border-top: none!important;
}

.CookieDeclaration {
    max-width: calc(100vw - 40px);
}

.CookieDeclaration .CookieDeclarationType {
    max-width: calc(100vw - 40px);
    overflow-x: scroll;
}

.CookieDeclaration .CookieDeclarationType .CookieDeclarationTable {
    width: 600px;
    overflow-x: scroll;
}

#CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: var(--color-global-green-1)!important;
}

#CookiebotWidget {
    display: none;
}


/* DETECCIÓN DESKTOP */
.desktop-message {
    display: none;
    height: 100vh;
    width: 100vw;
    background-color: white;  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}

.desktop-message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
    height: 100%;
    padding: 0 40px;
    margin: 0 auto;
}

.desktop-message .img-container {
    width: 337px;
    margin: 0 auto 40px;
}

.desktop-message .img-container img {
    width: 100%;
}

.desktop-message .subtitle {
    margin-bottom: 30px;
}

.desktop-message p:not(.subtitle) {
    color: var(--color-global-gray-1);
    font-weight: var(--font-weight-400);
}

@media(min-width: 1025px) {
    .desktop-message {
        display: block;
    }
}

/* DETECCIÓN DISPOSITIVO HORIZONTAL */
.horizontal-message {
    display: none;
    height: 100vh;
    width: 100vw;
    background-color: white;  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: scroll;
}

.horizontal-message-container {
    text-align: center;
    max-width: 500px;
    min-height: 100%;
    padding: 80px 40px;
    margin: 0 auto;
}

.horizontal-message .img-container {
    width: 337px;
    margin: 0 auto 40px;
}

.horizontal-message .img-container img {
    width: 100%;
}

.horizontal-message .subtitle {
    margin-bottom: 30px;
}

.horizontal-message p:not(.subtitle) {
    color: var(--color-global-gray-1);
    font-weight: var(--font-weight-400);
}
@media all and (orientation: landscape) { 
    .horizontal-message {
        display: block;
    }
 }

 @media all and (orientation: landscape) and (min-width: 1025px) { 
    .horizontal-message {
        display: none;
    }
 }