html {
    scroll-behavior: smooth;
}
/* =========================================
   1. VARIABLES Y BASE (COLORES LOGO)
   ========================================= */
:root {
    --brand-blue: #4aa6d6; --brand-magenta: #c02685;
    --brand-green: #9bc53d; --brand-yellow: #f0c345;
    
    --primary: var(--brand-blue); --primary-dark: #2a7da3;
    --accent: var(--brand-magenta); --secondary: var(--brand-yellow);
    
    --text-main: #333; --text-light: #666; --bg-light: #f4f6f9; --white: #fff;
    --radius: 12px; --shadow: 0 8px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: var(--bg-light); color: var(--text-main); margin: 0; line-height: 1.6; }
a { text-decoration: none; } img { max-width: 100%; display: block; }






/* =========================================
   HERO PREMIUM: PANORÁMICA MOVIL + BOKEH SUAVE
   ========================================= */

/* 1. CONTENEDOR PRINCIPAL */
.search-hero {
    position: relative;
    min-height: 500px;
    padding: 150px 20px 180px 20px;
    overflow: hidden;
    background-color: #021a30;
    /* Sombra interna para profundidad */
    box-shadow: inset 0 -80px 120px rgba(2, 26, 48, 0.9);
}

/* 2. CAPA DE IMAGEN (MOVIMIENTO PANORÁMICO TOTAL) */
.search-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    

    background-image: url('../img/Carreras.png');
    background-repeat: no-repeat;

    /* TAMAÑO: Cover asegura que cubra todo el alto */
    background-size: cover; 
    
    /* POSICIÓN INICIAL */
    background-position: 0% center;

    /* ANIMACIÓN: Funciona en PC y ahora también en MÓVIL */
    animation: panoramicFull 60s ease-in-out infinite alternate;
    will-change: background-position;
}

@keyframes panoramicFull {
    0% {
        background-position: 0% center; /* Izquierda */
    }
    100% {
        background-position: 100% center; /* Derecha */
    }
}

/* 3. DEGRADADO (LUZ EQUILIBRADA) */
.search-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    
    background: linear-gradient(
        to bottom, 
        rgba(2, 26, 48, 0.0) 0%,    /* Un poco oscuro para menú */
        rgba(2, 26, 48, 0.0) 35%,   /* Transparente en el medio */
        rgba(2, 26, 48, 0.1) 60%,   
        rgba(2, 26, 48, 0.9) 100%   /* Oscuro para buscador */
    );
}

/* 4. PARTÍCULAS BOKEH INFINITAS (BRILLO REDUCIDO) */
.hero-particles, 

.hero-particles::after {
    content: '';
    position: absolute;
    top: 0; left: 0; 
    width: 100%; 
    height: 200%; /* Doble altura para loop infinito */
    z-index: 2; 
    pointer-events: none;
}

/* Capa 1: Polvo fino (Muy sutil) */
.hero-particles {
    background-image: 
        /* AJUSTE: Opacidad bajada a 0.2 y 0.1 (Antes 0.4) */
        radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 60px 60px, 100px 100px;
    background-position: 0 0, 20px 40px;
    
    animation: floatInfinite 30s linear infinite;
}

.hero-particles::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    background-image: 
        radial-gradient(circle, rgba(255,255,255,0.08) 2px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.03) 1.5px, transparent 1.5px);
        
    background-size: 120px 120px, 180px 180px;
    background-position: 50px 20px, 10px 80px;
    
    animation: floatInfinite 45s linear infinite;
}

/* ANIMACIÓN LOOP */
@keyframes floatInfinite {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* Mueve solo la mitad */
}

/* --- AJUSTES MÓVIL --- */
@media (max-width: 768px) {
    .search-hero { 
        min-height: 450px; 
        padding: 100px 20px; 
    }
    
    /* YA NO DESACTIVAMOS LA ANIMACIÓN AQUÍ */
    /* La imagen se moverá de lado a lado también en el celular */
    
    /* Opcional: Si en móvil sientes que va muy rápido, puedes aumentar el tiempo aquí: */
     .search-hero::before { animation-duration: 240s; }
}




















/* =========================================
   ESTILOS DEL BUSCADOR PROFESIONAL (NUEVO)
   ========================================= */

/* 1. Contenedor Principal (Tarjeta Flotante) */
.search-box {
    background: var(--white);
    padding: 40px; /* Más espacio interno */
    border-radius: 20px; /* Bordes más suaves */
    max-width: 950px;
    margin: -80px auto 50px; /* Sube un poco más sobre la foto */
    
    /* Sombra difusa moderna */
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); 
    
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 25px;
    border: 1px solid rgba(255,255,255,0.8); /* Borde sutil */
}

/* 2. Fila Superior (Buscador + Ordenar) */
.search-header-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Contenedor del Input con Icono */
.search-input-wrapper {
    flex: 2; /* Ocupa más espacio que el selector */
}

.search-row-input {
    position: relative; /* Para posicionar el ícono dentro */
    width: 100%;
}

.search-row-input i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-blue);
    font-size: 1.2rem;
    pointer-events: none;
}

.main-search-input {
    width: 100%;
    padding: 18px 20px 18px 55px; /* Espacio a la izq para el ícono */
    border: 2px solid transparent; /* Borde invisible inicial */
    background-color: #f4f6f9; /* Gris muy suave */
    border-radius: 12px;
    font-size: 1.05rem;
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}

.main-search-input:focus {
    background-color: #fff;
    border-color: var(--brand-blue);
    box-shadow: 0 4px 15px rgba(74, 166, 214, 0.15);
}

/* Selector de Ordenar (Sort) */
.sort-select-wrapper {
    flex: 1; /* Ocupa menos espacio */
}

.sort-select {
    width: 100%;
    padding: 18px 15px;
    border: 2px solid transparent;
    background-color: #f4f6f9;
    border-radius: 12px;
    color: #555;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    transition: 0.3s;
}
.sort-select:focus {
    background-color: #fff;
    border-color: var(--brand-blue);
}

/* 3. Filtros de Categoría (Estilo "Chips" o Botones) */
.search-row-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* Ocultamos el puntito del radio button original */
.radio-label input[type="radio"] {
    display: none;
}

/* Estilo del botón (span) */
.radio-label span {
    display: inline-block;
    padding: 8px 20px;
    background-color: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 50px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-label span:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
    transform: translateY(-2px);
}

/* Estado SELECCIONADO (Cuando el radio está activo) */
.radio-label input[type="radio"]:checked + span {
    background-color: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
    box-shadow: 0 4px 10px rgba(74, 166, 214, 0.3);
}

/* 4. Fila de Acción (Select Dinámico + Botón Ir) */
.search-row-action {
    display: flex;
    gap: 15px;
    align-items: center;
}

.dynamic-select {
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    color: #444;
}

.btn-accent {
    background-color: var(--brand-magenta);
    color: white;
    padding: 15px 35px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap; /* Evita que el texto baje de línea */
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-accent:hover {
    background-color: #a01d6d;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(192, 38, 133, 0.3);
}

/* --- RESPONSIVE DEL BUSCADOR --- */
@media (max-width: 768px) {
    .search-box {
        padding: 25px;
        margin-top: -40px;
    }
    
    .search-header-row, 
    .search-row-action {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sort-select-wrapper { margin-top: 10px; }
    
    .btn-accent {
        width: 100%;
        max-width: 100%;
        
    }
    .dynamic-select{
        width: 100%;
        max-width: 100%;       
    }
    
    .radio-label span {
        width: 100%;
        text-align: center;
    }
}




/* Grid Tarjetas */
.programs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto 50px; padding: 0 20px; }
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; display: flex; flex-direction: column; color: inherit; border: 1px solid rgba(0,0,0,0.05); }
.card:hover { transform: translateY(-5px); border-color: var(--brand-blue); }
.card-img { height: 180px; background-size: cover; background-position: center; position: relative; }
.card-badge { position: absolute; top: 15px; left: 15px; background: var(--brand-magenta); color: var(--white); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; }





/* =========================================
   ICONO FLOTANTE DE FACULTAD (En Tarjeta)
   ========================================= */

.faculty-float-icon {
    position: absolute;
    top: 15px;
    right: 15px; /* Esquina superior derecha */
    z-index: 3;
    
    width: 38px;
    height: 38px;
    
    background: rgba(255, 255, 255, 0.95); /* Blanco casi puro */
    border-radius: 50%; /* Círculo perfecto */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: var(--brand-blue); /* Icono azul corporativo */
    font-size: 1.1rem;
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra suave */
    transition: transform 0.3s ease, background-color 0.3s;
}

/* Efecto al pasar el mouse por la tarjeta entera */
.card:hover .faculty-float-icon {
    transform: scale(1.1) rotate(10deg); /* Pequeño movimiento dinámico */
    background-color: var(--brand-blue);
    color: white; /* Se invierte el color */
}














.card-badge.diplomado {
    background-color: #70b62c !important; /* color del texto de la tarjeta profesional */
}

.card-badge.curso {
    background-color: #00a5ca !important; /* color del texto de la tarjeta mastria */
}



























.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.card-price { color: var(--brand-blue); font-weight: bold; font-size: 1.1rem; margin-top: auto; display: flex; align-items: center; gap: 5px; }

/* =========================================
   4. DETALLE CURSO (ESTILO UNIVERSIDAD)
   ========================================= */
.hero-header { position: relative; background-color: var(--brand-blue); background-image: var(--hero-bg-image); background-size: cover; background-position: center; padding: 100px 0 120px; overflow: hidden; }
.hero-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(74,166,214,0.94), rgba(192,38,133,0.88)); z-index: 1; backdrop-filter: blur(2px); }
.hero-content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.hero-grid {
    display: grid;
    /* Texto (1 parte) vs Imagen (1.3 partes) -> Imagen más ancha */
    grid-template-columns: 1fr 1.3fr; 
    gap: 50px; /* Reducimos un poco el hueco */
    align-items: center;
}
.hero-text-column { z-index: 2; color: white; }
.hero-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin-bottom: 25px; text-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.badge-category { background: rgba(255,255,255,0.2); padding: 8px 18px; border-radius: 50px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.3); color: white; margin-bottom: 20px; display: inline-block; }

.hero-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 30px; }
.btn-hero-primary { background: var(--brand-yellow); color: #333; padding: 15px 35px; border-radius: 8px; font-weight: 800; border: none; cursor: pointer; transition: 0.3s; }
.btn-hero-primary:hover { transform: translateY(-3px); background: #ffdb6e; }
.btn-hero-secondary { background: rgba(255,255,255,0.15); color: white; padding: 15px 35px; border-radius: 8px; font-weight: 600; border: 2px solid rgba(255,255,255,0.5); transition: 0.3s; }
.btn-hero-secondary:hover { background: rgba(255,255,255,0.3); border-color: white; }

.hero-media-column { position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.5); border: 3px solid rgba(255,255,255,0.3); background: #000; }
.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; }
.video-responsive iframe, .video-responsive img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.info-bar { background: #222; color: white; padding: 25px 0; margin-bottom: 60px; border-bottom: 4px solid var(--brand-green); }
.info-bar-grid { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
.info-item-box { border-left: 3px solid var(--brand-green); padding-left: 15px; }
.info-item-box span { display: block; font-size: 0.8rem; opacity: 0.7; text-transform: uppercase; }
.info-item-box strong { font-size: 1.1rem; }

.main-wrapper { max-width: 1400px; margin: 0 auto 80px; padding: 0 40px; display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }
.content-section { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 30px; }
.content-section h2 { color: var(--brand-blue); border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; margin-top: 0; }
.sidebar-card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); position: sticky; top: 100px; border-top: 5px solid var(--brand-magenta); }
.price-tag { font-size: 2.5rem; font-weight: 800; color: #333; display: block; margin: 15px 0; }







/* =========================================
   MEJORAS DETALLE PROGRAMA
   ========================================= */

/* Iconos en títulos de contenido */
.icon-title {
    color: var(--brand-magenta);
    margin-right: 10px;
}

.text-justify {
    text-align: justify;
    line-height: 1.8;
    color: #555;
}

/* Sidebar Wrapper (Para asegurar el sticky) */
.sidebar-wrapper {
    position: sticky;
    top: 110px; /* Ajustado para que no choque con el header */
}

/* Botón Secundario Outline (Sidebar) */
.btn-secondary-outline {
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
    text-decoration: none;
    margin-top: 10px;
}
.btn-secondary-outline:hover {
    background: var(--brand-blue);
    color: white;
}

/* Widget de Ayuda Sidebar */
.sidebar-help {
    margin-top: 20px;
    background: #eef2f7;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px dashed #ccc;
}
.sidebar-help h4 { margin: 0 0 5px 0; color: #333; }
.sidebar-help p { margin: 0; font-size: 0.9rem; color: #666; }


/* SECCIÓN RELACIONADOS */
.related-programs {
    padding: 60px 0;
    background-color: #f0f4f8; /* Gris azulado suave */
    border-top: 1px solid #e0e0e0;
}

.related-title {
    text-align: center;
    font-size: 2rem;
    color: var(--brand-blue);
    margin-bottom: 40px;
    font-weight: 700;
}


/* BOTÓN FLOTANTE MÓVIL (WhatsApp) */
.mobile-float-cta {
    display: none; /* Oculto en PC */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366; /* Color WhatsApp */
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    text-decoration: none;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s;
}

.mobile-float-cta:hover {
    transform: scale(1.05);
    color: white;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    /* En tablets y móviles, la barra lateral deja de ser sticky */
    .sidebar-wrapper {
        position: static;
        margin-top: 40px;
    }
    
    /* Mostrar botón flotante */
    .mobile-float-cta {
        display: flex;
    }
    
    /* Ocultar botón "Volver arriba" si choca con el de WhatsApp, o moverlo */
    #backToTop {
        bottom: 80px; /* Lo subimos para que no tape el botón de matrícula */
    }
}

/* =========================================
   5. PANEL DE ADMINISTRADOR (DISEÑO PRO)
   ========================================= */

/* Fondo general más gris para resaltar las tarjetas blancas */
body.admin-body { 
    background-color: #f0f2f5; 
    min-height: 100vh;
}

/* --- NAVBAR ADMIN --- */
.admin-navbar {
    background: linear-gradient(90deg, var(--brand-blue) 0%, #2a7da3 100%);
    color: white; 
    padding: 0 40px; 
    height: 70px;
    display: flex; align-items: center; justify-content: space-between; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.admin-brand { 
    font-size: 1.3rem; font-weight: 700; color: white; 
    display: flex; align-items: center; gap: 12px;
}
.admin-brand i { font-size: 1.1rem; opacity: 0.8; }

.admin-user-info { 
    display: flex; gap: 20px; align-items: center; 
    background: rgba(255,255,255,0.1); padding: 5px 20px; border-radius: 50px;
}
.btn-logout { 
    color: white; font-weight: 600; font-size: 0.9rem; transition: 0.3s; 
}
.btn-logout:hover { color: var(--brand-yellow); }


/* --- CONTENEDOR Y TARJETAS --- */
.admin-wrapper { 
    max-width: 1300px; margin: 40px auto; padding: 0 20px; 
}

.admin-card { 
    background: white; border-radius: 12px; padding: 35px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 30px; 
    border: 1px solid rgba(0,0,0,0.02);
}

/* Cabecera de la Tarjeta (Título + Botón) */
.admin-header-row { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 30px; padding-bottom: 20px; 
    border-bottom: 2px solid #f4f6f9;
}
.admin-header-row h1, .admin-header-row h2 { 
    margin: 0; color: var(--brand-blue); font-size: 1.8rem;
}


/* --- TABLAS DE DATOS (ESTILO MODERNO) --- */
.table-responsive { overflow-x: auto; border-radius: 12px; }

.admin-table { 
    width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; 
}

.admin-table th { 
    text-align: left; padding: 18px 20px; 
    background: #f8f9fa; color: #555; 
    font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 2px solid #e9ecef;
}

.admin-table td { 
    padding: 18px 20px; vertical-align: middle; 
    border-bottom: 1px solid #f0f0f0; color: #444; font-size: 0.95rem;
    background: white; transition: 0.2s;
}

/* Efecto Hover en Filas */
.admin-table tr:hover td { background-color: #fcfcfc; }

/* Bordes redondeados en la tabla */
.admin-table tr:last-child td { border-bottom: none; }
.admin-table th:first-child { border-top-left-radius: 12px; }
.admin-table th:last-child { border-top-right-radius: 12px; }
.admin-table tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.admin-table tr:last-child td:last-child { border-bottom-right-radius: 12px; }

.table-thumb { 
    width: 60px; height: 60px; border-radius: 8px; 
    object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}


/* --- BOTONES Y ACCIONES --- */
.btn { 
    padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; 
    border: none; display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; 
    font-size: 0.95rem;
}

/* Botón Nuevo Curso (Verde Corporativo) */
.btn-success { 
    background: var(--brand-green); color: white; box-shadow: 0 4px 10px rgba(155, 197, 61, 0.3);
}
.btn-success:hover { background: #8ab332; transform: translateY(-2px); }

/* Botones de Tabla (Iconos) */
.actions-cell { display: flex; gap: 10px; }

.btn-icon {
    width: 38px; height: 38px; border-radius: 8px; 
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; transition: 0.2s;
}

.btn-edit { background: rgba(74, 166, 214, 0.1); color: var(--brand-blue); }
.btn-edit:hover { background: var(--brand-blue); color: white; }

.btn-delete { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.btn-delete:hover { background: #dc3545; color: white; }


/* --- FORMULARIOS (CREAR/EDITAR) --- */
.form-label { 
    display: block; margin-bottom: 8px; font-weight: 600; color: #444; font-size: 0.9rem; 
}

.form-control { 
    width: 100%; padding: 12px 15px; 
    border: 1px solid #dee2e6; border-radius: 8px; 
    font-size: 1rem; color: #333; background: #fff;
    transition: 0.3s;
}

.form-control:focus { 
    border-color: var(--brand-blue); 
    box-shadow: 0 0 0 3px rgba(74, 166, 214, 0.15); outline: none; 
}

/* Textarea alto */
textarea.form-control { min-height: 120px; resize: vertical; }

/* Grids de Formulario */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px; }
.form-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; text-align: right; }

/* Botón Guardar */
.btn-primary { background: var(--brand-blue); color: white; }
.btn-primary:hover { background: #2a7da3; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 166, 214, 0.3); }


/* --- TARJETAS DE ESTADÍSTICAS (DASHBOARD) --- */
.stats-grid { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; margin-bottom: 40px; 
}
.stat-card {
    background: white; padding: 25px; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 20px;
    border-left: 5px solid var(--brand-blue);
}
.stat-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(74, 166, 214, 0.1); color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.stat-info h3 { margin: 0; font-size: 2rem; font-weight: 800; color: #333; }
.stat-info p { margin: 0; color: #555555; font-size: 0.9rem; text-transform: uppercase; font-weight: 600; }

/* =========================================
   6. RESPONSIVE (AQUÍ ESTÁ LA MAGIA)
   ========================================= */

/* Tablets (menos de 992px) */
@media (max-width: 992px) {
    .hero-grid, .main-wrapper { grid-template-columns: 1fr; }
    .hero-media-column { order: 2; margin-top: 20px; }
    .sidebar-card { position: static; margin-top: 30px; }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block !important; /* Forzamos que aparezca */
        font-size: 1.8rem;         /* Tamaño grande */
        color: #021a30;            /* Color AZUL OSCURO (Importante para que se vea) */
        
        /* Posicionamiento absoluto para que no lo empujen otros elementos */
        position: absolute; 
        right: 20px;               /* Pegado a la derecha */
        top: 50%;                  /* Centrado verticalmente */
        transform: translateY(-50%);
        z-index: 10002;            /* Por encima de todo */
    }

    /* Aseguramos que el logo no se monte encima */
    .brand-logo img {
        max-width: 140px; /* Ajusta si el logo es muy grande en móvil */
    }
    
    /* Aseguramos que el contenedor del header tenga posición relativa */
    .container-flex.nav-height {
        position: relative; 
    }
}

/* Móviles Pequeños */
@media (max-width: 480px) {
    .info-bar-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 1.8rem; }
}



/* =========================================
   7. ESTILOS DEL FORMULARIO (MODERNO)
   ========================================= */

/* Títulos de secciones dentro del formulario */
.form-section-title {
    font-size: 0.9rem;
    color: var(--brand-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}

/* Etiquetas de los campos */
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

/* Inputs mejorados */
.form-control {
    background-color: #fcfcfc;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    color: #333;
}

.form-control:focus {
    background-color: #fff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(74, 166, 214, 0.1); /* Resplandor azul suave */
    outline: none;
}

/* Inputs de Archivo (Upload) */
input[type="file"] {
    background: white;
    padding: 10px;
}

/* Contenedor Multimedia */
.upload-box {
    background-color: #f8fbff; /* Azul muy pálido */
    border: 2px dashed #cce0ff;
    border-radius: 12px;
    padding: 25px;
    margin-top: 20px;
}

/* Vista previa de imagen actual */
.current-img-preview {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-top: 10px;
}

/* Botones del formulario */
.form-footer {
    background: #f8f9fa;
    margin: 30px -35px -35px -35px; /* Hack para pegarse a los bordes de la tarjeta */
    padding: 20px 35px;
    border-radius: 0 0 12px 12px;
    text-align: right;
    border-top: 1px solid #eee;
}

.btn-save {
    background: var(--brand-green);
    color: white;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(155, 197, 61, 0.3);
    transition: 0.3s;
}
.btn-save:hover { background: #8ab332; transform: translateY(-2px); }

.btn-cancel {
    color: #666;
    margin-right: 20px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.3s;
}
.btn-cancel:hover { color: #333; text-decoration: underline; }

/* Grid Responsive mejorado */
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

@media (max-width: 768px) {
    .form-grid-3 { grid-template-columns: 1fr; }
    .form-footer { margin: 20px -15px -15px -15px; padding: 20px; text-align: center; }
    .btn-save, .btn-cancel { width: 100%; display: block; margin: 0 0 15px 0; }
}

/* =========================================
   8. BLOQUES DE COLOR PARA EL FORMULARIO
   ========================================= */

/* Estilo base del bloque */
.form-section-block {
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid rgba(0,0,0,0.05); /* Borde sutil */
    transition: transform 0.2s;
}

.form-section-block:hover {
    transform: translateY(-2px); /* Pequeño efecto al pasar el mouse */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 1. Bloque AZUL (Información Básica) */
.bg-basic { 
    background-color: #f0f8ff; /* Azul muy pálido */
    border-left: 5px solid var(--brand-blue); 
}
.bg-basic .form-section-title { color: var(--brand-blue); border-bottom-color: rgba(74, 166, 214, 0.2); }

/* 2. Bloque MAGENTA (Detalles Técnicos) */
.bg-tech { 
    background-color: #fff0f6; /* Rosa muy pálido */
    border-left: 5px solid var(--brand-magenta); 
}
.bg-tech .form-section-title { color: var(--brand-magenta); border-bottom-color: rgba(192, 38, 133, 0.2); }

/* 3. Bloque VERDE (Contenido) */
.bg-content { 
    background-color: #f7fce8; /* Verde muy pálido */
    border-left: 5px solid var(--brand-green); 
}
.bg-content .form-section-title { color: #7da12d; border-bottom-color: rgba(155, 197, 61, 0.2); }

/* 4. Bloque AMARILLO (Multimedia) */
.bg-media { 
    background-color: #fff9e6; /* Amarillo muy pálido */
    border-left: 5px solid var(--brand-yellow); 
}
.bg-media .form-section-title { color: #d4a017; border-bottom-color: rgba(240, 195, 69, 0.2); }

/* Ajuste para que los inputs se vean bien sobre fondo de color */
.form-section-block .form-control {
    background-color: #ffffff; /* Inputs siempre blancos para contraste */
}

/* =========================================
   9. MEJORAS NAVBAR (PERFIL Y ROL)
   ========================================= */

/* Ajustamos el contenedor principal */
.admin-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.1); /* Fondo translúcido */
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Bloque de Texto (Nombre y Rol) */
.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alineado a la derecha */
    line-height: 1.2;
}

.user-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: white;
}

.user-role-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0,0,0,0.2);
    color: #ffeb3b; /* Amarillo brillante */
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 2px;
}

/* Contenedor de Botones */
.user-actions {
    display: flex;
    gap: 8px;
    border-left: 1px solid rgba(255,255,255,0.3); /* Línea divisoria vertical */
    padding-left: 15px;
}

/* Botones Circulares */
.btn-nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s all ease;
    font-size: 1rem;
}

/* Botón Perfil (Azul claro al pasar mouse) */
.btn-profile {
    background: rgba(255,255,255,0.2);
    color: white;
}
.btn-profile:hover {
    background: white;
    color: var(--brand-blue);
    transform: translateY(-2px);
}

/* Botón Salir (Rojo al pasar mouse) */
.btn-logout-icon {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}
.btn-logout-icon:hover {
    background: #ff4d4d;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 77, 77, 0.4);
}

/* =========================================
   10. CORRECCIÓN DE ALINEACIÓN (SOLUCIÓN FINAL)
   ========================================= */

/* 1. Configuración de la celda de la tabla (ESTÁNDAR) */
.admin-table td {
    vertical-align: middle !important; /* Alinea el contenido al centro verticalmente */
    padding: 12px 15px;
    white-space: nowrap; /* Evita que el precio o texto se parta en dos líneas */
}

/* 2. Configuración de la CAJITA de botones (FLEXBOX AQUÍ) */
.actions-group {
    display: flex;           
    align-items: center;     /* Centra los iconos verticalmente */
    justify-content: flex-start; /* Alinea a la izquierda */
    gap: 10px;               /* Espacio entre botones */
}

/* Ajuste para que la imagen no rompa la alineación */
.table-thumb {
    object-fit: cover;
    border-radius: 6px;
    display: block;
    vertical-align: middle;
}

/* =========================================
   11. ESTILOS FALTANTES DEL INDEX (PAGINACIÓN Y UI)
   ========================================= */

/* Botón Secundario (Faltaba en tu CSS) 
   Usado en 'Limpiar filtro' y Paginación */
.btn-secondary {
    background-color: #e2e6ea;
    color: #555;
    border: 1px solid #dbe0e4;
    transition: 0.3s;
}

.btn-secondary:hover {
    background-color: #d3d7db;
    color: #333;
    border-color: #c6cace;
    transform: translateY(-2px);
}

/* Ajustes Responsive específicos para el Buscador del Index 
   Esto arregla los estilos "inline" del PHP en móviles */
@media (max-width: 768px) {
    
    /* 1. Hacemos que el título y el buscador se apilen verticalmente */
    .admin-header-row {
        flex-direction: column;
        align-items: stretch !important; /* Forzar estiramiento */
        gap: 15px !important;
    }

    /* 2. Contenedor del Título y Botón Nuevo */
    .admin-header-row > div:first-child {
        justify-content: space-between;
        width: 100%;
    }

    /* 3. Forzamos al formulario de búsqueda a ocupar el 100% */
    .admin-header-row form {
        width: 100%;
        max-width: 100% !important; /* Pisa el estilo inline 'max-width: 400px' */
        margin-left: 0 !important;  /* Pisa el estilo inline 'margin-left: auto' */
    }

    /* 4. Que el input ocupe todo el espacio disponible */
    .admin-header-row form input {
        flex: 1;
        min-width: 0; /* Evita desbordamiento en pantallas muy pequeñas */
    }
}


/* =========================================
   ESTILOS GESTIÓN DE FACULTADES (ADMIN)
   ========================================= */

/* 1. Layout Principal (2 Columnas: Formulario izq, Tabla der) */
.admin-layout { 
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    gap: 30px; 
    align-items: start;
}

/* 2. Cabecera de página con botón de volver */
.page-header-flex {
    display: flex; 
    align-items: center; 
    gap: 15px;
}

.btn-back {
    background: #e9ecef; 
    color: #333;
    padding: 10px;
    border-radius: 50%;
    transition: 0.3s;
}
.btn-back:hover { background: #ced4da; color: #000; }

.page-title {
    margin: 0; 
    font-size: 1.8rem; 
    color: var(--primary);
}

/* 3. Estilos de Tarjeta Específicos */
.card-no-padding {
    padding: 0 !important; /* Quita el padding para que la tabla llegue al borde */
    overflow: hidden;
}

.card-title-bordered {
    margin-top: 0; 
    color: var(--brand-blue); 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 4. TABLA RESPONSIVE (SOLUCIÓN AL CORTE "MOCHO") */
.table-scroll-container {
    width: 100%;
    overflow-x: auto; /* Muestra scroll horizontal si es necesario */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
}

.admin-table {
    width: 100%;
    min-width: 700px; /* Fuerza el ancho mínimo para evitar que se apriete */
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table th, .admin-table td {
    padding: 15px 20px;
    vertical-align: middle;
    white-space: nowrap;
}

/* 5. Fila resaltada (Cuando estás editando) */
.row-highlight {
    background-color: #fff3cd !important; /* Amarillo suave */
}

/* 6. Utilidades de Botones y Alineación */
.col-actions {
    text-align: right;
    padding-right: 20px;
}

.actions-group {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.w-100 { width: 100%; } /* Botón ancho completo */
.btn-warning { background: #ffc107; color: #333; border:none; }
.btn-warning:hover { background: #e0a800; }

/* Responsive: En móviles, las columnas se vuelven una sola fila */
@media (max-width: 992px) {
    .admin-layout { grid-template-columns: 1fr; }
}


/* =========================================
   BOTÓN LIMPIAR FILTROS (MODERNO)
   ========================================= */
.btn-reset {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #666;
    padding: 0 25px;
    height: 45px; /* Misma altura que el select */
    border-radius: 50px; /* Bordes redondos estilo cápsula */
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    white-space: nowrap; /* Evita que el texto se parta */
}

.btn-reset:hover {
    background-color: #fff;
    color: var(--primary); /* O usa #d32f2f para rojo */
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.btn-reset i {
    transition: transform 0.5s ease;
    color: #999;
}

.btn-reset:hover i {
    color: var(--primary);
    transform: rotate(180deg); /* El icono gira al pasar el mouse */
}

/* Ajuste para que el select y el botón convivan bien */
.search-row-action {
    display: flex;
    gap: 15px; /* Espacio entre el menú y el botón */
    align-items: center;
}

.faculty-badge {
    margin-bottom: 4px !important; /* Antes tenía 12px, lo bajamos a 4px */
}

/* Color Negro Intenso para los Títulos */
.card-body h3 {
    color: #000000 !important; /* #000000 es negro puro */
    font-weight: 700;           /* Mantiene la letra gruesa */
    opacity: 1;                 /* Asegura que no tenga transparencia */
    margin-top: 0 !important;      /* Esto es clave: elimina el hueco superior */
    padding-top: 0 !important;
    line-height: 1.2;
}




/* =========================================
   NUEVA CABECERA (HEADER & NAVBAR)
   ========================================= */

/* Reset básico para asegurar que pegue a los bordes */
body { margin: 0; padding: 0; }
.site-header { width: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* --- 1. BARRA SUPERIOR (TOP BAR) --- */
.top-bar {
    background-color: #1f3c4d; /* Azul oscuro grisáceo */
    color: #ffffff;
    font-size: 0.85rem;
    padding: 10px 0;
}

/* --- CONTENEDOR FLUIDO (OCUPA TODO EL ANCHO) --- */
.container-flex {
    width: 100%;
    max-width: 1350px; /* Límite de ancho profesional */
    margin: 0 auto;    /* Centra todo el bloque en la pantalla */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.top-contact, .top-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-contact a, .top-links a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.top-contact a:hover, .top-links a:hover {
    color: #1abc9c; /* Color turquesa al pasar mouse */
}

.separator { opacity: 0.3; margin: 0 2px; }
.top-contact i { margin-right: 5px; color: #1abc9c; }



/* --- 2. BARRA PRINCIPAL (MAIN NAV) --- */
.main-navbar {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; /* Se queda pegada al subir */
    top: 0;
    z-index: 1000;
}

.nav-height {
    height: 90px; /* Altura de la barra blanca */
}

/* Logo */
.brand-logo img {
    height: 70px; /* Ajusta esto según el tamaño de tu imagen */
    width: auto;
}

/* --- MENÚ CENTRAL CON SEPARADORES COMPLETOS (FULL HEIGHT) --- */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%; /* CLAVE 1: El menú debe medir lo mismo que la barra */
}

.nav-menu li {
    position: relative;
    padding: 0 30px;      /* Espacio lateral */
    display: flex;        /* Usamos flex para centrar el texto dentro de la caja alta */
    align-items: center;  /* Centra el texto verticalmente */
    height: 100%;         /* CLAVE 2: Cada botón ocupa toda la altura vertical */
}

/* EL SEPARADOR (LÍNEA VERTICAL AL 80%) */
.nav-menu li::after {
    content: '';
    position: absolute;
    right: 0;
    
    /* TRUCO PARA CENTRAR VERTICALMENTE */
    top: 50%;                     /* Lo ubicamos a la mitad */
    transform: translateY(-50%);  /* Lo movemos hacia arriba para centrarlo exacto */
    
    /* DIMENSIONES */
    height: 70%;                  /* Ocupa solo el 70% de la barra blanca */
    width: 1px;                   /* Grosor fino */
    background-color: #e0e0e0;    /* Color gris */
}

/* Quitar la línea del último elemento */
.nav-menu li:last-child::after {
    display: none;
}

/* Estilos del enlace */
.nav-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.nav-menu li a:hover, 
.nav-menu li a.active {
    color: #1abc9c;
}

/* Ajuste para el dropdown */
.nav-menu li.dropdown i {
    font-size: 0.7rem;
    margin-left: 3px;
    vertical-align: middle;
    color: #999;
}

/* Botón Campus Virtual (Premium & Zoom) */
.btn-campus {
    /* 1. COLOR: Verde Corporativo con degradado (Más elegante que plano) */
    background: linear-gradient(135deg, #8dc63f 0%, #7ab32f 100%);
    color: white !important;
    
    /* 2. FORMA */
    padding: 12px 30px; /* Un poco más ancho para presencia */
    border-radius: 50px; /* Bordes redondos (Pill) son más modernos que 4px */
    
    /* 3. TIPOGRAFÍA */
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    
    /* 4. PREPARACIÓN ANIMACIÓN */
    display: inline-block; /* Necesario para que el scale funcione bien */
    /* Esta curva hace que el crecimiento sea suave y con rebote sutil */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Sombra Inicial */
    box-shadow: 0 5px 15px rgba(141, 198, 63, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* EFECTO AL PASAR EL MOUSE (HOVER) */
.btn-campus:hover {
    /* 1. SE PONE GRANDE (Zoom del 10%) y sube un poco */
    transform: scale(1.1) translateY(-2px);
    
    /* 2. LA SOMBRA CRECE (Efecto de elevación) */
    box-shadow: 0 15px 30px rgba(141, 198, 63, 0.5);
    
    /* 3. EL COLOR SE ENCIENDE UN POCO */
    background: linear-gradient(135deg, #9ad64a 0%, #8dc63f 100%);
}




/* RESPONSIVE (Para celulares) */
@media (max-width: 992px) {
    .top-bar { display: none; } /* Ocultamos barra superior en móviles */
    .nav-menu { display: none; } /* Aquí necesitarías un menú hamburguesa */
    .btn-campus { display: none; }
    .container-flex { justify-content: center; }
}



/* =========================================
   CABECERA INTELIGENTE (SCROLL UP/DOWN)
   ========================================= */

/* 1. Modificamos el contenedor principal */
.site-header { 
    width: 100%; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* CAMBIOS PARA EL EFECTO: */
    position: fixed; /* Se queda fija en la pantalla */
    top: 0;
    left: 0;
    z-index: 1000;
    transition: transform 0.3s ease-in-out; /* Animación suave */
}

/* 2. Clase que oculta la barra (se activa con JS) */
.header-hidden {
    transform: translateY(-100%); /* Mueve la barra hacia arriba fuera de la vista */
}

/* 3. IMPORTANTE: Compensa el espacio porque la barra ahora es 'fixed' */
/* Como la barra flota, el contenido se sube. Agregamos margen al body */
body { 
    margin: 0; 
    padding: 0; 
    padding-top: 130px; /* Suma de Topbar (40px) + Navbar (90px) aprox */
}

/* --- Ajuste en la barra principal --- */
.main-navbar {
    /* Quitamos el sticky anterior para que mande el padre (.site-header) */
    position: relative; 
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}





/* =========================================
   MIGAS DE PAN (BREADCRUMBS) - ESTILO PRO
   ========================================= */

/* 1. CONTENEDOR PRINCIPAL (BASE) */
.breadcrumbs-bar {
    background-color: #ffffff;      /* Fondo blanco limpio */
    border-bottom: 1px solid #f0f0f0; /* Línea divisoria muy sutil */
    padding: 15px 0;                /* Altura cómoda */
    font-family: 'Segoe UI', system-ui, sans-serif;
    position: relative;
    z-index: 1; /* Debajo del header fijo */
}

/* 2. FLEXBOX Y ALINEACIÓN */
.breadcrumbs-bar .container-flex {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 20px;
    
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alineado a la izquierda */
    gap: 8px; /* Espacio entre elementos */
}

/* 3. ENLACES (Inicio / Oferta...) */
.crumb-link {
    color: #999;           /* Gris claro elegante */
    text-decoration: none;
    font-size: 0.8rem;     /* Tamaño legible */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    white-space: nowrap;   /* Evita que se parta el texto */
}

.crumb-link:hover {
    color: #1abc9c;        /* Tu color Turquesa al pasar el mouse */
}

/* 4. SEPARADOR ( / ) */
.crumb-sep {
    color: #e0e0e0;        /* Gris muy suave */
    font-size: 0.75rem;
}

/* 5. PÁGINA ACTUAL (CURSO DE...) */
.crumb-current {
    color: #333;           /* Gris oscuro (Casi negro) */
    font-weight: 800;      /* Negrita fuerte */
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Trucos para texto largo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;      /* Límite en PC */
}


/* =========================================
   MIGAS DE PAN EN MÓVIL (DESLIZABLES)
   ========================================= */

@media (max-width: 768px) {
    
    .breadcrumbs-bar {
        padding: 10px 0; /* Un poco más compacto en móvil */
    }

    .breadcrumbs-bar .container-flex {
        display: flex;
        flex-wrap: nowrap;       /* ¡PROHIBIDO BAJAR DE LÍNEA! */
        overflow-x: auto;        /* Habilita el deslizar con el dedo */
        -webkit-overflow-scrolling: touch; /* Suavidad en iPhone */
        padding-bottom: 5px;     /* Espacio para evitar cortes */
        mask-image: linear-gradient(to right, black 90%, transparent 100%); /* Desvanecido al final (opcional, muy pro) */
        
        /* Ocultar la barra de scroll fea */
        scrollbar-width: none;   /* Firefox */
    }
    
    .breadcrumbs-bar .container-flex::-webkit-scrollbar {
        display: none;           /* Chrome, Safari, Opera */
    }

    /* Ajuste de textos para dedo */
    .crumb-link, .crumb-current {
        font-size: 0.75rem;      
        padding: 5px 0;          /* Aumenta área de toque */
    }
    
    .crumb-current {
        padding-right: 20px;     /* Margen final para que se lea todo al deslizar */
        max-width: none;         /* Quitamos límite de ancho en móvil */
        color: #1abc9c;          /* Destacamos el curso en turquesa en móvil */
    }
}

/* Animación de caída suave */
@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) { .mobile-menu-toggle, .mobile-only-btn { display: none !important; } }












/* =========================================
   ESTILOS PÁGINA FACULTADES (MODERNO)
   ========================================= */

/* 1. HERO PEQUEÑO (Cabecera de la página) */
.page-hero-small {
    position: relative;
    height: 300px;
    background-color: var(--brand-blue); /* Fallback color */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0; /* Ya el body tiene padding-top */
}

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 30, 60, 0.7); /* Filtro azul oscuro elegante */
}

.hero-container {
    position: relative; z-index: 2; color: white; padding: 20px;
}

.hero-subtitle {
    display: block; font-size: 0.9rem; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 10px; color: var(--brand-yellow); font-weight: 600;
}

/* =========================================
   TÍTULO NOVEDAD: EFECTO "AURORA CÍCLICA"
   ========================================= */

/* 1. EL TEXTO PRINCIPAL (Con el efecto de flujo) */
.hero-title-small {
    /* Tipografía base poderosa */
    font-size: 3.2rem;
    font-weight: 900;      /* Extra Bold para que el efecto se note más */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;   /* Espaciado amplio para elegancia */
    line-height: 1.2;
    margin: 40px 0;
    position: relative;
    
    /* --- LA MAGIA DEL EFECTO --- */
    /* Creamos un fondo degradado gigante con TUS colores */
    background: linear-gradient(
        90deg, 
        #ffffff,  /* Empieza blanco */
        #3CAAD8,  /* Cian */
        #C92C86,  /* Magenta */
        #F3C647,  /* Amarillo */
        #ffffff   /* Termina blanco para el loop suave */
    );
    /* Hacemos el fondo 3 veces más ancho que el texto */
    background-size: 300% auto;
    
    /* Recortamos el fondo para que solo se vea dentro de las letras */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */

    /* La animación que mueve el fondo */
    animation: auroraFlow 8s linear infinite;
    
    /* Un toque de sombra sutil para despegarlo del fondo azul */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}

/* 2. LA ANIMACIÓN DEL FLUJO */
@keyframes auroraFlow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; } /* Mueve el fondo horizontalmente */
}

/* 3. LA LÍNEA DE LUZ INFERIOR (Con Resplandor Neon) */
.hero-title-small::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    
    /* Centrado */
    margin: 25px auto 0 auto;
    border-radius: 10px;
    
    /* Color base Magenta */
    background-color: #C92C86;
    
    /* EL EFECTO ESPECIAL: Resplandor (Glow) */
    box-shadow: 
        0 0 10px rgba(201, 44, 134, 0.8), /* Luz cercana fuerte */
        0 0 20px rgba(201, 44, 134, 0.4), /* Luz media difusa */
        0 0 40px rgba(201, 44, 134, 0.2); /* Luz lejana suave */
        
    /* Pequeña animación de "respiración" en la línea */
    animation: neonPulse 3s ease-in-out infinite alternate;
}

/* Animación de la línea inferior */
@keyframes neonPulse {
    0% { opacity: 0.8; transform: scaleX(1); }
    100% { opacity: 1; transform: scaleX(1.1); box-shadow: 0 0 15px rgba(201, 44, 134, 1), 0 0 30px rgba(201, 44, 134, 0.6); }
}

/* MÓVIL */
@media (max-width: 768px) {
    .hero-title-small {
        font-size: 2.2rem;
        letter-spacing: 1px;
    }
}




/* 2. GRID DE TARJETAS */
.faculties-section {
    padding: 80px 0;
    background-color: #f9fbfd; /* Gris muy muy suave de fondo */
}

.container-faculties {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}

.faculties-grid {
    display: grid;
    /* MAGIA: Crea columnas automáticas de mínimo 320px */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}


/* 3. DISEÑO DE LA TARJETA (CARD) */
.faculty-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

.faculty-card:hover {
    transform: translateY(-8px); /* Efecto de levitación */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--brand-blue);
}

/* Imagen de la tarjeta */
.faculty-img-wrapper {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.faculty-img-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}

.faculty-card:hover .faculty-img-wrapper img {
    transform: scale(1.1); /* Zoom suave al pasar mouse */
}

/* Capa hover sobre la imagen */
.faculty-overlay-hover {
    position: absolute; inset: 0;
    background: rgba(74, 166, 214, 0.85); /* Azul corporativo transparente */
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
}

.faculty-card:hover .faculty-overlay-hover { opacity: 1; }

.btn-view-more {
    background: white; color: var(--brand-blue);
    padding: 10px 25px; border-radius: 50px;
    font-weight: 700; text-transform: uppercase; font-size: 0.8rem;
    transform: translateY(20px); transition: 0.3s;
}

.faculty-card:hover .btn-view-more { transform: translateY(0); }


/* Contenido de la tarjeta */
.faculty-content {
    padding: 30px;
    position: relative;
    flex-grow: 1; display: flex; flex-direction: column;
}

/* Icono flotante */
.faculty-icon {
    width: 50px; height: 50px;
    background: var(--brand-green);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    position: absolute;
    top: -25px; right: 30px; /* Flotando entre imagen y texto */
    box-shadow: 0 4px 10px rgba(155, 197, 61, 0.4);
}

.faculty-content h3 {
    margin: 0 0 15px 0;
    color: #333; font-size: 1.3rem; font-weight: 700;
    line-height: 1.3;
}

.faculty-content p {
    color: #666; font-size: 0.95rem; line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Enlace inferior */
.link-arrow {
    color: var(--brand-blue);
    font-weight: 700; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 8px;
    transition: 0.3s;
    margin-top: auto; /* Empuja al fondo */
}

.link-arrow:hover {
    color: var(--brand-magenta);
    gap: 12px; /* La flecha se mueve */
}

/* Estado Vacío */
.no-results {
    text-align: center; padding: 60px;
    background: white; border-radius: 12px;
    color: #888;
}
.no-results i { font-size: 3rem; margin-bottom: 20px; opacity: 0.3; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-hero-small { height: 220px; }
    .hero-title-small { font-size: 1.8rem; }
    .faculties-grid { grid-template-columns: 1fr; } /* 1 columna en móvil */
}




/* =========================================
   ESTILOS MAPA ACADÉMICO (ACORDEÓN)
   ========================================= */

.map-container-wrapper {
    /* 1. MANTÉN EL COLOR BASE */
    background-color: #f4f6f9; 
    
    /* 2. AGREGA ESTAS DOS LÍNEAS (EL PATRÓN DE PUNTOS) */
    
    background-size: 24px 24px;
    
    /* El resto de propiedades que ya tenías... */
    min-height: 100vh;
    padding: 80px 20px 60px; /* Recuerda que ajustamos este padding hace poco */
    font-family: 'Segoe UI', sans-serif;
}

.map-grid-container {
    max-width: 1000px;
    margin: 0 auto;
}

.map-header {
    text-align: center; margin-bottom: 30px; animation: fadeInDown 0.6s ease;
}
.map-header h1 { color: var(--brand-blue); font-size: 2.5rem; margin: 0 0 10px 0; font-weight: 800; }
.map-header p { color: #666; font-size: 1.1rem; }

/* --- TARJETA DE FACULTAD --- */
.faculty-map-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 25px; /* Menos margen, se ven más compactas cerradas */
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

/* Cabecera CLICKEABLE */
.faculty-map-header {
    background: linear-gradient(135deg, var(--brand-blue) 0%, #2a7da3 100%);
    color: white;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separa título de la flecha */
    cursor: pointer; /* Manito al pasar mouse */
    user-select: none; /* Evita que se seleccione el texto al hacer clic rápido */
    transition: background 0.3s;
}

.faculty-map-header:hover {
    background: linear-gradient(135deg, #3b9acb 0%, #246b8f 100%); /* Un poco más claro al hover */
}

/* Alternancia de colores */
.faculty-map-card:nth-child(even) .faculty-map-header {
    background: linear-gradient(135deg, var(--brand-magenta) 0%, #a01d6d 100%);
}

.header-content {
    display: flex; align-items: center; gap: 15px;
}

.faculty-map-header i { font-size: 1.5rem; } /* Icono principal */

.faculty-map-header h2 {
    margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.5px;
}

/* Flecha Giratoria */
.toggle-icon {
    font-size: 1.2rem !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
}

/* CUERPO DEL ACORDEÓN (OCULTO POR DEFECTO) */
.faculty-map-body {
    display: none; /* OCULTO */
    padding: 30px;
    background-color: #fff;
    border-top: 1px solid #eee;
    animation: slideDown 0.4s ease forwards; /* Animación al abrir */
}

/* --- ESTADO ACTIVO (CUANDO SE ABRE) --- */
.faculty-map-card.active .faculty-map-body {
    display: block; /* SE MUESTRA */
}

.faculty-map-card.active .toggle-icon {
    transform: rotate(180deg); /* LA FLECHA GIRA */
}

.faculty-map-card.active {
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Sombra más fuerte al abrir */
}

/* --- ESTILOS INTERNOS (Categorías y Programas) --- */
.category-block { margin-bottom: 30px; }
.category-block:last-child { margin-bottom: 0; }

.category-title {
    color: #333; font-size: 1.1rem; font-weight: 700;
    border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}

.cat-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background-color: var(--cat-color, #ccc);
    display: inline-block; box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.programs-mini-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px;
}

.program-mini-card {
    text-decoration: none; color: #555; background: #fcfcfc;
    padding: 15px 20px; border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center;
    transition: all 0.2s ease; border: 1px solid #eee;
    border-left: 4px solid var(--hover-color, #ccc);
}

.program-mini-card:hover {
    background: white; color: var(--brand-blue);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateX(5px);
}

.prog-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.prog-arrow { color: #ddd; font-size: 0.8rem; transition: 0.2s; }
.program-mini-card:hover .prog-arrow { color: var(--hover-color); transform: translateX(3px); 
}

/* Animaciones */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .faculty-map-header { padding: 15px 20px; }
    .faculty-map-header h2 { font-size: 1.1rem; }
    .faculty-map-body { padding: 20px; }
    .programs-mini-grid { grid-template-columns: 1fr; }
}


/* Fondo general de la página */
body {
    background-color: #f4f6f9; /* Color base gris muy suave */   
    /* Esto asegura que el fondo cubra todo */
    min-height: 100vh; 
}


/* EN TU STYLE.CSS */
.bg-patron-puntos {
    background-color: #f4f6f9; 
    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
    background-size: 24px 24px;
    /* Importante: Si faculties-section tenía fondo blanco, esto asegura que se vean los puntos */
}








/* =========================================
   MENÚ MÓVIL EDUCATIVO - DISEÑO PREMIUM
   ========================================= */

@media screen and (max-width: 991px) {
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       1. BOTÓN HAMBURGUESA (MEJORADO)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30002;
        width: 44px;
        height: 44px;
        padding: 0;
    }
    
    /* Convertir el icono FA en hamburguesa animada (opcional) */
    .mobile-menu-toggle i {
        font-size: 1.5rem;
        color: #021a30;
        transition: all 0.3s ease;
    }
    
    .nav-menu.active ~ .container-flex .mobile-menu-toggle i {
        transform: rotate(90deg);
        color: white;
    }

    /* Ocultar elementos de PC */
    .top-bar, 
    .nav-cta, 
    .btn-campus { 
        display: none !important; 
    }
    
    /* Logo ajustado */
    .brand-logo img {
        height: 40px !important;
        width: auto !important;
    }
    
    .nav-height {
        height: 70px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       2. MENÚ LATERAL (DISEÑO EDUCATIVO)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .nav-menu {
        display: flex !important;
        flex-direction: column;
        
        /* Posicionamiento */
        position: fixed;
        top: 0;
        right: 0;
        
        /* Tamaño profesional */
        width: 88%;
        max-width: 360px;
        height: 100vh;
        
        /* Fondo blanco limpio y profesional */
        background: #ffffff;
        
        /* SIN padding-top (eliminamos el espacio) */
        padding: 0;
        
        /* Z-index correcto */
        z-index: 30001;
        
        /* Oculto por defecto */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        
        /* Sombra profesional */
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
        
        /* Scroll interno */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Estado activo (abierto) */
    .nav-menu.active {
        transform: translateX(0);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       3. HEADER DEL MENÚ (REDISEÑADO)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .nav-menu::before {
        content: "MENÚ";
        
        /* Posicionamiento como primer elemento */
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Tamaño compacto (sin espacio extra) */
        width: 100%;
        height: 70px; /* Mismo alto que el header principal */
        min-height: 70px;
        flex-shrink: 0; /* No se encoge */
        
        /* Fondo degradado corporativo educativo */
        background: linear-gradient(135deg, #004b87 0%, #1abc9c 100%);
        color: white;
        
        /* Tipografía profesional */
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        
        /* Sombra sutil interna */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        
        /* Borde decorativo inferior */
        border-bottom: 3px solid #1abc9c;
        
        /* Posición relativa (no fixed, no absolute) */
        position: relative;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       4. ITEMS DEL MENÚ (ESTILO EDUCATIVO)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .nav-menu li {
        display: block;
        width: 100%;
        padding: 0; /* ✅ Sin padding en el LI */
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
        
        /* Animación de entrada */
        opacity: 0;
        transform: translateX(30px);
        transition: all 0.3s ease;
    }
    
    /* Quitar línea vertical de PC */
    .nav-menu li::after {
        display: none;
    }
    
    /* Animación cascada cuando se abre */
    .nav-menu.active li {
        opacity: 1;
        transform: translateX(0);
    }
    
    .nav-menu.active li:nth-child(1) { transition-delay: 0.1s; }
    .nav-menu.active li:nth-child(2) { transition-delay: 0.15s; }
    .nav-menu.active li:nth-child(3) { transition-delay: 0.2s; }
    .nav-menu.active li:nth-child(4) { transition-delay: 0.25s; }
    .nav-menu.active li:nth-child(5) { transition-delay: 0.3s; }

/* Enlaces (estilo educativo minimalista) */
    .nav-menu li a {
        /* ESTO HACE QUE EL CLIC ABARQUE TODO: */
        display: flex;
        width: 100%;            /* Ocupa todo el ancho del li */
        height: 100%;           /* Ocupa todo el alto */
        box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
        
        align-items: center;
        justify-content: space-between;
        
        /* El padding va DENTRO del enlace para expandir el área de clic */
        padding: 20px 25px; 
        
        /* Tipografía clara y legible */
        font-size: 0.95rem;
        color: #2c3e50;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        
        /* Transición suave */
        transition: all 0.3s ease;
        
        /* Sin decoración */
        text-decoration: none;
        position: relative;
    }
    
    /* Icono de flecha a la derecha */
    .nav-menu li a::after {
        content: "›";
        font-size: 1.5rem;
        color: #bdc3c7;
        transition: all 0.3s ease;
        font-weight: 300;
        flex-shrink: 0; /* ✅ La flecha no se encoge */
    }
    
    /* Estado hover/active (estilo académico) */
    .nav-menu li a:hover,
    .nav-menu li a.active {
        background: linear-gradient(90deg, rgba(26, 188, 156, 0.08) 0%, transparent 100%);
        color: #1abc9c;
        padding-left: 32px;
    }
    
    .nav-menu li a:hover::after,
    .nav-menu li a.active::after {
        color: #1abc9c;
        transform: translateX(5px);
    }
    
    /* Barra lateral en hover */
    .nav-menu li a:hover::before,
    .nav-menu li a.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: linear-gradient(180deg, #1abc9c 0%, #16a085 100%);
        border-radius: 0 3px 3px 0;
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       5. BOTÓN CAMPUS VIRTUAL (COMPACTO Y ALINEADO)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .mobile-only-btn {
        display: block !important;
        /* Márgenes externos: Arriba | Derecha | Abajo | Izquierda */
        margin: 20px 20px !important; 
        padding: 0 !important;
        border: none !important;
    }
    
    .btn-campus-mobile {
        /* 1. ESTRUCTURA FLEXIBLE */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Contenido a la izquierda */
        
        width: 100%;
        
        /* 2. QUITAR "GORDURA" (CLAVE) */
        padding: 20px 30px !important; /* Relleno vertical reducido */
        height: auto !important;       /* Altura automática */
        min-height: 40px !important;   /* Altura mínima estándar */
        line-height: 1 !important;     /* Elimina espacios invisibles */
        
        /* 3. ESTILO VISUAL */
        background: linear-gradient(135deg, #004b87 0%, #0066b3 100%) !important;
        color: white !important;
        border-radius: 50px !important;
        border: none !important;
        box-shadow: 0 4px 8px rgba(0, 75, 135, 0.25);
        text-decoration: none !important;
        
        /* 4. TEXTO */
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* ICONO (Sombrero) */
    .btn-campus-mobile i {
        margin-right: 10px !important;
        font-size: 1rem !important; /* Tamaño controlado */
        line-height: 1 !important;
    }

    /* FLECHA (Derecha) */
    .btn-campus-mobile::after {
        content: "›"; 
        font-size: 1.6rem !important;
        line-height: 0.7 !important; /* Ajuste fino para centrar la flecha */
        font-weight: 300 !important;
        
        /* EMPUJAR A LA DERECHA */
        margin-left: auto !important; 
        
        color: rgba(255,255,255,0.7);
        padding-bottom: 3px; /* Pequeño ajuste visual */
    }

    /* Efecto al presionar */
    .btn-campus-mobile:active {
        transform: scale(0.97);
    }



    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       6. SECCIÓN DE INFORMACIÓN (OPCIONAL)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    /* Área inferior del menú con info de contacto */
    .nav-menu::after {
        content: "";
        display: block;
        margin-top: auto; /* Empuja al fondo */
        padding: 25px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        font-size: 0.8rem;
        color: #6c757d;
        text-align: center;
        line-height: 1.6;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       7. OVERLAY (FONDO BORROSO) - CORREGIDO
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        
        /* Fondo oscuro semitransparente con blur */
        background: rgba(0, 26, 48, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        
        /* ✅ Z-index DEBAJO del menú (20000 < 30001) */
        z-index: 20000;
        
        /* Oculto por defecto */
        opacity: 0;
        visibility: hidden;
        
        /* Transición suave */
        transition: all 0.4s ease;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       8. SCROLLBAR PERSONALIZADO
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .nav-menu::-webkit-scrollbar {
        width: 4px;
    }
    
    .nav-menu::-webkit-scrollbar-track {
        background: #f8f9fa;
    }
    
    .nav-menu::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #1abc9c 0%, #16a085 100%);
        border-radius: 10px;
    }
    
    .nav-menu::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #16a085 0%, #1abc9c 100%);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       9. AJUSTES DEL HEADER PRINCIPAL
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    .site-header {
        z-index: 25000 !important;
    }
    
    /* Forzar que el botón hamburguesa siempre sea visible */
    .nav-menu.active ~ .container-flex .mobile-menu-toggle,
    .mobile-menu-toggle {
        z-index: 30002 !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. OCULTAR EN PC
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 992px) {
    .mobile-menu-toggle,
    .mobile-only-btn,
    .menu-overlay {
        display: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. AJUSTES PARA PANTALLAS MUY PEQUEÑAS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 375px) {
    .nav-menu {
        width: 90%;
        max-width: 100%;
    }
    
    .nav-menu li a {
        padding: 18px 20px;
        font-size: 0.9rem;
    }
}







/* 5. Iconos y Badges flotantes */
.card-badge, .faculty-float-icon {
    z-index: 3; /* Asegura que floten sobre todo */
}




/* =========================================
   PÁGINA DE CONTACTO (MODERNA)
   ========================================= */

.contact-section {
    padding: 80px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Columna derecha un poco más ancha */
    gap: 60px;
    align-items: start;
    padding: 0 20px;
}

/* --- COLUMNA IZQUIERDA (INFO) --- */
.section-title {
    font-size: 2.2rem;
    color: var(--brand-blue);
    margin-bottom: 10px;
    font-weight: 800;
}

.section-desc {
    color: #666;
    margin-bottom: 40px;
    font-size: 1.05rem;
}

.info-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card-modern {
    background: white;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.info-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-left: 4px solid var(--brand-green);
}

.icon-box {
    width: 50px; height: 50px;
    background: rgba(74, 166, 214, 0.1);
    color: var(--brand-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.text-box h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #333;
}

.text-box p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.text-box a { color: var(--brand-blue); text-decoration: none; font-weight: 500; }
.text-box a:hover { color: var(--brand-magenta); }


/* --- COLUMNA DERECHA (FORMULARIO) --- */
.form-card-glass {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08); /* Sombra elegante */
    border-top: 5px solid var(--brand-blue);
}

.form-card-glass h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #333;
    font-size: 1.5rem;
}

/* Campos del formulario */
.form-group-modern { margin-bottom: 20px; }
.form-row-modern { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-group-modern label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    transition: 0.3s;
}

/* Ícono en textarea necesita ajuste arriba */
.input-wrapper.textarea-wrapper i {
    top: 20px;
    transform: none;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: 14px 15px 14px 45px; /* Espacio para el icono */
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    background: #f9fbfd;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: all 0.3s;
    font-family: inherit;
}

/* Efecto Focus */
.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-color: var(--brand-blue);
    background: white;
    box-shadow: 0 4px 10px rgba(74, 166, 214, 0.1);
}

.input-wrapper input:focus + i,
.input-wrapper textarea:focus + i { /* Esto requiere cambiar el orden en HTML o usar JS, pero CSS puro funciona así si el input está antes */
    color: var(--brand-blue); 
}
/* Corrección para que el icono cambie de color al focus del input */
.input-wrapper:focus-within i {
    color: var(--brand-blue);
}

/* Botón de Enviar */
.btn-send-modern {
    width: 100%;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #2a7da3 100%);
    color: white;
    padding: 16px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(74, 166, 214, 0.3);
}

.btn-send-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(74, 166, 214, 0.4);
    background: linear-gradient(135deg, var(--brand-magenta) 0%, #a01d6d 100%);
}

/* Alertas */
.alert-box {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.alert-box.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-box.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Mapa */
.map-section { margin-bottom: -10px; /* Quitar espacio blanco final */ }

@media (max-width: 992px) {
    /* En Tablets y Celulares: Una sola columna */
    .contact-grid-wrapper {
        grid-template-columns: 1fr; /* Todo ocupa el 100% */
        gap: 40px;
    }
    
    .contact-info-column {
        order: 2; /* Bajamos la info (opcional, si prefieres el form arriba) */
        text-align: center; /* Centramos textos */
    }
    
    .info-cards-stack {
        align-items: stretch; /* Las tarjetas ocupan todo el ancho */
    }
    
    .info-card-modern {
        flex-direction: column; /* Icono arriba, texto abajo */
        text-align: center;
        padding: 20px;
    }

    /* Formulario en móvil */
    .form-card-glass {
        padding: 25px; /* Menos padding interno */
    }
    
    /* Email y Teléfono uno debajo del otro */
    .form-row-modern {
        grid-template-columns: 1fr; 
        gap: 15px;
    }
}




/* Corrección para tarjetas que ahora son enlaces */
a.info-card-modern {
    text-decoration: none; /* Quita el subrayado */
    color: inherit;        /* Mantiene el color de texto original */
    display: flex;         /* Asegura que mantenga el diseño flexible */
    width: 100%;           /* Ocupa el ancho disponible */
}

/* Forzamos que el párrafo interno se vea gris como antes */
a.info-card-modern .text-box p {
    color: #666; 
}

/* Efecto Hover opcional para que se sienta clicable */
a.info-card-modern:hover .text-box h4 {
    color: var(--brand-blue); /* El título se ilumina al pasar el mouse */
}





/* =========================================
   ESTILOS PÁGINA MODALIDAD (MODERNO)
   ========================================= */

/* 1. HERO SECTION */
.modality-hero {
    position: relative;
    height: 500px;
    background: url('../img/fondo-virtual.jpg') center/cover no-repeat; /* Asegúrate de tener una imagen aquí o usa un color */
    background-color: #021a30; /* Fallback */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: -90px; /* Para que quede detrás del header transparente si lo tuvieras, o ajusta a 0 */
    padding-top: 90px;
}

.hero-overlay-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(2, 26, 48, 0.95) 0%, rgba(0, 75, 135, 0.85) 100%);
}

.container-hero-content {
    position: relative; z-index: 2;
    max-width: 800px; padding: 20px;
}

.badge-pill-tech {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.modality-hero h1 {
    font-size: 3.5rem; font-weight: 800; margin-bottom: 20px;
    background: linear-gradient(90deg, #fff, #a2d9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modality-hero p {
    font-size: 1.2rem; line-height: 1.6; opacity: 0.9; margin-bottom: 40px;
}

.hero-stats {
    display: flex; justify-content: center; gap: 30px; align-items: center;
}
.stat-item { text-align: center; }
.stat-item strong { display: block; font-size: 1.5rem; color: var(--brand-yellow); }
.stat-item span { font-size: 0.8rem; text-transform: uppercase; opacity: 0.7; }
.stat-separator { width: 1px; height: 30px; background: rgba(255,255,255,0.2); }


/* 2. BENEFICIOS (TARJETAS) */
.benefits-section { padding: 80px 0; background: #f9fbfd; }
.container-generic { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section-header-center { text-align: center; margin-bottom: 60px; }
.section-header-center h2 { color: var(--brand-blue); font-size: 2.2rem; margin-bottom: 10px; }
.divider-center { width: 60px; height: 4px; background: var(--brand-magenta); margin: 0 auto 15px; border-radius: 2px; }

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: white; padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.02);
    position: relative; overflow: hidden;
}

.benefit-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

/* Círculos de colores */
.card-icon-circle {
    width: 70px; height: 70px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin-bottom: 25px;
    transition: transform 0.3s;
}
.benefit-card:hover .card-icon-circle { transform: rotate(10deg) scale(1.1); }

.color-blue { background: rgba(74, 166, 214, 0.1); color: var(--brand-blue); }
.color-magenta { background: rgba(192, 38, 133, 0.1); color: var(--brand-magenta); }
.color-green { background: rgba(155, 197, 61, 0.1); color: var(--brand-green); }

.benefit-card h3 { font-size: 1.3rem; margin-bottom: 15px; color: #333; }
.benefit-card p { color: #666; line-height: 1.6; }


/* 3. STEPS SECTION */
.steps-section { padding: 60px 0; background: white; border-top: 1px solid #f0f0f0; }
.steps-wrapper {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
}

.step-item { text-align: center; flex: 1; min-width: 150px; }
.step-number {
    display: inline-block; font-size: 3rem; font-weight: 900;
    color: rgba(0,0,0,0.05); line-height: 1; margin-bottom: -10px; display: block;
}
.step-item h4 { color: var(--brand-blue); margin-bottom: 5px; font-size: 1.1rem; }
.step-item p { font-size: 0.9rem; color: #555555; }

.step-arrow { color: #ddd; font-size: 1.5rem; }


/* 4. CTA AVANZADO (Botón Brillante) */
.cta-advanced-section {
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #2a7da3 100%);
    color: white;
}

.btn-mega-glow {
    display: inline-flex; align-items: center; gap: 15px;
    background: white; color: var(--brand-blue);
    padding: 18px 40px; border-radius: 50px;
    font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none; font-size: 1.1rem;
    box-shadow: 0 0 20px rgba(255,255,255,0.3);
    transition: all 0.3s ease; margin-top: 30px;
    position: relative; overflow: hidden;
}

.btn-mega-glow:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255,255,255,0.6);
    gap: 20px; /* Separa la flecha */
}


/* 5. ANIMACIONES */
.fade-in-up { animation: fadeInUp 0.8s ease forwards; opacity: 0; transform: translateY(20px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.delay-1 { animation-delay: 0.2s; transition-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; transition-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; transition-delay: 0.6s; }

/* Scroll Reveal (JS Class) */
.scroll-reveal { opacity: 0; transform: translateY(30px); transition: 0.6s ease; }
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }


/* RESPONSIVE */
@media (max-width: 768px) {
    .modality-hero h1 { font-size: 2.5rem; }
    .step-arrow { display: none; }
    .hero-stats { flex-direction: column; gap: 10px; }
    .stat-separator { width: 50px; height: 1px; }
}







/* =========================================
   ESTILOS INSCRIPCIÓN Y PAGOS
   ========================================= */

/* 1. HERO */
.enroll-hero {
    position: relative;
    height: 450px;
    background: url('../img/fondo-pagos.jpg') center/cover no-repeat; /* Pon una imagen aquí */
    background-color: #1e293b; /* Fallback */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: -90px;
    padding-top: 90px;
}

.hero-overlay-dark {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(2, 26, 48, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%);
}

.badge-pill-success {
    display: inline-block;
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid #2ecc71;
    color: #2ecc71;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);

}

/* 2. PROCESO (Grid de 3 pasos) */
.process-section { padding: 80px 0; background: #fff; }

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.process-card {
    background: #f8f9fa;
    padding: 35px;
    border-radius: 15px;
    border: 1px solid #eee;
    transition: 0.3s;
    text-align: center;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: var(--brand-blue);
}

.p-icon {
    font-size: 2.5rem;
    color: var(--brand-blue);
    margin-bottom: 20px;
}

.process-card h3 { font-size: 1.2rem; margin-bottom: 15px; color: #333; }
.process-card p { font-size: 0.95rem; color: #666; line-height: 1.6; }

/* Banner Asesor */
.advisor-banner {
    background: linear-gradient(135deg, var(--brand-blue) 0%, #2a7da3 100%);
    border-radius: 15px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    color: white;
    box-shadow: 0 15px 30px rgba(74, 166, 214, 0.25);
}

.advisor-text h3 { margin: 0 0 10px 0; font-size: 1.5rem; }
.advisor-text p { margin: 0; opacity: 0.9; }

.btn-advisor {
    background: white;
    color: var(--brand-blue);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    white-space: nowrap;
}
.btn-advisor:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }


/* 3. SECCIÓN DE PAGOS */
.payments-section { padding: 80px 0; background: #f4f6f9; }

.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.group-title {
    font-size: 1.1rem; color: #555; border-bottom: 2px solid #ddd;
    padding-bottom: 10px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}

/* Tarjetas Digitales */
.digital-wallet-card {
    background: white; padding: 25px; border-radius: 12px;
    margin-bottom: 20px; text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    transition: 0.3s;
}
.digital-wallet-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }

.wallet-logo { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }

.btn-pay-link {
    display: inline-block; width: 100%;
    padding: 10px; margin-top: 15px;
    background: #f0f0f0; color: #333;
    border-radius: 8px; text-decoration: none;
    font-weight: 600; font-size: 0.9rem; transition: 0.3s;
}
.btn-pay-link:hover { background: var(--brand-blue); color: white; }

/* Tarjetas Bancarias */
.bank-card {
    background: white; border-radius: 12px; overflow: hidden;
    margin-bottom: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.bank-header {
    padding: 15px 20px; color: white; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
}
.color-guayaquil { background: #e30613; }
.color-pichincha { background: #ffdd00; color: #333; }
.color-bancolombia { background: #fcd406; color: #333; }

.bank-body { padding: 20px; }
.bank-body small { display: block; color: #888; font-size: 0.8rem; margin-bottom: 3px; text-transform: uppercase; }
.bank-body strong { display: block; color: #333; font-size: 0.95rem; }

/* Fila de copiar cuenta */
.copy-row {
    background: #f8f9fa; border: 1px solid #e9ecef;
    border-radius: 6px; padding: 8px 12px;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px;
}
.account-number { font-family: monospace; font-size: 1.1rem; font-weight: 700; color: #333; letter-spacing: 1px; }

.btn-copy {
    background: none; border: none; cursor: pointer; color: var(--brand-blue);
    font-size: 1.1rem; padding: 5px; transition: 0.2s;
}
.btn-copy:hover { color: var(--brand-magenta); transform: scale(1.1); }
.btn-copy.copied { color: #2ecc71; }

.bank-details-extra {
    display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .advisor-banner { text-align: center; justify-content: center; }
    .btn-advisor { width: 100%; }
    .payment-methods-grid { grid-template-columns: 1fr; }
}




/* =========================================
   ESTILOS TÉRMINOS Y CONDICIONES
   ========================================= */

/* 1. HERO */
.terms-hero {
    position: relative;
    height: 350px;
    background: url('../img/fondo-legal.jpg') center/cover no-repeat; /* Imagen de fondo opcional */
    background-color: #2c3e50; /* Fallback */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: -90px;
    padding-top: 90px;
    margin-bottom: 50px;
}

.hero-overlay-blue {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(2, 26, 48, 0.95) 0%, rgba(74, 166, 214, 0.9) 100%);
}

.icon-hero { font-size: 3rem; margin-bottom: 15px; opacity: 0.8; }

/* 2. CONTENEDOR PRINCIPAL */
.terms-container-main {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

/* 3. BLOQUES DE TEXTO (TARJETAS) */
.terms-block {
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 40px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s;
}

.block-header {
    background: #f8f9fa;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.block-header i {
    font-size: 1.5rem;
    color: var(--brand-blue);
}

.block-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: #333;
}

.block-content { padding: 30px; line-height: 1.7; color: #555; }

/* Resoluciones */
.lead-text { font-size: 1.1rem; color: #333; margin-bottom: 15px; }

.resolutions-grid {
    display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px;
}
.res-item {
    background: rgba(155, 197, 61, 0.1);
    color: #556b2f;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px;
}

/* Oferta Académica Grid */
.academic-offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.offer-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
}
.offer-card:hover { transform: translateY(-5px); border-color: var(--brand-blue); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.offer-icon {
    width: 50px; height: 50px; margin: 0 auto 15px;
    background: rgba(74, 166, 214, 0.1); color: var(--brand-blue);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.offer-card h4 { margin: 0 0 10px; color: #333; }
.offer-card p { font-size: 0.9rem; margin: 0; }

.highlight-box {
    background: #fff9e6;
    border-left: 4px solid var(--brand-yellow);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    display: flex; gap: 15px;
}
.highlight-box i { color: #f0c345; font-size: 1.5rem; margin-top: 3px; }

/* Botón de Acción */
.btn-action-terms {
    display: inline-block;
    background: var(--brand-magenta);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(192, 38, 133, 0.3);
}
.btn-action-terms:hover { background: #a01d6d; transform: scale(1.05); }

/* Lista de Pagos */
.payment-terms-list { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.pay-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.pay-item:last-child { border-bottom: none; }
.pay-item.highlight { background: rgba(74, 166, 214, 0.05); border-radius: 8px; border: none; }
.pay-item strong { color: #333; min-width: 150px; }
.pay-item a { color: var(--brand-blue); text-decoration: none; font-weight: 600; }

/* Privacidad */
.privacy-block { border-top: 4px solid var(--brand-green); }
.legal-text ul { padding-left: 20px; margin-bottom: 20px; }
.legal-text li { margin-bottom: 10px; position: relative; list-style: none; }
.legal-text li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    color: var(--brand-green); margin-right: 10px;
}

.privacy-seal {
    text-align: right; font-weight: 700; color: var(--brand-green);
    text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .block-header { flex-direction: column; text-align: center; }
    .pay-item { flex-direction: column; align-items: flex-start; }
}



/* =========================================
   FOOTER PREMIUM (Compacto y Alineado)
   ========================================= */

.site-footer {
    /* Color exacto de tu Header */
    background-color: #1f3c4d; 
    color: #e2e8f0; /* Blanco suave para mejor lectura */
    font-size: 0.9rem; /* Letra más compacta */
    line-height: 1.5;
    position: relative;
    border-top: none; /* Quitamos bordes extraños */
}

/* Ola Decorativa Superior */
.footer-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}
.footer-wave svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 50px; /* Más bajita para no ocupar tanto espacio */
}
.footer-wave path {
    fill: #f4f6f9; /* Debe coincidir con el fondo de tu web */
}

/* --- CONTENEDOR PRINCIPAL --- */
/* Esto asegura que se alinee con tu barra de navegación */
.footer-container-inner {
    max-width: 1350px; /* Mismo ancho que tu navbar */
    margin: 0 auto;
    padding: 0 20px;
}

/* GRID DE 4 COLUMNAS (Estilo Imagen) */
.footer-grid {
    display: grid;
    /* Columna 1 más ancha, las otras equilibradas */
    grid-template-columns: 1.3fr 0.8fr 1fr 1fr; 
    gap: 30px;
    padding: 60px 0 40px; /* Padding reducido para quitar altura */
    position: relative;
    z-index: 2;
}

/* Títulos de las Columnas */
.footer-col h3 {
    color: #ffffff;
    font-size: 1rem; /* Título más fino y elegante */
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    
    /* Línea decorativa pequeña debajo del título */
    padding-bottom: 10px;
}
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    background: var(--brand-green);
}

/* COLUMNA 1: LOGO Y DESCRIPCIÓN */
.brand-col { padding-right: 20px; }
.footer-logo img {
    max-width: 160px; /* Logo controlado */
    margin-bottom: 15px;
    filter: brightness(0) invert(1); /* Logo blanco */
}
.footer-desc {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 20px;
}
.social-links { display: flex; gap: 10px; }
.social-btn {
    width: 32px; height: 32px; /* Botones más pequeños */
    background: rgba(255,255,255,0.1);
    color: white;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.9rem;
}
.social-btn:hover { background: var(--brand-blue); transform: translateY(-2px); }

/* COLUMNA 2: NAVEGACIÓN */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; } /* Menos espacio entre items */
.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    transition: 0.3s;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem;
}
.footer-links a:hover { color: white; transform: translateX(5px); }
.footer-links a i { font-size: 0.7rem; color: var(--brand-magenta); }

/* COLUMNA 3: CONTACTO */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
    display: flex; gap: 12px; margin-bottom: 15px; align-items: flex-start;
}
.contact-list i {
    color: var(--brand-blue);
    font-size: 1rem;
    margin-top: 3px;
}
.contact-list strong { color: white; font-weight: 600; display: block; font-size: 0.85rem; }
.contact-list span { font-size: 0.85rem; }
.contact-list a { color: #cbd5e1; text-decoration: none; }
.contact-list a:hover { color: var(--brand-yellow); }

/* COLUMNA 4: MAPA */
.map-wrapper {
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
    height: 180px; /* Mapa no muy alto */
}

/* --- BARRA INFERIOR (COPYRIGHT A LA IZQ / LEGAL A LA DER) --- */
.footer-bottom {
    background-color: #162a36; /* Un tono un poco más oscuro que el fondo principal */
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.8rem;
}

.bottom-flex {
    display: flex;
    justify-content: space-between; /* ESTO SEPARA LOS ELEMENTOS A LOS EXTREMOS */
    align-items: center;
}

.developer-info {
    text-align: left;
    color: #94a3b8;
}
.developer-info p { margin: 0; line-height: 1.4; }
.developer-info a { color: var(--brand-green); text-decoration: none; font-weight: 700; }

.legal-links {
    text-align: right;
    display: flex;
    gap: 15px;
}
.legal-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s;
}
.legal-links a:hover { color: white; text-decoration: underline; }
.legal-links .sep { color: rgba(255,255,255,0.2); }


/* =========================================
   RESPONSIVE (MÓVIL - MANTENEMOS EL ACORDEÓN)
   ========================================= */
@media (max-width: 992px) {
    .footer-grid {
        display: block; /* Apilar columnas */
        padding: 40px 0 20px;
    }
    
    .footer-col { margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .footer-col:last-child { border-bottom: none; }
    
    .brand-col { text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 30px; margin-bottom: 30px; }
    .footer-logo img { margin: 0 auto 15px; }
    .social-links { justify-content: center; }
    
    /* Títulos clickeables */
    .footer-col h3 { cursor: pointer; margin: 0; padding: 15px 0; justify-content: space-between; display: flex; }
    .footer-col h3::after { content: '+'; font-size: 1.4rem; color: var(--brand-green); font-weight: 300; position: static; background: none; width: auto; height: auto; }
    .footer-col.active h3::after { content: '−'; color: var(--brand-magenta); }
    
    /* Ocultar contenido */
    .footer-links, .contact-list, .map-wrapper { display: none; padding-bottom: 20px; }
    .footer-col.active .footer-links,
    .footer-col.active .contact-list,
    .footer-col.active .map-wrapper { display: block; animation: fadeIn 0.3s; }
    .developer-info {
        text-align: center !important; /* Forzar centrado del copyright */
        order: 2; /* Poner el copyright al final */
    }

    /* Bottom Bar Móvil */
    .bottom-flex { flex-direction: column; /* Apilar uno sobre otro */
        gap: 20px; 
        text-align: center; /* Centrar texto general */
        
        /* IMPORTANTE: Espacio abajo para que el botón flotante no tape el texto */
        padding-bottom: 60px; }
    .legal-links { justify-content: center; /* Centrar los enlaces horizontalmente */
        flex-wrap: wrap; /* Permitir que bajen de línea si no caben */
        gap: 10px;
        order: 1; /* Poner los enlaces legales primero */
        width: 100%; }
        /* Ajuste para que los enlaces no se partan feo */
    .legal-links a {
        white-space: nowrap; /* Evita que "Términos y Condiciones" se parta en dos líneas */
        font-size: 0.85rem;
    }
    
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



/* =========================================
   BOTÓN VOLVER ARRIBA (Recuperado)
   ========================================= */

#backToTop {
    position: fixed;
    bottom: 30px; 
    right: 30px;
    
    /* Diseño del botón */
    background: var(--brand-magenta); /* Color rosado corporativo */
    color: white;
    border: none;
    width: 50px; 
    height: 50px;
    border-radius: 50%; /* Redondo */
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    
    /* Estado inicial: Oculto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Empieza un poco más abajo */
    transition: all 0.4s ease;
    
    /* IMPORTANTE: Capa superior para que nada lo tape */
    z-index: 10000; 
}

/* Estado Visible (Esta clase la agrega el Javascript al bajar) */
#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Sube a su posición normal */
}

/* Efecto al pasar el mouse */
#backToTop:hover {
    background: #a01d6d; /* Un poco más oscuro */
    transform: translateY(-5px); /* Se eleva un poco */
    box-shadow: 0 8px 20px rgba(192, 38, 133, 0.4);
}






/* =========================================
   ESTILOS MAPA DEL SITIO (MODERNO)
   ========================================= */

/* 1. HERO CON BUSCADOR */
.sitemap-hero {
    position: relative;
    height: 400px;
    background: url('../img/fondo-legal.jpg') center/cover no-repeat; /* Puedes reutilizar la imagen de términos */
    background-color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: -90px;
    padding-top: 90px;
}

.sitemap-icon-box {
    font-size: 3rem; margin-bottom: 15px; opacity: 0.9;
    color: var(--brand-yellow);
}

/* Caja de Búsqueda Flotante */
.sitemap-search-box {
    margin-top: 30px;
    position: relative;
    max-width: 500px;
    width: 100%;
    margin-left: auto; margin-right: auto;
}

.sitemap-search-box i {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    color: var(--brand-blue); font-size: 1.2rem;
}

.sitemap-search-box input {
    width: 100%;
    padding: 18px 20px 18px 50px;
    border-radius: 50px;
    border: none;
    font-size: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    outline: none;
    transition: 0.3s;
}

.sitemap-search-box input:focus {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}


/* 2. GRID DE CATEGORÍAS */
.sitemap-section {
    padding: 60px 0 80px;
    min-height: 500px;
}

.sitemap-grid {
    display: grid;
    /* Columnas automáticas tipo Masonry */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.sitemap-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.sitemap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* Cabecera de Tarjeta */
.card-header-map {
    background: #f8f9fa;
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
    display: flex; align-items: center; gap: 12px;
}

.card-header-map i { font-size: 1.4rem; color: #555; }
.card-header-map h3 { margin: 0; font-size: 1.1rem; color: #333; font-weight: 700; }

/* Colores por categoría */
.card-header-map.color-blue i { color: var(--brand-blue); }
.card-header-map.color-blue { border-top: 3px solid var(--brand-blue); }

.card-header-map.color-green i { color: var(--brand-green); }
.card-header-map.color-green { border-top: 3px solid var(--brand-green); }

.card-header-map.color-magenta i { color: var(--brand-magenta); }
.card-header-map.color-magenta { border-top: 3px solid var(--brand-magenta); }


/* Lista de Enlaces */
.sitemap-links {
    list-style: none; padding: 0; margin: 0;
}

.sitemap-links li {
    border-bottom: 1px solid #f9f9f9;
}
.sitemap-links li:last-child { border-bottom: none; }

.sitemap-links a {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 25px;
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.2s;
}

.sitemap-links a i {
    color: #ccc; font-size: 0.9rem; transition: 0.2s; width: 20px; text-align: center;
}

.sitemap-links a:hover {
    background: #f0f8ff;
    color: var(--brand-blue);
    padding-left: 30px; /* Efecto deslizante */
}

.sitemap-links a:hover i { color: var(--brand-blue); }


/* 3. ESTADO NO ENCONTRADO */
.no-results-map {
    display: none; /* Oculto por defecto */
    text-align: center;
    padding: 60px;
    color: #888;
}
.no-results-map i { font-size: 3rem; margin-bottom: 20px; opacity: 0.3; }
.no-results-map button {
    background: var(--brand-blue); color: white;
    border: none; padding: 10px 25px; border-radius: 50px;
    margin-top: 15px; cursor: pointer; font-weight: 600;
}




/* =========================================
   AJUSTE EXCLUSIVO: DETALLE DE PROGRAMA (CORREGIDO)
   ========================================= */

@media (max-width: 992px) {

    body {
        /* En móvil la barra es más bajita (70px), así que reducimos el relleno */
        padding-top: 70px !important; 
    }
    
    /* Movemos la flecha a la IZQUIERDA solo en esta página */
    /* MANTENIENDO EL ESTILO ORIGINAL (Rosa sólido) */
    .page-details #backToTop {
        right: auto !important;       /* Soltamos el lado derecho */
        left: 20px !important;        /* Lo pegamos a la izquierda */
        bottom: 20px !important;      /* Misma altura que el botón de WhatsApp */
        
        /* HEMOS ELIMINADO LAS LÍNEAS QUE CAMBIABAN EL COLOR */
    }

    /* Aseguramos que el botón de WhatsApp se quede a la DERECHA */
    .page-details .mobile-float-cta {
        right: 20px !important;
        bottom: 20px !important;
    }
}




/* =========================================
   BARRA MÓVIL SIMÉTRICA (LÓGICA SCROLL UP)
   ========================================= */

.mobile-bottom-bar { display: none; }

@media (max-width: 992px) {
    
    .mobile-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px; /* Un poquito más de espacio */
        
        position: fixed;
        bottom: 15px;
        left: 15px;
        right: 15px;
        z-index: 10010;
    }

    /* 1. FLECHA ROSA (INTELIGENTE) */
    .float-arrow-btn {
        /* TAMAÑO AUMENTADO (56px) */
        width: 56px;  
        height: 56px; 
        flex-shrink: 0;
        
        background: var(--brand-magenta);
        color: white;
        border-radius: 50%;
        
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem; /* Icono más grande */
        text-decoration: none;
        box-shadow: 0 4px 15px rgba(192, 38, 133, 0.4);
        
        /* ESTADO INICIAL: OCULTO */
        opacity: 0;
        visibility: hidden;
        transform: scale(0.5) translateY(20px); /* Pequeña y abajo */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    /* ESTADO VISIBLE (CLASE AGREGADA POR JS AL SUBIR) */
    .float-arrow-btn.visible {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(0); /* Tamaño normal */
    }

    .float-arrow-btn:active { transform: scale(0.9); }

    /* 2. CÁPSULA BLANCA (PRECIO + BOTÓN) */
    .float-price-capsule {
        flex-grow: 1;
        /* TAMAÑO AUMENTADO (56px) PARA SIMETRÍA */
        height: 56px; 
        
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        border-radius: 50px;
        
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 6px 5px 22px; /* Ajuste de relleno */
        
        box-shadow: 0 8px 25px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
    }

    /* INFO PRECIO */
    .fpc-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.1;
    }

    .fpc-label {
        font-size: 0.70rem; /* Texto un pelín más grande */
        text-transform: uppercase;
        color: #888;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .fpc-amount {
        /* PRECIO MÁS GRANDE */
        font-size: 1.10rem; 
        font-weight: 800;
        color: #2c3e50;
        white-space: nowrap;
    }
    
    .fpc-amount i {
        color: var(--brand-blue);
        font-size: 0.9rem;
        margin-right: 3px;
        transform: translateY(-1px);
    }

    /* BOTÓN WHATSAPP */
    .fpc-btn {
        background-color: #25D366;
        color: white;
        text-decoration: none;
        
        /* Altura calculada para encajar en la cápsula de 56px */
        height: 46px; 
        padding: 0 22px; /* Más ancho */
        border-radius: 40px;
        
        display: flex;
        align-items: center;
        gap: 8px;
        
        font-weight: 700;
        font-size: 0.95rem; /* Texto botón más grande */
        white-space: nowrap;
        box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3);
    }
    .fpc-btn i { font-size: 1.2rem; }
    
    /* Ajuste iPhone pequeño */
    @media (max-width: 360px) {
        .fpc-label { display: none; }
        .fpc-btn { padding: 0 15px; font-size: 0.85rem; }
        .float-price-capsule { padding-left: 15px; }
    }
}



















/* =========================================
   PÁGINA DETALLE PROGRAMA - DISEÑO PREMIUM
   ========================================= */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. LAYOUT PRINCIPAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-details {
    background: #f8f9fa;
}

.main-wrapper {
    max-width: 1400px;
    margin: 0 auto 80px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 50px;
    align-items: flex-start;
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. TARJETAS DE CONTENIDO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.content-section {
    background: white;
    padding: 25px 30px; /* Reducimos el relleno de 35px 40px a 25px 30px */
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    margin-bottom: 0 !important; /* Bloqueamos cualquier margen viejo que se estuviera sumando */
}

.content-section:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Títulos premium con icono */
.premium-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 3px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-title i {
    color: #00a8e8; /* ← Azul turquesa del logo */
    font-size: 1.3rem;
}

/* Subtítulos */
.premium-subtitle {
    display: block;
    font-weight: 700;
    color: #c02685; /* ← Magenta del logo */
    font-size: 1.1rem;
    margin: 20px 0 10px 0;
    padding-left: 15px;
    border-left: 4px solid #9bc53d; /* ← Verde del logo */
}

/* Texto justificado profesional */
.text-justify {
    text-align: justify;
    line-height: 1.8;
    color: #444;
    font-size: 1rem;
}

.text-justify p {
    margin-bottom: 15px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. SISTEMA "LEER MÁS" ANIMADO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.text-content-wrapper {
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.text-content-wrapper.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

.text-content-wrapper.expanded::after {
    display: none;
}

.btn-toggle-text {
    display: none;
    margin-top: 15px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e8edf2 100%);
    color: #00a8e8; /* ← Azul turquesa */
    border: 2px solid #e0e6ed;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

.btn-toggle-text:hover {
    background: linear-gradient(135deg, #00a8e8 0%, #0091cc 100%); /* ← Degradado turquesa */
    color: white;
    border-color: #00a8e8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 168, 232, 0.3);
}

.btn-toggle-text.active i {
    transform: rotate(180deg);
}

.btn-toggle-text i {
    transition: transform 0.3s ease;
    margin-left: 8px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. GRID 2 COLUMNAS (DIRIGIDO/METODOLOGÍA)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.premium-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

/* Caja destacada */
.box-highlight {
    background: linear-gradient(135deg, #f8fbff 0%, #e6f7ff 100%);
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid #00a8e8; /* ← Azul turquesa */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. SIDEBAR (PRECIO Y AYUDA)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sidebar-card {
    background: white;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 100px;
    border-top: 5px solid #c02685; /* ← Magenta del logo */
}

.price-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 25px;
    border-radius: 12px;
    margin: 20px 0;
    text-align: center;
    border: 2px dashed #dee2e6;
}

.price-tag {
    font-size: 2.5rem;
    font-weight: 800;
    color: #9bc53d; /* ← Verde del logo */
    display: block;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Botón secundario outline */
.btn-secondary-outline {
    background: white;
    color: #c02685; /* ← Magenta del logo */
    border: 2px solid #c02685;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-secondary-outline:hover {
    background: #c02685;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(192, 38, 133, 0.3);
}

/* Tarjeta de ayuda */
.sidebar-help {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d1 100%);
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid #f0c345;
}

.sidebar-help h4 {
    margin: 0 0 10px 0;
    color: #9a6c00;
    font-size: 1.1rem;
}

.sidebar-help p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}

.sidebar-help strong {
    color: #00a8e8; /* ← Azul turquesa del logo */
    font-weight: 700;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. PROGRAMAS RELACIONADOS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.related-programs {
    background: white;
    padding: 60px 0;
    border-top: 1px solid #e9ecef;
}

.container-generic {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.related-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.related-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #00a8e8 0%, #c02685 50%, #9bc53d 100%); /* ← Colores del logo */
    border-radius: 2px;
}

.card-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    height: 300px;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-img-wrapper img {
    transform: scale(1.1);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 168, 232, 0.95) 0%, rgba(192, 38, 133, 0.95) 100%); /* ← Turquesa a Magenta */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .card-overlay {
    opacity: 1;
}

.btn-card-hover {
    background: white;
    color: #c02685; /* ← Magenta */
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.card:hover .btn-card-hover {
    transform: translateY(0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. BARRA FLOTANTE MÓVIL (PREMIUM)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 12px 15px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-top: 3px solid #9bc53d; /* ← Verde del logo */
}

.float-price-capsule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.fpc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fpc-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.fpc-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: #9bc53d; /* ← Verde del logo */
    display: flex;
    align-items: center;
    gap: 8px;
}

.fpc-amount i {
    font-size: 1rem;
}

.fpc-btn {
    background: linear-gradient(135deg, #25D366 0%, #1ebe5d 100%);
    color: white !important;
    padding: 14px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.fpc-btn:active {
    transform: scale(0.95);
}

/* Flecha subir (aparece al scrollear hacia arriba) */
.float-arrow-btn {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00a8e8 0%, #c02685 100%); /* ← Turquesa a Magenta */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 5px 20px rgba(0, 168, 232, 0.4);
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.float-arrow-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.float-arrow-btn:active {
    transform: scale(0.9);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. RESPONSIVE (TABLETS Y MÓVILES)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 992px) {
    .main-wrapper {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 30px;
    }

    .sidebar-wrapper {
        order: 2;
    }

    .sidebar-card {
        position: static;
    }

    .premium-grid-2 {
        grid-template-columns: 1fr;
    }

    .mobile-bottom-bar {
        display: block; /* Mostrar en móvil */
    }

    .content-section {
        padding: 25px 20px;
    }

    .premium-title {
        font-size: 1.2rem;
    }

    .price-tag {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    .container-generic {
        padding: 0 15px;
    }

    .related-title {
        font-size: 1.5rem;
    }

    .programs-grid {
        grid-template-columns: 1fr;
    }

    .fpc-btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    .fpc-amount {
        font-size: 1.1rem;
    }

    

}





/* ============================================
   TOOLBAR MODERNO - FUNDACIÓN SOCIAL PEREA
   ============================================ */

.modern-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 25px 30px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
    border-radius: 16px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 75, 135, 0.08);
    border: 1px solid rgba(0, 75, 135, 0.1);
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.page-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #004b87 0%, #0066b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.btn-action {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

.btn-new {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.btn-manage {
    background: linear-gradient(135deg, #004b87 0%, #0066b3 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 75, 135, 0.3);
}

.btn-manage:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 75, 135, 0.4);
}

/* ============================================
   FILTROS Y BÚSQUEDA
   ============================================ */

.toolbar-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.select-wrapper,
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-left {
    position: absolute;
    left: 14px;
    color: #004b87;
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 2;
}

.form-control-modern {
    padding: 11px 40px 11px 40px;
    border: 2px solid rgba(0, 75, 135, 0.15);
    border-radius: 10px;
    font-size: 0.9rem;
    background: white;
    color: #333;
    transition: all 0.3s ease;
    outline: none;
    min-width: 180px;
}

.form-control-modern:focus {
    border-color: #004b87;
    box-shadow: 0 0 0 4px rgba(0, 75, 135, 0.1);
    background: #fff;
}

.select-wrapper select.form-control-modern {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 40px;
}

.select-arrow {
    position: absolute;
    right: 14px;
    color: #004b87;
    font-size: 0.75rem;
    pointer-events: none;
}

.search-wrapper {
    position: relative;
}

.search-wrapper input.form-control-modern {
    min-width: 260px;
    padding-right: 45px;
}

.btn-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1rem;
    padding: 5px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-clear:hover {
    color: #f44336;
    transform: scale(1.1);
}

/* Botón Limpiar Filtros */
.btn-clear-filters {
    padding: 10px 18px;
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.btn-clear-filters:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
}

.btn-clear-filters i {
    font-size: 0.9rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .modern-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toolbar-filters {
        width: 100%;
    }

    .search-wrapper input.form-control-modern {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .modern-toolbar {
        padding: 20px;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .toolbar-left {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 15px;
    }

    .action-buttons {
        width: 100%;
        flex-direction: column;
    }

    .btn-action {
        width: 100%;
        justify-content: center;
    }

    .toolbar-filters {
        flex-direction: column;
        width: 100%;
    }

    .select-wrapper,
    .search-wrapper {
        width: 100%;
    }

    .form-control-modern,
    .search-wrapper input.form-control-modern {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .modern-toolbar {
        padding: 15px;
        gap: 15px;
    }

    .page-title {
        font-size: 1.3rem;
    }

    .btn-action {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .form-control-modern {
        font-size: 0.85rem;
        padding: 10px 35px 10px 35px;
    }
}












/* =========================================
   ESTILOS DE PREGUNTAS FRECUENTES (FAQ PREMIUM)
   ========================================= */

/* 1. Definición de tus Colores de Marca */
:root {
    --perea-cyan: #00aeef;
    --perea-magenta: #ec008c;
    --perea-green: #8dc63f;
    --perea-yellow: #ffd100;
    --perea-dark: #0F172A;
}

/* 2. Hero Section (Título de la Página) */
/* Este estilo respeta tu header y se pone debajo */
.faq-page-header {
    background-color: var(--perea-dark);
    padding: 80px 20px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: -40px; /* Efecto de superposición */
}

/* Decoración de fondo con tus colores (Luces borrosas) */
.faq-page-header::before {
    content: '';
    position: absolute;
    top: -50%; left: -10%;
    width: 50%; height: 100%;
    background: radial-gradient(circle, rgba(0, 174, 239, 0.3) 0%, transparent 70%);
    filter: blur(60px);
}
.faq-page-header::after {
    content: '';
    position: absolute;
    bottom: -50%; right: -10%;
    width: 50%; height: 100%;
    background: radial-gradient(circle, rgba(236, 0, 140, 0.3) 0%, transparent 70%);
    filter: blur(60px);
}

.faq-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin: 0;
    position: relative;
    z-index: 2;
}

.faq-subtitle {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

/* 3. Contenedor Principal */
.faq-main-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 80px;
    position: relative;
    z-index: 5;
}

/* 4. Títulos de Categoría (Usando tus colores) */
.faq-category-title {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 50px 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Colores específicos por categoría */
.cat-cyan { color: var(--perea-cyan); }
.cat-magenta { color: var(--perea-magenta); }
.cat-green { color: var(--perea-green); }

/* Línea decorativa al lado del título */
.faq-category-title::after {
    content: '';
    flex-grow: 1;
    height: 2px;
    background: currentColor; /* Toma el color del texto */
    opacity: 0.2;
    border-radius: 2px;
}

/* 5. Tarjetas de Pregunta (Acordeón) */
.faq-card {
    background: white;
    border-radius: 16px;
    margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); /* Sombra suave inicial */
    border: 1px solid #f1f5f9;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: rgba(0, 174, 239, 0.3); /* Borde Cian al pasar el mouse */
}

.faq-card.active {
    border-left-width: 5px;
    border-left-style: solid;
    /* El color se define abajo por categoría */
}

.faq-header {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #334155;
    font-size: 1.05rem;
}

.faq-header i {
    color: #94a3b8;
    transition: transform 0.4s ease, color 0.3s;
    font-size: 0.9rem;
    background: #f8fafc;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}

.faq-card.active .faq-header {
    color: var(--perea-dark);
}

.faq-card.active .faq-header i {
    transform: rotate(180deg);
    color: white;
    /* El fondo del icono también cambiará según la categoría */
}



/* --- VARIACIÓN 1: MAGENTA (Tutoriales) --- */
.faq-card.magenta.active {
    border-left-color: var(--perea-magenta);
    box-shadow: 0 15px 40px rgba(236, 0, 140, 0.15);
}
.faq-card.magenta.active .faq-header i {
    background: var(--perea-magenta);
    box-shadow: 0 4px 10px rgba(236, 0, 140, 0.3);
}

/* --- VARIACIÓN 2: CIAN (Académico) --- */
.faq-card.cyan.active {
    border-left-color: var(--perea-cyan);
    box-shadow: 0 15px 40px rgba(0, 174, 239, 0.15);
}
.faq-card.cyan.active .faq-header i {
    background: var(--perea-cyan);
    box-shadow: 0 4px 10px rgba(0, 174, 239, 0.3);
}

/* --- VARIACIÓN 3: VERDE (Pagos) --- */
.faq-card.green.active {
    border-left-color: var(--perea-green);
    box-shadow: 0 15px 40px rgba(141, 198, 63, 0.15);
}
.faq-card.green.active .faq-header i {
    background: var(--perea-green);
    box-shadow: 0 4px 10px rgba(141, 198, 63, 0.3);
}

/* --- VARIACIÓN 4: AMARILLO (Por si agregas otra categoría) --- */
.faq-card.yellow.active {
    border-left-color: var(--perea-yellow);
    box-shadow: 0 15px 40px rgba(255, 209, 0, 0.15);
}
.faq-card.yellow.active .faq-header i {
    background: var(--perea-yellow);
    box-shadow: 0 4px 10px rgba(255, 209, 0, 0.3);
    color: #555; /* Texto oscuro para contraste en amarillo */
}

/* 6. Contenido de la Respuesta */
.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    background: #fff;
}

.faq-content-inner {
    padding: 0 25px 25px;
    color: #64748B;
    line-height: 1.7;
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
}

/* 7. Video Responsivo */
.faq-video-wrapper {
    margin-top: 20px;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.faq-video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* 8. Caja de Ayuda Final (Footer de FAQ) */
.faq-help-box {
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 40px;
    border-radius: 20px;
    border: 2px dashed #cbd5e1;
    margin-top: 60px;
}

.btn-whatsapp-faq {
    background: #25D366;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 15px;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
    transition: transform 0.2s;
}

.btn-whatsapp-faq:hover {
    transform: scale(1.05);
}

/* =========================================
   CORRECCIÓN RESPONSIVE PARA STATS (HERO)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Ajustar la altura del Hero para que el texto no se corte */
    .modality-hero {
        height: auto !important; /* Dejar que crezca según el texto */
        min-height: auto !important;
        padding-top: 120px; /* Espacio para el header */
        padding-bottom: 60px; /* Espacio abajo */
        text-align: center;
    }

    /* 2. Convertir los stats en una tarjeta oscura compacta */
    .hero-stats {
        background-color: #0F172A; /* Fondo Azul Oscuro (Mismo del Header) */
        border-radius: 15px;
        padding: 20px 10px;
        
        /* Centrado y ancho seguro */
        width: 90%; 
        margin: 30px auto 0; /* Un poco de aire arriba */
        
        /* Flexbox para mantenerlos alineados */
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap; /* Forzar una sola línea */
        
        /* Sombra fuerte para que resalte sobre el fondo */
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        border: 1px solid rgba(255,255,255,0.1);
    }

    /* 3. Ajustar tamaño de letra para que quepan los 3 */
    .hero-stats .stat-item strong {
        font-size: 1.3rem; /* Un poco más pequeño */
        display: block;
    }
    
    .hero-stats .stat-item span {
        font-size: 0.75rem; /* Texto descriptivo más pequeño */
        opacity: 0.8;
    }
    
    /* 4. Ajustar el separador vertical */
    .hero-stats .stat-separator {
        height: 30px; /* Más corto */
        width: 1px;
        background: rgba(255,255,255,0.2);
        margin: 0 5px;
    }
}



/* =========================================================
   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; }
    
    
}



/* =========================================
   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;
}




/* =================================================================
   💎 ESTILO PREMIUM: SUBMENÚ OFERTA ACADÉMICA (SOLUCIÓN FINAL)
   ================================================================= */

@media (min-width: 993px) {

    

    

    /* 2. LOS ITEMS (ENLACES) */
    .mobile-sublink {
        display: flex;
        align-items: center;
        gap: 18px; /* Espacio entre icono y texto */
        padding: 15px;
        border-radius: 15px;
        text-decoration: none;
        transition: all 0.3s ease;
        border-bottom: none !important; /* Quita líneas divisorias viejas */
        position: relative;
        overflow: hidden;
    }

    /* Efecto Hover en el Item */
    .mobile-sublink:hover {
        background: #f4f8fb; /* Gris azulado muy suave */
        transform: translateX(5px); /* Pequeño desplazamiento a la derecha */
    }

    /* 3. LOS ICONOS (EL TOQUE DE COLOR) */
    .sub-icon {
        /* Convertimos el <i> en una caja cuadrada */
        width: 50px; 
        height: 50px;
        border-radius: 14px; /* Bordes redondeados modernos */
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        font-size: 1.4rem;
        color: white;
        box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* Sombra del icono */
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote */
        margin-right: 0 !important;
    }

    /* Gradientes Específicos (Cyan y Magenta) */
    .sub-icon.cyan { 
        background: linear-gradient(135deg, #00aeef 0%, #0077a3 100%); 
    }
    .sub-icon.magenta { 
        background: linear-gradient(135deg, #ec008c 0%, #a80063 100%); 
    }

    /* Animación del icono al pasar el mouse sobre el enlace */
    .mobile-sublink:hover .sub-icon {
        transform: scale(1.1) rotate(-5deg); /* Crece y gira un poco */
    }

    /* 4. LOS TEXTOS */
    .sub-text {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
    }

    .sub-text strong {
        font-size: 1rem;
        color: #1e293b; /* Gris oscuro elegante */
        font-weight: 800;
        letter-spacing: -0.5px;
        font-family: 'Segoe UI', sans-serif;
    }

    .sub-text small {
        font-size: 0.75rem;
        color: #64748b; /* Gris medio */
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* Cambio de color del título al hover */
    .mobile-sublink:hover .sub-text strong {
        color: #00aeef;
    }

    /* 5. DIVISOR ELEGANTE */
    .menu-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
        margin: 5px 0;
    }
    
    /* 6. FLECHITA DEL MENÚ PRINCIPAL */
    .arrow-icon {
        transition: transform 0.3s ease;
        font-size: 0.8rem;
        opacity: 0.6;
    }
    .nav-accordion-item:hover .arrow-icon {
        transform: rotate(180deg);
        opacity: 1;
        color: #00aeef;
    }
}




/* =================================================================
   🚑 PARCHE DE EMERGENCIA: ARREGLO MÓVIL (SUPERPOSICIÓN Y FLECHA)
   ================================================================= */

@media (max-width: 992px) {

    /* 1. SOLUCIÓN SUPERPOSICIÓN: Que el menú empuje el contenido */
    .accordion-content {
        position: static !important; /* CRUCIAL: Deja de flotar */
        transform: none !important;  /* Quita la animación de subida del PC */
        
        width: 100% !important;      /* Ocupa todo el ancho */
        box-shadow: none !important; /* Quita la sombra 3D */
        border: none !important;     /* Quita el borde */
        background: #f4f6f9 !important; /* Fondo gris claro para diferenciar */
        padding: 0 !important;
        
        /* Sistema de ocultar/mostrar simple */
        display: none; 
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Cuando el JS le pone la clase .show */
    .accordion-content.show {
        display: block !important;
    }

    /* 2. SOLUCIÓN FLECHA: Alinear a la derecha */
    .accordion-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* ESTO MANDA LA FLECHA AL FINAL */
        width: 100% !important;
        padding-right: 20px !important; /* Espacio para que no pegue al borde */
    }

    /* Aseguramos que el texto ocupe su espacio */
    .accordion-trigger .nav-link {
        flex-grow: 1; /* Ocupa el espacio disponible */
        padding: 15px 0 !important; /* Ajuste de clic */
    }

    /* 3. LIMPIEZA DE LOS ITEMS INTERNOS EN MÓVIL */
    .mobile-sublink {
        padding: 15px 25px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        background: transparent !important;
    }

    /* Ajustar los iconos grandes del PC para que se vean bien en móvil */
    .sub-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
        margin-right: 15px !important;
        box-shadow: none !important; /* Quitar sombra en móvil */
    }
    
    /* Quitar divisor en móvil */
    .menu-divider { display: none !important; }
}





/* =================================================================
   🚨 ULTIMATE FIX: SOLUCIÓN DE SUPERPOSICIÓN (FORCE BLOCK)
   ================================================================= */

@media (max-width: 992px) {

    /* 1. FORZAR AL CONTENEDOR 'LI' A CRECER */
    /* Apuntamos directo al ID para tener máxima prioridad */
    #mobileMenuWrapper {
        display: block !important;       /* Deja de ser Flex */
        height: auto !important;         /* Altura automática (crece con el contenido) */
        min-height: auto !important;     /* Resetea alturas mínimas */
        flex: none !important;           /* Desactiva comportamiento flex item */
        overflow: visible !important;    /* Permite ver si algo se sale (por si acaso) */
        margin-bottom: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* 2. ARREGLAR EL ENLACE PRINCIPAL (DISPARADOR) */
    #mobileMenuWrapper .accordion-trigger {
        display: flex !important;
        width: 100% !important;
        padding: 20px 25px !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: auto !important; /* Importante para que no herede altura fija */
    }

    /* 3. ARREGLAR EL CONTENIDO DESPLEGABLE (SUBMENÚ) */
    #mobileSubmenu {
        /* ESTO ES LO QUE EMPUJA EL CONTENIDO: */
        position: relative !important;   /* Relativo al flujo normal, NO absolute */
        top: auto !important;
        left: auto !important;
        transform: none !important;
        
        /* Dimensiones */
        width: 100% !important;
        height: auto !important;         /* Altura automática */
        max-height: 0;                   /* Truco para animación CSS pura (opcional) */
        
        /* Estilos */
        background-color: #f8f9fa !important;
        box-shadow: inset 0 5px 10px rgba(0,0,0,0.03) !important;
        border-top: 1px solid #eee !important;
        
        /* Visibilidad */
        display: none; /* Oculto por defecto */
        visibility: visible !important; /* Resetea visibilidad heredada */
        opacity: 1 !important;
    }

    /* 4. CUANDO SE ABRE (CLASE .show) */
    #mobileSubmenu.show {
        display: block !important;       /* Aparece y ocupa espacio físico */
        max-height: 999px !important;    /* Permite crecer */
        padding-bottom: 15px !important;
    }

    /* 5. ARREGLAR LOS ENLACES INTERNOS */
    #mobileSubmenu .mobile-sublink {
        display: flex !important;
        padding: 15px 30px !important;
        position: static !important; /* Asegura que no floten */
    }
}


/* =================================================================
   💎 ARREGLO DEFINITIVO: MENÚ MÓVIL, FLECHAS Y CAMPUS
   ================================================================= */

@media (max-width: 992px) {

    /* 1. RESETEAR ENLACES COMUNES (Inicio, Contacto...) */
    /* Quitamos flechas y alineamos a la izquierda limpiamente */
    .nav-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Texto a la izquierda */
        padding: 18px 25px !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f1f5f9 !important; /* Línea suave */
        font-weight: 600 !important;
        color: #334155 !important;
    }

    /* Aseguramos que NO tengan flechas generadas por CSS */
    .nav-menu li a::after {
        content: none !important; 
        display: none !important;
    }

    /* 2. ESTILO ESPECÍFICO PARA "OFERTA ACADÉMICA" */
    /* Este sí necesita la flecha a la derecha */
    .accordion-trigger {
        justify-content: space-between !important; /* Texto izq <-> Flecha der */
        width: 100% !important;
        cursor: pointer;
    }

    /* La flecha (Icono FontAwesome) */
    .accordion-trigger .arrow-icon {
        font-size: 1rem !important;
        color: #00aeef !important; /* Azul cyan */
        transition: transform 0.3s ease !important; /* Suavidad al girar */
        margin-left: auto !important; /* Empuja a la derecha si es necesario */
    }

    /* 3. ANIMACIÓN DE ROTACIÓN (Cuando se abre) */
    /* El JS agrega la clase 'active' al padre, y rotamos el icono */
    .nav-accordion-item.active .arrow-icon {
        transform: rotate(180deg) !important;
    }
    
    /* Cambiar color del texto al estar abierto */
    .nav-accordion-item.active .nav-link {
        color: #00aeef !important;
    }

    /* 4. REPARACIÓN TOTAL DEL BOTÓN CAMPUS VIRTUAL */
    .mobile-only-btn {
        border-bottom: none !important; /* Sin línea divisoria abajo */
        padding: 20px 25px 30px !important;
    }

    .btn-campus-mobile {
        /* Centrado Absoluto */
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;
        
        /* Estilo visual */
        background: linear-gradient(135deg, #004b87 0%, #0077a3 100%) !important;
        color: white !important;
        border-radius: 50px !important;
        box-shadow: 0 8px 20px rgba(0, 75, 135, 0.3) !important;
        padding: 15px 0 !important;
        
        /* Resetear estilos heredados */
        border: none !important;
        width: 100% !important;
    }

    /* Asegurar que el icono y texto del botón estén bien */
    .btn-campus-mobile i {
        margin-right: 10px !important;
        color: white !important;
    }
    
    /* Quitar cualquier flecha extra del botón campus */
    .btn-campus-mobile::after {
        display: none !important;
    }
    
    /* Efecto al presionar botón campus */
    .btn-campus-mobile:active {
        transform: scale(0.98);
    }
}



/* =================================================================
   🎓 BOTÓN CAMPUS VIRTUAL: DISEÑO PREMIUM Y CENTRADO PERFECTO
   ================================================================= */

@media (max-width: 992px) {

    /* 1. LIMPIEZA DEL CONTENEDOR (LI) */
    /* Quitamos bordes y damos espacio para que el botón respire */
    .mobile-only-btn {
        display: block !important;
        width: 100% !important;
        padding: 20px 25px 30px 25px !important; /* Espacio alrededor */
        margin: 0 !important;
        border-bottom: none !important; /* Sin línea divisoria abajo */
        background: transparent !important;
    }

    /* 2. EL BOTÓN (DISEÑO DE LUJO) */
    .btn-campus-mobile {
        /* FUERZA BRUTA DE ALINEACIÓN */
        display: flex !important;
        justify-content: center !important; /* ESTO CENTRA HORIZONTALMENTE */
        align-items: center !important;     /* ESTO CENTRA VERTICALMENTE */
        gap: 12px !important;               /* Espacio perfecto entre icono y texto */
        
        /* DIMENSIONES */
        width: 100% !important;
        padding: 16px 0 !important;         /* Altura del botón */
        
        /* ESTÉTICA PREMIUM (GRADIENTE AZUL CORPORATIVO) */
        background: linear-gradient(135deg, #004b87 0%, #00aeef 100%) !important;
        color: #ffffff !important;          /* Texto Blanco Puro */
        border-radius: 50px !important;     /* Completamente redondo */
        border: 1px solid rgba(255,255,255,0.2) !important; /* Borde sutil de brillo */
        
        /* SOMBRA DE PROFUNDIDAD */
        box-shadow: 0 10px 25px rgba(0, 75, 135, 0.3) !important;
        
        /* TIPOGRAFÍA */
        font-family: 'Poppins', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    /* 3. ICONO (BIRRETE) */
    .btn-campus-mobile i {
        font-size: 1.3rem !important;
        margin: 0 !important; /* Quitamos márgenes viejos */
        color: #ffffff !important;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Sombra al icono */
    }

    /* 4. ELIMINAR CUALQUIER FLECHA O CONTENIDO EXTRA */
    /* Esto es vital para que quede centrado y no se vaya a un lado */
    .btn-campus-mobile::after {
        content: none !important;
        display: none !important;
    }

    /* 5. EFECTO AL PRESIONAR (FEEDBACK) */
    .btn-campus-mobile:active {
        transform: scale(0.96) !important; /* Se encoge un poquito */
        box-shadow: 0 4px 10px rgba(0, 75, 135, 0.2) !important;
    }
}



/* =================================================================
   📱 ARREGLO HERO MÓVIL: COMPACTO Y PROPORCIONADO
   ================================================================= */

@media (max-width: 768px) {

    /* 1. EL CONTENEDOR PRINCIPAL (Quitar lo estirado) */
    .search-hero {
        /* Altura controlada: Que se adapte al contenido, no forzar altura gigante */
        min-height: auto !important; 
        height: auto !important;
        
        /* Reducir drásticamente el relleno (padding) */
        /* Antes tenías ~150px, ahora lo bajamos para que suba el contenido */
        padding: 110px 20px 60px 20px !important; 
        
        /* Centrado total */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* Asegurar que la imagen de fondo no se deforme */
        background-size: cover !important;
        background-position: center center !important;
    }

    /* 2. TÍTULO "EDUCACIÓN QUE TRANSFORMA..." (Ajuste de tamaño) */
    /* Asumo que usas h1 o una clase similar, ajustamos ambas por seguridad */
    .search-hero h1,
    .hero-title {
        font-size: 2.4rem !important; /* Más pequeño para que no ocupe toda la pantalla */
        line-height: 1.1 !important;  /* Líneas más pegadas */
        margin-bottom: 15px !important;
    }

    /* 3. SUBTÍTULO "BIENVENIDOS A LA FSP" */
    .search-hero h2,
    .hero-subtitle,
    .badge-category {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
        letter-spacing: 1px !important;
    }

    /* 4. TEXTO DE PÁRRAFO (Descripción) */
    .search-hero p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        margin-bottom: 30px !important; /* Espacio antes de los botones */
        padding: 0 10px !important; /* Un poco de aire a los lados */
    }

    /* 5. BOTONES (MATRICÚLATE / VER PROGRAMAS) */
    /* Hacemos que ocupen el ancho completo para ser fáciles de tocar */
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important; /* Uno debajo del otro */
        gap: 15px !important; /* Espacio entre botones */
        width: 100% !important;
        max-width: 350px !important; /* Que no se estiren al infinito */
    }

    .btn-hero-primary, 
    .btn-hero-secondary {
        width: 100% !important; /* Botones anchos */
        padding: 14px 0 !important; /* Altura cómoda para el dedo */
        font-size: 1rem !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}



/* =================================================================
   📱 ARREGLO FINAL HERO (CLASES REALES): .hero-btns
   ================================================================= */

@media (max-width: 768px) {

    /* 1. EL CONTENEDOR (Usando tu clase real .hero-btns) */
    .hero-btns {
        display: flex !important;
        flex-direction: column !important; /* Columna vertical */
        gap: 12px !important;              /* Espacio pequeño entre botones */
        width: 100% !important;
        max-width: 320px !important;       /* Ancho controlado (tipo App) */
        margin: 10px auto 0 auto !important; /* Centrado y separado del texto */
        
    }

    /* 2. AMBOS BOTONES (Simetría Total) */
    .btn-mega-glow, 
    .btn-programs {
        width: 100% !important;       /* Llenan el contenedor */
        padding: 15px 0 !important;   /* Misma altura exacta */
        margin: 0 !important;         /* Sin márgenes externos */
        
        /* Centrado del texto */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        
        /* Estética base compartida */
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    /* 3. AJUSTE VISUAL PARA EL BOTÓN "VER PROGRAMAS" */
    /* Para que se vea igual de robusto que el de matricularse */
    .btn-programs {
        background-color: transparent !important;
        border: 2px solid #ffffff !important; /* Borde blanco sólido */
        color: #ffffff !important;
        box-shadow: none !important; /* Sin brillo para diferenciar */
    }
    
    /* Aseguramos que el botón brillante mantenga su estilo */
    .btn-mega-glow {
        border: none !important; /* El principal no lleva borde, lleva fondo */
    }
}



/* =================================================================
   💎 SUBMENÚ DESKTOP (SOLUCIÓN DEFINITIVA Y LIMPIA)
   ================================================================= */
@media (min-width: 993px) {
    
    /* 1. Asegurar que el botón padre sea el ancla */
    .nav-accordion-item {
        position: relative;
    }

    /* 2. La Tarjeta del Submenú (Estilo Glassmorphism) */
    .accordion-content {
        position: absolute;
        top: 100%;
        left: 50%; /* Centrado perfecto */
        
        /* Empieza un poco más abajo para el efecto de subir */
        transform: translateX(-50%) translateY(25px); 
        
        width: 340px; 
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        padding: 15px;

        /* MAGIA: Lo ocultamos con Opacidad, NO con display:none */
        opacity: 0;
        visibility: hidden;
        display: block !important; 
        z-index: 10000;
        
        /* Física de animación súper suave */
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* 3. Triángulo decorativo superior (Estilo Apple) */
    .accordion-content::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);
    }

    /* 4. Mostrar al pasar el mouse (Hover) */
    .nav-accordion-item:hover .accordion-content {
        opacity: 1;
        visibility: visible;
        /* Sube a su posición final y se queda quieto */
        transform: translateX(-50%) translateY(10px); 
    }
}