/* =========================================
   1. VARIABLES INSTITUCIONALES
   ========================================= */
:root {
    --corpo-blue: #004a87;       /* Azul Principal */
    --corpo-green: #28a745;      /* Verde Acción */
    --corpo-gray-bg: #f5f7f8;    /* Gris neutro fondo */
    --corpo-dark: #212529;       /* Texto oscuro */
    --white: #ffffff;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   2. RESET & BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Montserrat', sans-serif; 
    color: var(--corpo-dark); 
    background-color: var(--white);
    overflow-x: hidden;
    line-height: 1.5;
}

.container-flex { 
    max-width: 1400px; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    padding: 0 20px; 
}

/* =========================================
   3. TOP UTIL BAR
   ========================================= */
.top-util { 
    background-color: #edeae6; 
    border-bottom: 1px solid #dcd9d4; 
    padding: 8px 0; 
    position: relative; 
    z-index: 1000; 
}

.util-left { display: flex; align-items: center; flex: 1; }

.btn-dark { 
    background: #343a40; 
    color: white; 
    border: none; 
    padding: 8px 15px; 
    margin-right: 8px; 
    cursor: pointer; 
    border-radius: 4px; 
    transition: var(--transition); 
}

.btn-dark:hover { background: var(--corpo-blue); }

.secondary-nav a { 
    text-decoration: none; 
    color: #444; 
    font-size: 13px; 
    margin-left: 15px; 
    font-weight: 500; 
}

.secondary-nav a:hover { color: var(--corpo-blue); }

.util-right a { 
    text-decoration: none; 
    color: #444; 
    font-size: 13px; 
    margin-left: 20px; 
}

.btn-access { font-weight: bold; color: var(--corpo-blue) !important; }

/* =========================================
   4. PANEL DESPLEGABLE (MENÚ HAMBURGUESA)
   ========================================= */
.dropdown-content-panel {
    background-color: var(--corpo-gray-bg);
    width: 100%;
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 0 solid #ccc;
    position: relative;
    z-index: 900;
}

.panel-visible { 
    max-height: 450px; 
    border-bottom: 3px solid var(--corpo-blue); 
    padding: 40px 0; 
}

.panel-content { align-items: flex-start; gap: 100px; position: relative; }

.menu-col-panel h3 { 
    font-size: 14px; 
    text-transform: uppercase; 
    color: var(--corpo-blue); 
    margin-bottom: 15px; 
    letter-spacing: 1px; 
}

.menu-col-panel a { 
    text-decoration: none; 
    font-size: 16px; 
    color: #555; 
    padding: 8px 0; 
    display: block; 
    transition: var(--transition); 
}

.menu-col-panel a:hover { color: var(--corpo-green); padding-left: 5px; }

.closebtn-panel { 
    position: absolute; 
    top: -20px; 
    right: 20px; 
    font-size: 40px; 
    text-decoration: none; 
    color: #999; 
}

/* =========================================
   5. BRANDING HEADER
   ========================================= */
.branding-header { background: var(--white); padding: 35px 0; }

.branding-flex-layout { justify-content: space-between; }

.site-title-area h1 { 
    font-size: 28px; 
    font-weight: 300; 
    line-height: 1.1; 
    color: var(--corpo-blue); 
}

.site-title-area h1 strong { font-weight: 800; display: block; }

.branding-center-right-group { 
    flex: 1; 
    display: flex; 
    justify-content: flex-end; 
    padding-right: 50px; 
}

.social-pills-group { display: flex; gap: 12px; }

.pill { 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    text-decoration: none; 
    transition: var(--transition); 
}

.pill:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

.x-icon { background: #000; }
.ig-icon { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.pod-icon { background: var(--corpo-green); }
.yt-icon { background: #ff0000; }

.main-university-logo-area img { max-height: 90px; }

/* =========================================
   6. NAVEGACIÓN PRINCIPAL AZUL
   ========================================= */
.main-nav-corpo { 
    background-color: var(--corpo-blue); 
    position: relative; 
    z-index: 800; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    transition: box-shadow 0.3s ease;
}

.nav-list { 
    list-style: none; 
    display: flex; 
    width: 100%; 
    justify-content: center; 
}

.nav-list li a { 
    color: var(--white); 
    text-decoration: none; 
    padding: 18px 25px; 
    display: block; 
    font-size: 14px; 
    font-weight: 600; 
    text-transform: uppercase; 
    transition: var(--transition); 
}

.nav-list li a i { margin-right: 8px; font-size: 16px; }

.nav-list li a:hover, .nav-list li a.active { 
    background-color: rgba(255,255,255,0.15); 
}

/* =========================================
   7. SLIDER HERO COMPACTO (Fondo Total)
   ========================================= */
.slider-hero-full-bg.compacto {
    padding: 0;
    position: relative;
    overflow: hidden;
    height: 50vh; /* Altura compacta */
    min-height: 400px;
    background-color: #000;
}

.slider-slides-container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
}

/* Estilo para las transiciones de las diapositivas */
.slide {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    opacity: 0; /* Oculto por defecto */
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
    z-index: 1;
}

.slide.active { 
    opacity: 1 !important; 
    visibility: visible;
    z-index: 2; 
}

/* Contenedor de contenido con margen de seguridad */
.slider-wrapper-full {
    justify-content: flex-start;
    padding: 0 100px; /* Evita que el texto choque con las flechas */
    width: 100%;
}

.slider-content-box {
    flex: 0 1 650px;
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.tagline-full { 
    display: inline-block; 
    color: var(--white);
    opacity: 0.9;
    font-weight: 600; 
    font-size: 13px; 
    text-transform: uppercase; 
    margin-bottom: 10px; 
    letter-spacing: 1.5px;
}

.slider-title-full { 
    font-size: 48px; 
    line-height: 1.1; 
    font-weight: 300; 
    margin-bottom: 20px;
}

.slider-title-full .highlight-full { font-weight: 800; color: var(--white); }

.slider-badge-full {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.slider-badge-full i { color: #ff4d4d; font-size: 24px; }
.slider-badge-full span { font-weight: 700; font-size: 18px; }

.slider-description-full { 
    font-size: 17px; 
    color: var(--white);
    margin-bottom: 30px; 
    max-width: 550px; 
    line-height: 1.6;
    font-weight: 300;
}

/* Botones del Slider */
.slider-actions-full { display: flex; gap: 15px; }

.btn-primary-full.compacto { 
    background-color: var(--corpo-green); 
    color: var(--white); 
    padding: 12px 30px; 
    border-radius: 5px; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 15px;
    transition: var(--transition); 
}

.btn-primary-full.compacto:hover { background-color: #218838; transform: translateY(-2px); }

.btn-outline-full.compacto { 
    border: 2px solid var(--white); 
    color: var(--white); 
    padding: 10px 30px; 
    border-radius: 5px; 
    text-decoration: none; 
    font-weight: 700; 
    transition: var(--transition); 
}

.btn-outline-full.compacto:hover { background-color: var(--white); color: var(--corpo-dark); }

/* Controles (Flechas) */
.slider-arrow.compacto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white);
    font-size: 20px;
    transition: var(--transition);
    z-index: 30;
}

.slider-arrow.compacto:hover { background: var(--corpo-blue); transform: translateY(-50%) scale(1.1); }

.prev-full { left: 20px; }
.next-full { right: 20px; }

/* Indicadores (Puntos) */
.slider-dots-full.compacto {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 30;
}

.dot { 
    width: 10px; 
    height: 10px; 
    background: rgba(255,255,255,0.3); 
    border-radius: 50%; 
    cursor: pointer; 
    transition: var(--transition); 
}

.dot.active { 
    background: var(--corpo-green); 
    width: 30px; 
    border-radius: 10px; 
}

/* =========================================
   8. RESPONSIVE ADICIONAL
   ========================================= */
@media (max-width: 1024px) {
    .branding-flex-layout { flex-direction: column; text-align: center; gap: 20px; }
    .branding-center-right-group { justify-content: center; padding: 0; }
    .nav-list { flex-wrap: wrap; }
    .nav-list li a { padding: 12px 15px; font-size: 12px; }

    .slider-hero-full-bg.compacto { height: 450px; }
    .slider-wrapper-full { padding: 0 40px; text-align: center; justify-content: center; }
    .slider-content-box { flex: 0 1 100%; }
    .slider-title-full { font-size: 34px; }
    .slider-actions-full { justify-content: center; }
    
    .slider-arrow.compacto { width: 40px; height: 40px; font-size: 16px; }
}

/* --- ESTILOS NUEVAS SECCIONES --- */
.section-container { padding: 50px 0; background-color: #fff; }
.bg-light { background-color: #f5f7f8; }
.container-flex-column { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.main-section-title { font-size: 22px; color: var(--corpo-blue); margin-bottom: 30px; font-weight: 700; }

/* GRID DE TARJETAS */
.grid-programas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.card-simple, .card-overlay {
    position: relative; height: 280px; border-radius: 6px; overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); background: #000;
}

.card-simple img, .card-overlay img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease; opacity: 0.9;
}

.card-simple:hover img, .card-overlay:hover img { transform: scale(1.05); }

/* PIE DE TARJETA (ESTILO IMAGEN ADJUNTA) */
.card-label-bottom {
    position: absolute; bottom: 0; width: 100%;
    background-color: rgba(0, 31, 58, 0.95); color: white;
    padding: 12px 15px; font-size: 14px; text-align: right; font-weight: 500;
}

/* TEXTO CENTRAL PARA SECCIÓN PREVENCIÓN */
.overlay-center-text {
    position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
    color: white; text-align: center; font-weight: 800; font-size: 18px;
    width: 90%; text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

/* FILA DE SERVICIOS */
.services-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.service-bubble { flex: 1; min-width: 140px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.bubble-icon {
    width: 85px; height: 85px; background-color: var(--corpo-blue);
    color: white; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 32px; margin-bottom: 12px; transition: 0.3s;
}

.service-bubble:hover .bubble-icon { background-color: var(--corpo-green); transform: translateY(-5px); }
.service-bubble p { font-size: 11px; font-weight: 700; color: #333; text-transform: uppercase; line-height: 1.3; }

/* RESPONSIVE */
@media (max-width: 992px) { .grid-programas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .grid-programas { grid-template-columns: 1fr; } .services-row { justify-content: center; } }

/* =================================================BA
   SECCIÓN: EVENTOS PRÓXIMOS (ESTILO COMPACTO Y ELEGANTE)
   ==================================================== */

/* Contenedor principal con retiro de bordes y ancho máximo de 1100px */
.container-elegant {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px; /* Asegura un retiro mínimo de 30px en los bordes */
    box-sizing: border-box;
}

.section-container {
    padding: 70px 0;
    background-color: #ffffff;
}

.bg-light {
    background-color: #f8f9fa; /* Gris muy suave para diferenciar secciones */
}

/* Cabecera de la sección */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.main-section-title {
    font-size: 24px;
    color: var(--corpo-blue);
    font-weight: 700;
    margin: 0;
}

/* Ventana de visualización para el scroll */
.events-window {
    overflow: hidden; /* Oculta las tarjetas que salen del ancho de 1100px */
    width: 100%;
    position: relative;
}

/* Contenedor del scroll horizontal */
.events-scroll-container {
    display: flex;
    gap: 25px; /* Espacio entre tarjetas */
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 5px 35px 5px;
    scrollbar-width: none; /* Ocultar barra en Firefox */
}

.events-scroll-container::-webkit-scrollbar {
    display: none; /* Ocultar barra en Chrome/Safari */
}

/* Tarjetas de Eventos */
.card-evento-scroll {
    flex: 0 0 calc(33.333% - 17px); /* Muestra exactamente 3 tarjetas dentro del contenedor */
    min-width: 300px; /* Evita que se deformen en pantallas pequeñas */
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-evento-scroll:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

/* Etiqueta de Fecha Flotante */
.evento-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--corpo-blue);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.evento-date .day { font-size: 18px; font-weight: 800; line-height: 1; }
.evento-date .month { font-size: 10px; font-weight: 400; text-transform: uppercase; }

/* Contenedor de Imagen */
.evento-img {
    width: 100%;
    height: 190px;
    overflow: hidden;
}

.evento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Información del Evento */
.evento-info {
    padding: 20px;
}

.evento-info .category {
    font-size: 11px;
    font-weight: 700;
    color: var(--corpo-green);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.evento-info h3 {
    font-size: 17px;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.3;
}

.evento-info p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.evento-info p i {
    margin-right: 5px;
    color: var(--corpo-blue);
}

/* Botones de Control (Flechas) */
.scroll-controls {
    display: flex;
    gap: 12px;
}

.scroll-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    color: var(--corpo-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.scroll-btn:hover {
    background: var(--corpo-blue);
    color: #ffffff;
    border-color: var(--corpo-blue);
}

/* Adaptabilidad para móviles */
@media (max-width: 900px) {
    .card-evento-scroll {
        flex: 0 0 75%; /* En tablets se ve una tarjeta y media */
    }
}

@media (max-width: 600px) {
    .card-evento-scroll {
        flex: 0 0 85%; /* En móviles casi todo el ancho */
    }
    .container-elegant {
        padding: 0 20px;
    }
}

/* --- ESTILOS SECCIÓN RECURSOS --- */
.resource-filters {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 40px;
}

.filter-btn {
    background: transparent;
    border: 1px solid #e0e0e0;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active, .filter-btn:hover {
    background: var(--corpo-blue);
    color: #fff;
    border-color: var(--corpo-blue);
}

.grid-recursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.resource-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
    border-bottom: 3px solid var(--corpo-green);
}

.res-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--corpo-blue);
    background: rgba(0, 51, 102, 0.05);
    padding: 4px 10px;
    border-radius: 4px;
}

.res-icon {
    font-size: 24px;
    color: var(--corpo-green);
    margin-bottom: 20px;
}

.resource-card h3 {
    font-size: 18px;
    color: #222;
    margin-bottom: 15px;
}

.resource-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.res-action {
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--corpo-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.res-action:hover {
    gap: 12px;
    color: var(--corpo-green);
}

/* Responsive */
@media (max-width: 900px) { .grid-recursos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-recursos { grid-template-columns: 1fr; } }

/* --- ESTILOS FOOTER --- */
.main-footer {
    background-color: var(--corpo-blue); /* Azul institucional */
    color: #ffffff;
    padding: 70px 0 30px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr; /* Distribución equilibrada */
    gap: 50px;
    margin-bottom: 50px;
}

.footer-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--corpo-green); /* Verde institucional para resaltar */
}

.footer-description {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Redes Sociales */
.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-socials a {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
}

.footer-socials a:hover {
    background: var(--corpo-green);
    transform: translateY(-3px);
}

/* Listas de Enlaces y Contacto */
.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li, .footer-contact li {
    margin-bottom: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--corpo-green);
    padding-left: 5px;
}

.footer-contact i {
    color: var(--corpo-green);
    width: 20px;
}

/* Parte Inferior */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}