:root {
    --ism-primary: #F8FAFC;
    --ism-base: #2b2f40;
    --ism-base-2: #1c2b39;
    --ism-marca: #475569;
    --ism-fondo-principal: #F8FAFC;
    --ism-fondo-secundario: #E2E8F0;
    --ism-fondo-tercero: #c9cccf;
    --ism-gris: #f4f5f8;
    --ism-accent: #DC2626;
    --ism-preparatoria: #ac0120;
    --ism-secundaria: #657c21;
    --ism-accent-white: #E2E8F0;
    --ism-sistemas: #ffaf01;
    --ism-mecanica: #f3902c;
    --ism-gestion: #005766;
    --ism-design: #38761d;
}

/* --- ESTILOS DEL HEADER (NAVBAR) --- */
.navbar-ism {
    background-color: var(--ism-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.navbar-ism .nav-link {
    color: rgba(22, 21, 21, 0.85);
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-ism .nav-link:hover,
.navbar-ism .nav-link.active {
    color: var(--ism-accent);
}

.btn-inscribete {
    background-color: var(--ism-accent);
    color: var(--ism-primary);
    font-weight: 600;
    border: none;
    transition: transform 0.2s ease;
}

.btn-inscribete:hover {
    background-color: #ffb81c;
    transform: translateY(-2px);
    color: var(--ism-primary);
}

/* ==========================================
   BLINDADO DEL CONTENEDOR DEL SUBMENÚ
========================================== */
.navbar .dropdown-menu {
    /* 1. Forzamos el color sólido para evitar que el fondo se trasluzca */
    background-color: #E2E8F0 !important;

    /* 2. Añadimos un borde sutil y una sombra fuerte para despegar el menú del fondo */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;

    /* 3. Aseguramos que siempre esté por encima de cualquier otro elemento (Carruseles, videos) */
    z-index: 1050 !important;

    border-radius: 8px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    /* Da un pequeño respiro entre el Navbar y la caja */
}

/* Color base de los enlaces para asegurar que contrasten con el #475569 */
.navbar .dropdown-menu .dropdown-item {
    color: rgba(22, 21, 21, 0.85) !important;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Efecto hover para que el usuario sepa dónde está el cursor */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: #475569 !important;
    /* Tono más oscuro */
    color: var(--ism-accent-white, #f0a500) !important;
    /* Dorado institucional */
}

/* --- ESTILOS DEL HERO (Con Imagen de Fondo y Parallax) --- */
.hero-section {
    /* El linear-gradient actúa como una capa oscura superpuesta a la imagen para que el texto resalte */
    background-image: linear-gradient(rgba(0, 51, 102, 0.85), rgba(0, 26, 51, 0.95)),
        url('https://itses.edu.mx/assets/testimonios.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Esto crea el efecto Parallax */
    color: white;
    padding: 120px 0;
    /* Aumentamos un poco el padding para lucir más la imagen */
    text-align: center;
    position: relative;
}

.hero-text {
    color: var(--ism-primary);
    font-size: 1.45rem;
    line-height: 1.8;
    /* Interlineado amplio para lectura cómoda */
    margin-bottom: 1.5rem;
}

/* Tarjeta contenedora */
.card-testimonial {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    background-color: #fff;
    cursor: pointer;
}

.card-testimonial:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Diseño del Thumbnail interactivo */
.video-thumbnail {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 200px;
    /* Altura fija para mantener consistencia */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
}

.card-testimonial:hover .video-thumbnail::before {
    background: rgba(0, 0, 0, 0.2);
}

.play-btn {
    position: relative;
    z-index: 3;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    transition: transform 0.3s ease, color 0.3s ease;
}

.card-testimonial:hover .play-btn {
    transform: scale(1.15);
    color: var(--ism-accent);
}

/* Ajustes del Carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    /* Controles más discretos a los lados */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--ism-base);
    border-radius: 50%;
    padding: 20px;
}

/* ==========================================
           CONTROL DE IMÁGENES EN EL CARRUSEL
        ========================================== */
.carousel-full-width .carousel-item {
    /* Definimos una altura fija para pantallas grandes */
    height: 550px;
    background-color: #000;
    /* Fondo negro de respaldo mientras cargan */
}

.carousel-full-width .carousel-item img {
    /* CRÍTICO: 'cover' hace que la imagen se adapte al contenedor cortando los excesos 
               en lugar de estirarse o aplastarse feamente.
            */
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* Ajuste de altura para pantallas móviles (Responsive) */
@media (max-width: 768px) {
    .carousel-full-width .carousel-item {
        height: 300px;
        /* Reducimos la altura en móviles para mejor UX */
    }
}

/* Capa oscura opcional sobre las imágenes para mejorar el contraste del texto */
.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    z-index: 1;
}

.carousel-caption {
    z-index: 2;
    /* Asegura que el texto flote sobre la capa oscura */
}


/* ==========================================
           ESTILOS DE LAS TARJETAS DE MÉTRICAS
        ========================================== */
/* Fondo de la sección (opcional, un gris muy claro para resaltar el blanco de las tarjetas) */
.metrics-section {
    background-color: #f8f9fa;
    padding: 80px 0;
}

.metric-card {
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
    /* Bordes ligeramente suaves */
    /* Replicamos la sombra sutil y elegante de tu imagen */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

/* Efecto Hover interactivo */
.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* Estilo de los Iconos */
.metric-icon {
    font-size: 2.5rem;
    color: #8c98a4;
    /* Gris neutro similar al de la imagen */
    margin-bottom: 1rem;
    display: inline-block;
}

/* Tipografía de los Números */
.metric-number {
    font-size: 4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

/* Tipografía de la Descripción */
.metric-label {
    color: #6c757d;
    font-size: 1rem;
    /* Letra pequeña y elegante */
    font-weight: 400;
}

/* ==========================================
           ESTILOS DEL COLLAGE (CSS GRID)
        ========================================== */
.collage-wrapper {
    display: grid;
    /* Dividimos el espacio en 10 columnas y 10 filas invisibles */
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 40px);
    /* Ajusta la altura base según necesites */
    gap: 15px;
    width: 100%;
}

.collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Evita que las imágenes se deformen */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Sombra suave para dar profundidad */
    transition: transform 0.3s ease;
}

.collage-img:hover {
    transform: scale(1.02);
    /* Pequeño efecto premium al pasar el mouse */
}

/* Posicionamiento específico de cada imagen usando BEM */

/* Imagen 1 (Izquierda, grande) */
.collage-img--main {
    grid-column: 1 / 7;
    /* Ocupa de la columna 1 a la 7 */
    grid-row: 1 / 9;
    /* Ocupa de la fila 1 a la 9 */
}

/* Imagen 2 (Arriba derecha, vertical) */
.collage-img--top-right {
    grid-column: 7 / 11;
    grid-row: 2 / 7;
}

/* Imagen 3 (Abajo derecha, superpuesta) */
.collage-img--bottom-right {
    grid-column: 5 / 10;
    grid-row: 6 / 11;
    z-index: 2;
    /* Asegura que esté por encima de las otras */
    border: 10px solid #ffffff;
    /* Recrea el corte visual de tu referencia */
}

/* Ajustes responsivos para móviles */
@media (max-width: 768px) {
    .collage-wrapper {
        grid-template-rows: repeat(10, 30px);
        /* Reducimos la altura en móviles */
        margin-bottom: 2rem;
    }
}

/* ==========================================
           ESTILOS DE LAS TARJETAS ACADÉMICAS (GRID)
        ========================================== */

/* Contenedor principal de la tarjeta (Enlace navegable) */
.academic-card {
    display: block;
    position: relative;
    overflow: hidden;
    /* Vital para que el zoom de la imagen no se salga de la caja */
    height: 220px;
    /* Altura fija para mantener uniformidad en toda la grilla */
    border-radius: 4px;
    /* Bordes mínimamente redondeados (opcional, quítalo si los quieres rectos) */
    text-decoration: none;
    /* Quitamos el subrayado del enlace */
    background-color: #1a1a1a;
    /* Fondo de carga */
}

/* Imagen de fondo */
.academic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Evita cualquier deformación de la imagen */
    transition: transform 0.5s ease;
    /* Transición fluida para el hover */
}

/* Capa de Gradiente Oscuro (Protección de Contraste WCAG) */
.academic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradiente: 85% de opacidad negra abajo, degradándose a transparente a la mitad */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 1;
    /* Flexbox para empujar el texto a la esquina inferior izquierda */
    display: flex;
    align-items: flex-end;
    padding: 1.2rem;
    transition: background 0.3s ease;
}

/* Texto de la tarjeta */
.academic-title {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Extra legibilidad */
}

/* Interacción Hover: Zoom a la imagen y oscurecimiento ligero */
.academic-card:hover .academic-img {
    transform: scale(1.1);
    /* Efecto de acercamiento premium */
}

.academic-card:hover .academic-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.2) 60%);
}

/* ==========================================
           ESTILOS DE LA SECCIÓN PANTALLA DIVIDIDA
        ========================================== */

/* Columna Izquierda: Imagen Fotográfica */
.split-img-left {
    /* Usamos background-image para asegurar un ajuste perfecto (cover) */
    background-image: url('../assets/images/admisiones/admisiones2.jpg');
    background-size: cover;
    background-position: center;
    /* min-height es vital para móviles, de lo contrario la columna colapsaría a 0px */
    min-height: 400px;
    height: 100%;
}

/* Columna Derecha: Contenido y CTA */
.split-content-right {
    /* Doble fondo: Gradiente azul oscuro semi-transparente + Fotografía arquitectónica de fondo */
    background: linear-gradient(rgba(36, 52, 71, 0.92), rgba(36, 52, 71, 0.92)),
        url('../assets/images/admisiones/campus.jpg');
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

/* Subtítulo de acento (El verde de tu referencia) */
.text-accent-green {
    color: var(--ism-accent-white);
    /* Color verde vibrante inspirado en la imagen */
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Botón de Admisiones */
.btn-admission {
    background-color: var(--ism-accent);
    color: #ffffff;
    font-weight: 700;
    padding: 0.8rem 2.5rem;
    border: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-admission:hover {
    background-color: #475569;
    /* Verde ligeramente más oscuro al pasar el cursor */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(209, 76, 76, 0.3);
}

/* ==========================================
           SECCIÓN VIDA ESTUDIANTIL
        ========================================== */

/* Enlace "Ver Todo" */
.link-view-all {
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.link-view-all:hover {
    color: var(--ism-accent, #f0a500);
}

/* --- Tarjeta Principal (Izquierda) --- */
.campus-card-main {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    height: 420px;
    /* Altura fija para alinear con los elementos de la derecha */
    display: block;
    text-decoration: none;
}

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

/* Gradiente para asegurar lectura de texto */
.campus-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 2rem;
    color: #ffffff;
    z-index: 1;
}

.campus-card-main:hover img {
    transform: scale(1.05);
    /* Efecto zoom premium */
}

/* --- Tarjetas Secundarias (Derecha) --- */
.campus-card-small {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.campus-card-small-img {
    overflow: hidden;
    border-radius: 4px;
    height: 220px;
    /* Altura controlada para las imágenes pequeñas */
    margin-bottom: 1.2rem;
}

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

.campus-card-small:hover .campus-card-small-img img {
    transform: scale(1.05);
}

/* Enlaces "Leer Más" */
.link-read-more {
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    color: inherit;
    margin-top: auto;
    /* Empuja el enlace al fondo si el texto es muy corto */
}

.link-read-more-white {
    color: #ffffff;
}

.link-read-more-dark {
    color: #1a1a1a;
}

.link-read-more:hover {
    text-decoration: underline;
}

/* ==========================================
           SECCIÓN DE TESTIMONIOS (SPEECH BUBBLES)
        ========================================== */

.testimonials-section {
    background-color: var(--ism-gris);
    /* El gris muy claro de tu imagen */
    padding: 100px 0;
}

/* Títulos */
.subtitle-red {
    color: #ff4a52;
    /* Rojo acento de la imagen */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.title-main {
    color: #1a2228;
    /* Azul/Gris muy oscuro */
    font-weight: 800;
}

/* --- Burbuja de Testimonio --- */
.testimonial-item {
    /* Usamos drop-shadow en lugar de box-shadow para que la sombra 
               envuelva también al triángulo inferior */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.04));
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
}

.testimonial-item:hover {
    transform: translateY(-5px);
    /* Efecto de elevación al pasar el mouse */
}

.testimonial-bubble {
    background-color: #ffffff;
    padding: 3rem 2rem;
    border-radius: 4px;
    position: relative;
    text-align: center;
}

.testimonial-text {
    color: #6c757d;
    line-height: 1.8;
    font-size: 1rem;
    margin: 0;
}

/* El "Truco" del Triángulo con CSS puro */
.testimonial-bubble::after {
    content: "";
    position: absolute;
    bottom: -20px;
    /* Empuja el triángulo fuera de la caja */
    left: 50%;
    /* Lo centra horizontalmente */
    transform: translateX(-50%);
    /* Ajuste fino del centrado */

    /* Dibujamos el triángulo manipulando los bordes CSS */
    border-width: 20px 20px 0;
    /* Arriba 20px, Lados 20px, Abajo 0 */
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    /* Solo el borde superior es blanco */
}

/* --- Información del Autor --- */
.testimonial-author {
    text-align: center;
    margin-top: 40px;
    /* Espacio para que el triángulo respire */
}

.author-img {
    width: 180px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    /* Un ligero redondeo, fiel a los placeholders de tu imagen */
    margin-bottom: 1rem;
}

.author-name {
    color: #1a2228;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.author-role {
    color: #ff4a52;
    /* Mismo rojo del subtítulo */
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==========================================
           SECCIÓN DE PRÓXIMOS EVENTOS
        ========================================== */

.events-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Elemento de Evento Individual --- */
.event-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    text-decoration: none;
    /* Quitamos el subrayado del enlace */
    transition: transform 0.3s ease;
}

/* Efecto Hover Premium */
.event-item:hover {
    transform: translateX(8px);
    /* Desplaza el evento ligeramente a la derecha */
}

/* --- Caja de Fecha (Gris Claro) --- */
.event-date-box {
    background-color: var(--ism-gris);
    min-width: 85px;
    text-align: center;
    padding: 18px 10px;
    border-radius: 4px;
    flex-shrink: 0;
    /* Evita que la caja se aplaste si el texto de al lado es muy largo */
}

.event-date-day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
}

.event-date-month {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-top: 6px;
}

/* --- Detalles del Evento --- */
.event-details h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.event-item:hover .event-details h4 {
    color: var(--ism-accent, #f0a500);
    /* Cambia al dorado institucional al pasar el cursor */
}

.event-meta {
    font-size: 0.85rem;
    color: #8c98a4;
}

.event-meta i {
    color: #6c757d;
    margin-right: 4px;
}

/* --- Enlace Ver Todos --- */
.link-view-all {
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    display: inline-block;
    margin-top: 1rem;
}

.link-view-all:hover {
    color: var(--ism-accent, #f0a500);
    text-decoration: underline;
}

/* --- Contenedor de la Imagen Derecha --- */
.events-image-wrapper {
    background-image: url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1000&q=80');
    background-size: cover;
    background-position: center;
    height: 100%;
    min-height: 400px;
    /* Vital para que no colapse en teléfonos móviles */
    border-radius: 4px;
    /* Ligero redondeo opcional */
}

/* ==========================================
           SECCIÓN CONÓCENOS (ABOUT US)
        ========================================== */

.about-section {
    /* El color gris extra claro de tu imagen de referencia */
    background-color: var(--ism-gris);
    padding: 100px 0;
}

/* --- Imagen Destacada --- */
.about-image-wrapper {
    overflow: hidden;
    border-radius: 4px;
    /* Sombra muy sutil para despegar la foto del fondo gris */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.about-img {
    width: 100%;
    height: 450px;
    /* Altura controlada para mantener proporción */
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

/* Efecto premium al pasar el cursor */
.about-image-wrapper:hover .about-img {
    transform: scale(1.03);
}

/* --- Contenido de Texto --- */
.about-title {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 800;
}

.about-text {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.8;
    /* Interlineado amplio para lectura editorial */
}

/* --- Enlace de Acción --- */
.link-explore {
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.link-explore:hover {
    color: var(--ism-accent, #f0a500);
    /* Dorado institucional */
}

/* Animación sutil de flecha (opcional, pero mejora mucho la UX) */
.link-explore::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.link-explore:hover::after {
    transform: translateX(5px);
}

/* ==========================================
           SECCIÓN DE HISTORIA / DECLARACIÓN DE IMPACTO
        ========================================== */

.history-section {
    /* Damos más padding abajo para compensar la caja que vamos a empujar hacia abajo */
    padding: 80px 0 120px 0;
    background-color: #ffffff;
}

/* --- Contenedor de la Imagen --- */
.history-img-wrapper {
    width: 100%;
    height: 500px;
    /* Altura controlada para pantallas grandes */
    border-radius: 4px;
    overflow: hidden;
    /* Aplicamos una sombra muy sutil a la imagen principal */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.history-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Filtro opcional: oscurece mínimamente la imagen para que no compita tanto con el texto */
    filter: brightness(0.95);
}

/* --- Caja de Texto Superpuesta (La Magia) --- */
.history-statement-box {
    background-color: #050505;
    /* Negro profundo, casi puro, como en tu referencia */
    color: #ffffff;
    padding: 3rem 4rem;
    /* Mucho aire interior (padding) para darle elegancia */

    /* TRUCO TECH LEAD: Margen negativo para jalar la caja hacia arriba y montarla en la foto */
    margin-top: -120px;

    position: relative;
    /* Necesario para que el z-index funcione */
    z-index: 2;
    /* Aseguramos que se dibuje por encima de la imagen */

    border-radius: 2px;
    /* Sombra pronunciada para dar el efecto de flotación sobre la imagen */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.history-statement-text {
    font-size: 1.05rem;
    line-height: 1.9;
    /* Interlineado alto para facilitar la lectura de bloques densos de texto */
    font-weight: 400;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    /* Blanco ligeramente opaco para no cansar la vista */
}

/* --- Ajustes Responsivos para Móviles y Tablets --- */
@media (max-width: 768px) {
    .history-img-wrapper {
        height: 350px;
        /* Reducimos la altura de la imagen en celulares */
    }

    .history-statement-box {
        padding: 2rem;
        /* Reducimos el padding interno */
        margin-top: -60px;
        /* Reducimos la superposición para que no tape las caras de la foto */
        width: 90%;
        /* Forzamos un poco más de ancho en celular */
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================
           SECCIÓN: MISIÓN, VISIÓN Y CAMPUS
        ========================================== */

.vision-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Contenedor de la Imagen --- */
.info-block-img {
    width: 100%;
    height: 240px;
    /* CRÍTICO: Mantiene todas las imágenes exactamente al mismo tamaño */
    object-fit: cover;
    /* Evita que las imágenes se estiren o deformen */
    margin-bottom: 1.5rem;
    /* Espaciado entre la imagen y el título */
    border-radius: 2px;
    /* Un redondeo casi imperceptible para suavizar esquinas */
    transition: opacity 0.3s ease;
}

/* Efecto sutil al pasar el cursor sobre la imagen */
a.info-block-link-img:hover .info-block-img {
    opacity: 0.9;
}

/* --- Tipografía --- */
.info-block-title {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.info-block-text {
    color: #6c757d;
    /* Gris secundario para lectura cómoda */
    font-size: 0.95rem;
    line-height: 1.7;
    /* Interlineado amplio (buena legibilidad WCAG) */
    margin-bottom: 1.5rem;
}

/* --- Enlace 'Leer Más' --- */
.link-read-more {
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: capitalize;
    transition: color 0.2s ease;
    display: inline-block;
}

.link-read-more:hover {
    color: var(--ism-accent, #f0a500);
    /* Cambio al color institucional en Hover */
}

/* ==========================================
           SECCIÓN DE GALERÍA (CSS GRID NATIVO)
        ========================================== */

.gallery-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Tipografía --- */
.gallery-title {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.gallery-text {
    color: #6c757d;
    font-size: 1.05rem;
    line-height: 1.8;
    /* Interlineado amplio para ese look editorial */
    margin-bottom: 0;
}

/* 
           Magia del CSS Grid: 
           Definimos 4 columnas iguales y 2 filas de altura fija (250px).
           El gap se encarga del espaciado uniforme sin necesidad de márgenes complejos.
        */
.custom-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 280px);
    /* Ajusta esta altura según tu preferencia */
    gap: 1.5rem;
}

/* Contenedor de cada imagen */
.gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    /* Redondeo muy sutil para estilo moderno */
    /* Una sombra base muy ligera */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 
           Ubicaciones específicas en la grilla 
        */

/* La imagen alta (Izquierda): Ocupa de la línea 1 a la 2 en columnas, y de la 1 a la 3 en filas */
.gallery-item--tall {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/* La imagen panorámica (Abajo derecha): Ocupa de la columna 2 a la 5, en la fila 2 */
.gallery-item--wide {
    grid-column: 2 / 5;
    grid-row: 2 / 3;
}

/* Comportamiento de la imagen para que nunca se deforme */
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Micro-interacción: Efecto Zoom in al pasar el cursor */
.gallery-item:hover .gallery-img {
    transform: scale(1.05);
}

/* --- Comportamiento Responsivo (Mobile First approach aplicado al revés para degradación elegante) --- */

/* En Tablets (menos de 992px): Cambiamos a 2 columnas */
@media (max-width: 991px) {
    .custom-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    /* Hacemos que la imagen alta y la ancha ocupen ambas columnas */
    .gallery-item--tall,
    .gallery-item--wide {
        grid-column: 1 / 3;
        grid-row: auto;
        aspect-ratio: 16/9;
        /* Forzamos formato panorámico */
    }

    /* Las imágenes estándar serán cuadradas */
    .gallery-item {
        aspect-ratio: 1 / 1;
    }
}

/* En Celulares (menos de 576px): Cambiamos a 1 sola columna */
@media (max-width: 575px) {
    .custom-gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item {
        grid-column: 1 / -1 !important;
        /* Fuerza a ocupar todo el ancho */
        aspect-ratio: 4/3;
        /* Proporción agradable para móviles */
    }
}

/* ==========================================
           GALERÍA VARIANT V2 (MOSAICO EDITORIAL)
        ========================================== */

.gallery-section-v2 {
    padding: 80px 0;
    background-color: #ffffff;
}

/* Configuración del Grid V2:
           Creamos una matriz de 3 columnas de igual tamaño (1fr) 
           y 3 filas fijas de 200px cada una.
        */
.gallery-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 1.5rem;
}

/* Contenedor base del item */
.gallery-v2-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* --- POSICIONAMIENTO GEOMÉTRICO ASIMÉTRICO --- */

/* Item 1 (Gran Destacado): Ocupa columna 1 y 2, fila 1 y 2 */
.gallery-v2-item--featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* Item 5 (Panorámico Inferior): Ocupa columna 2 y 3, en la fila 3 */
.gallery-v2-item--wide-bottom {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
}

/* Comportamiento de la imagen interna */
.gallery-v2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover: Efecto zoom suave y fluido */
.gallery-v2-item:hover .gallery-v2-img {
    transform: scale(1.06);
}

/* --- DEGRADACIÓN RESPONSIVA (MOBILE-FIRST INVERTIDO) --- */

/* Tablets (Menos de 992px): Cambiamos la matriz a 2 columnas */
@media (max-width: 991px) {
    .gallery-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        /* Dejamos que las filas se adapten según contenido */
    }

    /* En tablets, forzamos a que los bloques especiales tomen el ancho completo */
    .gallery-v2-item--featured,
    .gallery-v2-item--wide-bottom {
        grid-column: 1 / -1;
        /* Ocupa de borde a borde */
        grid-row: auto;
        aspect-ratio: 16 / 10;
        /* Proporción ideal para destacar */
    }

    /* Los bloques pequeños se vuelven rectángulos limpios */
    .gallery-v2-item {
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }
}

/* Celulares (Menos de 576px): Una sola columna vertical limpia */
@media (max-width: 575px) {
    .gallery-mosaic-grid {
        grid-template-columns: 1fr;
    }

    .gallery-v2-item {
        grid-column: 1 / -1 !important;
        aspect-ratio: 4 / 3;
    }
}

/* ==========================================
           ESTILOS DEL BANNER HERO (FULL-WIDTH)
        ========================================== */

.hero-banner-facilities {
    /* 1. Fondo e Imagen: 
               Usamos un gradiente superpuesto (overlay) para oscurecer la foto y garantizar 
               que el texto blanco sea legible (Cumplimiento WCAG de contraste).
               Reemplaza la URL por la imagen real de las instalaciones. */
    /*background: linear-gradient(rgba(0, 30, 60, 0.13), rgba(0, 30, 60, 0.7)),
        url('../assets/images/instalaciones/instalaciones.jpg');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 2. Altura controlada */
    min-height: 400px;
    width: 100%;
    overflow: hidden;
    /* Evita desbordamientos indeseados */
}

/* --- Tipografía del Título --- */
.hero-title {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Sombra para máxima legibilidad */
    letter-spacing: 0.5px;
    z-index: 2;
    /* Asegura que el texto esté por encima del fondo */
}

.hero-subtitle {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 200;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Sombra para máxima legibilidad */
    letter-spacing: 0.5px;
    z-index: 2;
    /* Asegura que el texto esté por encima del fondo */
}

/* --- Elementos Esquinados --- */
.logo-top-left {
    max-width: 260px;
    /* Tamaño máximo para escritorio */
    z-index: 3;
    transition: all 0.3s ease;
}

.icon-bottom-right {
    max-width: 70px;
    /* Tamaño del sello/dragón */
    z-index: 3;
    transition: all 0.3s ease;
}

/* --- Ajustes Responsivos para Móviles y Tablets --- */
@media (max-width: 768px) {
    .hero-banner-facilities {
        min-height: 300px !important;
        /* Forzamos la reducción de altura en móviles */

        /* 1. ENCUADRE: Mueve la imagen para enfocar el lado derecho */
        background-position: center center !important;


        /* Opción B: Mantiene la proporción sin deformar, recortando los lados (Recomendada por UX) 
           background-size: cover !important; */
    }

    .logo-top-left {
        max-width: 180px;
        /* Achicamos el logo principal */
    }

    .icon-bottom-right {
        max-width: 50px;
        /* Achicamos el sello */
    }

    .hero-title {
        font-size: 2rem;
        /* Ajuste de tipografía para pantallas pequeñas */
    }

    .hero-subtitle {
        font-size: 1rem;
        /* Ajuste de tipografía para pantallas pequeñas */
    }
}

/* ==========================================
           SECCIÓN DE VIDEO INSTITUCIONAL
        ========================================== */

.video-section {
    padding: 100px 0;
    background-color: #f8f9fa;
    /* Fondo gris claro para destacar el video */
}

/* --- El Contenedor Fachada (Facade) --- */
.video-facade {
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    /* Mantiene los bordes redondeados */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    /* Sombra profunda premium */

    /* Imagen de portada del video */
    background-image: url('../assets/images/logo2.png');
    background-size: cover;
    background-position: center;
}

/* Capa oscura para asegurar el contraste del botón de Play */
.video-facade::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 30, 60, 0.4);
    /* Azul institucional transparente */
    transition: background 0.3s ease;
    z-index: 1;
}

.video-facade:hover::before {
    background: rgba(0, 30, 60, 0.2);
    /* Se aclara sutilmente en hover */
}

/* --- Botón de Play Animado --- */
.play-button-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button {
    width: 80px;
    height: 80px;
    background-color: var(--ism-accent, #f0a500);
    /* Dorado institucional */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    padding-left: 5px;
    /* Ajuste óptico para centrar el triángulo del play */
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* Animación de pulso continuo (Ripple effect) */
    box-shadow: 0 0 0 0 rgba(240, 165, 0, 0.6);
    animation: pulse-play 2s infinite;
}

.video-facade:hover .play-button {
    transform: scale(1.1);
    background-color: #ffb81c;
}

/* Keyframes para el efecto de ondas (Ripple) del botón */
@keyframes pulse-play {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 165, 0, 0.6);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(240, 165, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(240, 165, 0, 0);
    }
}

/* Aseguramos que el iframe inyectado tome todo el espacio */
.video-facade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    border: none;
}

/* ==========================================
           SECCIÓN: INTRODUCCIÓN Y BREADCRUMBS
        ========================================== */

.admissions-intro-section {
    padding: 60px 0;
    background-color: #ffffff;
}

/* --- Estilos de las Migas de Pan (Breadcrumbs) --- */
/* Personalizamos el divisor nativo de Bootstrap para usar el símbolo '>' como en tu imagen */
.custom-breadcrumb {
    --bs-breadcrumb-divider: '>';
    font-size: 0.95rem;
    margin-bottom: 3rem;
    /* Espacio generoso entre las migas y el título */
}

.custom-breadcrumb .breadcrumb-item a {
    color: #8c98a4;
    /* Gris claro para los enlaces previos */
    text-decoration: none;
    transition: color 0.2s ease;
}

.custom-breadcrumb .breadcrumb-item a:hover {
    color: #1a1a1a;
}

.custom-breadcrumb .breadcrumb-item.active {
    color: var(--ism-base);
    /* Verde acento de tu imagen de referencia */
    font-weight: 500;
}

/* --- Tipografía de la Sección --- */
.intro-heading {
    color: #1a1a1a;
    font-weight: 800;
    /* Extra negrita para igualar la referencia */
    font-size: 2rem;
    margin-bottom: 2rem;
}

.intro-text {
    color: #6c757d;
    /* Gris de lectura */
    font-size: 1.05rem;
    line-height: 1.8;
    /* Interlineado amplio para estilo editorial */
    margin-bottom: 1.5rem;
}

/* Ajuste responsivo para el canalón (espacio entre columnas) */
@media (min-width: 992px) {
    .intro-text-row {
        /* Añade un espacio extra entre las dos columnas en escritorio */
        --bs-gutter-x: 4rem;
    }
}

/* ==========================================
           SECCIÓN: PROCESO DE APLICACIÓN
        ========================================== */

.process-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.process-main-title {
    color: #1a1a1a;
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 3.5rem;
}

/* --- Estilos del Número Gigante --- */
.step-number {
    color: var(--ism-base);
    /* Verde acento de tu imagen */
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 0.8;
    /* Reduce el espacio vacío arriba y abajo del número */
    min-width: 50px;
    /* Asegura que el número no se aplaste si el texto es largo */
}

/* --- Estilos del Contenido del Paso --- */
.step-title {
    color: #0f2c4d;
    /* Azul muy oscuro/elegante */
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.step-desc {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* --- Línea divisoria inferior --- */
.process-bottom-line {
    height: 2px;
    background-color: var(--ism-accent);
    /* Mismo verde de los números */
    width: 100%;
    margin-top: 4rem;
}

/* ==========================================
           SECCIÓN: FECHAS IMPORTANTES Y REQUISITOS
        ========================================== */

.important-dates-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Tipografía General --- */
.section-heading {
    color: #1a1a1a;
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-text {
    color: #3c4146;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* --- Lista con Íconos Personalizados (Columna Izquierda) --- */
.custom-icon-list {
    padding-left: 0;
    list-style: none;
    margin-top: 2rem;
}

.custom-icon-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

/* El ícono de "Target" verde */
.custom-icon-list i {
    color: var(--ism-accent);
    /* Verde acento */
    font-size: 1.25rem;
    margin-right: 1rem;
    margin-top: -2px;
    /* Ajuste óptico fino para alinear con la primera línea de texto */
}

.custom-icon-list p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* --- Tabla Personalizada (Columna Derecha) --- */
.custom-dates-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2rem;
}

/* Sobrescribimos bordes nativos de Bootstrap */
.custom-dates-table> :not(caption)>*>* {
    border-bottom-width: 0px;
}

/* Cabecera Verde */
.custom-dates-table thead th {
    background-color: var(--ism-base-2);
    color: #ffffff;
    font-weight: 600;
    padding: 1rem;
    border: 2px solid #ffffff;
    /* Bordes internos blancos */
    vertical-align: middle;
}

/* Celdas Grises */
.custom-dates-table tbody td {
    background-color: #f8f9fa;
    /* Gris muy claro */
    color: #8c98a4;
    padding: 1rem;
    border: 2px solid #ffffff;
    /* Bordes internos blancos para replicar la imagen */
    vertical-align: middle;
    font-size: 0.95rem;
}

/* Evita que los bordes blancos externos se vean mal */
.table-responsive {
    border-radius: 4px;
    overflow: hidden;
}

/* ==========================================
           SECCIÓN DE BECAS (SPLIT ASIMÉTRICO)
        ========================================== */

.scholarships-section {
    padding: 100px 0;
    background-color: #ffffff;
}

/* --- Tipografía --- */
.scholarships-title {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.scholarships-text {
    color: #6c757d;
    font-size: 1.05rem;
    line-height: 1.8;
    /* Interlineado amplio para ese look editorial */
    margin-bottom: 0;
}

/* --- Contenedor de Imagen --- */
.scholarships-img-wrapper {
    width: 100%;
    /* Altura fija en escritorio para evitar que fotos verticales rompan el layout */
    height: 480px;
    overflow: hidden;
    border-radius: 2px;
    /* Redondeo imperceptible, muy limpio */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    /* Sombra ultra suave */
}

.scholarships-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Efecto premium al pasar el cursor (opcional, pero recomendado) */
.scholarships-img-wrapper:hover .scholarships-img {
    transform: scale(1.03);
}

/* --- Ajustes Responsivos --- */
@media (max-width: 991px) {
    .scholarships-section {
        padding: 60px 0;
    }

    .scholarships-img-wrapper {
        height: 350px;
        /* Reducimos la altura en tablets y móviles */
        margin-top: 3rem;
        /* Separación del texto cuando se apilan */
    }
}

/* ==========================================
           SECCIÓN: FUENTES DE BECAS
        ========================================== */

.scholarship-sources-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Encabezado Principal --- */
.header-icon {
    color: var(--ism-accent);
    /* Verde vibrante de la imagen */
    font-size: 2.5rem;
    line-height: 1;
}

.main-heading {
    color: #1a1a1a;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.5px;
}

/* --- Contenido de las Columnas --- */
.scholarship-title {
    color: var(--ism-base);
    /* Mismo verde para los títulos */
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
}

.scholarship-text {
    color: #6c757d;
    font-size: 1.05rem;
    line-height: 1.8;
    /* Interlineado amplio para lectura cómoda */
    margin-bottom: 1.5rem;
}

/* --- Enlace "Leer Más" Animado --- */
.scholarship-link {
    color: var(--ism-accent);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.scholarship-link i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    /* Transición para la flecha */
}

.scholarship-link:hover {
    color: var(--ism-accent);
    /* Verde ligeramente más oscuro en hover */
}

/* Desplaza la flecha a la derecha al pasar el mouse */
.scholarship-link:hover i {
    transform: translateX(5px);
}


/* ==========================================
           SECCIÓN: CINTA DE LLAMADO A LA ACCIÓN (CTA)
        ========================================== */

.cta-ribbon-section {
    /* Replicamos el degradado elegante de tu imagen: 
               De un rojo vino muy oscuro a un tono casi negro/azul oscuro.
            */
    background: linear-gradient(90deg, var(--ism-base-2) 0%, #0d0b1a 100%);
    padding: 50px 0;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Sombra interna para dar profundidad */
}

/* --- Tipografía --- */
.cta-ribbon-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: 0.5px;
}

/* --- Botón de Descarga --- */
.btn-download-cta {
    background-color: var(--ism-accent);
    /* Rojo institucional/carmesí basado en tu imagen */
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.9rem 2.5rem;
    border-radius: 4px;
    /* Ligero redondeo */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Borde sutil para darle volumen */
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-download-cta:hover {
    background-color: #7a1527;
    /* Rojo más oscuro en hover */
    color: #ffffff;
    transform: translateY(-2px);
    /* Elevación sutil */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /* Sombra de elevación */
}

/* --- Botón de Descarga --- */
.btn-download-ctaII {
    background-color: var(--ism-base);
    /* Rojo institucional/carmesí basado en tu imagen */
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.9rem 2.5rem;
    border-radius: 4px;
    /* Ligero redondeo */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Borde sutil para darle volumen */
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-download-ctaII:hover {
    background-color: var(--ism-marca);
    /* Rojo más oscuro en hover */
    color: #ffffff;
    transform: translateY(-2px);
    /* Elevación sutil */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /* Sombra de elevación */
}

/* ==========================================
           ESTILOS DE LA PÁGINA DE CARRERA (DESCRIPCIÓN)
        ========================================== */

/* Contenedor principal de la sección */
.career-description-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Contenido Principal (Izquierda) --- */
.career-main-content h2 {
    color: #1a1a1a;
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.career-main-content h4 {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.career-intro-text {
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.career-intro-list {
    padding-left: 1.5rem;
    /* Sangría estándar para la lista */
    margin-bottom: 2.5rem;
    list-style-type: disc;
    /* Aseguramos el estilo clásico de punto redondo */
}

.career-intro-list li {
    color: var(--ism-base-2);
    /* Azul marino muy oscuro para igualar el peso de tu imagen */
    font-size: 1.1rem;
    font-weight: 700;
    /* Texto en negrita, como en la referencia */
    line-height: 0.8;
    margin-bottom: 0.5rem;
}

/* La magia moderna: estilizamos únicamente la viñeta */
.career-intro-list li::marker {
    color: var(--ism-accent);
    /* Inyecta el color rojo institucional a los bullets */
    font-size: 1.2em;
    /* Hace el punto ligeramente más grande para destacar */
}

.career-section-title {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

/* --- Tarjetas de Especialización --- */
.specialization-card {
    border: none;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.specialization-card:hover {
    transform: translateY(-5px);
}

.specialization-img {
    height: 180px;
    width: 100%;
    object-fit: cover;
}

.specialization-label-sistemas {
    background-color: var(--ism-sistemas);
    /* Color base vibrante de la referencia */
    color: #ffffff;
    padding: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

.specialization-label-mecanica {
    background-color: var(--ism-mecanica);
    /* Color base vibrante de la referencia */
    color: #ffffff;
    padding: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

.specialization-label-gestion {
    background-color: var(--ism-gestion);
    /* Color base vibrante de la referencia */
    color: #ffffff;
    padding: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

.specialization-label-design {
    background-color: var(--ism-design);
    /* Color base vibrante de la referencia */
    color: #ffffff;
    padding: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

/* --- Frase Destacada en Fondo Secundario --- */
.highlight-phrase {
    background-color: rgba(39, 174, 96, 0.05);
    /* Verde muy claro de fondo */
    border-left: 5px solid var(--ism-fondo-secundario);
    /* Borde izquierdo verde sólido */
    padding: 2.5rem;
    margin: 4rem 0;
    border-radius: 4px;
}

.highlight-phrase-text {
    color: var(--ism-accent-white);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

/* --- Lista con Iconos de Destino --- */
.target-list {
    list-style: none;
    padding: 0;
    margin-top: 2.5rem;
}

.target-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    color: #6c757d;
    font-size: 1.05rem;
    line-height: 1.7;
}

.target-list-item i {
    color: var(--ism-accent);
    /* Iconos verdes */
    font-size: 1.25rem;
    margin-right: 1.2rem;
}

/* --- Barra Lateral (Derecha) --- */
.career-sidebar {
    background-color: var(--ism-base-2);
    /* Azul oscuro profundo de la referencia */
    color: #ffffff;
    border-radius: 4px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.career-sidebar h3 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 2rem;
}

.career-sidebar h3:not(:first-child) {
    margin-top: 3rem;
}

.sidebar-contact-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

/* Enlaces de contacto en Fondo Principal */
.sidebar-contact-info a {
    color: var(--ism-fondo-principal);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-contact-info a:hover {
    color: var(--ism-accent);
}

/* Iconos de redes sociales Fondo Secundario */
.social-icons-container {
    display: flex;
    gap: 1.2rem;
    margin-top: 2rem;
}

.social-icons-container a i {
    color: var(--ism-fondo-secundario);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.social-icons-container a:hover i {
    transform: scale(1.15);
}

/* Botón rojo para recursos */
.btn-student-resources {
    background-color: var(--ism-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    font-weight: 600;
    width: 100%;
    margin-top: 3rem;
    transition: background-color 0.3s ease;
}

.btn-student-resources:hover {
    background-color: var(--ism-fondo-tercero);
    color: #ffffff;
}

/*sistemas*/
.btn-student-resources-sistemas {
    background-color: var(--ism-sistemas);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    font-weight: 600;
    width: 100%;
    margin-top: 3rem;
    transition: background-color 0.3s ease;
}

.btn-student-resources-sistemas:hover {
    background-color: var(--ism-accent);
    color: #ffffff;
}

/*mecanica*/
.btn-student-resources-mecanica {
    background-color: var(--ism-mecanica);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    font-weight: 600;
    width: 100%;
    margin-top: 3rem;
    transition: background-color 0.3s ease;
}

.btn-student-resources-mecanica:hover {
    background-color: var(--ism-accent);
    color: #ffffff;
}

/*gestion*/
.btn-student-resources-gestion {
    background-color: var(--ism-gestion);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    font-weight: 600;
    width: 100%;
    margin-top: 3rem;
    transition: background-color 0.3s ease;
}

.btn-student-resources-gestion:hover {
    background-color: var(--ism-accent);
    color: #ffffff;
}

/*diseño*/
.btn-student-resources-design {
    background-color: var(--ism-design);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    font-weight: 600;
    width: 100%;
    margin-top: 3rem;
    transition: background-color 0.3s ease;
}

.btn-student-resources-design:hover {
    background-color: var(--ism-accent);
    color: #ffffff;
}

/*Bachillerato General*/
.btn-student-resources-bachillerato {
    background-color: var(--ism-preparatoria);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    font-weight: 600;
    width: 100%;
    margin-top: 3rem;
    transition: background-color 0.3s ease;
}

.btn-student-resources-bachillerato:hover {
    background-color: var(--ism-fondo-tercero);
    color: #ffffff;
}

/* --- Ajustes Responsivos --- */
@media (max-width: 991px) {
    .career-description-section {
        padding: 60px 0;
    }

    .career-main-content h2 {
        font-size: 2.2rem;
    }

    .career-sidebar {
        margin-top: 4rem;
        /* Separación de la barra lateral en móvil */
        padding: 2.5rem;
    }

    .highlight-phrase {
        padding: 2rem;
        margin: 3rem 0;
    }

    .highlight-phrase-text {
        font-size: 1.4rem;
    }
}

/* ==========================================
           SECCIÓN: PESTAÑAS ACADÉMICAS (TABS)
        ========================================== */

.academic-tabs-section {
    padding: 80px 0;
    background-color: var(--ism-gris);
    /* Fondo gris claro para contrastar con las pestañas blancas */
}

/* --- Columna de Imagen (Fachada de Video) --- */
.academic-media-col {
    position: relative;
    min-height: 400px;
    /* background-image: url('https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?auto=format&fit=crop&w=800&q=80'); */
    background-size: cover;
    background-position: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


/* --- Sistema de Pestañas (Sobrescribiendo Bootstrap) --- */
.custom-nav-tabs {
    border-bottom: none;
    /* Quitamos la línea inferior por defecto */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Permite scroll horizontal en móviles si no caben las pestañas */
}

.custom-nav-tabs .nav-link {
    border: none;
    background-color: #e9ecef;
    /* Fondo gris para pestañas inactivas */
    color: #6c757d;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 1.2rem 1.5rem;
    border-radius: 0;
    /* Pestañas cuadradas */
    white-space: nowrap;
    /* Evita que el texto de la pestaña se parta en dos líneas */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* La pestaña activa se vuelve blanca para fusionarse con el contenido */
.custom-nav-tabs .nav-link.active {
    background-color: #ffffff;
    color: #1a1a1a;
}

.custom-nav-tabs .nav-link:hover:not(.active) {
    background-color: #dee2e6;
}

/* --- Contenedor de Contenido (Caja Blanca) --- */
.custom-tab-content {
    background-color: #ffffff;
    padding: 3rem;
    position: relative;
    border-bottom-right-radius: 4px;
    /* La esquina inferior izquierda solo se redondea en móviles cuando se apila */
}

/* Marca de agua (Watermark) esquina superior derecha */
.tab-watermark {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 120px;
    opacity: 0.04;
    /* Opacidad ultra baja para que no estorbe la lectura */
    pointer-events: none;
    /* Evita que la imagen bloquee la selección de texto */
}

/* Tipografía del contenido */
.tab-pane-title {
    color: #0f2c4d;
    /* Azul muy oscuro/marino */
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.tab-pane-text {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* --- Ajustes Responsivos --- */
@media (max-width: 991px) {
    .academic-media-col {
        border-top-right-radius: 4px;
        border-bottom-left-radius: 0;
    }

    .custom-tab-content {
        border-bottom-left-radius: 4px;
    }

    .custom-tab-content {
        padding: 2rem;
    }
}

/* ==========================================
   LÓGICA DE TAMAÑO FIJO Y SCROLL (SOLO ESCRITORIO)
========================================== */
@media (min-width: 992px) {

    /* 1. Forzamos la altura total de la fila a los 434px solicitados */
    .academic-row-fixed {
        height: 434px;
    }

    /* 2. Forzamos el ancho exacto de la imagen (372px) y su alto */
    .academic-media-col {
        flex: 0 0 372px !important;
        max-width: 372px !important;
        height: 100%;
    }

    /* 3. La columna derecha toma el resto del espacio (calc) y se vuelve un contenedor Flex vertical */
    .academic-content-col {
        flex: 1;
        max-width: calc(100% - 372px);
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 4. El contenido toma el alto sobrante y activa el scroll si se desborda */
    .custom-tab-content {
        flex-grow: 1;
        overflow-y: auto;
    }
}

/* --- Customización del Scrollbar (Premium UI) --- */
/* Estilizamos la barra de desplazamiento para que luzca moderna y no rompa la estética de la caja blanca */
.custom-tab-content::-webkit-scrollbar {
    width: 6px;
}

.custom-tab-content::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

.custom-tab-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.custom-tab-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================
           SECCIÓN: CIERRE Y LLAMADO A LA ACCIÓN (BREAKOUT)
        ========================================== */

.closing-cta-section {
    background-color: #1c2b39;
    /* Azul marino oscuro de tu referencia */
    /* Damos un margen superior para que la imagen tenga espacio a dónde "salir" */
    margin-top: 100px;
}

/* --- Contenido de Texto --- */
.closing-text-col {
    /* Padding vertical generoso para darle altura a la caja azul */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.closing-text {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.8;
    font-weight: 300;
    /* Texto ligero y elegante */
    margin-bottom: 0;
}

/* --- Botones Verdes --- */
.btn-cta-green-sistemas {
    background-color: var(--ism-sistemas);
    /* Verde vibrante de la imagen */
    color: #ffffff;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-cta-green-sistemas i {
    font-size: 1.1rem;
}

.btn-cta-green-sistemas:hover {
    background-color: var(--ism-accent);
    /* Verde más oscuro en hover */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(186, 177, 59, 0.4);
}

.btn-cta-green-mecanica {
    background-color: var(--ism-mecanica);
    /* Verde vibrante de la imagen */
    color: #ffffff;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-cta-green-mecanica i {
    font-size: 1.1rem;
}

.btn-cta-green-mecanica:hover {
    background-color: var(--ism-accent);
    /* Verde más oscuro en hover */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(186, 177, 59, 0.4);
}

.btn-cta-green-gestion {
    background-color: var(--ism-gestion);
    /* Verde vibrante de la imagen */
    color: #ffffff;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-cta-green-gestion i {
    font-size: 1.1rem;
}

.btn-cta-green-gestion:hover {
    background-color: var(--ism-accent);
    /* Verde más oscuro en hover */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(186, 177, 59, 0.4);
}

.btn-cta-green-desing {
    background-color: var(--ism-design);
    /* Verde vibrante de la imagen */
    color: #ffffff;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-cta-green-design i {
    font-size: 1.1rem;
}

.btn-cta-green-design:hover {
    background-color: var(--ism-accent);
    /* Verde más oscuro en hover */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(186, 177, 59, 0.4);
}

/* --- Contenedor de la Imagen (El Truco Tech Lead) --- */
.closing-img-wrapper {
    /* El margen negativo tira de la imagen hacia arriba, fuera de la caja azul */
    margin-top: -80px;
    height: calc(100% + 80px);
    /* Compensa la altura */
}

.closing-img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    /* Garantiza que la foto no se aplaste */
    object-fit: cover;
    display: block;
    /* Elimina el pequeño margen inferior fantasma de las imágenes inline */
}

/* --- Degradación Responsiva para Móviles --- */
@media (max-width: 991px) {
    .closing-cta-section {
        margin-top: 0;
        /* Quitamos el espacio superior extra */
    }

    .closing-text-col {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .closing-img-wrapper {
        margin-top: 0;
        /* Anulamos el efecto breakout en móviles para que no tape el texto de arriba */
        height: 300px;
    }

    .closing-img {
        min-height: auto;
    }
}

/* ==========================================
           SECCIÓN: NOTICIAS Y ACTUALIZACIONES
        ========================================== */

.news-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Encabezado de la Sección --- */
.news-header-title {
    color: #1a2b4c;
    /* Azul marino profundo basado en tu referencia */
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.5px;
}

/* La línea decorativa que acompaña al título */
.title-decorative-line {
    height: 1px;
    background-color: #e0e0e0;
    margin-left: 1.5rem;
    /* Separación entre el texto y la línea */
    transform: translateY(2px);
    /* Ajuste óptico vertical */
}

.news-read-all-link {
    color: var(--ism-accent);
    /* Verde vibrante */
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-read-all-link:hover {
    color: var(--ism-accent);
    text-decoration: underline;
}

/* --- Metadatos (Fecha y Categoría) --- */
.news-meta {
    color: #8c98a4;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* --- Noticia Principal (Izquierda) --- */
.featured-news-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Forzamos un formato panorámico perfecto */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1.25rem;
    transition: transform 0.3s ease;
}

.featured-news-title {
    color: #1a1a1a;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* --- Listado Secundario (Derecha) --- */
.list-news-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    /* TRUCO TECH LEAD: Evita que la imagen se deforme si el título de al lado es muy largo */
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.list-news-title {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.2s ease;
    /* display: -webkit-box; para truncar a 3 líneas si el texto es excesivo */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Interacciones (Micro-animaciones UI) --- */
.news-card-link {
    text-decoration: none;
    display: block;
    /* Asegura que toda el área de la noticia sea clickeable de forma semántica */
}

/* Al hacer hover en la noticia, la imagen hace un ligero zoom y el título cambia al color verde */
.news-card-link:hover .featured-news-img,
.news-card-link:hover .list-news-img {
    transform: scale(1.02);
}

.news-card-link:hover .featured-news-title,
.news-card-link:hover .list-news-title {
    color: var(--ism-accent);
}

/* Contenedor de la imagen para que el zoom no se salga de los bordes redondeados */
.img-zoom-wrapper {
    overflow: hidden;
    border-radius: 4px;
    display: block;
}

/* ==========================================
   SECCIÓN DE TESTIMONIOS (CARRUSEL COMPUESTO)
========================================== */

.student-testimonials-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.section-main-title {
    color: var(--ism-base, #2b2f40);
    /* Color base oscuro */
    font-weight: 800;
    font-size: 1.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --- Tarjeta del Testimonio --- */
.testimonial-combo-card {
    background-color: transparent;
    height: 100%;
}

/* Caja de la Imagen */
.testimonial-img-box {
    width: 100%;
    /* En dispositivos móviles ocupará el 100%, pero en escritorio lo limitamos */
    max-width: 220px;
    aspect-ratio: 1 / 1;
    /* Forzamos a que sea siempre un cuadrado perfecto */
    overflow: hidden;
}

@media (max-width: 575px) {
    .testimonial-img-box {
        max-width: 100%;
        /* Permite que la imagen crezca en celulares pequeños */
        aspect-ratio: 16 / 9;
        /* Formato apaisado para móviles */
        margin-bottom: 1.5rem;
    }
}

.testimonial-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Evita que la foto se estire o deforme */
    object-position: center;
}

/* Caja de Texto */
.testimonial-content-box {
    position: relative;
    /* Necesario para contener la marca de agua absoluta */
    padding-left: 2rem;
    /* Separación de la imagen en escritorio */
    z-index: 1;
}

@media (max-width: 575px) {
    .testimonial-content-box {
        padding-left: 0;
        /* Quitamos la separación izquierda en móviles */
    }
}

.student-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ism-base-2, #1c2b39);
    /* Azul marino */
    margin-bottom: 0.2rem;
    margin-top: 0.5rem;
}

.student-role {
    font-size: 0.9rem;
    color: var(--ism-marca, #475569);
    /* Gris de marca */
    margin-bottom: 1.5rem;
}

.student-quote {
    font-size: 1.05rem;
    color: #1a1a1a;
    line-height: 1.7;
    margin-bottom: 0;
}

/* --- Marca de Agua (Comillas) --- */
.quote-watermark {
    position: absolute;
    top: -30px;
    left: 10px;
    font-size: 5rem;
    line-height: 1;
    color: var(--ism-fondo-secundario, #E2E8F0);
    /* Gris muy claro para no estorbar la lectura */
    opacity: 0.7;
    z-index: -1;
    /* Se coloca detrás del texto */
    pointer-events: none;
    /* Permite al usuario seleccionar el texto a través del icono */
}

@media (max-width: 575px) {
    .quote-watermark {
        left: -15px;
    }
}

/* --- Controles del Carrusel (Puntos Circulares) --- */
.custom-circle-indicators {
    bottom: -60px;
    /* Separamos los puntos del contenido de las tarjetas */
}

/* Sobreescribimos el diseño nativo de barra al diseño circular */
.custom-circle-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #cbd5e1;
    /* Gris claro inactivo */
    border: none;
    margin: 0 8px;
    opacity: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Indicador Activo usando el color de acento */
.custom-circle-indicators .active {
    background-color: var(--ism-accent, #DC2626);
    /* Rojo institucional */
    transform: scale(1.15);
    /* Crece sutilmente cuando está activo */
}

/* ==========================================
   SECCIÓN: LLAMADO A LA ACCION
========================================== */

.dragon-cta-section {
    position: relative;
    padding: 120px 0;
    /* Padding generoso para lucir la fotografía */

    /* 
       Técnica de Gradiente Superpuesto (Overlay):
       Usamos tu variable --ism-base-2 (#1c2b39) con un 90% de opacidad.
       Esto tiñe la foto de azul oscuro sin perder los detalles del fondo.
    */
    background: linear-gradient(rgba(28, 43, 57, 0.90), rgba(28, 43, 57, 0.90)),
        url('/assets/images/banners/daelsiguientepaso.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Opcional: Da un sutil efecto parallax al hacer scroll */
}

/* --- Título Izquierdo --- */
.dragon-title-sistemas {
    color: var(--ism-sistemas);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    margin-bottom: 0;
    line-height: 1.2;
}

.dragon-title-mecanica {
    color: var(--ism-mecanica);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    margin-bottom: 0;
    line-height: 1.2;
}

.dragon-title-gestion {
    color: var(--ism-primary);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    margin-bottom: 0;
    line-height: 1.2;
}

.dragon-title-design {
    color: var(--ism-primary);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    margin-bottom: 0;
    line-height: 1.2;
}

/* --- Párrafos Derechos --- */
.dragon-text-title {
    font-size: 2.15rem;
    line-height: 1.8;
    /* Interlineado amplio, fundamental para la legibilidad de bloques grandes */

    /* Blanco al 90% para evitar el cansancio visual (Halation) en fondos oscuros */
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.8rem;
    font-weight: 300;
    /* Tipografía ligera para darle ese toque moderno y premium */
}

.dragon-text {
    font-size: 1.15rem;
    line-height: 1.8;
    /* Interlineado amplio, fundamental para la legibilidad de bloques grandes */

    /* Blanco al 90% para evitar el cansancio visual (Halation) en fondos oscuros */
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.8rem;
    font-weight: 300;
    /* Tipografía ligera para darle ese toque moderno y premium */
}

/* --- Degradación para Dispositivos Móviles --- */
@media (max-width: 991px) {
    .dragon-cta-section {
        padding: 80px 0;
        /* Reducimos el padding vertical en móviles */
    }

    .dragon-title {
        /* En móviles, como el título se apila arriba del texto, 
           forzamos la alineación a la izquierda y reducimos el tamaño */
        text-align: left;
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
}

/* ==========================================
   SECCIÓN: PERCEPCIONES SALARIALES (SPLIT LAYOUT)
========================================== */

.perceptions-section {
    padding: 100px 0;
    background-color: #ffffff;
    /* Fondo blanco para dar respiro editorial */
}

/* --- Contenedor de la Imagen --- */
.perceptions-img-wrapper {
    border-radius: 4px;
    overflow: hidden;
    /* Sombra elegante que despega la foto del fondo blanco */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.perceptions-img {
    width: 100%;
    /* TRUCO TECH LEAD: Forzamos una proporción 4:3. 
       Así, sin importar la foto que suban, siempre será un rectángulo perfecto */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Efecto de micro-interacción al pasar el mouse */
.perceptions-img-wrapper:hover .perceptions-img {
    transform: scale(1.03);
}

/* --- Tipografía --- */
.perceptions-title {
    color: var(--ism-base-2);
    /* Azul marino institucional */
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    /* Clave para igualar tu imagen de referencia */
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.perceptions-subtitle-mecanica {
    color: var(--ism-mecanica);
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
}

.perceptions-subtitle-sistemas {
    color: var(--ism-sistemas);
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
}

.perceptions-subtitle-gestion {
    color: var(--ism-gestion);
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
}

.perceptions-subtitle-design {
    color: var(--ism-design);
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
}

.perceptions-text {
    color: var(--ism-marca);
    /* Gris oscuro */
    font-size: 1.1rem;
    line-height: 1.8;
}

/* --- Caja Destacada para el Dato Duro (IMCO) --- */
.salary-highlight-box-sistemas {
    background-color: var(--ism-fondo-secundario);
    /* Gris muy claro */
    border-left: 4px solid var(--ism-sistemas);
    padding: 1.5rem;
    border-radius: 0 4px 4px 0;
}

.salary-highlight-box-mecanica {
    background-color: var(--ism-fondo-secundario);
    /* Gris muy claro */
    border-left: 4px solid var(--ism-mecanica);
    padding: 1.5rem;
    border-radius: 0 4px 4px 0;
}

.salary-highlight-box-gestion {
    background-color: var(--ism-fondo-secundario);
    /* Gris muy claro */
    border-left: 4px solid var(--ism-gestion);
    padding: 1.5rem;
    border-radius: 0 4px 4px 0;
}

.salary-highlight-box-design {
    background-color: var(--ism-fondo-secundario);
    /* Gris muy claro */
    border-left: 4px solid var(--ism-design);
    padding: 1.5rem;
    border-radius: 0 4px 4px 0;
}

.salary-highlight-box p {
    color: var(--ism-marca);
    font-size: 0.95rem;
    line-height: 1.7;
}

.salary-icon-sistemas {
    font-size: 1.5rem;
    color: var(--ism-sistemas);
    margin-right: 1.2rem;
    margin-top: 0.1rem;
    /* Ajuste fino para alinear el icono con el texto fuerte */
}

.salary-icon-mecanica {
    font-size: 1.5rem;
    color: var(--ism-mecanica);
    margin-right: 1.2rem;
    margin-top: 0.1rem;
    /* Ajuste fino para alinear el icono con el texto fuerte */
}

.salary-icon-gestion {
    font-size: 1.5rem;
    color: var(--ism-gestion);
    margin-right: 1.2rem;
    margin-top: 0.1rem;
    /* Ajuste fino para alinear el icono con el texto fuerte */
}

.salary-icon-design {
    font-size: 1.5rem;
    color: var(--ism-design);
    margin-right: 1.2rem;
    margin-top: 0.1rem;
    /* Ajuste fino para alinear el icono con el texto fuerte */
}

/* --- Degradación Responsiva --- */
@media (max-width: 991px) {
    .perceptions-section {
        padding: 60px 0;
    }

    .perceptions-title {
        font-size: 1.75rem;
    }
}

/* ==========================================
   SECCIÓN GALERÍA DE IMÁGENES (SCROLL SNAP)
========================================== */

/* Contenedor principal de la pista (Track) */
.gallery-track {
    display: flex;
    gap: 1.5rem;
    /* Espaciado entre imágenes */
    overflow-x: auto;

    /* Magia del Scroll Snap: Fuerza a que las imágenes se ajusten automáticamente */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Desplazamiento suave nativo */

    /* Ocultamos la barra de desplazamiento para un look limpio */
    -ms-overflow-style: none;
    /* IE y Edge */
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 1rem;
    /* Pequeño respiro inferior */
}

.gallery-track::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari y Opera */
}

/* Cada elemento de la galería */
.gallery-slide {
    /* 
       En escritorio: 4 imágenes visibles (25% menos el gap)
       flex-shrink: 0 evita que se aplasten.
    */
    flex: 0 0 calc(25% - 1.125rem);
    scroll-snap-align: start;
    /* Ancla el desplazamiento al inicio de cada imagen */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    /* Sombra muy sutil */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.gallery-img {
    width: 100%;
    /* aspect-ratio fuerza a que todas sean uniformes. 4/5 da un toque vertical elegante */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.gallery-slide:hover .gallery-img {
    transform: scale(1.05);
    /* Efecto zoom premium al pasar el cursor */
}

/* --- Botones de Navegación Circulares --- */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--ism-base-2);
    /* Azul marino institucional */
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.gallery-nav-btn:hover {
    background-color: var(--ism-accent);
    /* Cambia al rojo acento */
    transform: translateY(-50%) scale(1.1);
}

.gallery-prev {
    left: 1rem;
}

.gallery-next {
    right: 1rem;
}

/* --- Ajustes Responsivos --- */
@media (max-width: 991px) {

    /* En Tablets: Mostramos 2 imágenes y media (el .5 invita al usuario a hacer swipe) */
    .gallery-slide {
        flex: 0 0 calc(45% - 1rem);
    }
}

@media (max-width: 575px) {

    /* En Móviles: Mostramos 1 imagen casi completa */
    .gallery-slide {
        flex: 0 0 calc(85% - 1rem);
    }

    /* Ocultamos los botones en móvil porque el usuario usará su dedo (Swipe) */
    .gallery-nav-btn {
        display: none;
    }
}

/* ==========================================
   SECCIÓN: SECCION RAZONES (TEXT GRID)
========================================== */

.seccion-razones {
    padding: 100px 0;
    background-color: #ffffff;
}

.seccion-razones-gris {
    padding: 100px 0;
    background-color: var(--ism-gris);
}

/* --- Título Principal --- */
.razones-main-title {
    color: var(--ism-base-2);
    /* Azul oscuro casi negro */
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: 0.5px;
    margin-bottom: 4rem;
    /* Mucho respiro entre el título y el contenido */
}

/* --- Elementos Individuales --- */
.razon-item {
    margin-bottom: 3rem;
    /* Separación vertical entre bloques de texto */
}

/* Título del bloque (Negrita y oscuro) */
.razon-title {
    color: var(--ism-base-2);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Párrafo del bloque */
.razon-text {
    color: var(--ism-marca);
    /* Gris secundario para no cansar la vista */
    font-size: 1rem;
    line-height: 1.8;
    /* Interlineado amplio (Editorial style) */
    font-weight: 400;
    margin-bottom: 0;
}

/* --- Degradación Responsiva para Móviles --- */
@media (max-width: 768px) {
    .seccion-razones {
        padding: 60px 0;
    }

    .razones-main-title {
        font-size: 1.5rem;
        margin-bottom: 3rem;
    }

    .razon-item {
        margin-bottom: 2.5rem;
    }
}

/* ==========================================
   SECCIÓN: PROGRAMAS ACADÉMICOS
========================================== */

.programas-licenciatura {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- Columna Principal (Textos) --- */
.academics-main-title {
    color: #1a1a1a;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.academics-intro-text {
    color: var(--ism-marca);
    /* Gris oscuro de lectura */
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.academics-divider {
    border-color: #e5e7eb;
    opacity: 1;
    /* Sobrescribimos la opacidad por defecto de Bootstrap */
}

/* --- Tarjetas Horizontales de Programas --- */
.program-horizontal-card {
    transition: transform 0.3s ease;
}

.program-img-wrapper {
    width: 100%;
    overflow: hidden;
    /* aspect-ratio fuerza que todas las fotos sean del mismo tamaño (panorámico) */
    aspect-ratio: 16 / 10;
    background-color: #f8f9fa;
    /* Color de carga */
}

.program-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Evita que la foto se deforme */
    transition: transform 0.5s ease;
}

/* Ligero zoom a la imagen al pasar el mouse por la tarjeta */
.program-horizontal-card:hover .program-img {
    transform: scale(1.03);
}

.program-title {
    color: var(--ism-base-2);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.program-desc {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.program-read-more {
    color: var(--ism-base-2);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.program-read-more:hover {
    color: var(--ism-accent);
    /* Cambia al rojo institucional */
}

/* --- Barra Lateral (Sidebar Box) --- */
.academics-sidebar-box {
    border: 0px solid #e5e7eb;
    /* Borde muy sutil gris claro */
    background-color: #ffffff;
    padding: 2rem 0;
    /* Padding superior e inferior */
}

.academics-sidebar-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.sidebar-link {
    display: block;
    /* Vuelve el enlace un bloque para que el área de clic sea enorme */
    padding: 1rem 2.5rem;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Efecto hover estilo menú de navegación lateral */
.sidebar-link:hover {
    background-color: #f8f9fa;
    color: var(--ism-accent);
    padding-left: 2.8rem;
    /* Pequeño desplazamiento hacia la derecha para dar feedback visual */
}

/* --- Ajustes Responsivos --- */
@media (max-width: 991px) {
    .programas-licenciatura {
        padding: 60px 0;
    }

    .academics-sidebar-box {
        margin-top: 3rem;
        /* Separa el sidebar del listado en móviles */
    }
}

/* ==========================================
   SECCIÓN: LICENCIATURA/PREPARATORIA INTRO (SLANTED SPLIT)
========================================== */

.programas-intro {
    min-height: 450px;
    width: 100%;
    overflow: hidden;
    /* Evita desbordamientos del fondo */
    background-color: #f8f9fa;
    /* Color de seguridad */
}

/* --- Capa de la Imagen de Fondo (Derecha/Fondo) --- */
.intro-licenciatura-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reemplaza esta URL con la ruta de la foto de los arcos de tu campus */
    background-image: url('/assets/images/licenciatura/images/seccion.intro.jpg');
    background-size: cover;
    background-position: right center;
    /* Enfocamos la imagen hacia la derecha */
    z-index: 1;
}

.intro-preparatoria-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reemplaza esta URL con la ruta de la foto de los arcos de tu campus */
    background-image: url('/assets/images/preparatoria/images/seccion.intro.jpg');
    background-size: cover;
    background-position: right center;
    /* Enfocamos la imagen hacia la derecha */
    z-index: 1;
}

.intro-secundaria-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reemplaza esta URL con la ruta de la foto de los arcos de tu campus */
    background-image: url('/assets/images/secundaria/images/seccion_intro_mejorada.jpg');
    background-size: cover;
    background-position: right center;
    /* Enfocamos la imagen hacia la derecha */
    z-index: 1;
}

/* --- Capa Oscura (Izquierda con corte diagonal) --- */
.intro-licenciatura-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ism-base);
    /* Color oscuro institucional */
    z-index: 2;

    /* 
       LA MAGIA DEL CLIP-PATH: 
       Dibuja un polígono.
       Punto 1 (Arriba Izq): 0% x 0%
       Punto 2 (Arriba Der): 65% x 0%
       Punto 3 (Abajo Der): 85% x 100%
       Punto 4 (Abajo Izq): 0% x 100%
    */
    clip-path: polygon(0 0, 65% 0, 85% 100%, 0% 100%);

    /* Pequeña textura sutil (opcional) replicando tu imagen de referencia */
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px);
    background-size: 20px 20px;
}

.intro-preparatoria-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ism-preparatoria);
    /* Color oscuro institucional */
    z-index: 2;

    /* 
       LA MAGIA DEL CLIP-PATH: 
       Dibuja un polígono.
       Punto 1 (Arriba Izq): 0% x 0%
       Punto 2 (Arriba Der): 65% x 0%
       Punto 3 (Abajo Der): 85% x 100%
       Punto 4 (Abajo Izq): 0% x 100%
    */
    clip-path: polygon(0 0, 65% 0, 85% 100%, 0% 100%);

    /* Pequeña textura sutil (opcional) replicando tu imagen de referencia */
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px);
    background-size: 20px 20px;
}

.intro-secundaria-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ism-secundaria);
    /* Color oscuro institucional */
    z-index: 2;

    /* 
       LA MAGIA DEL CLIP-PATH: 
       Dibuja un polígono.
       Punto 1 (Arriba Izq): 0% x 0%
       Punto 2 (Arriba Der): 65% x 0%
       Punto 3 (Abajo Der): 85% x 100%
       Punto 4 (Abajo Izq): 0% x 100%
    */
    clip-path: polygon(0 0, 65% 0, 85% 100%, 0% 100%);

    /* Pequeña textura sutil (opcional) replicando tu imagen de referencia */
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px);
    background-size: 20px 20px;
}

/* --- Posicionamiento del Logo --- */
.intro-logo-wrapper {
    padding: 2rem 2rem 0 2rem;
    /* Espaciado superior e izquierdo */
}

.intro-logo {
    max-width: 280px;
    height: auto;
}

/* --- Tipografía del Texto Central --- */
.intro-title-text-lead {
    font-size: 2.35rem;
    line-height: 1.7;
    /* Interlineado amplio para lectura cómoda */
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Mejora la legibilidad */
}

.intro-text-lead {
    font-size: 1.35rem;
    line-height: 1.7;
    /* Interlineado amplio para lectura cómoda */
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Mejora la legibilidad */
}

/* --- Degradación Responsiva (Mobile-First Invertido) --- */
@media (max-width: 991px) {
    .intro-licenciatura-dark-overlay {
        /* En tablets, empujamos la diagonal un poco más a la derecha para dar espacio al texto */
        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    }

    .intro-preparatoria-dark-overlay {
        /* En tablets, empujamos la diagonal un poco más a la derecha para dar espacio al texto */
        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    }

    .intro-secundaria-dark-overlay {
        /* En tablets, empujamos la diagonal un poco más a la derecha para dar espacio al texto */
        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    }


    .intro-text-lead {
        font-size: 1.15rem;
        /* Al centralizarse en tablet, el texto respira mejor con un ancho controlado */
        margin: 0 auto;
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .programas-intro {
        min-height: 500px;
        /* Damos más altura en móvil para acomodar el texto apilado */
    }

    .intro-licenciatura-dark-overlay {
        /* En celulares, la diagonal horizontal roba mucho espacio. 
           Cambiamos a una diagonal casi completa o cobertura total 
           para proteger la legibilidad del texto (Accesibilidad WCAG). */
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    }

    .intro-preparatoria-dark-overlay {
        /* En celulares, la diagonal horizontal roba mucho espacio. 
           Cambiamos a una diagonal casi completa o cobertura total 
           para proteger la legibilidad del texto (Accesibilidad WCAG). */
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    }

    .intro-logo-wrapper {
        padding: 1.5rem;
        text-align: center;
        /* Centramos el logo en celulares */
    }

    .intro-logo {
        max-width: 220px;
    }

    .intro-title-text-lead {
        font-size: 1.75rem;
    }

    .intro-text-lead {
        font-size: 1.05rem;
    }
}

/* ==========================================
   SECCIÓN: LICENCIATURA TIEMPO (BANNER)
========================================== */

.licenciatura-tiempo {
    background-color: var(--ism-base);
    /* Fondo oscuro homogéneo solicitado */
    padding: 40px 0;
    /* Padding vertical para darle forma de cinta/banner */
    width: 100%;
}

.tiempo-texto {
    font-weight: 800;
    /* Extra bold para igualar la fuerza visual de la imagen */
    font-size: 2.3rem;
    /* Tamaño grande en escritorio */
    letter-spacing: -1px;
    /* Comprime ligeramente el texto para un look más sólido */
    text-transform: uppercase;

    /* Usamos Flexbox para mantener las dos partes del texto alineadas y controlar su salto de línea */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    /* Espaciado entre la parte dorada y la blanca */
}

.tiempo-texto-small {
    font-weight: 800;
    /* Extra bold para igualar la fuerza visual de la imagen */
    font-size: 1.3rem;
    /* Tamaño grande en escritorio */
    letter-spacing: -1px;
    /* Comprime ligeramente el texto para un look más sólido */
    text-transform: uppercase;

    /* Usamos Flexbox para mantener las dos partes del texto alineadas y controlar su salto de línea */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    /* Espaciado entre la parte dorada y la blanca */
}

.tiempo-highlight {
    color: var(--ism-sistemas);
    /* Amarillo/Dorado institucional */
}

.tiempo-white {
    color: #ffffff;
}

/* --- Degradación Responsiva para Móviles y Tablets --- */
@media (max-width: 991px) {
    .tiempo-texto {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .licenciatura-tiempo {
        padding: 30px 0;
    }

    .tiempo-texto {
        font-size: 1.8rem;
        gap: 8px;
    }
}

@media (max-width: 575px) {
    .tiempo-texto {
        font-size: 1.5rem;
        flex-direction: column;
        /* Apilamos el texto "19 AÑOS" sobre el resto en celulares pequeños */
        gap: 2px;
        line-height: 1.2;
    }
}

/* ==========================================
   SECCIÓN: EMPLEABILIDAD (LOGO WALL)
========================================== */

.licenciatura-empleabilidad {
    width: 100%;
}

/* --- Encabezado Oscuro --- */
.empleabilidad-header {
    background-color: var(--ism-base-2);
    /* Azul marino muy oscuro */
    padding: 3rem 1rem;
}

.empleabilidad-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 0;
}

.empleabilidad-highlight {
    color: var(--ism-accent);
    /* Rojo de impacto */
}

/* --- Contenedor de Logos y Fondo --- */
.empleabilidad-body {
    padding: 80px 0;
    /* Fotografía de fondo (estudiantes/campus) */
    background-image: url('/assets/images/instalaciones/galeria5.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Efecto Parallax opcional, fiel a tu Hero */
}

.empleabilidad-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Capa blanca al 92% de opacidad. Permite ver la foto muy tenue de fondo */
    background-color: rgba(255, 255, 255, 0.92);
    z-index: 0;
}

/* --- Grilla de Logos usando Flexbox --- */
.empleabilidad-logos-grid {
    display: flex;
    flex-wrap: wrap;
    /* Permite que salten a la siguiente línea si no caben */
    justify-content: center;
    align-items: center;
    gap: 3rem 5rem;
    /* Separación vertical (3rem) y horizontal (5rem) */
}

.empleabilidad-logo-box {
    width: 150px;
    /* Ancho fijo para mantener simetría */
    height: 150px;
    /* Alto fijo */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* CRÍTICO: Comportamiento de la imagen dentro de su caja */
.empleabilidad-logo-box img {
    max-width: 100%;
    max-height: 100%;
    /* contain: Escala el logo para que quepa en la caja sin deformarse ni estirarse */
    object-fit: contain;
}

/* Micro-interacción: Pequeño zoom al pasar el cursor */
.empleabilidad-logo-box:hover {
    transform: scale(1.1);
}

/* --- Degradación Responsiva --- */
@media (max-width: 768px) {
    .empleabilidad-header {
        padding: 2.5rem 1rem;
    }

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

    .empleabilidad-body {
        padding: 50px 0;
    }

    .empleabilidad-logos-grid {
        gap: 2rem 3rem;
        /* Reducimos la separación en tablets/móviles */
    }

    .empleabilidad-logo-box {
        width: 120px;
        /* Reducimos el tamaño del logo en móviles */
        height: 60px;
    }
}

/* ==========================================
   SECCIÓN: LICENCIATURA CONTACTO
========================================== */

.seccion-contacto {
    padding: 100px 0;
    /* Fondo gris muy claro para resaltar las tarjetas blancas */
    background-color: var(--ism-gris);
}

/* --- Título Izquierdo --- */
.contacto-main-title {
    color: var(--ism-base-2);
    /* Azul oscuro institucional */
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* --- Tarjetas Blancas --- */
.contacto-card {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 2px;
    /* Redondeo muy sutil */
    /* Sombra elegante que despega la caja del fondo gris */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.contacto-card-title {
    color: #1a1a1a;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* --- Textos de Información --- */
.contacto-info-text {
    color: var(--ism-marca);
    /* Gris secundario para lectura */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.contacto-info-text strong {
    color: #1a1a1a;
    display: block;
    /* Manda el dato a la siguiente línea para mejor escaneabilidad */
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* --- Formulario --- */
.contacto-form .form-control {
    border-radius: 2px;
    border: 1px solid #e2e8f0;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    box-shadow: none;
    /* Quitamos la sombra nativa de Bootstrap */
    transition: border-color 0.3s ease;
}

.contacto-form .form-control:focus {
    border-color: var(--ism-accent);
    /* Borde rojo al seleccionar */
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.1);
}

.contacto-form .form-control::placeholder {
    color: #a0aec0;
}

/* Botón Submit */
.btn-contacto-submit {
    background-color: var(--ism-accent);
    /* Rojo de impacto */
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 2.5rem;
    border: none;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.btn-contacto-submit:hover {
    background-color: #b91c1c;
    /* Rojo más oscuro */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* --- Degradación Responsiva --- */
@media (max-width: 991px) {
    .seccion-contacto {
        padding: 70px 0;
    }

    .contacto-main-title {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }

    .contacto-card {
        padding: 2rem;
    }
}

/* ==========================================
   SECCIÓN: ADMISIONES DUDAS (FULL-WIDTH SPLIT)
========================================== */

/* Limpiamos la sección padre ya que el diseño es full-bleed */
.admisiones-dudas {
    background-color: #ffffff;
}

/* --- Columna Izquierda (Azul) --- */
.dudas-left-col {
    background-color: var(--ism-base);
    /* Color azul oscuro institucional[cite: 4] */
    min-height: 400px;
}

.dudas-title {
    font-weight: 800;
    font-size: 2.8rem;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* --- Columna Derecha (Blanca con Formulario) --- */
.dudas-right-col {
    /* El padding está manejado por las clases nativas de Bootstrap (p-5) en el HTML */
    min-height: 400px;
}

/* --- Degradación Responsiva para Móviles y Tablets --- */
@media (max-width: 991px) {
    .dudas-left-col {
        min-height: 250px;
        padding: 3rem !important;
    }

    .dudas-title {
        font-size: 2.2rem;
        /* En tablets y móviles forzamos el centrado visual absoluto */
        text-align: center !important;
    }

    .dudas-right-col {
        padding: 3rem 1.5rem !important;
    }
}

@media (max-width: 575px) {
    .dudas-title {
        font-size: 1.8rem;
    }
}

/* ==========================================
   SECCIÓN: PREPARATORIA ACERCA (BEM)
========================================== */

.preparatoria-acerca {
    padding: 90px 0;
    background-color: #ffffff;
}

/* --- Block: Wrapper de la Imagen --- */
.preparatoria-acerca__img-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    /* Ligero redondeo moderno */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    /* Sombra elegante que despega la imagen */
}

/* --- Element: Imagen --- */
.preparatoria-acerca__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Interacción de hover en la imagen (Zoom sutil) */
.preparatoria-acerca__img-wrapper:hover .preparatoria-acerca__img {
    transform: scale(1.03);
}

/* --- Element: Título --- */
.preparatoria-acerca__title {
    color: var(--ism-base-2);
    /* Azul marino muy oscuro para fuerte contraste */
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* --- Element: Párrafo --- */
.preparatoria-acerca__text {
    color: var(--ism-base);
    font-size: 1.05rem;
    line-height: 1.8;
    /* Interlineado amplio editorial */
    margin-bottom: 2rem;
}

/* --- Degradación Responsiva (Tablets y Móviles) --- */
@media (max-width: 991px) {
    .preparatoria-acerca {
        padding: 60px 0;
    }

    .preparatoria-acerca__title {
        font-size: 1.6rem;
    }

    /* En dispositivos móviles, damos un margen superior al texto para separarlo de la foto apilada */
    .preparatoria-acerca__content {
        margin-top: 1rem;
    }
}

@media (max-width: 575px) {
    .preparatoria-acerca__title {
        font-size: 1.45rem;
    }
}

/* ==========================================
   SECCIÓN: IB POLÍTICAS (GRILLA DE DESCARGAS)
========================================== */

.ib-politicas {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- BEM Element: Enlace/Botón --- */
.ib-politicas__link {
    /* Flexbox permite centrar verticalmente el texto si este ocupa múltiples líneas */
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 80px;
    /* Altura mínima para mantener simetría en la grilla */
    padding: 1.5rem 2rem;

    /* El fondo gris claro típico de tu imagen de referencia */
    background-color: var(--ism-gris);

    color: #1a1a1a;
    /* Texto oscuro/negro */
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;
    /* Quitamos el subrayado nativo de los enlaces */
    border-radius: 2px;
    /* Un redondeo casi imperceptible */

    /* Transición suave para el cambio de color del texto */
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* --- Estado Interactual (Hover) --- */
.ib-politicas__link:hover {
    color: var(--ism-accent);
    /* Cambia al rojo institucional[cite: 4] */
    background-color: #ebeef2;
    /* Oscurece mínimamente el fondo para dar feedback táctil visual */
}

/* ==========================================
   SECCIÓN: LICENCIATURA CERTIFICACIONES
========================================== */

.licenciatura-certificaciones {
    background-color: var(--ism-fondo-principal);
    /* */
    padding: 100px 0;
    overflow: hidden;
    /* Evita que las formas geométricas de fondo generen scroll horizontal */
}

/* --- Tipografía --- */
.certificaciones-title {
    color: var(--ism-base-2);
    /* Azul marino profundo[cite: 4] */
    font-weight: 900;
    font-size: 2.2rem;
    letter-spacing: 0.5px;
    /*text-transform: uppercase;*/
    margin-bottom: 2.5rem;
}

.certificaciones-text {
    color: var(--ism-marca);
    /* Gris oscuro de lectura[cite: 4] */
    font-size: 1.05rem;
    line-height: 1.8;
}

/* --- Logos Superpuestos (Izquierda) --- */
.certificaciones-logos-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding-left: 10px;
    /* Compensa la superposición óptica */
}

.cert-brand-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    /* TRUCO TECH LEAD: Margen negativo para lograr la superposición de los círculos */
    margin-left: -20px;

    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, z-index 0s;
}

.cert-brand-circle:first-child {
    margin-left: 0;
}

/* Micro-interacción: Al pasar el cursor, el logo se eleva y se pone por encima de los demás */
.cert-brand-circle:hover {
    transform: translateY(-8px);
    z-index: 10;
}

.cert-brand-circle img {
    width: 65%;
    height: auto;
    object-fit: contain;
}

/* Colores de los aros basados en tu imagen de referencia */
.cert-brand--google {
    border: 3px solid #4285F4;
    /* Azul Google */
}

.cert-brand--ads {
    border: 3px solid #EA4335;
    /* Rojo/Naranja */
}

.cert-brand--analytics {
    border: 3px solid #FBBC05;
    /* Amarillo */
}

/* --- Collage Fotográfico (Derecha) --- */
.certificaciones-collage-container {
    position: relative;
    width: 100%;
    /* aspect-ratio: 1 asegura que la caja contenedora sea SIEMPRE un cuadrado perfecto, 
       sin importar si el usuario está en móvil o escritorio */
    aspect-ratio: 1 / 1;
}

/* Formas Geométricas Decorativas de Fondo */
.cert-bg-shape {
    position: absolute;
    z-index: 0;
}

.cert-bg-shape--dark {
    background-color: var(--ism-base-2);
    /* Azul oscuro[cite: 4] */
    width: 40%;
    height: 60%;
    bottom: -5%;
    right: -5%;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 20% 0);
}

.cert-bg-shape--light {
    background-color: #93c5fd;
    /* Azul celeste claro */
    width: 30%;
    height: 40%;
    top: -5%;
    left: -5%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    opacity: 0.6;
}

/* Círculos Fotográficos */
.cert-photo-circle {
    position: absolute;
    border-radius: 50%;
    /* Borde ultra grueso azul marino fiel a la imagen de referencia */
    border: 8px solid var(--ism-base-2);
    /*[cite: 4] */
    overflow: hidden;
    background-color: #e2e8f0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cert-photo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cert-photo-circle:hover {
    transform: scale(1.05);
    z-index: 10 !important;
    /* Salta al frente al hacer hover */
}

/* Coordenadas específicas de los círculos fotográficos */
.cert-photo-circle--1 {
    top: 0;
    right: 5%;
    width: 60%;
    height: 60%;
    z-index: 2;
}

.cert-photo-circle--2 {
    bottom: 5%;
    left: 5%;
    width: 45%;
    height: 45%;
    z-index: 3;
}

.cert-photo-circle--3 {
    bottom: 0;
    right: 12%;
    width: 48%;
    height: 48%;
    z-index: 4;
}

/* --- Degradación Responsiva (Móviles y Tablets) --- */
@media (max-width: 991px) {
    .licenciatura-certificaciones {
        padding: 60px 0;
    }

    .certificaciones-collage-container {
        margin-top: 3rem;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    .cert-brand-circle {
        width: 90px;
        height: 90px;
        border-width: 2px;
    }
}

/* ==========================================
   SECCIÓN: MODELO (DESCRIPCIÓN Y APRENDIZAJE)
========================================== */

.seccion-modelo {
    padding: 80px 0;
    background-color: var(--ism-base);
}

/* --- Tipografía --- */
.modelo-title {
    color: var(--ism-base-2);
    /* Azul oscuro institucional[cite: 4] */
    font-size: 1.45rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    letter-spacing: -0.2px;
    color: var(--ism-accent-white);
}

.modelo-text {
    color: var(--ism-marca);
    /* Gris secundario para descanso visual[cite: 4] */
    font-size: 1.05rem;
    line-height: 1.8;
    /* Interlineado amplio para lectura fluida */
    margin-bottom: 1.5rem;
    color: var(--ism-accent-white);
}

/* --- Lista Personalizada (Checkmarks) --- */
.modelo-list {
    list-style: none;
    /* Quitamos los puntos nativos */
    padding-left: 0;
    margin-top: 2rem;
    color: var(--ism-accent-white);
}

.modelo-list li {
    position: relative;
    padding-left: 2.2rem;
    /* Espacio para inyectar el icono */
    margin-bottom: 1.5rem;
    color: var(--ism-accent-white);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Inyección del ícono usando CSS puro */
.modelo-list li::before {
    content: '\2713';
    /* Código Unicode para el check (✓) delgado */
    position: absolute;
    left: 0;
    top: 2px;
    /* Ajuste óptico vertical */
    color: var(--ism-accent-white);
    /* Gris claro/sutil, idéntico a tu referencia */
    font-size: 1.15rem;
    font-weight: 300;
}

/* --- Degradación Responsiva --- */
@media (max-width: 991px) {
    .seccion-modelo {
        padding: 60px 0;
    }

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

/* ==========================================
   SECCIÓN: CONTACTO (TARJETAS INFORMATIVAS)
========================================== */

.seccion-contacto {
    /* Fondo ligeramente gris para que el blanco de las tarjetas resalte */
    background-color: #fafbfc;
    padding: 80px 0;
}

.contacto-main-title {
    color: #1a1a1a;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

/* --- Estructura de la Tarjeta --- */
.contacto-card {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 3rem 2rem;
    text-align: center;
    /* Sombra base sutil inspirada en la referencia */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Micro-interacción: Elevación de la tarjeta al hacer hover */
.contacto-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* --- Contenedor de Iconos y Colores --- */
.contacto-icon-wrapper {
    margin-bottom: 1.5rem;
}

.contacto-icon-wrapper i {
    font-size: 3.5rem;
    /* Tamaño grande y legible */
    line-height: 1;
}

/* Modificadores de color exactos a la imagen */
.contacto-icon--blue i {
    color: #0d6efd;
    /* Azul de acento */
}

.contacto-icon--green i {
    color: #198754;
    /* Verde brillante */
}

.contacto-icon--yellow i {
    color: #ffb81c;
    /* Amarillo/Dorado vibrante */
}

/* --- Textos Internos --- */
.contacto-card-title {
    color: #1a1a1a;
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.contacto-card-text {
    color: #6c757d;
    /* Gris para lectura secundaria */
    font-size: 0.95rem;
    line-height: 1.7;
    /* Interlineado cómodo */
    margin-bottom: 0;
}

/* --- Degradación Responsiva --- */
@media (max-width: 768px) {
    .seccion-contacto {
        padding: 60px 0;
    }

    .contacto-main-title {
        font-size: 1.8rem;
        text-align: center;
        /* En móviles centramos el título principal */
    }

    .contacto-card {
        padding: 2.5rem 1.5rem;
    }
}

/* ==========================================
   AJUSTES DEL MODAL (EDGE-TO-EDGE)
========================================== */
#videoModal .modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1055;
    /* Nos aseguramos de que la "X" siempre esté sobre la foto */
    padding: 1rem 1.5rem;
}

/* Mejora de contraste para la 'X' flotante */
#videoModal .btn-close-white {
    /* Mantiene el icono blanco de Bootstrap 5 y le añade una sombra oscura */
    filter: invert(1) grayscale(100%) brightness(200%) drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#videoModal .btn-close-white:hover {
    opacity: 1;
}