:root {
            /* PALETA DE COLORES ESPECIFICADA */
            --brand-red-light: #83181e;
            --brand-red-medium: #ad1e1e;
            --brand-red-dark: #d22523;
            --brand-blue-deep: #1f2548;
            --brand-blue-exec: #1d3c7b;
            
            /* ASIGNACIÓN DE INTERFAZ */
            --bg-dark: #0c0f1d;
            --bg-card: var(--brand-blue-deep);
            --bg-card-hover: var(--brand-blue-exec);
            --accent-color: var(--brand-red-light);
            --accent-hover: var(--brand-red-medium);
            --text-light: #ffffff;
            --text-muted: #a3b1cc;
            --text-dark: #1f2548;
            --text-dark-muted: #5c6b8c;
            --border-color: rgba(255, 255, 255, 0.06);
            --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* RESET GENERAL */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
        html { scroll-behavior: smooth; }
        body { background-color: var(--bg-dark); color: var(--text-light); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

        /* UTILIDADES DE TEXTO */
        .highlight-accent { color: var(--accent-color); }
        .text-uppercase { text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; opacity: 0.6; }

        /* CABECERA (MINIMALISTA E IDÉNTICA A LA CAPTURA) */
        header {
            width: 100%; padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center;
            position: absolute; top: 0; left: 0; z-index: 1000; background: linear-gradient(to bottom, rgba(12,15,29,0.9), transparent);
        }
        .brand-box { display: flex; align-items: center; gap: 1rem; }
        .logo-box { background: var(--brand-red-medium); color: var(--text-light); font-weight: 900; padding: 0.6rem 0.8rem; border-radius: 4px; font-size: 1.1rem; }
        .logo-box img {  width: auto;    /* Ajusta este valor si quieres el logo más chico o grande */height: 45px; object-fit: contain; }
        .logo-text h1 { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1.1; }
        .logo-text span { font-size: 0.65rem; color: var(--brand-red-light); text-transform: uppercase; font-weight: 700; letter-spacing: 2px; }
        
        .nav-links { display: flex; gap: 2.5rem; list-style: none; }
        .nav-links a { color: var(--text-light); text-decoration: none; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; transition: var(--transition); }
        .nav-links a:hover { opacity: 1; color: var(--brand-red-light); }
        
        .badge-live { border: 1px solid rgba(255,255,255,0.15); padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.02); }
        .badge-live::before { content: ''; width: 6px; height: 6px; background-color: var(--brand-red-light); border-radius: 50%; display: inline-block; }

        /* HERO - DISTRIBUCIÓN INSPIRADA EN TU CAPTURA DE PANTALLA */
        .hero-section { min-height: 100vh; display: flex; align-items: center; padding: 140px 5% 60px 5%; position: relative; background: radial-gradient(circle at top right, rgba(29, 60, 123, 0.15), transparent 60%); }
        .hero-grid-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; width: 100%; max-width: 1400px; margin: 0 auto; gap: 4rem; align-items: center; }
        
        .hero-content .subtitle-line { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; color: var(--brand-red-light); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 3px; }
        .hero-content .subtitle-line::before { content: ''; width: 30px; height: 1px; background-color: var(--brand-red-light); }
        
        .hero-content h2 { font-size: 5.5rem; font-weight: 900; line-height: 0.95; letter-spacing: -3px; margin-bottom: 2rem; text-transform: uppercase; color: var(--text-light); }
        .hero-content h2 span { display: block; }
        .hero-content p { color: var(--text-muted); font-size: 1.1rem; max-width: 500px; margin-bottom: 3rem; font-weight: 400; line-height: 1.6; }
        
        /* Indicador Horario del Hero */
        .hero-time-indicator { display: inline-flex; align-items: center; gap: 1.5rem; border: 1px solid var(--border-color); padding: 0.8rem 1.5rem; border-radius: 8px; background: rgba(255,255,255,0.01); }
        .hero-time-indicator span { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
        .hero-time-indicator .time-dot { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
        .hero-time-indicator .time-dot::after { content: ''; width: 6px; height: 6px; background-color: var(--brand-red-light); border-radius: 50%; }

        /* Rombo Flotante de la derecha */
        .hero-graphic-box { display: flex; justify-content: center; align-items: center; position: relative; }
        .diamond-card { width: 320px; height: 320px; border: 1px solid rgba(255,255,255,0.08); transform: rotate(45deg); display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, rgba(29, 60, 123, 0.2) 0%, rgba(31, 37, 72, 0.05) 100%); position: relative; }
        .diamond-card-inner { transform: rotate(-45deg); text-align: center; width: 100%; padding: 2rem; }
        .diamond-card-inner .label { font-size: 0.75rem; text-transform: uppercase; color: var(--brand-red-light); font-weight: 700; letter-spacing: 2px; margin-bottom: 0.5rem; display: block; }
        .diamond-card-inner h3 { font-size: 2rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--text-light); }
        .diamond-card-inner p { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
        
        /* Flecha de Scroll Absoluta Inferior */
        .scroll-arrow-anchor { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); color: var(--text-light); opacity: 0.3; animation: stackBounce 2s infinite; }
        .scroll-arrow-anchor svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

        /* SECCIÓN LICENCIATURAS ("ELIGE TU CAMINO") */
        .careers-section { padding: 140px 5%; border-top: 1px solid var(--border-color); background: linear-gradient(to bottom, var(--bg-dark), #121626); }
        .section-max-container { max-width: 1400px; margin: 0 auto; }
        .careers-section h2 { font-size: 3.5rem; font-weight: 900; letter-spacing: -1px; margin-bottom: 4rem; text-transform: uppercase; }
        
        .careers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
        .career-card { background-color: var(--bg-card); border-radius: 4px; overflow: hidden; height: 540px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem 2.5rem; border: 1px solid var(--border-color); text-decoration: none; transition: var(--transition); }
        .career-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 40%, var(--brand-blue-deep) 90%); z-index: 1; transition: var(--transition); }
        .career-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.25; transition: var(--transition); }
        
        /* Efectos Hover de Tarjetas */
        .career-card:hover { transform: translateY(-10px); border-color: var(--brand-red-light); background-color: var(--brand-blue-exec); }
        .career-card:hover img { opacity: 0.4; transform: scale(1.05); }
        .career-card:hover::before { background: linear-gradient(to bottom, transparent 20%, rgba(210,37,35,0.1) 60%, var(--brand-blue-exec) 95%); }
        
        .card-body-content { position: relative; z-index: 2; }
        .card-body-content .icon-box { margin-bottom: 1.5rem; color: var(--brand-red-light); }
        .card-body-content h3 { font-size: 2.2rem; font-weight: 800; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--text-light); }
        .card-body-content span { font-size: 0.7rem; text-transform: uppercase; color: var(--brand-red-light); font-weight: 700; letter-spacing: 2px; display: block; margin-bottom: 1.5rem; }
        
        .btn-program-trigger { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.15); padding: 0.8rem 1.8rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); background: rgba(255,255,255,0.02); transition: var(--transition); }
        .career-card:hover .btn-program-trigger { background: var(--brand-red-medium); border-color: var(--brand-red-medium); }

        /* SECCIÓN VALORES Y PILARES - TARJETAS MÁS COMPACTAS */
        .pillars-section { background-color: #ffffff; color: var(--text-dark); padding: 80px 5%; } /* Reduje padding top/bottom */
        .pillars-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; max-width: 1400px; margin: 0 auto; gap: 3rem; }

        .pillars-sticky-intro .tag-adn { display: block; color: var(--text-dark-muted); text-transform: uppercase; font-weight: 700; font-size: 0.8rem; letter-spacing: 4px; margin-bottom: 0.5em; }
        .pillars-sticky-intro h2 { font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -2px; text-transform: uppercase; margin-bottom: 1rem; color: var(--brand-blue-deep); }
        .pillars-sticky-intro p { color: var(--text-dark-muted); font-size: 1rem; line-height: 1.5; position: relative; padding-bottom: 1.5rem; }
        .pillars-sticky-intro p::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background-color: var(--brand-red-medium); }

        /* Ajustes de tamaño para la grilla y tarjetas */
        .pillars-tiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } /* Menos gap */
        /* Grilla de los 4 pilares solicitados con tus textos idénticos */
        .tile-card { background-color: #f4f7fc; padding: 2rem 1.5rem; border-radius: 4px; border: 1px solid #e1e8f5; transition: var(--transition); }
        .tile-card:hover { background-color: #ffffff; box-shadow: 0 40px 80px rgba(31,37,72,0.08); transform: translateY(-5px); border-color: transparent; }
        
        .tile-card .icon-placeholder { width: 40px; height: 40px; margin-bottom: 1rem; display: flex; align-items: center; color: var(--brand-red-medium); }
        .tile-card h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; color: var(--brand-blue-deep); letter-spacing: -0.5px; }
        .tile-card p { color: var(--text-dark-muted); font-size: 0.95rem; line-height: 1.6; text-align: justify;}
        .mission-vision-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 2rem; }
        

        /* SECCIÓN GALERÍA ("NUESTRO ENTORNO") CON DESPLAZAMIENTO INFINITO AUTOMÁTICO */
        .gallery-section { padding: 140px 0; overflow: hidden; background-color: var(--bg-dark); }
        .gallery-section h2 { font-size: 3.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 4rem; padding-left: 5%; }
        
        /* Contenedor del riel infinito */
        .gallery-infinite-slider { display: flex; width: max-content; }
        
        /* Riel que ejecuta el bucle de animación */
        .gallery-track { display: flex; gap: 2rem; animation: scrollGallery 25s linear infinite; padding-right: 2rem; }
        
        /* Pausar el movimiento automático al pasar el mouse por encima (Interacción premium) */
        .gallery-infinite-slider:hover .gallery-track { animation-play-state: paused; }
        
        .gallery-img-wrapper { width: 500px; height: 340px; border-radius: 4px; overflow: hidden; background-color: var(--brand-blue-deep); border: 1px solid var(--border-color); position: relative; flex-shrink: 0; }
        .gallery-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); opacity: 0.7; }
        .gallery-img-wrapper:hover img { transform: scale(1.05); opacity: 1; }

        /* ANIMACIÓN PARA EL AVANCE AUTOMÁTICO */
        @keyframes scrollGallery {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-50% - 1rem)); } /* Se desplaza exactamente la mitad del ancho total del track duplicado */
        }

       
/* ==========================================================================
   SECCIÓN: PROGRAMA DE TITULACIÓN (Integrado y Alineado)
   ========================================================================== */
.titulacion-header { 
    border: 1px solid #83181e; 
    padding: 0.8rem 1.5rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    transition: all 0.4s ease;
    border-radius: 4px;
    margin-top: 1.5rem; /* Espaciado con respecto al elemento anterior */
    width: 100%;        /* Asegura que tome el ancho del contenedor padre */
}

/* EFECTO DIFUMINADO (GLOW) */
.titulacion-header:hover { 
    background: rgba(131, 24, 30, 0.05);
    border-color: #d22523;
    box-shadow: 0 0 15px rgba(210, 37, 35, 0.5); 
}

.header-content { display: flex; align-items: center; gap: 1rem; color: white; }
.title-group h3 { font-size: 0.65rem; color: #a3b1cc; letter-spacing: 2px; margin-bottom: 2px; }
.title-group h2 { font-size: 1rem; color: white; font-weight: 800; letter-spacing: 1px; }

/* INDICADORES */
.indicator-group { display: flex; align-items: center; gap: 1.2rem; color: #a3b1cc; font-size: 0.75rem; font-weight: 700; }
.status-item { display: flex; align-items: center; gap: 6px; }
.divider { width: 1px; height: 15px; background: #333; }
.dot { width: 7px; height: 7px; background: #555; border-radius: 50%; }
.dot.active { background: #d22523; box-shadow: 0 0 8px #d22523; animation: blink 2s infinite; }

@keyframes blink {
    0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; }
}

/* GRID */
.titulacion-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1rem; 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: 0.5s ease;
    width: 100%; /* Hereda ancho */
}
.titulacion-grid.show { max-height: 250px; opacity: 1; margin-top: 1rem; }

.info-card { 
    border: 1px solid #1d3c7b; 
    padding: 1rem; 
    background: rgba(29, 60, 123, 0.2);
    color: #a3b1cc; 
    transition: 0.3s;
}
.info-card h4 { color: #83181e; margin: 0.5rem 0; font-size: 0.9rem; }
.info-card p { font-size: 0.85rem; }

/* RESPONSIVIDAD */
@media (max-width: 768px) {
    .titulacion-header { flex-direction: column; gap: 1rem; text-align: center; }
    .titulacion-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECCIÓN: titulate aqui
   ========================================================================== */
.tu-titulo-section {
    padding: 100px 5%;
    background-color: var(--brand-blue-main);
    color: var(--text-light);
}

.tu-titulo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Texto Izquierdo */
.tu-titulo-content .subtitle-line {
    color: var(--brand-red-dark);
    font-size: 0.85rem;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.tu-titulo-content h2 {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.tu-titulo-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Grid Derecho (Las 4 tarjetas) */
.tu-titulo-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stat-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
}

.stat-card:hover {
    border-color: var(--brand-red-main);
    background-color: rgba(255, 255, 255, 0.06);
}

.stat-card h3 {
    font-size: 2.5rem;
    color: var(--brand-red-dark);
    margin-bottom: 0.5rem;
}

.stat-card p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Responsivo */
@media (max-width: 768px) {
    .tu-titulo-grid { grid-template-columns: 1fr; }
    .tu-titulo-content { text-align: center; }
}

/* ==========================================================================
   SECCIÓN:MAS INFORMACION DE TITULACIONES TARJETAS
   ========================================================================== */
.titulacion-dual-section { 
    padding: 80px 5%; 
    background-color: #f9f9f9; 
}

.dual-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 2rem; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.titulacion-card { 
    padding: 1.5rem 3rem 3rem 3rem; /* Margen superior reducido de 3rem a 1.5rem */
    transition: var(--transition); 
    animation: floatCard 6s ease-in-out infinite; 
}

/* TARJETA OBSCURA */
.titulacion-card.dark { 
    background-color: #121626; 
    color: #ffffff; 
    border: none;
}

/* TARJETA CLARA */
.titulacion-card.light { 
    background-color: #ffffff; 
    color: #171d3d; 
    border: 1px solid #1d3c7b; 
    box-shadow: 0 4px 15px rgba(29, 60, 123, 0.1); 
}

/* Animación */
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.titulacion-card:hover { animation-play-state: paused; transform: translateY(-5px); }

/* Textos */
.titulacion-card .label { font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 0.5rem; opacity: 0.7; }
.titulacion-card h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.5rem; }
.titulacion-card .subtitle { font-size: 1rem; margin-bottom: 2rem; opacity: 0.8; }
.titulacion-card .description { font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; }

/* Requisitos */
.requisitos h5 { font-size: 0.75rem; letter-spacing: 2px; margin-bottom: 1.5rem; text-transform: uppercase; opacity: 0.7; }
.requisitos ul { list-style: none; margin-bottom: 2rem; }
.requisitos li { margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; }
.requisitos li::before { content: '✓'; color: #d22523; font-weight: bold; }

/* Cajas promocionales */
.promo-box { border: 1px solid #83181e; background: rgba(131, 24, 30, 0.1); padding: 1rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: #ad1e1e; }
.promo-box-light { border: 1px solid #1d3c7b; background: rgba(29, 60, 123, 0.05); padding: 1rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: #1d3c7b; }

/* Botones */
.btn-solicitar { width: 100%; padding: 1.2rem; background-color: #d22523; color: #ffffff; border: none; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 0.8rem; }
.btn-solicitar-light { width: 100%; padding: 1.2rem; background-color: #000314; color: #ffffff; border: none; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 0.8rem; }

@media (max-width: 768px) { .dual-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SECCIÓN: OPCIONES DE TITULACION
   ========================================================================== */
.modalidades-section-dark {
    padding: 80px 5%;
    background: linear-gradient(to bottom, rgba(12,15,29,0.9), transparent);
    text-align: center;
}

.pillars-sticky-intro {
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

.pillars-sticky-intro .tag-adn {
    font-size: 0.7rem;
    color: #83181e;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
}

.pillars-sticky-intro .highlight-accent {
    color: #83181e; /* Acento rojo */
}

.pillars-sticky-intro p {
    color: #a3b1cc; /* Gris claro para legibilidad */
    margin-top: 1rem;
}

/* Grid de tarjetas en fondo oscuro */
.modalidades-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.mod-card {
    padding: 1.2rem 2rem;
    border: 1px solid #83181e; /* Borde rojo */
    color: #ffffff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03); /* Fondo muy sutil */
    transition: all 0.4s ease;
    animation: fadeInUp 0.8s ease forwards;
}

.mod-card span { color: #83181e; font-size: 1.2rem; }

.mod-card:hover {
    background: #83181e; /* Hover rojo */
    color: #ffffff;
    transform: translateY(-5px);
    border-color: #83181e;
}

.mod-card:hover span { color: #ffffff; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Delay escalonado */
.mod-card:nth-child(1) { animation-delay: 0.1s; }
.mod-card:nth-child(2) { animation-delay: 0.2s; }
.mod-card:nth-child(3) { animation-delay: 0.3s; }
.mod-card:nth-child(4) { animation-delay: 0.4s; }
.mod-card:nth-child(5) { animation-delay: 0.5s; }