:root {
            --bg-void: #050508;
            --surface-glass: rgba(255, 255, 255, 0.02);
            --surface-glass-hover: rgba(255, 255, 255, 0.05);
            --border-light: rgba(255, 255, 255, 0.06);
            --border-highlight: rgba(255, 255, 255, 0.15);
            
            /* Colores Institucionales y de Acento */
            --accent-red: #DE0A26;
            --accent-orange: #FF5100;
            --accent-emerald: #10b981; 
            --accent-indigo: #6366f1;  
            --accent-cyan: #06b6d4;
            
            --text-primary: #ffffff;
            --text-secondary: #94a3b8;
        }

        body {
            background-color: var(--bg-void);
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6, .font-display {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        /* ==========================================================================
           2. UTILIDADES Y CLASES DE ESTRUCTURA (REEMPLAZO DE CSS INLINE)
           ========================================================================== */
        .min-h-90vh { min-height: 90vh; }
        .w-85 { width: 85%; }
        .w-60 { width: 60%; }
        .w-45 { width: 45%; }
        
        .text-xs { font-size: 0.75rem; }
        .text-sm-spaced { font-size: 0.8rem; letter-spacing: 1px; }
        .tracking-wider { letter-spacing: 1.5px; }
        .line-height-lg { line-height: 1.8; }
        .max-w-90 { max-width: 90%; }
        
        /* ==========================================================================
           3. EFECTOS ESPECIALES Y DEGRADADOS (INCLUYE SOLICITUD DE CAPTURA)
           ========================================================================== */
        /* Fondo Aurora */
        .aurora-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background: var(--bg-void); }
        .aurora-blob { position: absolute; filter: blur(140px); opacity: 0.35; border-radius: 50%; animation: aurora-drift 25s infinite alternate ease-in-out; }
        .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: rgba(99, 102, 241, 0.15); }
        .blob-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: rgba(222, 10, 38, 0.1); animation-delay: -5s; }
        .blob-3 { top: 40%; left: 40%; width: 40vw; height: 40vw; background: rgba(6, 182, 212, 0.1); animation-delay: -10s; }

        @keyframes aurora-drift {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(3%, 5%) scale(1.05); }
            100% { transform: translate(-3%, 8%) scale(0.95); }
        }

        /* Título Hero y Degradado Institucional (Captura 1 y 2) */
        .hero-title {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            letter-spacing: -1.5px;
            line-height: 1.1;
        }
        
        .text-gradient-career {
            background: linear-gradient(135deg, var(--accent-red), var(--accent-orange));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 900;
        }

        /* Línea Decorativa para Títulos (Captura LINEA_TITULO.PNG) */
        .title-with-line {
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .title-with-line::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 70px;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-red), var(--accent-orange));
            border-radius: 4px;
        }
        .title-with-line.center-line::after {
            left: 50%;
            transform: translateX(-50%);
        }

        /* ==========================================================================
        4. COMPONENTES VISUALES (HERO & WIDGETS - CORREGIDO)
        ========================================================================== */
        .visual-stage { 
            position: relative; 
            width: 100%; 
            padding: 2rem 0; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
        }

        .image-core { 
            position: relative; 
            width: 85%; 
            aspect-ratio: 4/5; 
            max-height: 600px; 
            border-radius: 32px; 
            overflow: hidden; 
            border: 1px solid var(--border-highlight); 
            box-shadow: 0 40px 80px rgba(0,0,0,0.8); 
            z-index: 2; /* Z-index base de la imagen */
        }
        .image-core img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
        .visual-stage:hover .image-core img { transform: scale(1.03); }

        /* WIDGETS FLOTANTES - Z-INDEX ALTO PARA QUE SE VEAN */
        .ui-widget { 
            position: absolute; 
            background: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(5, 5, 8, 0.95));
            backdrop-filter: blur(20px); 
            -webkit-backdrop-filter: blur(20px); 
            border: 1px solid rgba(255, 255, 255, 0.05); 
            border-top: 1px solid rgba(255, 255, 255, 0.2); 
            border-radius: 20px; 
            padding: 1.2rem; 
            z-index: 10; /* ESENCIAL: Por encima de la imagen */
            box-shadow: 0 30px 60px rgba(0,0,0,0.8); 
        }

        .widget-title { top: 5%; left: -5%; min-width: 260px; animation: float-slow 7s ease-in-out infinite; }
        .widget-mention { bottom: 5%; right: -5%; min-width: 260px; animation: float-slow 8s ease-in-out infinite reverse; }

        /* Efectos de Resplandor de Iconos */
        .icon-glow-gold { width: 45px; height: 45px; color: #fbbf24; background: rgba(219, 229, 231, 0.1); border: 1px solid rgba(199, 226, 231, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
        .icon-glow-red { width: 45px; height: 45px; color: var(--accent-red); background: rgba(219, 229, 231, 0.1); border: 1px solid rgba(199, 226, 231, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center;}

        @keyframes float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }

        /* Ajuste Responsive Seguro */
        @media (max-width: 991.98px) {
            .image-core { aspect-ratio: 1/1; width: 95%; max-height: 400px; }
            /* Metemos los widgets un poco hacia adentro para que no rompan el scroll horizontal */
            .widget-title { top: -10px; left: 10px; min-width: 220px; padding: 1rem; }
            .widget-mention { bottom: -10px; right: 10px; min-width: 220px; padding: 1rem; }
        }

        /* ==========================================================================
           5. MARQUEE INFINITO Y MÓDULOS ACADÉMICOS
           ========================================================================== */
        .marquee-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); font-weight: 700; text-align: center; margin-bottom: 1.2rem; opacity: 0.7; }
        .scrolling-tech-wrapper { background: rgba(255, 255, 255, 0.015); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 1.5rem 0; overflow: hidden; display: flex; white-space: nowrap; }
        .scrolling-tech-content { display: inline-flex; gap: 4rem; animation: scroll-left 35s linear infinite; }
        .scrolling-tech-content span { font-size: 1.1rem; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; }
        @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* Etiquetas de Subsección */
        .section-badge { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--accent-red); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; display: inline-block; }
        
        .minedu-badge { background: rgba(255,255,255,0.02); border: 1px solid var(--border-light); }
        .minedu-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
        .minedu-text { font-size: 0.85rem; }

        .glass-panel { background: var(--surface-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: 24px; padding: 2.5rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; position: relative; overflow: hidden; }
        .glass-panel:hover { background: var(--surface-glass-hover); border-color: var(--border-highlight); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
        .watermark-number { position: absolute; bottom: -30px; right: -10px; font-size: 14rem; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, 0.015); z-index: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; pointer-events: none; }
        .glass-panel:hover .watermark-number { transform: scale(1.05) translateY(-10px); color: rgba(255, 255, 255, 0.04); }
        .panel-content { position: relative; z-index: 1; }
        .icon-box-solid { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

        /* Colores de cajas de iconos */
        .icon-bg-red { color: var(--accent-red); background: rgba(222, 10, 38, 0.1); border: 1px solid rgba(222, 10, 38, 0.2); }
        .icon-bg-yellow { color: #eab308; background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.2); }
        .icon-bg-cyan { color: var(--accent-cyan); background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.2); }

        /* ==========================================================================
           6. ¿DÓNDE VAS A TRABAJAR?
           ========================================================================== */
        .work-card { background: rgba(10, 10, 15, 0.4); border: 1px solid var(--border-light); border-radius: 20px; padding: 2rem; height: 100%; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
        .work-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; }
        .work-card:hover { border-color: var(--card-glow-color, var(--border-highlight)); transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); }
        .work-card:hover::before { opacity: 1; }
        
        .work-icon-wrapper { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border-light); transition: all 0.4s ease; }
        .work-card:hover .work-icon-wrapper { background: var(--card-glow-color-transparent); border-color: var(--card-glow-color); color: #fff !important; transform: scale(1.05) rotate(3deg); }

        /* ==========================================================================
           7. CAROUSEL FULL-BLEED
           ========================================================================== */
        .carousel-full-bleed { background: linear-gradient(90deg, #07070a 0%, #0c0d14 100%); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); position: relative; overflow: hidden; }
        
        .carousel-visual-backdrop { background-size: cover; background-position: center; height: 100%; min-height: 550px; position: relative; }
        .carousel-visual-backdrop::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 50%, #07070a 100%); }
        
        /* Fondos específicos del Carousel */
        .slide-bg-1 { background-image: linear-gradient(rgba(5,5,8,0.2), rgba(5,5,8,0.5)), url('https://images.unsplash.com/photo-1531482615713-2afd69097998?q=80&w=1200&auto=format&fit=crop'); }
        .slide-bg-2 { background-image: linear-gradient(rgba(5,5,8,0.2), rgba(5,5,8,0.5)), url('../img/benefit/benefit-1.jpg'); }
        .slide-bg-3 { background-image: linear-gradient(rgba(5,5,8,0.2), rgba(5,5,8,0.5)), url('https://images.unsplash.com/photo-1515187029135-18ee286d815b?q=80&w=1200&auto=format&fit=crop'); }

        .slide-content-box { max-width: 620px; }
        
        .carousel-control-btn { width: 50px; height: 50px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); }

        @media (max-width: 767.98px) {
            .carousel-visual-backdrop { min-height: 250px; }
            .carousel-visual-backdrop::after { background: linear-gradient(180deg, transparent 0%, #07070a 100%); }
        }

        /* ==========================================================================
           8. HUD INVERSIÓN (REPLICA DE CAPTURA)
           ========================================================================== */
        .glass-panel-hud { background: linear-gradient(135deg, rgba(13, 14, 22, 0.7) 0%, rgba(7, 8, 14, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; }
        .badge-convocatoria { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; padding: 0.5rem 1.5rem; border-radius: 50px; }
        .doc-required-box { background: rgba(16, 185, 129, 0.02); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 12px; padding: 1.25rem; }
        
        /* ==========================================================================
           9. ACORDEÓN 
           ========================================================================== */
        .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--border-light); --bs-accordion-btn-color: var(--text-primary); --bs-accordion-btn-bg: transparent; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-color: var(--accent-red); --bs-accordion-active-bg: rgba(255,255,255,0.01); }
        .accordion-bg .accordion-item { border: none; border-bottom: 1px solid var(--border-light); background: transparent; }
        .accordion-bg .accordion-button { font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; padding: 1.8rem 0; font-size: 1.15rem; }
        .accordion-bg .accordion-button:not(.collapsed) { box-shadow: none; }
        .accordion-bg .accordion-body { padding: 0 0 1.8rem 0; color: var(--text-secondary); line-height: 1.7; }
        .accordion-bg .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); }

        /* ==========================================================================
           10. BOTONES
           ========================================================================== */
        .btn-fintech-primary { background: var(--text-primary); color: var(--bg-void); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; padding: 1.1rem 2.5rem; border-radius: 14px; border: none; display: inline-flex; align-items: center; gap: 12px; transition: all 0.3s ease; text-decoration: none; }
        .btn-fintech-primary:hover { transform: scale(1.02); box-shadow: 0 0 30px rgba(255,255,255,0.25); background: #f1f5f9; color: #000; }

        .btn-fintech-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-highlight); padding: 1rem 2rem; border-radius: 12px; font-weight: 600; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
        .btn-fintech-outline:hover { background: rgba(255,255,255,0.05); border-color: var(--text-primary); color: var(--text-primary); }

        .btn-hud-action { background: #ffffff; color: #050508; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; padding: 1.1rem 2rem; border-radius: 12px; border: none; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
        .btn-hud-action:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15); }