/* Lista del menú */

.box-azul-oscuro-content ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}


.box-azul-oscuro-content ul li {
    position: relative;
    margin: 0;
    padding: 0;
}

.box-azul-oscuro-content ul li a {
    font-family: var(--fuente-parrafo-1);
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 60px;
    padding: 0 20px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.box-azul-oscuro-content ul li a:hover {
    color: #9edcff;
}

.box-azul-oscuro-content ul li a.active {
    color: #9edcff;
    margin-bottom: 10px;;
    text-decoration: underline 3px #9edcff;
    text-underline-offset: 10px;
}

.bg-heroes {
    margin-top: -20%;
    background-image: url('../img/home/bg_heroes-1.1_iexe.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    aspect-ratio: 16 / 9;
}

.titulos-section {
    font-family: var(--fuente-parrafo-1);
    font-size: var(--tamaño-fuente-titulos);
    text-align: center;
    color: #04233A;
}

.parrafo-section {
    font-family: var(--fuente-titulo);
    font-size: var(--tamaño-fuente-medio-1);
    color: #04233A;
}

#section-heroes-como-tu p {
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}


.titulo-form-conviertete {
    font-family: var(--fuente-parrafo-1);
    font-size: var(--tamaño-fuente-xxl-grande-2);
    color: var(--color-azul-medio-oscuro);
    font-weight: bold;
    text-align: center;
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
    display: block;
}

button.btn.sin-form.btn-primario.mt-4 {
    background-color: var(--color-azul-medio-oscuro);
    color: var(--color-blanco);
    border-radius: 23px;
}

#formulario-heores-conviertete {
    label {
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-medio-1);
        color: var(--color-azul-medio-oscuro);
    }

}

.text-aviso-privacidad {
    font-family: var(--fuente-parrafo-1);
    font-size: var(--tamaño-fuente-medio-1);
    color: var(--color-azul-medio-oscuro);
    text-decoration: underline;
}

.text-aviso {
    font-size: var(--tamaño-fuente-medio-1);
}

#section-heroes-como-tu-iniciativa {
    background: url('../img/home/heroes-como-tu.webp') no-repeat;
    /* aspect-ratio: 1105 / 721; */
    opacity: .9;

    p.text-titulo {
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-titulos);
        color: var(--color-azul-medio-oscuro);
        text-align: center;
    }
    
    p.text-parrafo {
        font-family: var(--fuente-titulo);
        font-size: var(--tamaño-fuente-grande);
        color: #000;
        text-align: left;
    }

    .content-heroes {
        margin-top: 40%;
    }

    .text-parrafo-registra {
        text-align: right;
        color: var(--color-azul-medio-oscuro);
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-muy-grande);
        text-decoration: underline;
        padding-top: 2.5rem;
    }
    
}


.img-quienes-reconocemos {
    border-radius: 18px;
    width: 100%;
    box-shadow: -5px 10px 10px #5DA5CB55;
}

#section-quienes-reconocemos {
    .text-titulo {
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-titulos);
        padding-left: 5%;
    }

    .text-sub-titulo {
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-muy-grande-2);
        color: #04233A;
        font-weight: 900;
    }

    .text-parrafo {
        font-family: var(--fuente-titulo);
        font-size: var(--tamaño-fuente-grande);
        color: #4D70B5;
        max-width: 640px;
    }

    .contendor-textos {
        padding-left: 10%;
    }
}


.img-testimonios {
    aspect-ratio: 480 / 720;
    /* width: 100%; */
    /* transform: translateX(-26%); */
    position: relative;
    z-index: 1;
    opacity: 0.15;
    max-height: 720px;
}

#section-testimonios {
    background: #ecf6fe;
    padding: 0px;

    .video-short iframe {
        aspect-ratio: 309 / 531;
        max-width: 309px;
        max-height: 531px;
        border-radius: 24px;
        box-shadow: -10px 15px 10px #12577B49;
        position: relative;
        z-index: 999;
        padding: 0px;
    }

    .container .row .col-6 .row .col-6 {
        padding: 0px;
    }

    .text-titulo {
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-titulos);
        text-align: center;
        color: #04233A;
        transform: translateY(2rem);
        /* margin-top: 2rem; */
        margin-bottom: 0px;
    }

    .testimonio-card {
        position: relative;
        z-index: 1;
    }

    .testimonio-texto {
        position: absolute;
        left: 25px;
        top: 40%;
        z-index: 2;
        color: #ffffff;
    }

    .testimonio-texto p {
        margin: 0;
    }

    .testimonio-nombre {
        font-size: var(--tamaño-fuente-grande);
        font-weight: 900;
        font-family: var(--fuente-titulo);
        color: var(--color-azul-medio-oscuro);
    }

    .testimonio-cargo {
        margin-top: 8px !important;
        font-size: var(--tamaño-fuente-grande);
        line-height: 1.4;
        color: #04233A;
        font-weight: 300;
    }
}


.video-short {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
}

.video-short iframe {
    display: block;
    width: 100%;
}

#section-nominar ul.nominar-ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#section-nominar ul.nominar-ul > li {
    position: relative;
    padding-left: 34px;
    color: #4D70B5;
    font-family: var(--fuente-titulo);
    font-size: var(--tamaño-fuente-grande);
    line-height: 1.5;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

#section-nominar ul.nominar-ul > li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 24px;
    height: 24px;
    background-image: url('../img/home/arrow-li.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#section-nominar .text-titulo-1 {
    font-family: var(--fuente-parrafo-1);
    font-size: var(--tamaño-fuente-titulos);
    color: #04233A;
    margin-bottom: 2rem;
}

.text-titulo-datos-postulante {
    font-family: var(--fuente-parrafo-1);
    font-size: var(--tamaño-fuente-muy-grande-2);
    color: var(--color-azul-medio-oscuro);
    text-align: center;
    font-weight: bold;
    margin: 0; 
}

.accordion-item {
    border: none !important;
}

#section-faqs {
    .text-titulo {
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-titulos);
        color: var(--color-azul-medio-oscuro);
        text-align: center;
        font-weight: 300;
    }

    ul {
        list-style: none;
        padding-left: 5%;
        margin: 0;
    }

    ul > li {
        position: relative;
        padding-left: 34px;
        color: #132B5A;
        font-family: var(--fuente-titulo);
        font-size: var(--tamaño-fuente-grande);
        line-height: 1.5;
        padding-right: 10%;
        margin-bottom: 1rem;
    }

    ul > li::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 0;
        width: 24px;
        height: 24px;
        background-image: url('../img/home/arrow-li.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0;
        transform: rotate(0deg);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    ul > li:hover::before {
        opacity: 1;
        transform: rotate(0deg);
    }

    ul > li.active::before {
        opacity: 1;
        transform: rotate(90deg);
    }

    .faq-question {
        display: inline-block;
        cursor: pointer;
    }

    ul > li p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-parrafo);
        color: #132B5A;
        line-height: 1.5;
    }

    ul > li.active p {
        max-height: 300px;
        opacity: 1;
        margin-top: 0.5rem;
    }
}

#section-slogan {
    .text-titulo {
        font-family: var(--fuente-parrafo-1);
        font-size: var(--tamaño-fuente-titulos);
        color: var(--color-azul-medio-oscuro);
        text-align: center;
        font-weight: 300;
        margin-bottom: 100px;
    }
}

section#navbar {
    margin-top: 40px;
}

@media (max-width: 991px) {
    section#navbar {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .bg-heroes{
        height: 50vh;
    }

    #section-heroes-como-tu .titulos-section {
        font-size: 48px;
    }
    
    #section-heroes-como-tu .parrafo-section {
        font-size: 18px;
        max-width: 350px;
    }

    #section-heroes-como-tu-iniciativa p.text-titulo{
        font-size: 48px;
    }
    #section-heroes-como-tu-iniciativa {    
        background: url('../img/home/heroes-dos.png') no-repeat;
        background-size: 100%;
        margin-bottom: 0px;
    }

    .content-heroes {
        margin-top: 70% !important;
    }
    
    .video-short {
        margin: 2% 0% 15% 0%;
    }

    #section-testimonios {
        .testimonio-texto {
            position: relative;
        }
    }

    #section-nominar .text-titulo-1 {
        padding-left: 5%;
    }

    .mobil-testimonio-espacio {
        padding-bottom: 120px;
    }

    .text-parrafo-registra {
        padding-top: 1rem !important;
        padding-bottom: 2.5rem;
    }
}

/* Menú mobile fullscreen */
.mobile-menu-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.4s ease;
}

.mobile-menu-bg.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Contenido del menú */
.mobile-menu-content {
    background: #001e42;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Aquí está la corrección importante */
.mobile-menu-content ul {
    list-style: none;
    padding: 0;
    margin: 0;

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

    gap: 28px;
    width: 100%;
    text-align: center;
}

/* Items */
.mobile-menu-content ul li {
    width: 100%;
    margin: 0;
}

/* Links */
.mobile-menu-content ul li a {
    display: block;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    text-decoration: none;
    white-space: normal;
}

.mobile-menu-content ul li a.active {
    color: #9edcff;
    text-decoration: underline;
    text-underline-offset: 8px;
}

/* Botón cerrar */
.mobile-menu-close {
    position: absolute;
    top: 28px;
    right: 32px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.mobile-menu-close {
    position: absolute;
    top: 32px;
    right: 32px;

    width: 28px;
    height: 28px;

    padding: 0;
    margin: 0;
    border: none;
    background: transparent;

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

    cursor: pointer;
    z-index: 10;
}

.mobile-menu-close img {
    width: 100%;
    height: auto;
    display: block;
}

#section-nominar {
    scroll-margin-top: 64px;
}

@media (min-width: 1200px) {
    #section-faqs .box-white-content {
        min-height: 640px;
        max-height: 640px;
        overflow: hidden;
    }

    .altura-fraqs {
        min-height: 475px;
        max-height: 475px;
    }
}