/* CSS AISLADO DEL HEADER.
   No modifica tipografía ni layouts de Carrera, Cursos o Módulos. */

.site-header,
.site-header *{
    box-sizing:border-box;
}

.site-header .container{
    width:min(1180px, calc(100% - 32px));
    margin-inline:auto;
}

/* =========================================================
   HEADER · MENÚ JERÁRQUICO + RESPONSIVE
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:80;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.site-header__inner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:1rem 0;
}

.site-nav{
    display:block;
    width:auto;
}

.site-nav__list,
.site-submenu{
    list-style:none;
    margin:0;
    padding:0;
}

.site-nav__list{
    display:flex;
    align-items:center;
    gap:.35rem;
}

.site-nav__item{
    position:relative;
}

.site-nav__parent{
    display:flex;
    align-items:center;
}

.site-nav__link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:.65rem .9rem;
    border-radius:999px;
    text-decoration:none;
    color:var(--menu-color,#0b2d5c);
    font-weight:600;
    transition:
        background .18s ease,
        color .18s ease;
}

.site-nav__link--label{
    cursor:default;
}

.site-nav__link:hover,
.site-nav__item:hover > .site-nav__parent .site-nav__link,
.site-nav__item.submenu-open > .site-nav__parent .site-nav__link{
    background:rgba(37,99,235,.10);
    color:var(--menu-hover,#2563eb);
}

.site-submenu-toggle{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    margin-left:-7px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--menu-color,#0b2d5c);
    cursor:pointer;
}

.site-submenu-toggle svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .18s ease;
}

.site-nav__item:hover .site-submenu-toggle,
.site-nav__item.submenu-open .site-submenu-toggle{
    color:var(--menu-hover,#2563eb);
}

.site-nav__item.submenu-open .site-submenu-toggle svg{
    transform:rotate(180deg);
}

.site-submenu{
    position:absolute;
    top:calc(100% + 9px);
    left:0;
    z-index:100;
    width:max-content;
    min-width:230px;
    max-width:320px;
    padding:8px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    background:#fff;
    box-shadow:0 20px 50px rgba(15,23,42,.13);
    opacity:0;
    visibility:hidden;
    transform:translateY(7px);
    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}

.site-submenu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-12px;
    height:12px;
}

.site-nav__item:hover > .site-submenu,
.site-nav__item:focus-within > .site-submenu,
.site-nav__item.submenu-open > .site-submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.site-submenu a{
    display:block;
    padding:.78rem .85rem;
    border-radius:10px;
    color:#24324a;
    text-decoration:none;
    font-weight:500;
    line-height:1.3;
}

.site-submenu a:hover{
    background:#f4f2ff;
    color:var(--menu-hover,#2563eb);
}

.site-menu-toggle{
    display:none;
    width:46px;
    height:44px;
    padding:0;
    border:1px solid rgba(15,23,42,.10);
    border-radius:12px;
    background:rgba(255,255,255,.7);
    cursor:pointer;
}

.site-menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    margin:4px auto;
    border-radius:20px;
    background:var(--menu-color,#0b2d5c);
    transition:
        transform .2s ease,
        opacity .2s ease;
}

body.site-menu-lock{
    overflow:hidden;
}

@media (max-width:991.98px){

    .site-header__inner{
        flex-direction:row;
        align-items:center;
        padding:.8rem 0;
    }

    .site-logo img{
        max-height:48px;
    }

    .site-menu-toggle{
        display:block;
        flex:0 0 auto;
    }

    .site-header.menu-open .site-menu-toggle span:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    .site-header.menu-open .site-menu-toggle span:nth-child(2){
        opacity:0;
    }

    .site-header.menu-open .site-menu-toggle span:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }

    .site-nav{
        position:absolute;
        left:0;
        right:0;
        top:100%;
        width:100%;
        max-height:calc(100vh - 76px);
        overflow:auto;
        padding:10px 0 18px;
        border-top:1px solid rgba(15,23,42,.07);
        background:var(--header-mobile-bg,#fff);
        box-shadow:0 20px 38px rgba(15,23,42,.10);
        opacity:0;
        visibility:hidden;
        transform:translateY(-6px);
        pointer-events:none;
        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .18s ease;
    }

    .site-header.menu-open .site-nav{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .site-nav__list{
        display:block;
    }

    .site-nav__item{
        border-bottom:1px solid rgba(15,23,42,.06);
    }

    .site-nav__item:last-child{
        border-bottom:0;
    }

    .site-nav__parent{
        display:grid;
        grid-template-columns:minmax(0,1fr) 48px;
        align-items:stretch;
    }

    .site-nav__link{
        min-height:50px;
        padding:.85rem .15rem;
        border-radius:0;
        font-size:1rem;
    }

    .site-nav__link:hover,
    .site-nav__item:hover > .site-nav__parent .site-nav__link,
    .site-nav__item.submenu-open > .site-nav__parent .site-nav__link{
        background:transparent;
    }

    .site-submenu-toggle{
        width:48px;
        height:auto;
        margin:0;
        border-radius:0;
    }

    .site-submenu{
        position:static;
        width:auto;
        min-width:0;
        max-width:none;
        display:none;
        padding:0 0 9px 13px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
        transition:none;
    }

    .site-nav__item.submenu-open > .site-submenu{
        display:block;
    }

    .site-submenu a{
        padding:.72rem .9rem;
        border-left:2px solid #e5e0f5;
        border-radius:0;
        color:#596277;
        font-size:.94rem;
    }

    .site-submenu a:hover{
        background:transparent;
        border-left-color:var(--menu-hover,#2563eb);
    }
}

/* =========================================================
   MENÚ · TERCER NIVEL
   ========================================================= */

/* Los LI anidados necesitan posición relativa para el flyout */
.site-submenu > .site-nav__item{
    position:relative;
}

/* Los enlaces de niveles 2/3 conviven con su flecha */
.site-submenu .site-nav__parent{
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px;
    align-items:center;
}

.site-submenu .site-nav__link{
    display:flex;
    width:100%;
    min-height:0;
    padding:.78rem .85rem;
    border-radius:10px;
    color:#24324a;
    font-weight:500;
    line-height:1.3;
}

.site-submenu .site-submenu-toggle{
    width:30px;
    height:30px;
    margin:0 3px 0 0;
}

/* Tercer nivel: sale hacia la derecha del segundo */
.site-submenu .site-submenu{
    top:-8px;
    left:calc(100% + 8px);
}

/* En escritorio la flecha de un submenú lateral apunta a la derecha */
@media (min-width:992px){
    .site-submenu .has-children > .site-nav__parent .site-submenu-toggle svg{
        transform:rotate(-90deg);
    }

    .site-submenu .has-children.submenu-open > .site-nav__parent .site-submenu-toggle svg{
        transform:rotate(90deg);
    }

    .site-submenu .site-nav__item:hover > .site-nav__parent .site-nav__link,
    .site-submenu .site-nav__item.submenu-open > .site-nav__parent .site-nav__link{
        background:#f4f2ff;
        color:var(--menu-hover,#2563eb);
    }
}

@media (max-width:991.98px){

    /* Todos los niveles se vuelven acordeón */
    .site-submenu .site-nav__parent{
        grid-template-columns:minmax(0,1fr) 48px;
    }

    .site-submenu .site-submenu-toggle{
        width:48px;
        height:auto;
        margin:0;
    }

    .site-submenu .site-submenu{
        position:static;
        display:none;
        width:auto;
        padding:0 0 7px 14px;
    }

    .site-submenu .site-nav__item.submenu-open > .site-submenu{
        display:block;
    }

    /* Profundidad visual */
    .site-submenu--level-2{
        padding-left:13px;
    }

    .site-submenu--level-3{
        padding-left:18px;
    }

    .site-submenu--level-2 > .site-nav__item > .site-nav__parent .site-nav__link{
        color:#596277;
        font-size:.94rem;
    }

    .site-submenu--level-3 > .site-nav__item > .site-nav__parent .site-nav__link{
        color:#6d7483;
        font-size:.90rem;
    }

    .site-submenu--level-3 > .site-nav__item > .site-nav__parent .site-nav__link{
        border-left:2px solid #d8d0ee;
        padding-left:14px;
    }
}