﻿/* ================= NAVBAR + SECCIONES + FOOTER + MARCAS ================= */

/* Links del navbar */
.navbar-main .nav-link {
    position: relative;
    font-weight: 600;
    font-size: .95rem;
    padding: .5rem 1rem;
    color: var(--brand-dark);
    transition: color .2s ease, opacity .2s ease;
}

    .navbar-main .nav-link::after {
        content: "";
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        bottom: .15rem;
        height: 3px;
        border-radius: 999px;
        background: var(--brand-main);
        transform-origin: center;
        transform: scaleX(0);
        opacity: 0;
        transition: transform .2s ease, opacity .2s ease;
    }

    .navbar-main .nav-link:hover {
        color: var(--brand-dark);
        opacity: 1;
    }

        .navbar-main .nav-link:hover::after,
        .navbar-main .nav-link.active::after {
            transform: scaleX(1);
            opacity: 1;
        }

    /* Estado activo */
    .navbar-main .nav-link.active {
        color: var(--brand-dark);
    }

/* Botones del navbar */
.navbar-main .btn {
    border-radius: .9rem;
    font-weight: 600;
    padding-inline: 1.1rem;
}

/* Barra principal (efecto glass) */
.navbar-main {
    padding-top: .25rem;
    padding-bottom: .25rem;
    align-items: center;
    min-height: 72px;
    background: rgba(254, 254, 254, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    border-bottom: 1px solid rgba(254, 254, 254, 0.6);
}

    /* Logo dentro del navbar principal */
    .navbar-main .brand-logo {
        height: 88px !important;
        max-width: none;
        width: auto;
        object-fit: contain;
        margin-top: -2px;
    }

/* Vista móvil / tablet */
@media (max-width: 991.98px) {
    .navbar-main {
        padding-top: .5rem;
        padding-bottom: .5rem;
        min-height: 72px;
    }

        .navbar-main .brand-logo {
            height: 60px !important;
        }

        .navbar-main .nav-link::after {
            left: .7rem;
            right: .7rem;
        }
}

/* Secciones genéricas público */
.section {
    padding: 3rem 0;
    background: #FEFEFE;
}

.section-sm {
    padding: 2rem 0;
    background: #FEFEFE;
}

/* Footer simple (si se usa en otras vistas) */
footer.footer {
    font-size: .85rem;
    padding: .75rem 1rem;
    background: #1D2648;
    color: #FEFEFE;
    border-top: 1px solid rgba(254, 254, 254, 0.25);
}

    footer.footer a {
        color: inherit;
        opacity: .9;
    }

        footer.footer a:hover {
            opacity: 1;
        }

/* Logos y texto de marca (uso general) */
.brand-logo {
    height: 40px;
    width: auto;
}

@media (min-width: 992px) {
    .brand-logo {
        height: 44px;
    }
}

.brand-logo-sm {
    height: 30px;
    width: auto;
}

@media (min-width: 992px) {
    .brand-logo-sm {
        height: 32px;
    }
}

.brand-text-main {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--brand-dark);
    letter-spacing: .3px;
}

.brand-slogan {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: .78rem;
    color: var(--brand-main);
    letter-spacing: .2px;
}

/* Texto de marca en navbar */
.navbar-brand .brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    margin-top: 2px;
}

.brand-name {
    font-weight: 600;
    font-size: .99rem;
    color: var(--brand-main);
    text-transform: uppercase;
    letter-spacing: .7px;
}

.brand-highlight {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--brand-dark);
    letter-spacing: .6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* ========== FOOTER CAMPUS (DEGRADADO AZUL/VERDE OFICIAL) ========== */

.footer-campus {
    color: #FEFEFE;
    background: radial-gradient(120% 160% at 0% 0%, #1D2648 0%, #111833 55%, #1D2648 100%);
    margin-top: 0;
}

.footer-campus__top {
    border-bottom: 1px solid rgba(254, 254, 254, 0.18);
    background: rgba(17, 24, 51, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.footer-campus__logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 999px;
    background: #FEFEFE;
    padding: 4px;
    box-shadow: 0 0 0 2px rgba(165, 200, 60, 0.6);
}

.footer-campus h5 {
    font-weight: 800;
    margin-bottom: .25rem;
}

.footer-campus p {
    font-size: .93rem;
    color: rgba(254, 254, 254, 0.86);
}

.footer-campus__title {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #A5C83C;
}

.footer-campus a {
    color: #FEFEFE;
    text-decoration: none;
}

    .footer-campus a:hover {
        color: #A5C83C;
    }

.footer-campus__social {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(254, 254, 254, 0.35);
    background: rgba(17, 24, 51, 0.85);
    font-size: 1.1rem;
    transition: background .15s, color .15s, transform .15s, border-color .15s;
}

    .footer-campus__social:hover {
        background: #A5C83C;
        color: #1D2648;
        border-color: #FEFEFE;
        transform: translateY(-1px);
    }

/* Franja con lema */
.footer-campus__belt {
    background: linear-gradient(90deg, #1D2648, #A5C83C, #1D2648);
    border-top: 1px solid rgba(254, 254, 254, 0.18);
    border-bottom: 1px solid rgba(254, 254, 254, 0.18);
    color: #FEFEFE;
    font-size: .9rem;
}

.footer-campus__belt-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(165, 200, 60, 0.22);
    color: #FEFEFE;
    font-size: 1rem;
}

/* Línea legal final */
.footer-campus__legal {
    background: #1D2648;
    color: rgba(254, 254, 254, 0.75);
    font-size: .8rem;
}

/* Ajustes responsive footer */
@media (max-width: 767.98px) {
    .footer-campus__top .container {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .footer-campus__belt {
        text-align: center;
    }
}
/* =========================
   FIX Offcanvas (Mobile)
   ========================= */

.navbar-main .offcanvas,
.navbar-main .offcanvas-header,
.navbar-main .offcanvas-body {
    background: #FEFEFE !important; /* FIX: evita transparencia */
}

.navbar-main .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
    .navbar-main .offcanvas {
        width: min(92vw, 360px);
    }

    .navbar-main .navbar-nav .nav-link {
        padding: .75rem .25rem;
    }

    .navbar-main .navbar-nav .btn {
        width: 100%;
        justify-content: center;
        margin-top: .35rem;
    }
}
/* ===========================
   FIX OFFCANVAS MENÚ MÓVIL
   =========================== */

@media (max-width: 991.98px) {

    /* Forzar altura real */
    .offcanvas {
        height: 100dvh !important;
    }

    /* Permitir scroll interno */
    .offcanvas-body {
        overflow-y: auto !important;
        padding-bottom: 2rem;
    }

    /* Evitar que el header tape contenido */
    .offcanvas-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1056;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    /* Mejor separación visual */
    .offcanvas-body .nav-link,
    .offcanvas-body .btn {
        margin-bottom: .5rem;
    }
}

/* ========================================================
   CORRECCIÓN: EVITAR QUE LOS BOTONES DEL MENÚ SE APLASTEN
   ======================================================== */
.upla-sidebar .upla-rail {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
}

    .upla-sidebar .upla-rail .upla-rail-item {
        flex-shrink: 0 !important; /* La clave: prohibido encogerse */
    }

    /* Opcional: Hace que la barrita de scroll se vea delgadita y elegante */
    .upla-sidebar .upla-rail::-webkit-scrollbar {
        width: 4px;
    }

    .upla-sidebar .upla-rail::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        border-radius: 4px;
    }