/* =========================================
   HOME PREMIUM STYLES - FUNDACIÓN SOCIAL PEREA
   (Versión Final Limpia & Optimizada)
   ========================================= */

/* 1. IMPORTACIÓN DE FUENTES (OFFLINE) */
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/montserrat-v31-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2');
}

:root {
    /* Paleta de Colores Oficial */
    --brand-cyan: #00aeef;
    --brand-magenta: #ec008c;
    --brand-green: #8dc63f;
    --brand-yellow: #ffd100;
    --brand-dark: #0F172A;
    --brand-darker: #020617;
    --text-body: #475569;
    --bg-light: #F8FAFC;
}

/* Reset Básico */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-body);
    overflow-x: hidden;
    background-color: white;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--brand-dark);
}

/* =========================================
   1. HERO SLIDER
   ========================================= */
.hero-slider-section {
    position: relative; height: 100vh; min-height: 650px;
    width: 100%; overflow: hidden; background: var(--brand-dark);
}

.hero-slide {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0; transition: opacity 1s ease-in-out;
    z-index: 1;
}
.hero-slide.active { opacity: 1; z-index: 2; }

/* Fondo con Zoom Lento */
.slide-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transform: scale(1); transition: transform 8s linear;
}
.hero-slide.active .slide-bg { transform: scale(1.15); }

/* Capa Oscura */
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 60%, rgba(15, 23, 42, 0.2) 100%);
}

.hero-content {
    position: relative; z-index: 3;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 1300px; margin: 0 auto; padding: 0 50px;
}

/* Tipografía Hero */
.hero-subtitle {
    display: block; font-family: 'Montserrat', sans-serif !important;
    font-size: 1.6rem !important; font-weight: 800 !important;
    text-transform: uppercase; letter-spacing: 4px !important;
    color: var(--brand-yellow); margin-bottom: 15px !important;
    opacity: 0; transform: translateY(30px);
}

.hero-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 5rem !important; font-weight: 900 !important;
    color: white; line-height: 1 !important; margin-bottom: 25px !important;
    letter-spacing: -2px; opacity: 0; transform: translateY(30px);
    text-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.hero-title span { color: var(--brand-cyan); }

.hero-desc {
    font-size: 1.3rem !important; max-width: 800px;
    color: #f1f5f9; line-height: 1.6 !important; font-weight: 500;
    margin-bottom: 40px !important; opacity: 0; transform: translateY(30px);
}

/* =========================================
   ANIMACIÓN "CINEMATIC FOCUS" (MODERNA & PREMIUM)
   ========================================= */

/* 1. LA MAGIA: Efecto de "Enfoque de Cámara" */
@keyframes cinematicFocus {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(1.1); /* Empieza abajo y un poco grande */
        filter: blur(15px); /* Totalmente desenfocado */
        letter-spacing: 0.1em; /* Letras separadas */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1); /* En su sitio */
        filter: blur(0); /* Nítido */
        letter-spacing: normal; /* Letras en su lugar */
    }
}

/* 2. SUBTÍTULO: Entrada lateral elegante */
@keyframes sideReveal {
    0% {
        opacity: 0;
        transform: translateX(-30px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* 3. ELEMENTOS SECUNDARIOS (Texto y botones): Subida suave */
@keyframes softRise {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- APLICACIÓN A LOS ELEMENTOS (Corrección de visibilidad) --- */

/* Nota: Usamos 'animation-fill-mode: both' para asegurar 
   que el texto NO desaparezca al terminar */

/* SUBTÍTULO */
.hero-slide.active .hero-subtitle { 
    animation: sideReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.2s;
}

/* TÍTULO PRINCIPAL (La estrella del show) */
.hero-slide.active .hero-title { 
    /* El cubic-bezier da esa sensación "elástica" premium al final */
    animation: cinematicFocus 1.2s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.4s;
    
    /* Aseguramos que el navegador priorice la renderización de esto */
    will-change: transform, opacity, filter;
}

/* DESCRIPCIÓN */
.hero-slide.active .hero-desc { 
    animation: softRise 1s ease-out both;
    animation-delay: 0.8s;
}

/* BOTONES */
.hero-slide.active .hero-btns { 
    animation: softRise 1s ease-out both;
    animation-delay: 1s;
}

/* =========================================
   2. BOTONES HERO (ALINEACIÓN DE ACERO)
   ========================================= */
/* El Contenedor (Padre) */
.hero-btns {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: flex-start !important;
    gap: 20px !important; margin-top: 30px; padding: 10px 0;
}

/* Los Botones (Hijos Gemelos) */
.btn-mega-glow, 
.btn-programs {
    margin: 0 !important; display: flex !important;           
    align-items: center !important; justify-content: center !important;
    height: 56px !important; min-width: 250px !important;
    padding: 0 30px !important; box-sizing: border-box !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important; font-weight: 800 !important;
    text-transform: uppercase !important; text-decoration: none !important;
    letter-spacing: 0.5px !important; line-height: 1 !important;
    
    border-radius: 50px !important; transition: all 0.3s ease !important;
    transform: none !important; 
}

/* Botón Blanco */
.btn-mega-glow {
    background: white !important; color: var(--brand-cyan) !important;
    border: 2px solid white !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}
.btn-mega-glow:hover {
    transform: translateY(-3px) !important;
    background: var(--brand-cyan) !important; color: white !important;
    border-color: var(--brand-cyan) !important;
}

/* Botón Transparente */
.btn-programs {
    background: transparent !important; color: white !important;
    border: 2px solid white !important;
}
.btn-programs:hover {
    transform: translateY(-3px) !important;
    background: var(--brand-magenta) !important; color: white !important;
    border-color: var(--brand-magenta) !important;
}


/* =========================================
   3. FLECHAS MODERNAS & PREMIUM
   ========================================= */
.nav-trigger {
    position: absolute; top: 0; height: 100%;
    width: 10%; z-index: 15; cursor: pointer;
}
.trigger-left { left: 0; }
.trigger-right { right: 0; }

.slider-arrow {
    position: absolute; top: 50%;
    width: 50px !important; height: 50px !important;
    box-sizing: border-box !important;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px);
    color: white; font-size: 1.1rem !important; 
    z-index: 20; pointer-events: none;
    opacity: 0; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.arrow-prev { left: 30px; transform: translateY(-50%) translateX(-20px); }
.arrow-next { right: 30px; transform: translateY(-50%) translateX(20px); }

.trigger-left:hover ~ .arrow-prev, .trigger-right:hover ~ .arrow-next {
    opacity: 1; transform: translateY(-50%) translateX(0) scale(1.05);
    background: var(--brand-cyan); border-color: transparent;
    box-shadow: 0 10px 25px rgba(0, 174, 239, 0.4);
}
/* =========================================
   4. BARRA FLOTANTE (PREMIUM WHITE - VISIBILIDAD GARANTIZADA)
   ========================================= */

.info-bar-overlap {
    position: relative;
    /* Z-Index alto para asegurar que flote SOBRE el slider */
    z-index: 100; 
    
    /* Subimos la barra para que monte el hero */
    margin-top: -30px; 
    
    /* Ancho controlado y centrado */
    width: 95%;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

/* =========================================
   BARRA FLOTANTE CON SCROLL TRIGGER
   ========================================= */

/* 1. Mantenemos la definición de la animación */
@keyframes entradaTriunfal {
    0% {
        opacity: 0;
        transform: translateY(60px); 
    }
    100% {
        opacity: 1;
        transform: translateY(0); 
    }
}

.glass-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* ESTILOS VISUALES (Tus estilos Premium Blanco) */
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); 
    border: 1px solid #e2e8f0; 
    border-radius: 15px; 
    padding: 15px 20px;
    min-height: 100px;
    position: relative;
    overflow: hidden;
    
    /* --- ESTADO INICIAL: OCULTO Y ESPERANDO --- */
    opacity: 0; /* Invisible al principio */
    transform: translateY(60px); /* Abajo esperando */
    transition: all 0.5s ease-out; /* Suavidad por si acaso */
}

/* --- ESTA ES LA CLASE QUE JS ACTIVARÁ CUANDO HAGAS SCROLL --- */
.glass-bar.ya-visible {
    /* ¡AHORA SÍ! Ejecuta la animación */
    animation: entradaTriunfal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    opacity: 1;
    transform: translateY(0);
}

/* LÍNEAS DIVISORIAS VERTICALES */
.glass-divider {
    width: 1px;
    height: 50px;
    background: #e2e8f0; /* Color gris suave */
}

/* --- ITEMS INDIVIDUALES --- */
.glass-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: default;
}

/* CAJA DEL ICONO (CÍRCULO GRIS AL INICIO) */
.icon-box {
    width: 50px;
    height: 50px;
    background: #f1f5f9; /* Gris muy claro */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Icono en color oscuro por defecto */
    color: var(--brand-dark); 
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

/* TEXTOS (Color Oscuro para leerse sobre blanco) */
.text-box h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--brand-dark); /* IMPORTANTE: Color oscuro */
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-box p {
    font-size: 0.85rem;
    color: #64748b; /* Gris medio */
    margin: 0;
    font-weight: 500;
}

/* =========================================
   EFECTOS HOVER: COLOR TOTAL EN TODA LA TARJETA
   ========================================= */

/* REGLA GENERAL: Al pasar el mouse sobre CUALQUIER item de color... */
.glass-item:hover .text-box h3,
.glass-item:hover .text-box p {
    /* ...el texto se vuelve BLANCO */
    color: white !important;
    transition: all 0.3s ease;
}

/* --- 1. MAGENTA (CAMPUS) --- */
.item-magenta:hover {
    /* Fondo completo Magenta */
    background: var(--brand-magenta) !important;
    /* Sombra Magenta */
    box-shadow: 0 15px 30px rgba(236, 0, 140, 0.4) !important;
    transform: translateY(-5px);
    /* Quitamos bordes grises */
    border-color: transparent;
}

.item-magenta:hover .icon-box {
    /* La cajita del icono se vuelve blanca semitransparente */
    background: rgba(255, 255, 255, 0.2) !important;
    /* El icono se vuelve blanco puro */
    color: white !important;
}


/* --- 2. CIAN (CERTIFICACIÓN) --- */
.item-cyan:hover {
    /* Fondo completo Cian */
    background: var(--brand-cyan) !important;
    /* Sombra Cian */
    box-shadow: 0 15px 30px rgba(0, 174, 239, 0.4) !important;
    transform: translateY(-5px);
    border-color: transparent;
}

.item-cyan:hover .icon-box {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}


/* --- 3. VERDE (SOCIAL) --- */
.item-green:hover {
    /* Fondo completo Verde */
    background: var(--brand-green) !important;
    /* Sombra Verde */
    box-shadow: 0 15px 30px rgba(141, 198, 63, 0.4) !important;
    transform: translateY(-5px);
    border-color: transparent;
}

.item-green:hover .icon-box {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}




/* =========================================
   ENCABEZADO PREMIUM (TÍTULOS DE SECCIÓN)
   ========================================= */

.premium-header {
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 1. EL SUBTÍTULO (GRADIENTE Y ESPACIADO) */
.ph-subtitle {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 800; /* Extra bold */
    text-transform: uppercase;
    letter-spacing: 4px; /* Mucho espacio entre letras (Elegancia) */
    margin-bottom: 10px;
    
    /* Truco Premium: Texto con gradiente */
    background: linear-gradient(90deg, var(--brand-magenta), var(--brand-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* El texto toma el color del fondo */
    
    position: relative;
    display: inline-block;
}

/* 2. EL TÍTULO PRINCIPAL */
.ph-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem; /* Gigante */
    font-weight: 900; /* Lo más grueso posible */
    color: var(--brand-dark); /* Azul oscuro casi negro */
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1px; /* Letras pegaditas para fuerza */
}

/* 3. PALABRA RESALTADA ("ÉXITO") */
.ph-highlight {
    position: relative;
    color: var(--brand-dark);
    z-index: 1;
    display: inline-block;
}

/* Subrayado creativo detrás de "Éxito" */
.ph-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 15px; /* Altura del resaltador */
    background: var(--brand-yellow); /* Amarillo Perea */
    opacity: 0.4; /* Semitransparente */
    z-index: -1; /* Detrás del texto */
    border-radius: 4px;
    transform: skewX(-10deg); /* Un poco inclinado para dinamismo */
}

/* 4. LÍNEA DECORATIVA ABAJO */
.ph-line {
    width: 80px;
    height: 6px;
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-green));
    border-radius: 10px;
    margin: 25px auto 0; /* Centrado */
    position: relative;
}

/* RESPONSIVE (MÓVIL) */
@media (max-width: 768px) {
    .ph-title {
        font-size: 2.5rem; /* Más pequeño en celular */
    }
    .ph-subtitle {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }
}


/* =========================================
   BOTÓN PREMIUM "MATRICÚLATE" (CON EFECTO DE LUZ)
   ========================================= */
.glass-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    
    /* Gradiente de la marca (Cian a Verde) */
    background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
    
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    
    /* Texto */
    color: white;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    font-size: 0.9rem;
    
    margin-left: 20px;
    
    /* Sombra inicial suave */
    box-shadow: 0 10px 20px rgba(0, 174, 239, 0.3);
    
    /* NECESARIO PARA EL EFECTO DE LUZ */
    position: relative; 
    overflow: hidden; 
    transition: all 0.3s ease;
    z-index: 10;
}

/* EL RAYO DE LUZ (INVISIBLE AL INICIO) */
.glass-cta::before {
    content: '';
    position: absolute;
    top: 0; 
    left: -100%; /* Empieza fuera a la izquierda */
    width: 100%; 
    height: 100%;
    
    /* El brillo es un degradado blanco transparente */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    
    /* La transición no se activa hasta el hover */
    transition: 0.5s;
    z-index: -1; /* Detrás del texto pero sobre el fondo */
}

/* AL PASAR EL MOUSE (HOVER) */
.glass-cta:hover {
    transform: translateY(-3px) scale(1.02); /* Crece un poquito */
    box-shadow: 0 15px 30px rgba(0, 174, 239, 0.5); /* Sombra más intensa */
}

/* ANIMACIÓN DEL RAYO DE LUZ */
.glass-cta:hover::before {
    left: 100%; /* El brillo viaja hasta el final a la derecha */
}


/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 992px) {
    .glass-bar {
        flex-direction: column;
        height: auto;
        padding: 25px;
        align-items: stretch; /* Estirar items */
        gap: 20px;
    }
    
    .glass-divider { display: none; } /* Ocultar líneas en móvil */
    
    .glass-item {
        padding: 15px;
        background: #f8fafc; /* Fondo grisecito en cada item móvil */
        border-radius: 10px;
    }
    
    .glass-cta {
        justify-content: center;
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}


.quote-modern {
    background: var(--bg-light); padding: 30px;
    border-left: 5px solid var(--brand-green); border-radius: 0 10px 10px 0;
    font-style: italic; color: #555; margin-top: 20px;
}

.stats-parallax {
    background: var(--brand-dark) url('../img/fondo-facultades.jpg') fixed center;
    background-size: cover; padding: 100px 0; position: relative; color: white;
}
.stats-parallax::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.9); z-index: 1;
}
.stats-grid {
    position: relative; z-index: 2; display: grid;
    grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; gap: 30px; padding: 0 20px;
}
.stat-card {
    text-align: center; padding: 30px 15px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 15px;
    background: rgba(255,255,255,0.05); transition: 0.3s;
}
.stat-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); }
.stat-number { display: block; font-size: 3.5rem; font-weight: 800; color: var(--brand-yellow); margin-bottom: 5px; }

.special-courses { padding: 100px 0; background: white; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head h2 { font-size: 2.8rem; font-weight: 800; }
.section-head span { color: var(--brand-magenta); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }

.courses-grid-home {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.course-card-pro {
    background: white; border-radius: 15px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: 0.3s; border: 1px solid #eee;
}
.course-card-pro:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.cc-img { height: 220px; overflow: hidden; position: relative; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.course-card-pro:hover .cc-img img { transform: scale(1.1); }
.cc-badge {
    position: absolute; top: 15px; left: 15px;
    background: var(--brand-yellow); color: var(--brand-dark);
    padding: 5px 15px; border-radius: 20px; font-weight: 700; font-size: 0.8rem; z-index: 2;
}

.news-events-split { 
    padding: 100px 0; 
    /* Degradado sutil de arriba a abajo */
    background: linear-gradient(to bottom, #f8fafc 0%, #e2e8f0 100%);
}
.team-circles { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 50px; }
.team-item { text-align: center; }
.circle-img {
    width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
    border: 4px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin: 0 auto 15px; transition: 0.3s;
}
.team-item:hover .circle-img { transform: scale(1.1); border-color: var(--brand-cyan); }
.circle-img img { width: 100%; height: 100%; object-fit: cover; }

.split-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; max-width: 1200px; margin: 0 auto; }
.event-row {
    display: flex; gap: 20px; background: white; padding: 20px;
    border-radius: 12px; margin-bottom: 20px; align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s;
}
.event-row:hover { transform: translateX(10px); }
.date-box {
    background: var(--brand-dark); color: white; padding: 10px 15px;
    border-radius: 8px; text-align: center; min-width: 70px;
}
.date-box span { font-size: 1.5rem; font-weight: 700; line-height: 1; display: block; }
.date-box small { font-size: 0.8rem; text-transform: uppercase; color: var(--brand-yellow); }


.logo-flex { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
.logo-flex img { height: 45px; filter: grayscale(100%); opacity: 0.6; transition: 0.3s; }
.logo-flex img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }


/* =========================================
   8. ANIMACIONES Y RESPONSIVE (MÓVIL)
   ========================================= */
.reveal { opacity: 0; transition: 1s ease; }
.reveal.active { opacity: 1; transform: translate(0); }
.reveal-up { transform: translateY(50px); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }

@media (max-width: 768px) {
    /* Ocultar flechas */
    .slider-arrow, .nav-trigger { display: none !important; }

    /* Textos */
    .hero-title { font-size: 2.8rem !important; }
    .hero-desc { font-size: 1rem !important; }
    
    /* Botones y Layout */
    .hero-btns { flex-direction: column !important; align-items: stretch !important; width: 100%; gap: 15px; }
    .btn-mega-glow, .btn-programs { width: 100% !important; margin-bottom: 15px !important; }
    
    .info-bar-overlap { margin-top: 0; padding: 40px 20px; }
    .info-bar-grid { flex-direction: column; } /* Cajas una debajo de la otra */
    
    
}






/* =========================================
   DIRECTOR SECTION: BRANDED DARK GLASS
   ========================================= */

.director-premium-section {
    position: relative;
    padding: 60px 0 100px; /* MÁS ESPACIO ARRIBA Y ABAJO (Ya no se ve pegado) */
    background-color: var(--brand-dark);
    overflow: hidden;
    color: white;
}

/* --- LUCES DE FONDO CON TUS COLORES --- */
.brand-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px); /* Desenfoque extremo para suavidad */
    z-index: 0;
    opacity: 0.4; /* Sutil */
}

/* Luz Magenta arriba a la derecha */
.glow-magenta {
    top: -20%;
    right: -10%;
    background: var(--brand-magenta);
}

/* Luz Cian abajo a la izquierda */
.glow-cyan {
    bottom: -20%;
    left: -10%;
    background: var(--brand-cyan);
}


/* --- LAYOUT --- */
.dp-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}


/* --- IMAGEN (IZQUIERDA) --- */
.dp-image-wrapper {
    flex: 1;
    max-width: 500px;
    position: relative;
    z-index: 2; /* Importante para el orden de capas */
}

.dp-img-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6); /* Sombra profunda */
    border: 1px solid rgba(255,255,255,0.1);
}

.dp-photo {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s ease;
}

.dp-image-wrapper:hover .dp-photo { transform: scale(1.03); }

/* Cuadro decorativo VERDE (Tu color de marca) detrás de la foto */
.dp-deco-shape {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--brand-green); /* Uso del Verde */
    border-radius: 24px;
    z-index: -1;
    opacity: 0.6;
}


/* --- TARJETA DE CRISTAL (DERECHA) --- */
.dp-glass-card {
    flex: 1.3;
    
    /* CRISTAL MEJORADO */
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    
    border-radius: 30px; /* Bordes más suaves */
    
    /* AQUÍ SOLUCIONAMOS LO "PEGADO": MÁS PADDING INTERNO */
    padding: 60px 70px; 
    
    /* Superposición elegante */
    margin-left: -90px; 
    
    box-shadow: 0 30px 70px -10px rgba(0,0,0,0.3);
    position: relative;
    z-index: 10;
}

/* Badge AMARILLO (Tu color de marca) */
.dp-badge {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--brand-yellow); 
    background: rgba(239, 201, 76, 0.1); /* Fondo amarillo muy suave */
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.dp-header h2 {
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: white;
    margin: 0 0 40px 0;
    line-height: 1.1;
}

/* Textos */
.dp-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    margin-bottom: 30px;
    position: relative;
}

.quote-mark {
    font-size: 4rem;
    color: var(--brand-cyan); /* Comilla CIAN */
    line-height: 0;
    position: relative;
    top: 15px;
    margin-right: 5px;
}

/* Caja destacada MAGENTA (Tu color de marca) */
.dp-highlight-box {
    border-left: 4px solid var(--brand-magenta);
    padding-left: 25px;
    margin-bottom: 40px;
}

.dp-highlight-box p {
    font-size: 1.1rem;
    font-weight: 600; /* Texto un poco más grueso */
    color: white;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}


/* Footer */
.dp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
}

.dp-profile h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
}
.dp-profile span {
    color: var(--brand-cyan); /* Cargo en CIAN */
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dp-signature {
    height: 60px;
    filter: invert(1) brightness(2); /* Firma blanca */
    opacity: 0.8;
}


/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 992px) {
    .director-premium-section { padding: 80px 0; }
    
    .dp-container { flex-direction: column; }
    
    .dp-image-wrapper {
        width: 100%;
        max-width: 100%;
        margin-bottom: -50px; /* Unir visualmente */
    }
    
    .dp-deco-shape { display: none; } /* Ocultar decoración en móvil */
    
    .dp-glass-card {
        margin-left: 0;
        width: 100%;
        padding: 40px 30px; /* Menos padding en móvil */
        background: rgba(15, 23, 42, 0.95); /* Fondo más sólido */
    }
    
    .dp-header h2 { font-size: 2.2rem; }
}

/* =========================================
   ANIMACIÓN CINEMÁTICA: CONVERGENCIA (SCROLL)
   ========================================= */

/* 1. ESTADO INICIAL (OCULTO) */
/* La imagen empieza a la izquierda y un poco pequeña */
.director-premium-section .dp-image-wrapper {
    opacity: 0;
    transform: translateX(-150px) scale(0.9);
    filter: blur(10px); /* Efecto borroso de movimiento */
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); /* Física suave */
}

/* La tarjeta empieza a la derecha */
.director-premium-section .dp-glass-card {
    opacity: 0;
    transform: translateX(150px);
    filter: blur(10px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.1s; /* Pequeño retraso para que no entren igual */
}

/* Las luces de fondo empiezan apagadas */
.director-premium-section .brand-glow {
    opacity: 0;
    transform: scale(0.5);
    transition: all 2s ease-out;
}

/* 2. ESTADO ACTIVO (CUANDO EL USUARIO LLEGA) */
/* Esta clase '.active' la pone el Javascript automáticamente */
.director-premium-section.active .dp-image-wrapper {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
}

.director-premium-section.active .dp-glass-card {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.director-premium-section.active .brand-glow {
    opacity: 0.4; /* Tu opacidad deseada */
    transform: scale(1);
}

/* =========================================
   INTERACTIVIDAD: "TRAER AL FRENTE" (HOVER)
   ========================================= */

/* 1. PREPARAMOS LOS ELEMENTOS PARA EL MOVIMIENTO */
.director-premium-section .dp-image-wrapper,
.director-premium-section .dp-glass-card {
    /* Transición suave para el tamaño y la sombra, 
       pero instantánea para el z-index (para que no parpadee) */
    transition: 
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.4s ease,
        z-index 0s; 
    cursor: pointer; /* Manito para indicar que es interactivo */
}

/* 2. CUANDO PASAS EL MOUSE SOBRE LA FOTO */
.director-premium-section .dp-image-wrapper:hover {
    z-index: 50; /* ¡SUBE AL PRIMER NIVEL! */
    
    /* Hacemos un pequeño zoom y la movemos un poquito a la derecha 
       para que se note que "salió" */
    transform: scale(1.05) translateX(10px) !important; 
    
    /* Sombra más fuerte para dar sensación de altura */
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6)); 
}

/* 3. CUANDO PASAS EL MOUSE SOBRE EL TEXTO */
.director-premium-section .dp-glass-card:hover {
    z-index: 50; /* ¡RECUPERA EL PRIMER NIVEL! */
    
    /* Pequeño pop para indicar actividad */
    transform: scale(1.02) !important;
    
    /* Intensificamos el borde brillante */
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}

/* 4. TRUCO VISUAL: 
   Cuando la foto está activa, apagamos un poco el texto para que destaque la foto */
.director-premium-section:has(.dp-image-wrapper:hover) .dp-glass-card {
    opacity: 0.6;
    filter: blur(2px);
    transform: scale(0.98) !important;
}

/* Y viceversa: Cuando el texto está activo, apagamos la foto */
.director-premium-section:has(.dp-glass-card:hover) .dp-image-wrapper {
    opacity: 0.6;
    filter: blur(2px);
    transform: scale(0.95) translateX(-10px) !important;
}


/* =========================================
   SEGURIDAD DE FIRMA (ANTI-COPIA)
   ========================================= */
.secure-signature {
    /* 1. MAGIA PRINCIPAL: */
    /* El mouse ignora la imagen, el clic "pasa de largo" al fondo */
    pointer-events: none; 
    
    /* 2. No se puede seleccionar ni sombrear */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* 3. No se puede arrastrar al escritorio */
    -webkit-user-drag: none;
    
    /* 4. En móvil, bloquea el menú de "Guardar Imagen" al mantener presionado */
    -webkit-touch-callout: none;
    
    /* Filtro adicional para dificultar OCR (Opcional, invierte colores para protección extra si quieres) */
    /* filter: invert(1); */ 
}

/* Capa extra: Si intentan imprimir la web, la firma desaparece */
@media print {
    .secure-signature {
        display: none !important;
    }
}



















/* =========================================
   SECCIÓN OFERTA ACADÉMICA (TARJETAS GRADIENTE)
   ========================================= */

.offer-premium-section {
    padding: 120px 0; /* Aumentamos el aire */
    background-color: #F8FAFC; /* Fondo muy claro para resaltar colores */
}

.offer-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

/* GRID RESPONSIVO */
.offer-grid {
    display: grid;
    /* Cambiamos 280px a 300px para que se vean más robustas */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.offer-card {
    position: relative;
    height: 480px; /* Tarjetas más altas estilo Poster */
    border-radius: 30px; /* Bordes más redondeados */
    overflow: hidden; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    transition: all 0.4s ease;
    cursor: pointer;
    background: #000; /* Fondo negro por si la imagen tarda en cargar */
    
    /* Mantenemos tus correcciones de seguridad */
    padding: 0 !important;
    border: none !important;
}

/* AÑADIR ESTO NUEVO: */
.img-zoom-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
}

/* REEMPLAZAR LA CLASE .offer-bg POR ESTA: */
.offer-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CLAVE: Llena todo el espacio sin deformarse */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.95; /* Imagen casi total, el gradiente hará el resto */
}

/* CAPA DE COLOR (OVERLAY) */
.offer-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* BORRA ESTA LÍNEA: opacity: 0.85; */
    /* La opacidad la controlaremos en el gradiente mismo */
    
    transition: background 0.4s ease; /* Suavizar cambio de color si hubiera */
    z-index: 1;
}

/* REEMPLAZAR ESTO: */
.offer-content {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%; /* Ocupa todo para poder alinear abajo */
    padding: 40px; /* Más espacio interno */
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Empuja todo hacia abajo */
    align-items: flex-start;
}

.offer-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem; /* Título Gigante */
    font-weight: 900; /* Extra Bold */
    color: white;
    text-transform: uppercase;
    line-height: 0.9;
    margin: 0 0 25px 0;
    text-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* REEMPLAZAR EL BOTÓN POR ESTE: */
.offer-btn {
    display: inline-block;
    padding: 14px 35px; /* Botón más grande */
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.offer-content p {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 25px;
    transform: translateY(20px);
    opacity: 0; /* Se oculta un poco inicialmente */
    transition: all 0.4s ease;
}



/* --- VARIACIONES DE COLOR (GRADIENTES MEJORADOS) --- */
/* La lógica es: linear-gradient(hacia abajo, transparente, color medio, color fuerte) */

/* REEMPLAZAR TODO EL BLOQUE DE CAPA DE COLOR Y GRADIENTES: */

.offer-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    transition: all 0.4s ease;
}

/* 1. Magenta */
.card-magenta .offer-overlay {
    background: linear-gradient(to bottom, rgba(236, 0, 140, 0.1) 0%, rgba(236, 0, 140, 0.9) 100%);
}
/* 2. Cian */
.card-cyan .offer-overlay {
    background: linear-gradient(to bottom, rgba(0, 174, 239, 0.1) 0%, rgba(0, 174, 239, 0.9) 100%);
}
/* 3. Verde */
.card-green .offer-overlay {
    background: linear-gradient(to bottom, rgba(141, 198, 63, 0.3) 0%, rgba(141, 198, 63, 0.9) 100%);
}
/* 4. Amarillo */
.card-yellow .offer-overlay {
    background: linear-gradient(to bottom, rgba(255, 209, 0, 0.3) 0%, rgba(255, 209, 0, 0.9) 100%);
}
/* 5. Azul/Marca */
.card-blue .offer-overlay {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%);
}
/* 6. Mixto */
.card-mixed .offer-overlay {
    background: linear-gradient(135deg, rgba(236,0,140,0.4), rgba(0,174,239,0.9));
}
/* 7. Dark */
.card-dark .offer-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.95));
}

/* --- BOTONES COLORES --- */
.btn-green { background: var(--brand-green); color: white; }
.btn-yellow { background: var(--brand-yellow); color: var(--brand-dark); }
.btn-cyan { background: var(--brand-cyan); color: white; }
.btn-magenta { background: var(--brand-magenta); color: white; }
.btn-dark { background: var(--brand-dark); color: white; }


/* --- EFECTOS HOVER (ANIMACIÓN) --- */


.offer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}

.offer-card:hover .offer-bg {
    transform: scale(1.15); /* Zoom lento de la imagen */
}

.offer-card:hover .offer-btn {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}


.offer-card:hover .offer-overlay {
    opacity: 0.7; /* Se aclara para ver mejor la foto */
}

.offer-card:hover p {
    opacity: 1; /* Aparece la descripción */
    transform: translateY(0);
}


.offer-card:hover p {
    opacity: 1; /* Aparece la descripción */
    transform: translateY(0);
    padding: 0px 0px 20px 5px;
}



/* REEMPLAZA TU CLASE .badge-coming-soon POR ESTA: */

.badge-coming-soon {
    /* 1. FUENTE DIFERENTE */
    font-family: 'Consolas', 'Monaco', monospace; 
    
    /* 2. FONDO CRISTAL OSCURO */
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
    
    /* 3. BORDE FINO ELEGANTE */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    padding: 8px 18px;
    border-radius: 50px;
    
    
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    
    text-transform: uppercase;
    /* 4. LETRAS MUY SEPARADAS (Efecto Premium) */
    letter-spacing: 3px; 
    
    backdrop-filter: blur(4px);
}








/* =========================================
   NAVBAR PREMIUM DROPDOWN (ESTILO 2024)
   ========================================= */

/* 1. CONTENEDOR (WRAPPER) */
.nav-dropdown-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Flechita animada */
.arrow-indicator {
    font-size: 0.7rem;
    margin-left: 8px;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

/* Al pasar el mouse por el LI, giramos la flecha */
.nav-dropdown-wrapper:hover .arrow-indicator {
    transform: rotate(180deg);
    opacity: 1;
}

/* 2. LA TARJETA FLOTANTE (EL MENÚ) */
.premium-menu-card {
    position: absolute;
    top: 100%; /* Justo debajo del header */
    left: 50%;
    transform: translateX(-50%) translateY(20px); /* Centrado y bajado (estado oculto) */
    
    width: 320px; /* Ancho generoso para que se vea premium */
    background: rgba(255, 255, 255, 0.95); /* Blanco casi sólido */
    backdrop-filter: blur(20px); /* Desenfoque del fondo (Glassmorphism) */
    -webkit-backdrop-filter: blur(20px);
    
    border-radius: 20px; /* Bordes muy redondos */
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* SOMBRA DE LUJO (Suave y difusa) */
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.02); /* Borde sutil extra */
        
    padding: 15px;
    
    /* ESTADO INICIAL: OCULTO */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /* Física suave */
    z-index: 1000;
}

/* Pequeño triángulo arriba del menú (Opcional, estilo Apple) */
.premium-menu-card::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: white;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-left: 1px solid rgba(0,0,0,0.05);
    z-index: 0;
}

/* 3. AL HACER HOVER: MOSTRAR MENÚ */
.nav-dropdown-wrapper:hover .premium-menu-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px); /* Sube suavemente */
}

/* 4. ITEMS INTERNOS (PROGRAMAS / FACULTADES) */
.menu-card-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1; /* Sobre el triángulo */
}

/* Efecto hover en cada item */
.menu-card-item:hover {
    background: #f1f5f9; /* Gris muy suave */
    transform: translateX(5px); /* Se mueve un poquito a la derecha */
}

/* 5. ICONOS CON GRADIENTE (CIRCULOS DE COLOR) */
.icon-holder {
    width: 45px; height: 45px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.menu-card-item:hover .icon-holder {
    transform: scale(1.1) rotate(-5deg); /* Efecto divertido al hover */
}

/* Colores de Marca */
.gradient-cyan {
    background: linear-gradient(135deg, #00aeef, #0077a3);
}
.gradient-magenta {
    background: linear-gradient(135deg, #ec008c, #a80063);
}

/* 6. TEXTOS */
.text-holder {
    display: flex; flex-direction: column;
}

.menu-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #1e293b; /* Color oscuro moderno */
}

.menu-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    color: #64748b; /* Gris medio */
    font-weight: 500;
}

.menu-card-item:hover .menu-title {
    color: #00aeef; /* Título cambia a azul al hover */
}

/* LÍNEA DIVISORIA */
.menu-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 5px 15px;
}










/* =========================================
   ESTILOS DE LA VENTANA MODAL FLOTANTE (PREMIUM GLASS)
   ========================================= */

/* Fondo oscuro general */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Fondo más oscuro y elegante */
    background: rgba(2, 6, 23, 0.75); 
    /* Desenfoque muy fuerte del fondo de la web */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

/* Luz ambiental detrás del modal (Efecto WOW) */
.modal-ambient-light {
    position: absolute;
    width: 400px; height: 400px;
    /* Usa el color dinámico pero muy difuminado */
    background: var(--modal-color, #333);
    filter: blur(150px);
    opacity: 0.2;
    z-index: -1;
    transition: background 0.5s ease;
}

/* LA CAJA DE CRISTAL */
.modal-glass-box {
    /* Fondo semitransparente blanco/azulado */
    background: rgba(255, 255, 255, 0.85);
    /* Borde de luz sutil */
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Sombra profunda y suave para que flote */
    box-shadow: 0 40px 80px rgba(0,0,0,0.3);
    
    width: 90%; max-width: 500px;
    padding: 80px 40px 50px; /* Más espacio arriba para el icono */
    border-radius: 30px;
    text-align: center;
    position: relative;
    
    
    /* Animación de entrada elástica */
    transform: scale(0.9) translateY(30px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.is-open .modal-glass-box {
    transform: scale(1) translateY(0);
}

/* Botón de cerrar (X) */
.modal-close-btn {
    position: absolute;
    top: 20px; right: 20px;
    width: 35px; height: 35px;
    background: rgba(0,0,0,0.05);
    border: none; border-radius: 50%;
    font-size: 1rem; color: #555555;
    cursor: pointer; transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.modal-close-btn:hover { 
    background: var(--modal-color); 
    color: white; /* Si es amarillo, el JS lo corregirá a oscuro */
    transform: rotate(90deg); 
}

/* ICONO CIRCULAR CON GLOW */
.modal-icon-circle {
    width: 90px; height: 90px;
    margin: -70px auto 25px; /* Truco: Se sale un poco por arriba */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    
    /* Fondo claro dinámico */
    background: var(--modal-bg-light, #f0f0f0);
    /* Color del icono dinámico */
    color: var(--modal-color, #333);
    
    /* Borde blanco para separarlo del fondo */
    border: 5px solid rgba(255,255,255,0.8);
    
    /* EL EFECTO PREMIUM: Resplandor suave del color temático */
    box-shadow: 0 10px 30px var(--modal-bg-light);
    
    position: relative;
}

/* Textos */
.modal-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 15px;
    color: var(--brand-dark);
    letter-spacing: -1px;
}

.modal-text p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

.modal-subtext {
    font-weight: 800; /* Un poco más grueso */
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
    margin-bottom: 35px; /* Más espacio antes del botón */
    
    /* ANTES: color: var(--modal-color, #333) !important; (Amarillo chillón) */
    /* AHORA: Gris oscuro elegante, mucho más legible */
    color: #475569 !important; 
    
    /* Quitamos el brillo del texto para que se lea nítido */
    /* text-shadow: 0 2px 10px var(--modal-bg-light); <-- ELIMINAR */
}

/* BOTÓN DE ACCIÓN GRADIENTE */
.modal-action-btn {
    /* Gradiente dinámico: del color principal a uno un poco más oscuro/saturado */
    background: linear-gradient(135deg, var(--modal-color), var(--modal-color-dark, #000));
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    cursor: pointer;
    /* Sombra de color */
    box-shadow: 0 15px 30px var(--modal-bg-light);
    transition: 0.3s;
    position: relative; overflow: hidden;
}

.modal-action-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 40px var(--modal-bg-light);
    filter: brightness(1.1);
}

/* AJUSTE PARA TEMA AMARILLO (Texto oscuro) */
.modal-overlay[data-theme="yellow"] .modal-action-btn,
.modal-overlay[data-theme="yellow"] .modal-close-btn:hover {
    color: var(--brand-dark) !important;
    font-weight: 900;
}









/* =========================================================
   CORRECCIÓN RESPONSIVE MAESTRA (HEADER BLINDADO)
   ========================================================= */

/* 1. REGLA DE ORO: CERO DESBORDAMIENTO */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* =========================================
   VISTA MÓVIL Y TABLET (Menor a 992px)
   ========================================= */
@media (max-width: 992px) {

    /* 2. OCULTAR BARRA SUPERIOR (Ahorra espacio crítico) */
    .top-bar {
        display: none !important;
    }

    /* 3. AJUSTE DE ALTURA DEL HEADER */
    .nav-height {
        height: 70px; /* Altura fija para móvil */
        padding: 0 20px;
        justify-content: space-between; /* Logo izq, Hamburguesa der */
    }

    /* 4. EL LOGO MÓVIL */
    .brand-logo img {
        height: 45px; /* Ajuste para que no se vea gigante */
        width: auto;
    }

    /* 5. EL MENÚ LATERAL (OFF-CANVAS) */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Oculto a la derecha */
        width: 85%;   /* Ancho del menú */
        max-width: 400px;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 80px; /* Espacio para no tapar el botón cerrar si hubiera */
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        z-index: 999;
        overflow-y: auto; /* Scroll interno si el menú es muy largo */
    }

    /* Cuando JS le pone la clase .active */
    .nav-menu.active {
        right: 0; /* Entra a la pantalla */
    }

    /* 6. ITEMS DEL MENÚ MÓVIL */
    .nav-menu li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-menu li a {
        display: block;
        padding: 15px 20px;
        font-size: 1rem;
        color: #333;
    }

    /* 7. ACORDEÓN (SUBMENÚ) */
    .nav-accordion-item {
        display: block !important;
        width: 100%;
    }

    .accordion-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 15px 20px;
    }

    .accordion-content {
        display: none; /* Oculto */
        background: #f9fafb;
        padding-left: 0;
        width: 100%;
        position: static !important; /* CRUCIAL: No flota, ocupa espacio */
        border-top: 1px solid #eee;
        box-shadow: none !important;
    }

    .accordion-content.show {
        display: block !important; /* Se muestra al clic */
    }

    /* Sub-items */
    .mobile-sublink {
        padding: 15px 30px !important; /* Indentación */
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }

    /* 8. BOTÓN HAMBURGUESA */
    .mobile-menu-toggle {
        display: block; /* Asegurar que se vea */
        font-size: 1.5rem;
        color: #333; /* O tu color corporativo */
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1000;
    }

    /* 9. BOTÓN CAMPUS (Solo móvil) */
    .nav-cta { display: none; } /* Ocultar el de PC */
    .mobile-only-btn { display: block; padding: 20px; text-align: center; border: none !important; }
    
    .btn-campus-mobile {
        background: #8dc63f; /* Tu verde */
        color: white !important;
        padding: 12px;
        border-radius: 50px;
        text-align: center;
        font-weight: bold;
        display: block;
    }
}

/* =========================================
   VISTA ESCRITORIO (Mayor a 993px)
   ========================================= */
@media (min-width: 993px) {
    .mobile-menu-toggle { display: none; } /* Ocultar hamburguesa */
    .nav-menu { 
        position: relative; 
        right: auto; 
        width: auto; 
        height: auto; 
        flex-direction: row; 
        background: transparent; 
        box-shadow: none; 
        padding-top: 0;
        display: flex;
    }
    .mobile-only-btn { display: none; }
    
    /* El submenú en PC debe flotar */
    .accordion-content {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        background: white;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        display: none; /* Se muestra con hover en CSS previo */
    }
    
    /* Mostrar al hover en PC */
    .nav-accordion-item:hover .accordion-content {
        display: block;
    }
}




/* =================================================================
   📊 SECCIÓN ESTADÍSTICAS: CENTRADO PERFECTO + HOVER DE COLOR PREMIUM
   ================================================================= */

/* 1. CONTENEDOR PRINCIPAL (FONDO) */
/* 1. CONTENEDOR PRINCIPAL (FONDO) */
.stats-parallax {
    padding: 50px 0 !important;
    position: relative;
    /* CORREGIDO: 'fondo-facultades.jpg' (una sola s) y quitamos el color raro #4b72bebb */
    background: #0F172A url('../img/slider-2.jpeg') fixed center center no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* Capa oscura (Overlay) */
.stats-parallax::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    /* CAMBIO CLAVE: Bajamos de 0.92 a 0.7 para que se vea la foto */
    /* Si aún lo quieres más claro, baja el 0.7 a 0.5 */
    background: rgba(15, 23, 42, 0.7) !important; 
    
    z-index: 1;
}

.stats-container { position: relative; z-index: 2; }

/* 2. GRID */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 25px;
}

/* 3. TARJETAS (ESTRUCTURA BASE) */
.stat-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    min-height: auto !important; 
    height: auto !important; 
    
    /* Centrado */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    gap: 15px; 
    
    /* Estado Inicial */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    border-bottom: 4px solid transparent; /* La línea de base */
    border: 1px solid transparent; /* Borde invisible inicial para el hover */
    
    /* Transición suave premium */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0) scale(1);
}

/* 4. ELEMENTOS INTERNOS */
.stat-icon-wrapper {
    font-size: 2.2rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: transform 0.3s ease;
}
.stat-card:hover .stat-icon-wrapper { transform: scale(1.15); }

.stat-info {
    display: flex; align-items: baseline; justify-content: center; margin: 0 !important;
}

.stat-number {
    font-size: 3rem !important;
    font-weight: 800;
    color: #1e293b !important;
    line-height: 1 !important;
    font-family: 'Poppins', sans-serif;
    margin: 0 !important;
}

.stat-symbol {
    font-size: 1.8rem !important;
    font-weight: 700;
    color: #94a3b8 !important;
    margin-left: 5px;
}

.stat-label {
    font-size: 0.85rem !important;
    color: #64748b !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    margin: 0 !important;
}

/* =================================================================
   🎨 COLORES DE MARCA + EFECTO HOVER PREMIUM (LA MAGIA)
   ================================================================= */

/* --- CIAN (Azul Claro) --- */
.stat-card.color-cyan {
    border-bottom-color: #00aeef; /* Línea base */
}
.stat-card.color-cyan .stat-icon-wrapper { color: #00aeef; }
/* HOVER CIAN */
.stat-card.color-cyan:hover {
    transform: translateY(-12px) scale(1.03); /* Levanta y crece */
    /* Borde sutil del color */
    border-color: rgba(0, 174, 239, 0.5) !important; 
    /* Sombra brillante del color (Glow) */
    box-shadow: 0 20px 50px rgba(0, 174, 239, 0.25) !important;
}


/* --- MAGENTA (Rosado) --- */
.stat-card.color-magenta {
    border-bottom-color: #ec008c;
}
.stat-card.color-magenta .stat-icon-wrapper { color: #ec008c; }
/* HOVER MAGENTA */
.stat-card.color-magenta:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: rgba(236, 0, 140, 0.5) !important;
    box-shadow: 0 20px 50px rgba(236, 0, 140, 0.25) !important;
}


/* --- GREEN (Verde) --- */
.stat-card.color-green {
    border-bottom-color: #8dc63f;
}
.stat-card.color-green .stat-icon-wrapper { color: #8dc63f; }
/* HOVER VERDE */
.stat-card.color-green:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: rgba(141, 198, 63, 0.5) !important;
    box-shadow: 0 20px 50px rgba(141, 198, 63, 0.25) !important;
}


/* --- YELLOW (Amarillo) --- */
.stat-card.color-yellow {
    border-bottom-color: #ffd100;
}
.stat-card.color-yellow .stat-icon-wrapper { color: #ffd100; }
/* HOVER AMARILLO */
.stat-card.color-yellow:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: rgba(255, 209, 0, 0.5) !important;
    box-shadow: 0 20px 50px rgba(255, 209, 0, 0.25) !important;
}

/* MÓVIL */
@media (max-width: 768px) {
    .stats-parallax { padding: 40px 0 !important; }
}













/* =================================================================
   💎 MODAL DE EQUIPO: VERSIÓN "BOLD" (LLENA Y VISIBLE)
   ================================================================= */

/* 1. FONDO OSCURO */
.team-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.9); /* Más oscuro para resaltar la tarjeta */
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: all 0.3s ease;
}

.team-modal-overlay.active { display: flex; opacity: 1; }

/* 2. CAJA DE LA TARJETA (TAMAÑO PERFECTO) */
.team-modal-box.premium-card-layout {
    background: #fff;
    width: 100%;
    max-width: 500px; /* Ancho controlado */
    border-radius: 30px; /* Curvas más pronunciadas */
    box-shadow: 0 40px 80px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.team-modal-overlay.active .team-modal-box {
    transform: translateY(0) scale(1);
}


/* Icono de fondo decorativo */
.bg-deco-icon {
    position: absolute;
    top: -10px; left: -20px;
    font-size: 12rem; /* Gigante */
    color: rgba(255,255,255,0.15);
    transform: rotate(-15deg);
    pointer-events: none;
}

/* CABECERA CON TEXTURA PREMIUM */
.modal-header-brand {
    height: 150px;
    /* Degradado + Patrón de puntos sutil */
    background: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 20%),
        linear-gradient(135deg, #00aeef 0%, #ec008c 100%);
    position: relative;
    overflow: hidden;
}

/* BOTÓN CERRAR (Efecto Cristal) */
.close-modal-btn-premium {
    position: absolute;
    top: 20px; right: 20px;
    background: rgba(255, 255, 255, 0.2); /* Transparente */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borde fino */
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    color: #fff;
    z-index: 10;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(4px); /* Difuminado detrás */
    transition: all 0.3s ease;
}

.close-modal-btn-premium:hover { 
    background: #fff; 
    color: #ec008c; 
    transform: rotate(90deg); 
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* 4. CUERPO DE LA TARJETA */
.modal-body-content {
    padding: 0 35px 50px 35px; /* Más relleno abajo */
    text-align: center;
    position: relative;
}

/* FOTO DE PERFIL (AUMENTADA) */
.modal-photo-wrapper {
    position: relative;
    width: 180px;  /* ANTES: 160px -> AHORA: 180px */
    height: 180px;
    margin: -90px auto 30px auto; /* Sube más para centrarse en el corte */
    z-index: 5;
}

.premium-profile-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #fff; /* Borde más grueso */
    background: #fff;
    position: relative;
    z-index: 2;
}

.photo-glow-ring {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    box-shadow: 0 15px 40px rgba(236, 0, 140, 0.5); /* Glow más intenso */
    z-index: 1;
}

/* 5. TEXTOS (AUMENTADOS PARA LLENAR ESPACIO) */
.role-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #f0f9ff;
    color: #00aeef;
    padding: 8px 20px; /* Badge más grande */
    border-radius: 50px;
    font-size: 0.9rem; /* Letra más grande */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 174, 239, 0.15);
}

.role-badge-premium i { font-size: 1.1rem; }

.premium-name {
    font-size: 2.8rem; /* ANTES: 2.2rem -> AHORA: 2.8rem (Muy grande) */
    font-weight: 900;
    color: #1e293b;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
    line-height: 1.1;
}

/* Divisor */
.premium-divider {
    display: flex; align-items: center; justify-content: center;
    gap: 15px; margin-bottom: 25px; color: #cbd5e1;
}
.premium-divider .line { width: 80px; height: 3px; background: #e2e8f0; }


/* BIO ESTILO CITA */
.bio-container {
    position: relative; 
    padding: 0 25px;
    margin-top: 5px;
}

/* La comilla decorativa */
.bio-icon {
    font-size: 2rem; 
    color: #e2e8f0; /* Gris muy suave */
    position: absolute; 
    top: -15px; 
    left: 10px;
    opacity: 0.5;
}

#modalTeamBio {
    font-size: 1rem; 
    color: #55657e; /* Gris azulado elegante */
    line-height: 1.6; 
    font-weight: 400;
    font-style: italic; /* Cursiva para elegancia */
    margin-bottom: 35px;
}

/* REDES SOCIALES PREMIUM */
.modal-socials-premium {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    padding-bottom: 10px;
    
    /* ESTO ES IMPORTANTE PARA EL EFECTO: */
    /* Si paso el mouse por la CAJA, preparo la transición */
    transition: all 0.3s ease; 
}
/* =========================================
   ESTILOS PREMIUM PARA MODAL EQUIPO (CLASE SEGURA)
   ========================================= */

/* 1. ESTILO BASE DEL BOTÓN (Adaptado a .team-modal-icon) */
.team-modal-icon {
    width: 65px !important;
    height: 65px !important;
    min-width: 65px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
    color: #ffffff !important;
    font-size: 1.8rem !important;
    background-color: #ddd; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    border: none !important;
    cursor: pointer;
    
    /* Transición suave para todos los cambios */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. CUANDO EL MOUSE ENTRA EN EL CONTENEDOR GRAL... */
/* ...TODOS los botones se "apagan" un poco */
.modal-socials-premium:hover .team-modal-icon {
    opacity: 0.3;             /* Se vuelven transparentes */
    transform: scale(0.9);    /* Se achican un poco */
    filter: grayscale(0.6);   /* Pierden color */
}

/* 3. PERO EL BOTÓN QUE TIENE EL MOUSE ENCIMA... */
/* ...recupera su fuerza y destaca sobre los demás */
.modal-socials-premium .team-modal-icon:hover {
    opacity: 1 !important;          /* Opacidad total */
    transform: scale(1.15) translateY(-10px) !important; /* Crece y sube */
    filter: grayscale(0) !important; /* Color vibrante */
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important; /* Sombra fuerte */
    z-index: 10; /* Se pone por encima de todo */
}

/* --- COLORES FORZADOS (GRADIENTES) --- */
.sb-fb { background: linear-gradient(135deg, #1877f2 0%, #004ecc 100%) !important; }
.sb-li { background: linear-gradient(135deg, #0a66c2 0%, #004182 100%) !important; }
.sb-ig { background: linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%) !important; }
.sb-tw { background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%) !important; }

/* RESPONSIVE (MÓVIL) */
@media (max-width: 768px) {
    .team-modal-icon { 
        width: 50px !important; 
        height: 50px !important; 
        min-width: 50px !important;
        font-size: 1.5rem !important; 
    }
}





/* =========================================
   SECCIÓN PREMIUM: NOTICIAS Y AGENDA (FIX DE ALTURA)
   ========================================= */

.news-events-premium {
    padding: 80px 0;
    background-color: #f8fafc;
    position: relative;
}

/* --- HEADER --- */
.premium-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding: 0 10px;
    flex-wrap: wrap;
    gap: 20px;
}
.premium-section-head h2 {
    font-size: 2.8rem;
    color: #0F172A;
    margin: 0;
    line-height: 1;
    font-weight: 800;
}
.premium-subtitle {
    color: #ec008c;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 5px;
}
.btn-premium-outline {
    border: 2px solid #0F172A;
    color: #0F172A;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.btn-premium-outline:hover {
    background: #0F172A;
    color: white;
}

/* --- GRID DE ALINEACIÓN PERFECTA --- */
.ne-grid-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Izquierda un poco más ancha */
    gap: 30px;
    /* CLAVE: Esto obliga a que ambas columnas midan lo mismo */
    align-items: stretch; 
}

@media (max-width: 992px) {
    .ne-grid-layout { grid-template-columns: 1fr; }
}

/* --- COLUMNA 1: NOTICIA (IZQUIERDA) --- */
.featured-news-col {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
    /* Forzamos altura 100% para que llene la celda del grid */
    height: 100%; 
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card {
    flex: 1; /* Crece para ocupar todo el espacio */
    position: relative;
    display: block;
    text-decoration: none;
    height: 100%; /* Asegura altura total */
    overflow: hidden;
}



/* --- IMAGEN DE FONDO (Efecto Panorámico Vertical) --- */
.news-bg-img {
    width: 100%;
    /* Altura extra para tener espacio de movimiento */
    height: 120% !important; 
    object-fit: cover;
    position: absolute;
    /* Empezamos un poco arriba para poder bajar */
    top: -10% !important; 
    left: 0;
    
    /* Transición muy suave (3 segundos) */
    transition: transform 3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: transform;
    
    /* Estado inicial: Sin zoom o zoom leve */
    transform: scale(1) translateY(0);
}

/* --- EFECTO AL PASAR EL MOUSE (Hover) --- */
.news-card:hover .news-bg-img {
    /* 1. scale(1.05): Hace un zoom muy sutil (5%)
       2. translateY(20px): Mueve la imagen hacia abajo
    */
    transform: scale(1.05) translateY(30px) !important; 
}

.news-overlay-gradient {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.8) 50%, rgba(15, 23, 42, 0.1) 100%);
    z-index: 1;
}

.news-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 40px;
    z-index: 2;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Etiquetas y Textos */
.news-category-badge {
    align-self: flex-start;
    background: #ec008c;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* RESUMEN (El texto pequeño de arriba) */
.news-summary-top {
    font-size: 1.1rem;
    line-height: 1.5;
    /* Color blanco con un poquito de transparencia para jerarquía */
    color: rgba(255, 255, 255, 0.95); 
    margin-bottom: 10px;
    font-weight: 500;
    border-left: 4px solid #00aeef; /* Línea de acento Cyan */
    padding-left: 15px;
    
    /* Limita el texto a 2 o 3 líneas máximo */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-excerpt {
    /* Combo OBLIGATORIO para cortar texto con puntos suspensivos (...) */
    display: -webkit-box;            /* 1. Convierte la caja en modo flexible antiguo */
    -webkit-box-orient: vertical;    /* 2. Ordena el contenido verticalmente */
    -webkit-line-clamp: 3;           /* 3. Corta después de la línea 3 */
    overflow: hidden;                /* 4. Esconde el texto sobrante */
    
    /* Opcional: Asegura compatibilidad si el editor se queja mucho */
    line-clamp: 3;                   
}

/* TÍTULO GRANDE */
.news-title-large {
    font-size: 2.5rem; /* Tamaño grande y legible */
    font-weight: 800;
    line-height: 1.1;
    margin: 10px 0 20px 0;
    
    /* COLOR BLANCO PURO */
    color: #ffffff; 
    
    /* Sombra suave para que se lea aunque la foto sea clara */
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-excerpt {
    /* Combo OBLIGATORIO para cortar texto con puntos suspensivos (...) */
    display: -webkit-box;            /* 1. Convierte la caja en modo flexible antiguo */
    -webkit-box-orient: vertical;    /* 2. Ordena el contenido verticalmente */
    -webkit-line-clamp: 3;           /* 3. Corta después de la línea 3 */
    overflow: hidden;                /* 4. Esconde el texto sobrante */
    
    /* Opcional: Asegura compatibilidad si el editor se queja mucho */
    line-clamp: 3;                   
}

.news-footer-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 15px;
    font-weight: 600;
}
.news-footer-meta i { margin-right: 8px; color: #00aeef; }


/* --- COLUMNA 2: EVENTOS (DERECHA) --- */
.events-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye espacio si sobra */
}

.events-header-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}
.events-header-title i { color: #f59e0b; font-size: 1.2rem; }

.events-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre tarjetas de eventos */
    height: 100%;
}

.event-card-premium {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}
.event-card-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(0,0,0,0.1);
    border-color: #00aeef;
}

/* Fecha Cuadrada Grande */
.event-date-box {
    background: #f1f5f9;
    min-width: 80px; /* Más grande para que destaque */
    height: 80px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.date-month { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; color: #00aeef; margin-bottom: 4px; }
.date-number { font-size: 2rem; font-weight: 900; color: #0F172A; }

.event-info-box h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.3;
    text-transform: uppercase;
}
.event-meta-row {
    font-size: 0.85rem;
    color: #64748b;
    display: flex; flex-wrap: wrap; gap: 15px;
}
.event-meta-row span { display: flex; align-items: center; gap: 6px; }
.event-meta-row i { color: #ec008c; }







/* =========================================
   SECCIÓN ALIADOS: EFECTO "POP-OUT" 3D
   ========================================= */

.sponsors-strip {
    /* 1. EL DEGRADADO MEJORADO */
    /* Empieza en un Gris Acero (#e2e8f0) y baja hasta TU COLOR (#F4F6F9) */
    background: linear-gradient(to bottom, #e2e8f0 0%, #F4F6F9 100%);
    
    /* 2. ESPACIADO (Truco para el Footer) */
    padding: 100px 0 200px 0 !important; 
    
    position: relative;
    text-align: center;
    
    /* 3. BORDES */
    /* Cambiamos el borde superior a un color un poco más oscuro para que combine */
    border-top: 1px solid #cbd5e1; 
    border-bottom: none; 
    
    /* 4. CAPAS */
    z-index: 1; 
}
.sponsors-strip::before {
    content: 'NUESTROS ALIADOS ESTRATÉGICOS';
    display: block;
    color: #94a3b8; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 4px;
    margin-bottom: 70px;
    text-transform: uppercase;
}

.logo-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    gap: 60px 100px; 
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ESTILOS DE LA IMAGEN --- */
.logo-flex img {
    /* 1. TAMAÑO GIGANTE BASE */
    height: 130px !important;  
    width: auto !important;    
    
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6; 
    
    /* 2. PREPARACIÓN PARA EL EFECTO 3D */
    position: relative; /* OBLIGATORIO para que z-index funcione */
    z-index: 1;         /* Nivel base */
    
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 10px;

    /* 3. TRANSICIÓN ELÁSTICA (Efecto rebote premium) */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- EFECTO AL PASAR EL MOUSE (LA MAGIA) --- */
.logo-flex img:hover {
    /* Recupera color */
    filter: grayscale(0%); 
    opacity: 1; 
    
    /* 1. AGRANDAR MUCHO (1.3 = 30% más grande) */
    transform: scale(1.3); 
    
    /* 2. SOBRESALIR (Traer al frente) */
    z-index: 100; 
    
    /* 3. SOMBRA FLOTANTE (Para que parezca que se despega de la pantalla) */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
    
    /* Opcional: Si quieres que rote un poquito para dar dinamismo */
    /* transform: scale(1.3) rotate(2deg); */
}

/* RESPONSIVE (Móvil) */
@media (max-width: 992px) {
    .logo-flex { gap: 40px; }
    
    .logo-flex img {
        height: 70px !important; 
        transition: all 0.3s ease; /* Sin rebote en móvil para ser más rápido */
    }
    
    .logo-flex img:hover {
        transform: scale(1.1); /* En móvil crece menos */
        z-index: 50;
    }
}