/* Fondo de la página */
body {
    display: flex;
    flex-direction: column;
    background-color: #E8E8E8 !important;
    background-size: cover;
    background-position: top center;
    background-repeat: repeat;
    margin: 0;
    height: 100vh;
}

.imagen_interior_fondo {
    position: fixed;
    top: 0px;
    right: 0px;
    height: 70vh !important;
    z-index: 0;
}


.container {
    max-width: 1550px;
}

.contendor_principal {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 0px;
    position: relative;
    flex: 1;
}

/* Botón de hamburguesa */
.hamburger-menu {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
}

/* Imagen estática superior izquierda */
.static-image img {
    position: absolute;
    top: 32px;
    left: 12px;
    width: 103px;
    height: 104px;
}

/* Logo central */
.logo-center img {
    display: block;
    margin: 64px auto 0;
    width: 172px;
    height: 172px;
}


/* Intro Section Styles */
.intro-section {
    width: 100%;
    height: auto;
    padding: 8px 20px;
    gap: 12px;
    border-radius: 20px;
    background: #FFF;
    display: flex;
    align-items: center;
    opacity: 1;
    margin-top: 10px;
    z-index: 2;
    position: relative;
    min-height: 120px;
}

.play-button {
    flex-shrink: 0;
    cursor: pointer;
    padding-top: 15px;
}


.intro-title {
    align-self: stretch;
    color: #66003D;
    font-family: Nulshock;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    /* 142.857% */
}

.intro-description {
    color: var(--Text-300, #323234);
    font-family: "Trebuchet MS";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 125% */
}

.section-title {
    width: 100%;

    font-family: Nulshock;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-align: left;
    color: #FFF;
}

/* Challenges Section Styles */
.challenges-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    margin-top: 24px;
}


.challenges-divider {
    display: flex;
    height: 2px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin: 16px 0;
}

.challenges-divider-1 {
    display: flex;
    height: 1px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin: 0;
}

.challenges-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #0074BE 0%, #D3DF4E 100%);
}

.challenges-line-1 {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0074BE 0%, #D3DF4E 100%);
}


.challenges-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0px 1px;
}

.challenge-button {
    position: relative !important;
    display: flex;
    width: 100%;
    display: flex;
    padding: 8px 10px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: auto;
    border: none !important;
    justify-content: center;
    margin: -2px 1px;
    background: transparent;
    cursor: pointer;
}

.challenge-button > img {
    width: 100%;
    max-width: 195px;
    height: 270px;
}

.challenge-button-next {
    display: flex;
    padding: 4px;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    background: var(--azul_claro, #CCE3F2);
    border: none;
    position: absolute;
    right: 0px;
}

.challenge-details {
    display: flex;
    padding: 20px 16px 40px 16px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    border-radius: 0px 0px 20px 20px;
    background: var(--Blanco, #FFF);
    margin: 2px 2px 20px 2px;
    /* sombra_cards */
    box-shadow: 0px -4px 8px 0px rgba(47, 47, 47, 0.25) inset, 0px 4px 16px 0px #4C82A2;
}

.challenge-info {
    width: 94%;
    position: relative;
}

.challenge-name {
    display: flex;
    align-items: center;
    color: #58585b;
    width: 90%;
    margin-left: 0%;
    justify-content: center;
}

.challenge-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.active-challenge {
    position: relative;
    background: #ffffff;
    /* Necesario para el pseudo-elemento */
}

.active-challenge::after {
    content: "";
    /* Elemento visual */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px !important;
    /* Grosor del borde */
    background: linear-gradient(90deg, #0074BE 0%, #D3DF4E 100%);

}

.challenge-dificultad {
    color: var(--Text-500, #58585B);
    text-align: center;
    font-family: "Trebuchet MS";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    /* 125% */
}

.challenge-result-dificultad {
    color: var(--Text-500, #58585B);
    text-align: center;
    font-family: "Trebuchet MS";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.icon {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    border: 1px solid var(--Text-600, #BEBEC0);
    background: var(--Blanco, #FFF);
    height: 120px;
    justify-content: space-between;
}

.no-pointer {
    cursor: auto !important;
}


/* Datos del usuario */
.user-data-section {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;

    margin-top: 4px;
    padding: 8px 20px;
    background-color: #f9f9f9;
    border-radius: 20px;
    min-height: 120px;
}

.user_image_container {
    width: 80px;
    height: 80px;

    background: linear-gradient(white, white) padding-box, linear-gradient(to bottom, rgba(0, 116, 190, 1), rgba(211, 223, 78, 1)) border-box;
    border-radius: 50px;
    border: 4px solid transparent;
}

.user_image_container_retos {
    width: 40px;
    height: 40px;
    background: linear-gradient(white, white) padding-box, linear-gradient(to bottom, rgba(0, 116, 190, 1), rgba(211, 223, 78, 1)) border-box;
    border-radius: 50px;
    border: 2px solid transparent;
    display: flex;
}


.user_image {
    width: 100%;
    background: #FFF;
    background-image: url(../images/login/silhouette.png);
    background-size: cover;
    background-position: center;
    height: 100%;
    border-radius: 50px;
}

.user-alias-name {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 4px;
}

/* Ranking */
.ranking-section {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 24px;
}

.ranking-content-reto {
    padding: 8px 20px;
    background-color: #FFF;
    border-radius: 20px;
    min-height: 120px;
    color: var(--Text-500, #58585B);
    font-family: "Trebuchet MS";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

#retos_ranking {
    margin-bottom: 15px;
}

.ranking-content-global {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 8px 20px;
    background-color: #FFF;
    border-radius: 20px;
    min-height: 120px;
}

/* Seccion autores, objetivos y metodologia */
.authors-objective-methodology {
    display: none;
    margin-top: 24px;
}

.authors-objective-methodology_mobile {
    display: block;
    margin-top: 24px;
    padding: 0 12px;
}

/* Sección de autores */
.authors-section {
    width: 100%;
    padding: 0;
    color: #fff;
}

.container_carousel {
    position: relative;
    width: 100%;
    height: 320px;

    overflow: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.container_carousel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.container_carousel::-webkit-scrollbar-track {
    background: transparent;
    /* color of the tracking area */
}

.container_carousel::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* color of the scroll thumb */
    border-radius: none;
    /* roundness of the scroll thumb */
    border: none;
    /* creates padding around scroll thumb */
}

.carousel {
    display: flex;
    align-items: start;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;

    width: fit-content;
}

.author-card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    scroll-snap-align: start;

    width: 226px;
    height: 335px;
}

.author-photo {
    z-index: 99;
}

.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    height: 225px;
    background: #FFF;
    margin-top: -80px;
    padding: 90px 8px 8px 12px;
    border-radius: 20px;
    box-shadow: 0px 23px 7px 0px rgba(0, 79, 128, 0.01), 0px 15px 6px 0px rgba(0, 79, 128, 0.09), 0px 8px 5px 0px rgba(0, 79, 128, 0.30), 0px 4px 4px 0px rgba(0, 79, 128, 0.51), 0px 1px 2px 0px rgba(0, 79, 128, 0.59);
    z-index: 9;
}

.author-name {
    font-family: "Trebuchet MS";
    font-size: 16px;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    color: #0074BE;
}

.author-role {
    font-family: "Trebuchet MS";
    font-size: 14px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #58585B;
}

/* Objetivos y Metodología */
.objective-methodology {
    margin-top: 34px;
    padding: 40px 10px;
    background: linear-gradient(180deg, rgba(0, 62, 102, 0.40) 0%, rgba(9, 9, 25, 0.40) 54.38%);
}

.objective-methodology h2 {
    font-family: Nulshock;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #D3DF4E;
    ;
}

.objective-methodology p {
    font-family: "Trebuchet MS";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #FFF;
}

.home-button {

    width: fit-content;
    /* Hug: El ancho se ajusta al contenido */
    height: auto;
    /* Hug: La altura se ajusta al contenido */
    padding: 10px 30px;
    /* Espaciado interno */
    gap: 12px;
    /* Espaciado entre elementos dentro del botón (si aplica) */
    border-radius: 24px;
    /* Bordes redondeados */
    background: #0074BE;
    /* Color de fondo */
    color: #FFF;
    /* Texto blanco */
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow:
        3px 4px 10px 0px #31ABF8 inset,
        /* Efecto interno */
        0px 4px 4px 0px #004F8082,
        0px 8px 5px 0px #004F804D,
        0px 15px 6px 0px #004F8017,
        0px 23px 7px 0px #004F8003,
        0px 4px 4px 0px #00000040;
    /* Sombras externas */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Efecto de interacción */
}

.home-button:hover {
    transform: translateY(-2px);
    /* Efecto al pasar el cursor */
    box-shadow:
        3px 4px 10px 0px #31ABF8 inset,
        0px 4px 4px 0px #004F8082,
        0px 8px 5px 0px #004F804D,
        0px 15px 6px 0px #004F8017,
        0px 23px 7px 0px #004F8003,
        0px 6px 6px 0px #00000060;
    /* Sombras más intensas */
}

.home-button:active {
    transform: translateY(1px);
    /* Efecto de presionado */
    box-shadow:
        3px 4px 10px 0px #31ABF8 inset,
        0px 4px 4px 0px #004F8082 inset,
        0px 8px 5px 0px #004F804D inset,
        0px 4px 4px 0px #00000040;
    /* Sombras más sutiles */
}




/* Footer */
.footer {
    margin-top: 20px;
    height: 602px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
}


.title {
    font-family: Nulshock;
}


.respuesta_verdadera {
    width: 16px !important;
    position: absolute;
    top: 0px;
    right: 0px;
}


.respuesta_falsa {
    width: 16px !important;
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Estilo de la barra de progreso */
.progress-container {
    width: 100%;
    /* Ancho total de la barra */
    background-color: #E0E0E1;
    border-radius: 20px;
    height: 12px;
    margin: 6px 0px 0px 0px;
    padding: 1px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(to right, #0074BE, #D3DF4E);
    width: 0%;
    /* Inicialmente vacío */
    border-radius: 20px;
    transition: width 0.3s ease-in-out;
    /* Transición suave */
}


.retos-ranking {
    width: 100%;
}

.ranking-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.ranking-tiempo {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ranking-resto {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    width: 55%;
}

.ranking-puntuacion {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.ranking-sin-contenido {
    color: var(--Text-500, #58585B);
    font-family: "Trebuchet MS";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}




/* Media queries */
@media (min-width: 575px) {

    .imagen_interior_fondo {
        position: fixed;
        top: 0px;
        right: 0px;
        height: 100vh !important;
        z-index: 0;
    }

    .corner-image {
        margin-top: 32px;
        margin-left: 12px;
    }



    .challenge-name {
        width: 80%;
        margin-left: 10%;
    }

    /* Datos del usuario */
    .user-data-section {
        margin-top: 139px;
    }

    /* Ranking */
    .ranking-section {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    /* Seccion autores, objetivos y metodologia */
    .authors-objective-methodology {
        display: block;
    }

    .authors-objective-methodology_mobile {
        display: none;
    }



    .respuesta_verdadera {
        width: 25px !important;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .respuesta_falsa {
        width: 25px !important;
        position: absolute;
        top: 0px;
        right: 0px;
    }



}