/*==========================
    HEADER 2027
==========================*/

.header-modern{

    background:#ffffff;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.35s;

}

.topbar-modern{

    background:#183B67;

    color:#fff;

    font-size:13px;

    padding:8px 0;

}

.topbar-info span{

    margin-right:25px;

}

.topbar-info i{

    color:#67B32E;

    margin-right:5px;

}

.topbar-social a{

    color:#fff;

    margin-left:15px;

    font-size:18px;

    transition:.3s;

}

.topbar-social a:hover{

    color:#67B32E;

}

.logo-modern{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo-modern img{

    height:78px;

    margin-right:15px;

}

.logo-modern h5{

    margin:0;

    color:#183B67;

    font-weight:700;

    font-size:23px;

    line-height:22px;

}

.logo-modern span{

    color:#67B32E;

    font-weight:700;

    letter-spacing:1px;

}

/*====================================
MENU PRINCIPAL
====================================*/

.navbar{

    padding:18px 0;

}

.navbar-nav .nav-item{

    position:relative;

    margin-left:8px;

}

.navbar-nav .nav-link{

    color:#183B67 !important;

    font-weight:600;

    font-size:15px;

    padding:12px 16px !important;

    transition:.30s;

    position:relative;

}

/* Línea inferior */

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:16px;

    bottom:6px;

    width:0;

    height:3px;

    background:#67B32E;

    transition:.30s;

    border-radius:10px;

}

.navbar-nav .nav-link:hover{

    color:#67B32E !important;

}

.navbar-nav .nav-link:hover::after{

    width:calc(100% - 32px);

}

/* Opción activa */

.navbar-nav .active>.nav-link,

.navbar-nav .nav-link.active{

    color:#67B32E !important;

}

.navbar-nav .active>.nav-link::after,

.navbar-nav .nav-link.active::after{

    width:calc(100% - 32px);

}

/*====================================
DROPDOWN
====================================*/

.dropdown-menu{

    border:none;

    border-radius:12px;

    padding:10px 0;

    margin-top:15px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

    animation:menuFade .30s;

}

.dropdown-item{

    padding:11px 22px;

    color:#183B67;

    font-weight:500;

    transition:.25s;

}

.dropdown-item:hover{

    background:#F4F8FC;

    color:#67B32E;

    padding-left:28px;

}

@keyframes menuFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.btn-preinscripcion{

    background:#67B32E;

    color:#fff !important;

    padding:12px 28px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    display:inline-flex;

    align-items:center;

}

.btn-preinscripcion i{

    margin-right:8px;

    font-size:18px;

}

.btn-preinscripcion:hover{

    background:#183B67;

    color:#fff !important;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.18);

}

.header-modern.scrolled{

    box-shadow:0 10px 35px rgba(0,0,0,.12);

}

.header-modern.scrolled .logo-modern img{

    height:62px;

    transition:.35s;

}

@media(max-width:991px){

.topbar-modern{

    display:none;

}

.logo-modern img{

    height:60px;

}

.logo-modern h5{

    font-size:18px;

}

.logo-modern span{

    font-size:15px;

}

.navbar{

    padding:10px 0;

}

.navbar-collapse{

    margin-top:20px;

    background:#fff;

    border-radius:15px;

    padding:15px;

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

}

.navbar-nav .nav-link{

    padding:14px !important;

}

.btn-preinscripcion{

    width:100%;

    justify-content:center;

    margin-top:10px;

}

}

/*=========================
SUBMENÚ
=========================*/

.dropdown-submenu{
    position:relative;
}

.dropdown-submenu>.dropdown-menu{

    top:0;

    left:100%;

    margin-top:-2px;

    border-radius:12px;

    display:none;

    min-width:240px;

}

.dropdown-submenu:hover>.dropdown-menu{

    display:block;

}

.dropdown-submenu>.dropdown-toggle::after{

    content:"›";

    float:right;

    font-size:18px;

    margin-top:-2px;

    border:none;

}

/*======================================
MODAL PREINSCRIPCIÓN
======================================*/

.modal-preinscripcion{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.82);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.modal-preinscripcion.show{

    opacity:1;

    visibility:visible;

}

.modal-preinscripcion-content{

    width:92%;

    max-width:900px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    position:relative;

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

    animation:zoomModal .45s;

}

.modal-preinscripcion img{

    width:100%;

    display:block;

}

@keyframes zoomModal{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.cerrar-modal{

    position:absolute;

    right:15px;

    top:15px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

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

    font-size:30px;

    cursor:pointer;

    transition:.3s;

}

.cerrar-modal:hover{

    background:#183B67;

    color:#fff;

}

.acciones-modal{

    padding:25px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-modal-principal{

    background:#67B32E;

    color:#fff;

    padding:14px 35px;

    border-radius:40px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.btn-modal-principal:hover{

    background:#183B67;

    color:#fff;

    transform:translateY(-3px);

}

.btn-modal-secundario{

    background:#F2F2F2;

    border:none;

    padding:14px 30px;

    border-radius:40px;

    cursor:pointer;

    transition:.3s;

}

.btn-modal-secundario:hover{

    background:#183B67;

    color:#fff;

}

@media(max-width:768px){

.modal-preinscripcion-content{

    width:96%;

}

.acciones-modal{

    flex-direction:column;

}

.btn-modal-principal,

.btn-modal-secundario{

    width:100%;

    text-align:center;

}

}