/* Variables             */
/* --------------------- */

:root {
    --font-barlow: "Barlow Condensed", serif;
    --font-dm: "DM Sans", serif;
    
	--color-gold: #E8CB7F;    
    --color-red: rgb(224, 80, 56); /*#E05038;//*/ 
    --color-blue: rgb(71, 91, 199); /*#475ac7*/
    --color-green: rgb(0, 179, 135); /*#00b386*/
    
    --color-white: #fff;

    --color-text: #737373;
    --color-text-dark: #1e1e1e;
}


/* --------------------- */
/* General               */
/* --------------------- */
body {
    font-family: var(--font-dm);
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-white);
}

.section__py {
    padding-top: 4rem;
    padding-bottom: 4rem;
}


/* --------------------- */
/* Background            */
/* --------------------- */
.bg-green {
    background-color: var(--color-green);
}

.bg-green--opacity {
    background-color: rgba(0, 179, 135, 0.8);
}

.bg-red {
    background-color: var(--color-red);
}

.bg-red--opacity {
    background-color: rgba(224, 80, 56, 0.8);
}

.bg-gold {
    background-color: var(--color-gold);
}

.bg-black--dark {
    background-color: var(--color-text-dark);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-blue--opacity {
    background-color: rgba(71, 91, 199, 0.8);
}

.bg--nav {
    background: rgb(0,0,0);
    background: linear-gradient(360deg, rgba(30,30,30,0) 0%, rgba(30,30,30,1) 100%);
}

.bg-white {
    background-color: var(--color-white);
}

.bg__section--wrapper {
    background-image: url(../img/21k_10k.png);
    background-size: contain;
}

.bg__sponsor {
    background-color: var(--color-text);
}


/* --------------------- */
/* Color Text            */
/* --------------------- */
.color-red {
    color: var(--color-red);
}

.color-text {
    color: var(--color-text);
}

.color-white {
    color: var(--color-white);
}

.color-gold {
    color: var(--color-gold);
}

/* --------------------- */
/* Textos Genericos      */
/* --------------------- */
.title__section--small {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 18px;
    color: var(--color-text-dark);
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.title {
    font-size: 2.563rem;
    color: var(--color-text-dark);
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 3.563rem;
    text-transform: uppercase;
    font-family: var(--font-barlow);
    margin-bottom: 2.25rem;
}

.title--deco {
    font-weight: 600;
    color: var(--color-red);
}

.title__box {
    position: relative;
    background-color: var(--color-text-dark);
    width: 80%;
    z-index: 0;
}

.title__box:before {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    left: -100vw;
    -webkit-transform: skew(-21deg);
    transform: skew(-21deg);
    background-color: var(--color-text-dark);
    z-index: -1;
}

.title__section--big {
    text-align: end;
    margin-bottom: 0;
    padding: .5rem 0;
    color: var(--color-white);
    font-size: 2.625rem;
    font-weight: 600;
    font-family: var(--font-barlow);
    padding-right: 2rem;
    z-index: 0;
}


/* --------------------- */
/* Main menu             */
/* --------------------- */
.nav-link {
    color: var(--color-white);
    font-family: var(--font-barlow);
    font-weight: 600;
    line-height: 1.594rem;
    font-size: 1.2rem;
    margin-right: 1rem;
    letter-spacing: 1px;
    border-bottom: 4px solid transparent;
}

.nav-link.active {
	color: var(--color-yellow);
}

.navbar-collapse {
	flex-grow: 1; /* Asegura que se expanda */
	justify-content: end!important; /* Opcional: ajusta el contenido */
}

.nav-link:hover {
	color: var(--color-gold);
}

.navbar-nav .nav-link.active {
    color: var(--color-gold);
    border-bottom: 4px solid var(--color-gold);
}

.navbar.scrolled {
	background-color: var(--color-text-dark);
}

.navbar-toggler {
	border-color: var(--color-white);
}

.navbar-toggler-svg {
	fill: var(--color-white);
}

.navbar-toggler-svg {
	box-shadow: 0 0 0 0.25rem transparent;
}


/* --------------------- */
/* Header                */
/* --------------------- */
.carousel {
    overflow: hidden;
    height: 100vh;
    max-height: 670px;
}

.carousel-caption {
    top: 15%;
}

.hero__btn {
    background-color: var(--color-text-dark);
    border: 4px solid var(--color-text-dark);
    box-shadow: 8px 8px 15px rgba(115, 115, 115, 0.5);
    color: var(--color-text-white);
    font-size: 1.275rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem 1.3rem;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    letter-spacing: 1.4px;
}

.hero__btn:hover {
    background-color: var(--color-red);
    color: var(--color-white);
    border-color: var(--color-red);
}

.hero__btn--blue:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
    border-color: var(--color-blue);
}

.hero__btn--green:hover {
    background-color: var(--color-green);
    color: var(--color-white);
    border-color: var(--color-green);
}

.agr_logo {
    -webkit-filter: drop-shadow(5px 5px 5px #737373);
    filter: drop-shadow(5px 5px 5px #737373);
    width: 250px;
    height: auto!important;
}


/* --------------------- */
/* Seccion Informacion   */
/* --------------------- */
.information__text {
    margin-bottom: 2.25rem;
}

.information__btn {
    font-size: 1rem;
    color: var(--color-white);
    border-width: 2px;
    padding: 15px 30px; 
}

.information__box {
    display: flex;
    padding: 1.125rem 4rem;
}

.info__img {
    filter: grayscale(0.7);
}

.information__svg {
    width: 2.75rem!important;
    fill: var(--color-white);
    margin-right: 1.5rem;
    margin-bottom: 0!important;
}

.information__svg--place {
    width: 2rem!important;
}

.information__title {
    color: var(--color-white);
    font-size: 1.313rem;
    font-weight: 600;
    line-height: 29.4px;
    font-family: var(--font-barlow);
    text-align: left;
    margin-bottom: 4px;
}

.information__text--white {
    margin-bottom: 0;
    color: var(--color-white);
}

.information__img {
    position: relative;
}

.information__boxes {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3rem;
}


/* --------------------- */
/* Seccion distancias    */
/* --------------------- */
.distances__bg {
    background: url(../img/distances/background_desktop.jpg);
}

.distances__wrapper {
    background: rgb(224,80,56);
    background: linear-gradient(90deg, rgba(0,0,0,0.499124649859944) 30%, rgba(224,80,56,0.5) 100%);
}

.slogan__box {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 10px 0;
    min-height: 6rem;
    margin-bottom: 4rem;
}

.slogan__text {
    display: inline-block;
    position: absolute;
    animation: marquee 30s linear infinite;
    font-family: var(--font-dm);
    font-size: 3.5rem;
    color: var(--color-white);
    font-weight: 700;
    letter-spacing: -0.6px;
}

/* Animación del texto */
@keyframes marquee {
    from {
        right: -100%;
    }
    to {
        right: 100%;
    }
}


.btn--modal {
    background-color: var(--color-text-dark);
    color: var(--color-white);
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    padding: 2rem;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    letter-spacing: 0.088rem;
    border-radius: 0;
    font-family: var(--font-barlow);
}

.btn--modal:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

.modal__btn-distance {
    font-size: 6rem;
    margin-bottom: 2rem;
}

.svg--distance {
    width: 2.5rem;
    fill: var(--color-red);
    margin-right: 1rem;
}

.text__distance {
    text-align: left;
    margin-bottom: 0;
}

.text__distance span {
    font-family: var(--font-dm);
    font-size: 1.125rem;
}

.btn--modal:hover .modal__btn-distance span {
    color: var(--color-text-dark);
}

.btn--modal:hover .svg--distance {
    fill: var(--color-text-dark);
}

.btn--modal:hover .text__distance {
    color: var(--color-text-dark);
}

.btn--modal:hover .text__distance span {
    color: var(--color-white);
}


/* --------------------- */
/* Seccion Entrega Kit   */
/* --------------------- */
.svg--kit {
    fill: var(--color-green);
    width: 3rem;
    margin-right: 2rem;
}

.kit--svg-big {
    width: 6rem;
    fill: var(--color-green);
    margin-right: 3rem;
}

.kit__title {
    color: var(--color-white);
    font-size: 1.313rem;
    font-weight: 600;
    line-height: 29.4px;
    font-family: var(--font-barlow);
    text-align: left;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.kit__text-data {
    margin-bottom: 0;
    color: var(--color-white);
}

.nav-link--custom {
    background-color: var(--color-green);
    border: none;
    padding: 10px 1rem;
    color: var(--color-white);
    font-weight: 700;
    border: 2px solid var(--color-green);
    font-size: .9rem;
}

.nav-link--custom:hover {
    background-color: var(--color-text-dark);
}

.nav-link--custom.active {
    background-color: var(--color-text-dark);
}

.nav-tabs {
    border-bottom: none;
}


/* --------------------- */
/* Sección Sponsor       */
/* --------------------- */
.sponsor__logo {
    margin: 1rem;
    max-width: 200px;
    filter: grayscale(1);
}

/* --------------------- */
/* Footer                */
/* --------------------- */

.rrss-link {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-barlow);
}

.rrss-link:hover {
    color: var(--color-gold);
}

.instagram_svg {
    color: var(--color-white);
    margin-right: 1rem;
}

.rrss-link:hover .instagram_svg {
    color: var(--color-gold);
}


/* --------------------- */
/* Botón Agotado         */
/* --------------------- */
.hero__btn--sold-out {
    background-color: #6c757d;
    border: 4px solid #6c757d;
    box-shadow: 8px 8px 15px rgba(115, 115, 115, 0.3);
    color: var(--color-white);
    font-size: 1.275rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem 1.3rem;
    display: inline-block;
    letter-spacing: 1.4px;
    cursor: not-allowed;
    opacity: 0.8;
    position: relative;
    flex-direction: column;
    min-width: 200px;
}

.sold-out-text {
    text-decoration: line-through;
    font-size: 0.9em;
    opacity: 0.7;
    display: block;
    margin-bottom: 0.3rem;
}

.btn-text {
    font-size: 1em;
    display: block;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.sold-out-label {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--color-red);
    display: block;
    letter-spacing: 2px;
}

.hero__btn--sold-out:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    transform: none;
    cursor: not-allowed;
}

.hero__btn--sold-out.information__btn {
    font-size: 1rem;
    border-width: 2px;
    padding: 15px 30px;
    min-width: 180px;
}

/* --------------------- */
/* Media Queries         */
/* --------------------- */
@media (min-width: 576px) {
    .agr_logo {
        width: 300px;
        height: auto!important;
    }

    .hero__btn {
        font-size: 1.5rem;
        padding: 1.25rem 3.25rem;
        margin-top: 2rem;
    }

    .hero__btn--sold-out {
        font-size: 1.5rem;
        padding: 1.25rem 3.25rem;
        margin-top: 2rem;
        min-width: 250px;
    }

    .title__box {
        width: 60%;
    }

    .information__btn {
        font-size: 1.125rem!important;
        padding: 15px 30px;
    }

    .hero__btn--sold-out.information__btn {
        font-size: 1.125rem!important;
        padding: 15px 30px;
        min-width: 200px;
    }

    .slogan__text {
        font-size: 4.5rem;
    }
}


@media (min-width: 768px) {

    .carousel {
        max-height: 435px;
    }

    .agr_logo {
        width: 200px;
        height: auto!important;
    }

    .hero__btn {
        font-size: 1.125rem;
        padding: 1rem 2.25rem;
        margin-top: 1rem;
    }

    .hero__btn--sold-out {
        font-size: 1.125rem;
        padding: 1rem 2.25rem;
        margin-top: 1rem;
        min-width: 230px;
    }

    .section__py {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .title__box {
        width: 40%;
    }
}


@media (min-width: 992px) {
    .carousel {
        max-height: 550px;
    }

    .agr_logo {
        width: 250px;
        height: auto !important;
    }

    .hero__btn {
        font-size: 1.3rem;
        padding: 1rem 2.5rem;
        margin-top: 2rem;
    }

    .hero__btn {
        font-size: 1.125rem;
        padding: 1rem 2.125rem;
        margin-top: 1.5rem;
    }

    .hero__btn--sold-out {
        font-size: 1.125rem;
        padding: 1rem 2.125rem;
        margin-top: 1.5rem;
        min-width: 240px;
    }

    .title__box {
        width: 35%;
    }

    .information__btn {
        font-size: 1rem!important;
        padding: 15px 30px;
    }

    .hero__btn--sold-out.information__btn {
        font-size: 1rem!important;
        padding: 15px 30px;
        min-width: 180px;
    }
}


@media (min-width: 1400px) {
    .carousel {
        max-height: 780px;
    }

    .agr_logo {
        width: 300px;
        height: auto !important;
    }

    .hero__btn {
        font-size: 1.5rem;
        padding: 1rem 2.5rem;
        margin-top: 1rem;
    }

    .hero__btn--sold-out {
        font-size: 1.5rem;
        padding: 1rem 2.5rem;
        margin-top: 1rem;
        min-width: 280px;
    }

    .nav-link--custom {
        font-size: inherit;
        padding: 10px 2rem;
    }

    .title__section--big {
        font-size: 3.563rem;
    }

    .title__box {
        width: 30%;
    }

    .title {
        font-size: 3.563rem;
    }

    .slogan__text {
        font-size: 5.25rem;
        animation: marquee 80s linear infinite;
    }

    .slogan__box {
        margin-bottom: 7rem;
    }

    .modal__btn-distance {
        font-size: 8rem;
        margin-bottom: 2rem;
    }

    .btn--modal {
        padding: 3rem;
    }
}


@media (min-width: 1800px) {
    .carousel {
        max-height: 100vh;
    }

    .agr_logo {
        width: 400px;
        height: auto!important;
    }

    .hero__btn {
        font-size: 2rem;
        padding: 1.25rem 3.25rem;
        margin-top: 2rem;
    }

    .hero__btn--sold-out {
        font-size: 2rem;
        padding: 1.25rem 3.25rem;
        margin-top: 2rem;
        min-width: 350px;
    }
}



.timetrack-footer {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    margin-top: 2rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    padding-top: 1rem;
    font-size: 1rem;
}

.timetrack-footer a {
    color: #fff;
    text-decoration: none;
}

.timetrack-footer a:hover {
    color: rgb(248, 102, 36);
}