/* =========================================================
   VARIABLES
========================================================= */

:root {
    --blue-dark: #06182f;
    --blue-deep: #031021;
    --blue-light: #0b294d;

    --navbar-blue: #194ab4;

    --orange: #ff641f;
    --orange-light: #ff8a3d;

    --white: #ffffff;
    --white-soft: #e9eef5;
    --gray: #9caec4;

    --transition: 0.4s cubic-bezier(.16, 1, .3, 1);

    --navbar-height: 86px;
}


/* =========================================================
   RESET / BASE
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--navbar-height);
}

body {
    margin: 0;
    background: var(--blue-deep);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   LOADER
========================================================= */

#loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #020b18;

    overflow: hidden;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

#loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-background {
    position: absolute;

    width: 800px;
    height: 800px;

    background:
        radial-gradient(
            circle,
            rgba(255, 100, 31, 0.22),
            transparent 60%
        );

    animation: loaderBackground 5s ease-in-out infinite;
}

.loader-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;

    animation: loaderFloat 3s ease-in-out infinite;
}

.loader-logo {
    position: relative;
    z-index: 5;

    width: min(250px, 55vw);

    filter:
        drop-shadow(0 0 12px rgba(255, 175, 50, .8))
        drop-shadow(0 0 40px rgba(255, 100, 31, .5));

    animation:
        logoReveal 1.5s ease forwards,
        logoGlow 2.5s ease-in-out infinite;
}

.loader-ring {
    position: absolute;

    border: 1px solid rgba(255, 145, 50, .35);
    border-radius: 50%;
}

.ring-1 {
    width: 320px;
    height: 320px;

    animation: ringSpin 8s linear infinite;
}

.ring-2 {
    width: 420px;
    height: 420px;

    border-style: dashed;
    opacity: .5;

    animation: ringSpinReverse 12s linear infinite;
}

.loader-text {
    margin-top: 35px;

    color: var(--white);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 5px;

    opacity: .8;
}

.loader-progress {
    width: 180px;
    height: 3px;

    margin-top: 18px;

    overflow: hidden;

    background: rgba(255, 255, 255, .15);

    border-radius: 50px;
}

.loader-progress-bar {
    width: 0;
    height: 100%;

    background: var(--orange);

    box-shadow:
        0 0 10px var(--orange),
        0 0 25px var(--orange);

    animation: loadingBar 2.5s ease forwards;
}


/* =========================================================
   LOADER - ESTRELLAS
========================================================= */

.stars {
    position: absolute;
    inset: 0;

    opacity: .7;

    background-image:
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 150, 50, .8) 1px, transparent 1px);

    background-size:
        100px 100px,
        170px 170px;

    animation: starsMove 10s linear infinite;
}

.stars-1 {
    transform: scale(1.5);
}

.stars-2 {
    transform: scale(2);
    opacity: .25;
}

.stars-3 {
    transform: scale(.8);
    opacity: .8;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 86px;

    z-index: 1000;

    background: #194ab4;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .12);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1),
        background .35s ease,
        box-shadow .35s ease;
}
/* =========================================
   NAVBAR OCULTO AL HACER SCROLL
========================================= */

.navbar.nav-hidden {
    transform: translateY(-100%);
}

.navbar.nav-visible {
    transform: translateY(0);
}


.nav-inner {
    width: min(1400px, 94%);
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   NAVBAR - LOGO IZQUIERDO
========================================================= */

.brand-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-shrink: 0;

    height: 100%;
}

.brand-left img {
    display: block;

    width: auto;
    height: 52px;

    object-fit: contain;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.brand-left:hover img {
    transform: scale(1.04);
    opacity: .9;
}


/* =========================================================
   NAVBAR - LOGO MUNICIPAL
========================================================= */

.brand-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-shrink: 0;

    height: 100%;
}

.brand-right img {
    display: block;

    width: auto;
    max-width: 250px;
    height: 55px;

    object-fit: contain;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.brand-right:hover img {
    transform: scale(1.04);
    opacity: .9;
}


/* =========================================================
   NAVBAR - MENÚ
========================================================= */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    flex: 1;
}

.nav-link {
    position: relative;

    padding: 12px 14px;

    color: rgba(255, 255, 255, .72);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;

    white-space: nowrap;

    transition: color .3s ease;
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 4px;

    height: 2px;

    background: var(--orange);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform .35s cubic-bezier(.16, 1, .3, 1);
}

.nav-link:hover,
.nav-link.active {
    color: var(--white);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}


/* =========================================================
   NAVBAR - HAMBURGUESA
========================================================= */

.nav-toggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;

    background: rgba(5, 26, 49, .85);

    cursor: pointer;

    align-items: center;
    justify-content: center;

    flex-direction: column;
    gap: 5px;

    z-index: 1001;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.nav-toggle span {
    display: block;

    width: 20px;
    height: 2px;

    background: #fff;

    border-radius: 10px;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

.nav-toggle.active {
    background: rgba(255, 100, 31, .15);
    border-color: rgba(255, 100, 31, .5);
}

.nav-toggle.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    width: 100%;
    height: calc(100svh - var(--navbar-height));

    min-height: 620px;

    overflow: hidden;

    background: #fff;

    transform: none !important;
}


/* =========================================================
   HERO - IMAGEN
========================================================= */

.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    transform: none !important;
}

.hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    transform: none !important;
    scale: 1 !important;

    animation: none !important;
    transition: none !important;

    will-change: auto;
}


/* =========================================================
   HERO - OVERLAY OPCIONAL
========================================================= */

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 16, 33, .05) 0%,
            transparent 35%,
            transparent 70%,
            rgba(3, 16, 33, .55) 100%
        );
}


/* =========================================================
   HERO - GRADIENTE INFERIOR
========================================================= */

.hero-bottom-gradient {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 160px;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--blue-deep)
        );
}


/* =========================================================
   HERO - CONTENIDO
========================================================= */

.hero-content {
    position: absolute;
    inset: 0;

    z-index: 10;

    width: min(1250px, 90%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

    pointer-events: none;
}


/* =========================================================
   HERO - LOGO
========================================================= */

.hero-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    pointer-events: auto;

    animation:
        heroLogoFloat 4s ease-in-out infinite;
}

.hero-logo img {
    display: block;

    width: min(700px, 90%);
    height: auto;

    filter:
        drop-shadow(0 15px 30px rgba(0, 0, 0, .45))
        drop-shadow(0 0 25px rgba(255, 175, 50, .18));
}


/* =========================================================
   HERO - INFORMACIÓN
========================================================= */

.hero-info {
    max-width: 520px;

    padding-top: 20px;

    pointer-events: auto;

    /*
       Se elimina el translateX(250px)
       que provocaba problemas en responsive.
    */
    transform: none;
}

.hero-date-label {
    display: block;

    margin-bottom: 15px;

    color: var(--white);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 5px;
}

.hero-date {
    margin: 0;

    color: var(--white);

    font-size: clamp(42px, 5vw, 68px);

    line-height: .9;

    letter-spacing: -3px;

    font-weight: 900;
}

.hero-date-text {
    max-width: 300px;

    margin-top: 22px;

    color: rgba(255, 255, 255, .78);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   HERO - BOTONES
========================================================= */

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 32px;

    flex-wrap: wrap;
}

.hero-button {
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 7px 7px 7px 24px;

    border: 0;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.8px;

    cursor: pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.hero-button span {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    font-size: 18px;

    transition:
        transform .35s ease;
}


/* =========================================================
   HERO - BOTÓN PRINCIPAL
========================================================= */

.hero-button-primary {
    background: var(--white);
    color: var(--orange);

    box-shadow:
        0 15px 40px rgba(255, 100, 31, .28);
}

.hero-button-primary span {
    background: var(--white);
    color: var(--orange);
}


/* =========================================================
   HERO - BOTÓN SECUNDARIO
========================================================= */

.hero-button-secondary {
    border: 1px solid rgba(255, 255, 255, .35);

    color: var(--orange);

    background: var(--white);

    backdrop-filter: blur(8px);
}

.hero-button-secondary span {
    border: 1px solid rgba(255, 255, 255, .25);

    color: #fff;
}


/* =========================================================
   HERO - HOVER
========================================================= */

.hero-button:hover {
    transform: translateY(-5px);
}

.hero-button-primary:hover {
    background: var(--orange-light);

    box-shadow:
        0 20px 50px rgba(255, 100, 31, .4);
}

.hero-button-secondary:hover {
    background: rgba(255, 255, 255, .10);

    border-color: var(--orange);
}

.hero-button:hover span {
    transform: translateX(4px);
}


/* =========================================================
   HERO - INDICADOR SCROLL
========================================================= */

.scroll-indicator {
    position: absolute;

    z-index: 10;

    bottom: 30px;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: rgba(255, 255, 255, .75);

    font-size: 9px;

    letter-spacing: 3px;

    white-space: nowrap;

    transform: translateX(-50%);
}

.scroll-indicator i {
    display: block;

    width: 1px;
    height: 45px;

    margin-top: 12px;

    background:
        linear-gradient(
            transparent,
            var(--orange)
        );

    animation:
        scrollLine 1.5s ease-in-out infinite;
}


/* =========================================================
   REGISTRATION
========================================================= */

.registration-section {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            var(--white-soft) 65%
        );

    text-align: center;
}

.orange-line {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: var(--orange);

    box-shadow:
        0 0 25px var(--orange);
}

.registration-content {
    position: relative;
    z-index: 3;

    width: min(750px, 90%);
}

.section-kicker {
    color: var(--orange);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 5px;
}

.registration-content h2 {
    margin-top: 18px;

    color: var(--orange);

    font-size: clamp(42px, 6vw, 75px);

    line-height: .95;

    letter-spacing: -3px;
}

.registration-content h2 strong {
    display: block;

    color: var(--orange);
}

.registration-content p {
    max-width: 600px;

    margin: 25px auto 0;

    color: var(--gray);

    line-height: 1.7;
}


/* =========================================================
   CTA PRINCIPAL
========================================================= */

.main-cta {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    margin-top: 35px;

    padding: 8px 8px 8px 30px;

    background: var(--orange);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 2px;

    box-shadow:
        0 15px 50px rgba(255, 100, 31, .35);

    transition: var(--transition);
}

.cta-arrow {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    background: var(--white);

    color: var(--orange);

    font-size: 22px;

    transition: var(--transition);
}

.main-cta:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 70px rgba(255, 100, 31, .5);
}

.main-cta:hover .cta-arrow {
    transform: rotate(45deg);
}


/* =========================================================
   REGISTRATION - DECORACIONES
========================================================= */

.registration-decoration {
    position: absolute;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(255, 100, 31, .12);

    transform: rotate(45deg);
}

.decoration-one {
    left: -170px;
    bottom: -180px;
}

.decoration-two {
    right: -170px;
    top: -180px;
}


/* =========================================================
   RACES
========================================================= */

.races-section {
    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background-color: var(--blue-deep);
}

.races-background {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(3, 16, 33, .72),
            rgba(3, 16, 33, .88)
        ),
        url("assets/fondo.png");

    background-size: cover;
    background-position: center;

    background-attachment: fixed;

    opacity: .95;
}

.container {
    position: relative;
    z-index: 5;

    width: min(1250px, 90%);

    margin: auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    display: flex;
    align-items: flex-start;

    gap: 25px;

    margin-bottom: 80px;
}

.section-number {
    padding-top: 7px;

    color: var(--orange);

    font-size: 14px;
    font-weight: 900;

    writing-mode: vertical-rl;
}

.section-heading h2 {
    margin-top: 15px;

    font-size: clamp(45px, 6vw, 75px);

    line-height: .9;

    letter-spacing: -3px;
}

.section-heading h2 strong {
    display: block;

    color: var(--orange);
}

/* =========================================
   DECORACIONES NARANJAS
========================================= */

.orange-decoration {
    position: absolute;
    z-index: 2;
    pointer-events: none;

    transition:
        transform 1s cubic-bezier(.16, 1, .3, 1);
}


/* =========================================
   DECORATION ONE
   → IZQUIERDA
========================================= */

.orange-decoration-one {
    width: 320px;

    left: -80px;
    right: auto;

    top: 150px;

    opacity: .75;

    /* Orientación fija */
    transform: scaleX(1);
}


/* =========================================
   DECORATION TWO
   → DERECHA
========================================= */

.orange-decoration-two {
    width: 260px;

    left: auto;
    right: -100px;

    bottom: 100px;

    opacity: .5;

    /* Orientación fija */
    transform: scaleX(1);
}


/* =========================================
   HOVER DECORATION ONE
========================================= */

.races-section:hover .orange-decoration-one {
    transform:
        scaleX(1)
        rotate(8deg)
        translateY(-20px);
}


/* =========================================
   HOVER DECORATION TWO
   → NO SE VOLTEA
========================================= */

.races-section:hover .orange-decoration-two {
    transform:
        scaleX(1)
        rotate(-8deg)
        translateY(20px);
}




/* =========================================================
   RACE CARDS
========================================================= */

.race-card {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 600px;

    margin-bottom: 80px;

    overflow: hidden;

    background: rgba(5, 26, 49, .75);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(10px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .3);

    transition: var(--transition);
}

.race-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(255, 100, 31, .35);

    box-shadow:
        0 40px 100px rgba(0, 0, 0, .45);
}

.race-info {
    padding: 70px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.race-distance {
    position: relative;

    margin-bottom: 35px;
}

.race-distance small {
    display: block;

    color: var(--orange);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 4px;
}

.race-distance strong {
    display: block;

    margin-top: 5px;

    font-size: 100px;

    line-height: .8;

    letter-spacing: -7px;
}

.race-copy {
    padding-left: 25px;

    border-left: 2px solid var(--orange);
}

.race-label {
    color: var(--gray);

    font-size: 10px;

    letter-spacing: 3px;
}

.race-copy h3 {
    margin-top: 10px;

    font-size: 30px;
}

.race-copy > p {
    margin-top: 18px;

    color: var(--gray);

    line-height: 1.7;
}

.race-details {
    display: flex;

    gap: 20px;

    margin-top: 35px;
}

.race-details div {
    padding-right: 20px;

    border-right:
        1px solid rgba(255, 255, 255, .1);
}

.race-details div:last-child {
    border-right: 0;
}

.race-details span {
    color: var(--orange);

    font-size: 10px;
    font-weight: 900;
}

.race-details p {
    margin-top: 5px;

    color: var(--white);

    font-size: 11px;
}


/* =========================================================
   MAPAS
========================================================= */

.map-container {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            rgba(255, 100, 31, .1),
            transparent 65%
        );
}

.map-container::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent 40%,
            rgba(255, 100, 31, .05)
        );
}

.map-container img {
    position: relative;

    z-index: 3;

    width: 88%;
    max-height: 500px;

    object-fit: contain;

    filter:
        drop-shadow(0 20px 40px rgba(0, 0, 0, .4));

    transition:
        transform 1s cubic-bezier(.16, 1, .3, 1);
}

.race-card:hover .map-container img {
    transform:
        scale(1.06)
        rotate(-1deg);
}

.map-glow {
    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: var(--orange);

    opacity: .08;

    filter: blur(80px);

    animation:
        mapGlow 4s ease-in-out infinite;
}

.map-badge {
    position: absolute;

    right: 30px;
    bottom: 30px;

    z-index: 5;

    padding: 13px 18px;

    background: var(--orange);

    font-size: 24px;
    font-weight: 900;

    box-shadow:
        0 10px 30px rgba(255, 100, 31, .3);
}

.map-badge span {
    display: block;

    font-size: 8px;

    letter-spacing: 3px;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-section {
    padding: 130px 0;

    background:
        linear-gradient(
            180deg,
            var(--blue-deep),
            var(--blue-dark)
        );
}

.experience-container {
    width: min(1100px, 90%);

    margin: auto;
}

.experience-title {
    text-align: center;
}

.experience-title h2 {
    margin-top: 15px;

    font-size: clamp(45px, 6vw, 75px);

    line-height: .9;
}

.experience-title h2 strong {
    color: var(--orange);
}

.experience-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 80px;

    border-top:
        1px solid rgba(255, 255, 255, .1);
}

.experience-item {
    padding: 45px 35px;

    border-right:
        1px solid rgba(255, 255, 255, .1);

    transition: var(--transition);
}

.experience-item:last-child {
    border-right: 0;
}

.experience-item:hover {
    background: rgba(255, 255, 255, .025);

    transform: translateY(-10px);
}

.experience-icon {
    color: var(--orange);

    font-size: 12px;
    font-weight: 900;
}

.experience-item h3 {
    margin-top: 25px;

    font-size: 27px;
}

.experience-item p {
    margin-top: 15px;

    color: var(--gray);

    line-height: 1.7;
}

/* =========================================
   INFORMACIONES
========================================= */

.informaciones-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background:
        linear-gradient(
            180deg,
            var(--blue-dark) 0%,
            var(--blue-deep) 100%
        );
}


/* =========================================
   FONDO
========================================= */

.informaciones-background {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255, 100, 31, .08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(25, 74, 180, .15),
            transparent 35%
        );

    pointer-events: none;
}


/* =========================================
   DECORACIÓN SUPERIOR
========================================= */

.informaciones-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--orange);

    box-shadow:
        0 0 25px rgba(255, 100, 31, .7);
}


/* =========================================
   TÍTULO
========================================= */

.informaciones-heading {
    position: relative;
    z-index: 5;

    margin-bottom: 70px;
}


/* =========================================
   GRID
========================================= */

.informaciones-grid {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    align-items: stretch;
}


/* =========================================
   TARJETA
========================================= */

.informacion-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 570px;

    overflow: hidden;

    background:
        rgba(5, 26, 49, .72);

    border:
        1px solid rgba(255,255,255,.09);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


/* =========================================
   HOVER TARJETA
========================================= */

.informacion-card:hover {

    transform:
        translateY(-12px);

    border-color:
        rgba(255,100,31,.4);

    box-shadow:
        0 35px 90px rgba(0,0,0,.4),
        0 0 35px rgba(255,100,31,.05);
}


/* =========================================
   IMAGEN
========================================= */

.informacion-image {

    position: relative;

    width: 100%;

    height: 280px;

    overflow: hidden;

    background:
        #071a32;
}


/* =========================================
   IMAGEN INTERNA
========================================= */

.informacion-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}


/* =========================================
   ZOOM IMAGEN
========================================= */

.informacion-card:hover
.informacion-image img {

    transform:
        scale(1.07);
}


/* =========================================
   OVERLAY IMAGEN
========================================= */

.informacion-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,16,33,.05) 20%,
            rgba(3,16,33,.75) 100%
        );

    pointer-events: none;
}


/* =========================================
   NÚMERO
========================================= */

.informacion-number {

    position: absolute;

    top: 20px;
    left: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background:
        var(--orange);

    color:
        var(--white);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        0 10px 30px rgba(255,100,31,.3);
}


/* =========================================
   CONTENIDO
========================================= */

.informacion-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 35px;
}


/* =========================================
   KICKER
========================================= */

.informacion-kicker {

    color:
        var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 4px;
}


/* =========================================
   TÍTULO
========================================= */

.informacion-content h3 {

    margin-top: 12px;

    color:
        var(--white);

    font-size: 32px;

    line-height: .95;

    letter-spacing: -1px;
}


.informacion-content h3 strong {

    display: block;

    color:
        var(--orange);

    font-size: .75em;

    margin-top: 5px;
}


/* =========================================
   TEXTO
========================================= */

.informacion-content p {

    margin-top: 18px;

    color:
        var(--gray);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================
   BOTÓN
========================================= */

.informacion-button {

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;

    min-height: 52px;

    margin-top: auto;

    padding:
        6px
        6px
        6px
        20px;

    border:
        1px solid
        rgba(255,255,255,.15);

    color:
        var(--white);

    background:
        rgba(255,255,255,.03);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}


/* =========================================
   BOTÓN ICONO
========================================= */

.informacion-button span {

    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    background:
        var(--orange);

    color:
        var(--white);

    font-size: 18px;

    transition:
        transform .35s ease;
}


/* =========================================
   HOVER BOTÓN
========================================= */

.informacion-button:hover {

    background:
        rgba(255,100,31,.1);

    border-color:
        var(--orange);

    transform:
        translateY(-3px);
}


.informacion-button:hover span {

    transform:
        rotate(45deg);
}


/* =========================================
   DOCUMENTO
========================================= */

.informacion-documento {

    background:
        linear-gradient(
            145deg,
            rgba(5,26,49,.9),
            rgba(8,35,65,.7)
        );
}


/* =========================================
   ICONO PDF
========================================= */

.documento-icon {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    height: 280px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,100,31,.15),
            transparent 65%
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


/* =========================================
   HOJA PDF
========================================= */

.documento-icon-inner {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 105px;
    height: 135px;

    background:
        var(--white);

    color:
        var(--orange);

    font-size: 20px;

    font-weight: 900;

    letter-spacing: 2px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        box-shadow .5s ease;
}


/* Esquina doblada */

.documento-icon-inner::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 28px;
    height: 28px;

    background:
        var(--orange);

    clip-path:
        polygon(
            100% 0,
            0 0,
            100% 100%
        );
}


/* =========================================
   HOVER DOCUMENTO
========================================= */

.informacion-documento:hover
.documento-icon-inner {

    transform:
        translateY(-8px)
        rotate(-3deg);

    box-shadow:
        0 30px 65px rgba(0,0,0,.45),
        0 0 30px rgba(255,100,31,.15);
}


/* =========================================
   BOTÓN DESCARGA
========================================= */

.informacion-download span {

    font-size: 20px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .informaciones-section {

        padding:
            110px 0;
    }


    .informaciones-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    /*
       La tercera tarjeta ocupa
       todo el ancho
    */

    .informacion-documento {

        grid-column:
            1 / -1;

        min-height:
            450px;

        display:
            grid;

        grid-template-columns:
            40% 60%;
    }


    .informacion-documento
    .documento-icon {

        height: 100%;

        border-bottom: 0;

        border-right:
            1px solid
            rgba(255,255,255,.08);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .informaciones-section {

        padding:
            90px 0;
    }


    .informaciones-heading {

        margin-bottom:
            50px;
    }


    .informaciones-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .informacion-card {

        min-height:
            540px;
    }


    /*
       Volvemos documento
       a una sola columna
    */

    .informacion-documento {

        grid-column:
            auto;

        display:
            flex;

        min-height:
            540px;
    }


    .informacion-documento
    .documento-icon {

        height:
            230px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }


    .informacion-image {

        height:
            240px;
    }


    .informacion-content {

        padding:
            28px 24px;
    }


    .informacion-content h3 {

        font-size:
            28px;
    }


    .informacion-content p {

        font-size:
            13px;
    }


    .informacion-button {

        margin-top:
            30px;
    }

}


/* =========================================
   MOBILE PEQUEÑO
========================================= */

@media (max-width: 400px) {

    .informacion-card {

        min-height:
            510px;
    }


    .informacion-image {

        height:
            210px;
    }


    .informacion-content {

        padding:
            25px 20px;
    }


    .informacion-content h3 {

        font-size:
            25px;
    }


    .informacion-number {

        top: 15px;
        left: 15px;

        width: 42px;
        height: 42px;
    }

}

/* =========================================================
   FAQ
========================================================= */

.faq-section {
    position: relative;

    padding: 140px 0;

    background:
        linear-gradient(
            rgba(5, 24, 45, .96),
            rgba(5, 24, 45, .98)
        ),
        url("assets/fondo.png");

    background-size: cover;
    background-position: center;
}

.faq-list {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 950px;

    margin: 0 auto;
}

.faq-item {
    margin-bottom: 14px;

    overflow: hidden;

    background: rgba(3, 16, 33, .7);

    border: 1px solid rgba(255, 255, 255, .10);

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.faq-question {
    width: 100%;
    min-height: 75px;

    padding: 20px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border: 0;
    outline: none;

    background: transparent;

    color: #fff;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    font-size: 15px;
    font-weight: 700;

    transition:
        color .3s ease,
        background .3s ease;
}

.faq-question span {
    display: block;

    flex: 1;
}

.faq-question i {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 100, 31, .5);

    border-radius: 50%;

    color: var(--orange);

    font-size: 22px;
    font-style: normal;
    font-weight: 400;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.faq-question:hover {
    color: var(--orange);

    background:
        rgba(255, 100, 31, .03);
}

.faq-answer {
    height: 0;

    overflow: hidden;

    transition:
        height .45s cubic-bezier(.16, 1, .3, 1);
}

.faq-answer p {
    margin: 0;

    padding:
        0 25px 28px;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.8;
}

.faq-item.active {
    border-color:
        rgba(255, 100, 31, .45);

    background:
        rgba(3, 16, 33, .9);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .20);
}

.faq-item.active .faq-question {
    color: var(--orange);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);

    background: var(--orange);

    color: #fff;

    border-color: var(--orange);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    background-color: var(--navbar-blue);

    border-top:
        1px solid rgba(255, 255, 255, .10);
}

.footer-top {
    width: min(1200px, 90%);

    margin: auto;

    padding: 90px 0;

    display: grid;

    grid-template-columns:
        1fr 1.5fr 1fr;

    gap: 60px;

    align-items: center;
}

.footer-logo img {
    width: 350px;

    transition: var(--transition);
}

.footer-logo:hover img {
    transform: scale(1.05);
}

.footer-info h2 {
    margin-top: 15px;

    font-size: 40px;

    line-height: .95;
}

.footer-info h2 strong {
    display: block;

    color: var(--orange);
}

.footer-info p {
    max-width: 450px;

    margin-top: 20px;

    color: var(--gray);

    font-size: 13px;

    line-height: 1.7;
}

.footer-social {
    justify-self: end;
}

.footer-social > span {
    display: block;

    margin-bottom: 20px;

    color: var(--gray);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 3px;
}

.social-links {
    display: flex;

    gap: 10px;
}

.social-links a {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, .15);

    transition: var(--transition);
}

.social-links svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;

    transition: var(--transition);
}

.social-links a:first-child svg,
.social-links a:nth-child(3) svg {
    fill: currentColor;
    stroke: none;
}

.social-links a:hover {
    background: var(--orange);

    border-color: var(--orange);

    transform:
        translateY(-8px)
        rotate(-5deg);

    box-shadow:
        0 15px 30px rgba(255, 100, 31, .3);
}

.social-links a:hover svg {
    transform: scale(1.2);
}

.footer-bottom {
    width: min(1200px, 90%);

    min-height: 80px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top:
        1px solid rgba(255, 255, 255, .08);

    color: #71859e;

    font-size: 10px;
}

.footer-bottom span {
    color: var(--orange);

    letter-spacing: 2px;

    font-weight: 900;
}

.footer-line {
    display: none;
}


/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity 1s cubic-bezier(.16, 1, .3, 1),
        transform 1s cubic-bezier(.16, 1, .3, 1);
}

.reveal.active {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes heroLogoFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes scrollLine {
    0%,
    100% {
        transform: scaleY(.5);
        transform-origin: top;
        opacity: .3;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
}

@keyframes loaderBackground {
    0%,
    100% {
        transform: scale(.9);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes loaderFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes logoReveal {
    from {
        opacity: 0;

        transform:
            scale(.5)
            rotate(-10deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);
    }
}

@keyframes logoGlow {
    0%,
    100% {
        filter:
            drop-shadow(0 0 12px rgba(255, 175, 50, .6))
            drop-shadow(0 0 30px rgba(255, 100, 31, .3));
    }

    50% {
        filter:
            drop-shadow(0 0 25px rgba(255, 175, 50, 1))
            drop-shadow(0 0 60px rgba(255, 100, 31, .7));
    }
}

@keyframes ringSpin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ringSpinReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}

@keyframes starsMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100px);
    }
}

@keyframes loadingBar {
    0% {
        width: 0;
    }

    70% {
        width: 80%;
    }

    100% {
        width: 100%;
    }
}

@keyframes mapGlow {
    0%,
    100% {
        transform: scale(.8);
        opacity: .05;
    }

    50% {
        transform: scale(1.2);
        opacity: .13;
    }
}


/* =========================================================
   TABLET / LAPTOP PEQUEÑO
   <= 1100px
========================================================= */

@media (max-width: 1100px) {

    .hero-content {
        width: 92%;

        grid-template-columns: 1fr 1fr;

        gap: 40px;
    }

    .hero-logo img {
        width: min(560px, 90%);
    }

    .hero-info {
        max-width: 450px;
    }

    .hero-date {
        font-size: clamp(38px, 5vw, 58px);
    }

    .race-info {
        padding: 55px;
    }

    .race-distance strong {
        font-size: 85px;
    }

    .footer-top {
        gap: 40px;
    }
}


/* =========================================================
   TABLET
   <= 900px
========================================================= */

@media (max-width: 900px) {

    :root {
        --navbar-height: 72px;
    }

    /* -----------------------------------------------------
       NAVBAR
    ----------------------------------------------------- */

    .navbar {
        height: var(--navbar-height);
    }

    .nav-inner {
        position: relative;

        width: min(100%, 94%);
        height: var(--navbar-height);
    }

    .brand-left img {
        width: auto;
        height: 45px;
    }

    .brand-right {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .main-nav {
        position: absolute;

        top: calc(100% + 12px);

        left: 15px;
        right: 15px;

        width: auto;

        display: flex;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 10px;

        background: rgba(5, 26, 49, .97);

        border:
            1px solid rgba(255, 255, 255, .12);

        border-radius: 18px;

        box-shadow:
            0 20px 50px rgba(0, 0, 0, .35);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-10px)
            scale(.98);

        pointer-events: none;

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease;

        z-index: 1000;
    }

    /*
       IMPORTANTE:
       Se utiliza solamente .open.
       Si tu JavaScript usa .active en vez de .open,
       cambia .open por .active en tu JS.
    */

    .main-nav.open {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(0)
            scale(1);

        pointer-events: auto;
    }

    .main-nav .nav-link {
        display: block;

        width: 100%;

        padding: 15px 18px;

        border-radius: 10px;

        text-align: left;

        font-size: 12px;

        transition:
            background .25s ease,
            color .25s ease;
    }

    .main-nav .nav-link::after {
        display: none;
    }

    .main-nav .nav-link:hover,
    .main-nav .nav-link.active {
        background:
            rgba(255, 100, 31, .12);

        color: var(--orange);
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        height: calc(100svh - var(--navbar-height));

        min-height: 650px;
    }

    .hero-content {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 25px;

        align-content: center;

        justify-items: center;

        text-align: center;
    }

    .hero-logo {
        width: 100%;
    }

    .hero-logo img {
        width: min(500px, 80vw);
    }

    .hero-info {
        max-width: 650px;

        padding-top: 0;

        transform: none;
    }

    .hero-date-label {
        color: var(--blue-dark);

        letter-spacing: 4px;
    }

    .hero-date {
        font-size: clamp(42px, 7vw, 65px);
    }

    .hero-date-text {
        margin-left: auto;
        margin-right: auto;

        color: var(--blue-dark);
    }

    .hero-buttons {
        justify-content: center;
    }


    /* -----------------------------------------------------
       RACES
    ----------------------------------------------------- */

    .race-card {
        grid-template-columns: 1fr;
    }

    .race-card-21k .map-container {
        order: -1;
    }

    .race-info {
        padding: 50px 35px;
    }

    .map-container {
        min-height: 400px;
    }


    /* -----------------------------------------------------
       EXPERIENCE
    ----------------------------------------------------- */

    .experience-grid {
        grid-template-columns: 1fr;
    }

    .experience-item {
        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, .1);
    }

    .experience-item:last-child {
        border-bottom: 0;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-top {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .footer-logo img {
        margin: auto;
    }

    .footer-info p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-social {
        justify-self: center;
    }

    .footer-bottom {
        flex-direction: column;

        justify-content: center;

        gap: 12px;

        padding: 25px 0;
    }
}


/* =========================================================
   MÓVIL
   <= 600px
========================================================= */

@media (max-width: 600px) {

    :root {
        --navbar-height: 68px;
    }

    /* -----------------------------------------------------
       NAVBAR
    ----------------------------------------------------- */

    .navbar {
        height: var(--navbar-height);
    }

    .nav-inner {
        width: 92%;
        height: var(--navbar-height);
    }

    .brand-left img {
        height: 40px;
    }

    .nav-toggle {
        width: 42px;
        height: 42px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        height: calc(100svh - var(--navbar-height));

        min-height: 620px;
    }

    .hero-image img {
        object-fit: contain;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 12, 27, .55),
                rgba(2, 12, 27, .15)
            );
    }

    .hero-content {
        width: 92%;

        padding: 30px 0;

        gap: 20px;

        margin-top: 0;
    }

    .hero-logo img {
        width: min(420px, 82vw);
    }

    .hero-info {
        width: 100%;
    }

    .hero-date-label {
        font-size: 9px;

        letter-spacing: 3px;

        margin-bottom: 12px;
    }

    .hero-date {
        font-size: clamp(36px, 10vw, 55px);

        letter-spacing: -2px;
    }

    .hero-date-text {
        max-width: 330px;

        margin-top: 15px;

        font-size: 13px;

        line-height: 1.6;
    }

    .hero-buttons {
        width: 100%;

        flex-direction: column;

        gap: 10px;

        margin-top: 24px;
    }

    .hero-button {
        width: min(260px, 90vw);

        min-height: 56px;
    }

    .scroll-indicator {
        bottom: 18px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .scroll-indicator i {
        height: 32px;

        margin-top: 8px;
    }


    /* -----------------------------------------------------
       REGISTRATION
    ----------------------------------------------------- */

    .registration-section,
    .races-section,
    .experience-section,
    .faq-section {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .registration-section {
        min-height: 500px;
    }

    .registration-content {
        width: 90%;
    }

    .registration-content h2 {
        font-size: clamp(40px, 12vw, 60px);

        letter-spacing: -2px;
    }

    .registration-content p {
        font-size: 14px;
    }

    .main-cta {
        max-width: 90%;

        padding-left: 20px;

        gap: 12px;

        font-size: 11px;
    }

    .cta-arrow {
        width: 45px;
        height: 45px;
    }


    /* -----------------------------------------------------
       SECTION HEADING
    ----------------------------------------------------- */

    .section-heading {
        gap: 15px;

        margin-bottom: 50px;
    }

    .section-number {
        font-size: 11px;
    }

    .section-heading h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    /* -----------------------------------------------------
       RACE CARDS
    ----------------------------------------------------- */

    .race-card {
        margin-bottom: 50px;
    }

    .race-info {
        padding: 40px 25px;
    }

    .race-distance {
        margin-bottom: 28px;
    }

    .race-distance strong {
        font-size: 80px;

        letter-spacing: -5px;
    }

    .race-copy {
        padding-left: 18px;
    }

    .race-copy h3 {
        font-size: 25px;
    }

    .race-copy > p {
        font-size: 14px;
    }

    .race-details {
        flex-wrap: wrap;

        gap: 15px;

        margin-top: 28px;
    }

    .race-details div {
        padding-right: 15px;
    }


    /* -----------------------------------------------------
       MAPAS
    ----------------------------------------------------- */

    .map-container {
        min-height: 300px;
    }

    .map-container img {
        width: 95%;
    }

    .map-badge {
        right: 15px;
        bottom: 15px;

        padding: 10px 14px;

        font-size: 20px;
    }

    .orange-decoration {
        opacity: .3;
    }


    /* -----------------------------------------------------
       EXPERIENCE
    ----------------------------------------------------- */

    .experience-container {
        width: 90%;
    }

    .experience-grid {
        margin-top: 55px;
    }

    .experience-item {
        padding: 35px 25px;
    }

    .experience-item h3 {
        font-size: 24px;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-section {
        padding-left: 0;
        padding-right: 0;
    }

    .faq-list {
        width: 92%;
    }

    .faq-question {
        min-height: 68px;

        padding: 17px 18px;

        font-size: 14px;

        gap: 15px;
    }

    .faq-question i {
        width: 34px;
        height: 34px;

        font-size: 19px;
    }

    .faq-answer p {
        padding:
            0 18px 24px;

        font-size: 13px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-top {
        width: 90%;

        padding: 70px 0;
    }

    .footer-logo img {
        width: min(300px, 80vw);
    }

    .footer-info h2 {
        font-size: 34px;
    }

    .footer-bottom {
        width: 90%;

        text-align: center;
    }


    /* -----------------------------------------------------
       LOADER
    ----------------------------------------------------- */

    .loader-ring.ring-1 {
        width: 260px;
        height: 260px;
    }

    .loader-ring.ring-2 {
        width: 330px;
        height: 330px;
    }

    .loader-logo {
        width: min(220px, 60vw);
    }

    .loader-text {
        font-size: 9px;

        letter-spacing: 3px;
    }

    .loader-progress {
        width: 150px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   <= 400px
========================================================= */

@media (max-width: 400px) {

    .hero {
        min-height: 580px;
    }

    .hero-logo img {
        width: 78vw;
    }

    .hero-date {
        font-size: 34px;
    }

    .hero-date-label {
        font-size: 8px;
    }

    .hero-date-text {
        font-size: 12px;
    }

    .hero-button {
        width: 100%;
    }

    .section-heading h2 {
        font-size: 36px;
    }

    .race-distance strong {
        font-size: 68px;
    }

    .race-copy h3 {
        font-size: 22px;
    }

    .race-info {
        padding: 35px 20px;
    }

    .map-container {
        min-height: 260px;
    }

    .faq-list {
        width: 94%;
    }

    .faq-question {
        padding: 15px;
    }

    .faq-answer p {
        padding:
            0 15px 20px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================
   BACK TO TOP
========================================= */

.back-to-top {
    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, .25);

    background: var(--orange);
    color: var(--white);

    cursor: pointer;

    z-index: 999;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(20px)
        scale(.85);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s cubic-bezier(.16, 1, .3, 1),
        background .3s ease,
        box-shadow .3s ease;
}


.back-to-top span {
    display: block;

    font-size: 24px;
    line-height: 1;

    transition:
        transform .3s ease;
}


/* BOTÓN VISIBLE */

.back-to-top.show {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    box-shadow:
        0 12px 35px rgba(255, 100, 31, .35);
}


/* HOVER */

.back-to-top:hover {
    background: var(--orange-light);

    box-shadow:
        0 18px 45px rgba(255, 100, 31, .5);

    transform:
        translateY(-5px)
        scale(1.05);
}


.back-to-top:hover span {
    transform: translateY(-3px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .back-to-top {
        right: 18px;
        bottom: 18px;

        width: 46px;
        height: 46px;
    }

    .back-to-top span {
        font-size: 21px;
    }

}