/* CONFIGURACIÓN DE FUENTES LOCALES */
@font-face {
    font-family: 'Poppins-Medium';
    src: url('../fonts/Poppins-Medium.ttf') format('woff2'); /* Ajusta al nombre real de tu archivo */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins-Regular';
    src: url('../fonts/Poppins-Regular.ttf') format('woff2'); /* Ajusta al nombre real de tu archivo */
    font-weight: normal;
    font-style: normal;
}


/* ================================================= 
   2. VARIABLES EDITABLES (COLORES Y TIPOGRAFÍA)
   ================================================= */
:root {
    /* Colores Basados en el Diseño */
    --color-primario: #084866;       /* Azul oscuro (Barra inferior y botones) */
    --color-secundario: #81cde6;     /* Azul claro (Bordes y acentos) */
    --color-acento: #266ab4;         /* Azul del botón Inscribete */
    --blanco: #ffffff;
    --negro: #000000;
    
    /* Tipografía */
    --fuente-principal: 'Poppins-Regular', sans-serif;
}

/* ================================================= 
   3. SISTEMA DE COLUMNAS "M" (Basado en 12)
   ================================================= */
.row { display: flex; flex-wrap: wrap; }

/* Mobile First (Ancho completo por defecto) */
.col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-6, .col-m-8, .col-m-12 {
    width: 100%;
    padding: 15px;
}

/* Tablets y Escritorio */
@media (min-width: 992px) {
    .col-m-1  { width: 8.33%; }
    .col-m-2  { width: 16.66%; }
    .col-m-3  { width: 25%; }
    .col-m-4  { width: 33.33%; }
    .col-m-6  { width: 50%; }
    .col-m-8  { width: 66.66%; }
    .col-m-12 { width: 100%; }
}

/* ================================================= 
   4.ENCABEZADO
   ================================================= */

body {
    font-family:'Poppins-Regular';
    color: var(--negro);
    overflow-x: hidden;
    font-size: 1.4rem;
}

.encabezado-principal {
    background: var(--blanco);
    height: var(--alto-header);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1030;
    padding: 10px 10px 20px 0px;
}

/* CONTENEDOR DEL LOGO */
.logotipo-contenedor {
    position: relative; /* Base para el logo que flota */
    height: 100%;
}

/* LOGO QUE SOBRESALE (BANDERÍN) */
.logo-flotante {
    position: absolute; /* Sale del flujo normal */
    top: -40px;          /* Ajuste leve hacia arriba si es necesario */
    left: 15px;
    width: 140px;       /* Tamaño del banderín */
    max-width: none;    /* Permite que crezca fuera del nav */
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15));
    z-index: 1040;      /* Por encima de todo */
}

.enlace-menu {
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    margin: 0 15px;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
    position: relative;
}

/* Línea degradada */
.enlace-menu::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 4px;
    background: linear-gradient(to right, #070d9d, #00bdef);
    transition: width 0.3s ease;
    border-radius: 10px;
}

/* Activo y hover */
.enlace-menu:hover::after,
.enlace-menu.activo::after {
    width: 100%;
}

.btn-inscribete {
    background-color: var(--color-acento);
    color: var(--blanco) !important;
    font-size: 1.5rem;
    border-radius: 100px;
    padding: 3px 20px;
    text-decoration: none;
    transition: transform 0.2s;
}

.btn-inscribete:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-image:linear-gradient(to right,#0d6994, #559dbf) ;

}


/* ================================================= 
   RESPONSIVE: ENCABEZADO
   ================================================= */

@media (max-width: 991.98px) {
    .encabezado-principal {
        padding: 5px 10px;
        height: 70px; /* Reducimos altura en móvil */
    }

    .logo-flotante {
        width: 100px; /* Logo más pequeño en móvil */
        top: -35px;
        left: 10px;
    }

    .btn-inscribete {
        font-size: 1.1rem; /* Texto más pequeño */
        padding: 5px 15px;
    }

    /* Estilos para el menú desplegable móvil */
    #menuMovil {
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 1020;
    }

    .enlace-menu {
        margin: 10px 0;
        display: inline-block;
    }
    .menu-derecha {
        gap: 10px; /* Espacio entre el botón azul y la hamburguesa */
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(8, 72, 102, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }

    nav.px-4 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 575.98px) {
    .logo-flotante {
        width: 85px; /* Aún más pequeño en pantallas mini */
        top: -35px;
    }
    
    .btn-inscribete span {
        font-size: 0.9rem;
    }
}



/* ================================================= 
   5.Banner Principal
   ================================================= */
.banner-prepa {
    position: relative;
    width: 100%;
    height: 750px; /* Un poco más alto para Universidad */
    background-image: url('../img/preparatoria/fondo-principal.png'); /* Ruta a tu imagen */
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado para Universidad */
    text-align: center;
    border-bottom: 9px solid #084866;
}

/* Capa oscura para legibilidad (image_23c402.png) */
.pantalla-protectora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.contenido-prepa {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 900px;
    padding: 0 20px;
}

.texto-principal {
    font-size: 4.8rem;
    font-weight: 800;
    letter-spacing: -2px;
}

.lema-prepa {
    font-size: 1.8rem;
    margin-top: 40px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 40px;

}


/* --- BOTONES CON DEGRADADO (image_2595fd.png) --- */
.contenedor-botones-prepa {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-prepa-outline {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    padding: 12px 35px;
    border: 2px solid #00ffff; /* Borde Cian */
    border-radius: 50px;
    background: linear-gradient(to top,#06185a,#0d6994); /* Degradado azul */
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.btn-prepa-outline:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    color: #ffffff;
}

/* =========================================
   RESPONSIVE: BANNER PREPARATORIA
   ========================================= */

/* AJUSTE PARA TABLETS (Menor a 992px) */
@media (max-width: 991.98px) {
    .banner-prepa {
        height: 500px; /* Reducimos la altura para que no sea infinita en tablet */
        padding-top: 80px; /* Espacio de seguridad para el banderín */
    }

    .texto-principal {
        font-size: 3rem; /* Tamaño intermedio equilibrado */
        letter-spacing: -1px;
    }

    .lema-prepa {
        font-size: 1.5rem;
        margin-top: 20px;
        margin-bottom: 30px;
    }
}

.btn-categoria-hero {
        font-size: 1.2rem !important; /* Tamaño reducido de 2rem a 1.2rem */
        padding: 10px 25px !important;
        width: auto;
        min-width: 200px; /* Asegura un tamaño cómodo para el dedo */
    }

    /* Botones de Preparatoria/Universidad */
    .btn-prepa-outline {
        font-size: 1rem !important; /* Texto más elegante y legible */
        padding: 10px 25px !important;
        border-width: 1.5px !important; /* Borde más fino para no saturar */
    }

/* AJUSTE PARA CELULARES (Menor a 576px) */
@media (max-width: 575.98px) {
    .banner-prepa {
        height: auto; /* Dejamos que el contenido mande en la altura */
        min-height: 450px;
        padding: 120px 20px 60px; /* Más espacio arriba por el logo flotante */
    }

    .texto-principal {
        /* Tipografía fluida: mínimo 2rem, máximo 2.5rem */
        font-size: clamp(2rem, 8vw, 2.5rem); 
        line-height: 1.1;
    }

    .lema-prepa {
        font-size: 1.1rem; /* Lema más pequeño para evitar que ocupe todo el alto */
        margin-top: 15px;
        margin-bottom: 35px;
        line-height: 1.4;
    }

    .contenedor-botones-prepa {
        flex-direction: column; /* Apilamos botones para que sean fáciles de tocar */
        width: 100%;
        gap: 15px;
    }

    .btn-prepa-outline {
        width: 100%; /* Botones de ancho completo en celular */
        text-align: center;
        padding: 12px 20px;
        font-size: 1rem;
    }

    .contenedor-botones-prepa {
        gap: 12px !important;
        padding: 0 10% !important; /* No ocupan todo el ancho, dejan aire a los lados */
    }

    .btn-categoria-hero, .btn-prepa-outline {
        width: 100% !important;
        font-size: 1.1rem !important;
        padding: 12px 15px !important;
        max-width: 280px; /* Evita que se vean gigantes en teléfonos anchos */
        margin: 0 auto;
    }
}









/* ================================================= 
   6.Sección misión, visión y valores
   ================================================= */
.seccion-mision-contenedor-grande {
    position: relative;
    padding: 150px 5% 80px; /* Espacio para el logo circular */
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

/* LOGO CIRCULAR (SE MANTIENE IGUAL) */
.logo-circular-flotante {
    position: absolute;
    top: 40px; 
    left: 50%;
    transform: translateX(-50%);
    width: 270px;
    height: 270px;
    background-color: white;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: transform 0.4s ease;
}

.logo-circular-flotante img { width: 85%; height: auto; }

/* TARJETA AZUL - CONTROL DE ALTURA */
.tarjeta-mision-azul-grande {
    background-color: #233d4d;
    width: 100%;
    max-width: 1250px; 
    min-height: 600px; /* Altura fija para que el botón no se mueva */
    padding: 120px 80px 50px;
    border-radius: 60px;
    position: relative;
    color: white;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* CONTENEDOR FLEX PARA LOS SLIDES */
.contenido-mision {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 420px; /* Área de trabajo interna */
}

.contenido-mision h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 30px;
    margin-top: 70px;
}

/* ESPACIO RESERVADO PARA EL TEXTO */
.cuerpo-texto-fijo {
    min-height: 160px; /* Mismo espacio para todos los textos */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cuerpo-texto-fijo p {
    font-size: 1.4rem;
    line-height: 1.8;
    max-width: 950px;
    margin: 0;
}

/* EL BOTÓN SIEMPRE AL FINAL */
.contenedor-boton-final {
    margin-top: auto; /* EMPUJA EL BOTÓN AL FONDO */
    width: 100%;
}

.btn-inicia-camino {
    display: inline-block;
    background-image: linear-gradient(to top,#06185a,#0d6994);
    border: 2px solid #9bf8ff;
    padding: 15px 50px;
    font-size: 1.1rem;
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.btn-inicia-camino:hover {
    background: #33d2e7;
    transform: translateY(-3px);
}

/* NAVEGACIÓN AMARILLA */
.flecha-amarilla {
    width: 50px !important;
    height: 50px !important;
}
.flecha-amarilla::after { display: none; }
.swiper-button-prev.flecha-amarilla { left: 30px !important; }
.swiper-button-next.flecha-amarilla { right: 30px !important; }


/* =========================================
   RESPONSIVE: SECCIÓN MISIÓN (TARJETA AZUL)
   ========================================= */

/* AJUSTE PARA TABLETS (Menor a 992px) */
@media (max-width: 991.98px) {
    .seccion-mision-contenedor-grande {
        padding: 180px 5% 50px; /* Más espacio arriba para el logo */
    }

    .logo-circular-flotante {
        width: 200px; /* Reducimos el logo circular */
        height: 200px;
        top: 20px;
    }

    .tarjeta-mision-azul-grande {
        padding: 60px 40px 40px;
        min-height: auto; /* Quitamos altura fija para que crezca con el texto */
        border-radius: 40px;
    }

    .contenido-mision {
        height: auto; /* Dejamos que el contenido fluya */
        min-height: 450px;
    }

    .contenido-mision h3 {
        font-size: 2rem !important;
        margin-top: 50px;
    }

    .cuerpo-texto-fijo p {
        font-size: 1.2rem !important;
    }

.flecha-amarilla {
        width: 35px !important;
        height: 35px !important;
        top: auto !important;
        bottom: 25px !important; /* Las bajamos cerca del botón */
    }

    /* Posicionamos las flechas más hacia el centro para que no toquen el borde de la pantalla */
    .swiper-button-prev.flecha-amarilla { 
        left: 20px !important; 
    }
    .swiper-button-next.flecha-amarilla { 
        right: 20px !important; 
    }

    /* Ajustamos el relleno inferior de la tarjeta para que las flechas no tapen el botón */
    .tarjeta-mision-azul-grande {
        padding-bottom: 80px !important;
    }
}

/* AJUSTE PARA CELULARES (Menor a 576px) */
@media (max-width: 575.98px) {
    .seccion-mision-contenedor-grande {
        padding: 140px 15px 40px;
        margin-top: 40px;
    }

    .logo-circular-flotante {
        width: 160px; /* Logo más pequeño para celular */
        height: 160px;
        top: 30px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .tarjeta-mision-azul-grande {
        padding: 50px 20px 30px;
        border-radius: 30px;
    }

    .contenido-mision h3 {
        font-size: 1.6rem !important;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .contenido-mision h3 span {
        display: block; /* El subtítulo baja para que no se vea apretado */
        font-size: 1.1rem;
        opacity: 0.9;
        margin-top: 5px;
    }

    .cuerpo-texto-fijo {
        min-height: auto; /* En móvil no necesitamos altura fija para el texto */
        margin-bottom: 30px;
    }

    .cuerpo-texto-fijo p {
        font-size: 1rem !important;
        line-height: 1.6;
    }

    .btn-inicia-camino {
        width: 100%; /* Botón ancho para pulgares */
        padding: 12px 20px;
        font-size: 1rem;
    }
.flecha-amarilla {
        bottom: 25px !important;
    }
}




/* --- CINTA DE FRASES INFINITAS --- */
.cinta-frases-infinitas {
    width: 100%;
    background-color: #084866; /* Azul de la referencia */
    overflow: hidden; /* Oculta lo que sale de la pantalla */
    padding: 15px 0;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-top: 100px;
}

.contenedor-frases {
    display: flex;
    white-space: nowrap; /* Evita que el texto salte de línea */
    width: max-content;
    animation: movimientoInfinito 30s linear infinite; /* Tiempo de velocidad */
}

/* El grupo de frases que se repite */
.grupo-frases {
    display: flex;
    align-items: center;
}

.grupo-frases span {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0 30px;
    text-transform: none;
    letter-spacing: 0.5px;
}

/* Punto decorativo blanco entre frases */
.punto-separador {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ANIMACIÓN: Se desplaza exactamente la mitad (un grupo completo) */
@keyframes movimientoInfinito {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pausar al pasar el mouse para que el usuario pueda leer */
.cinta-frases-infinitas:hover .contenedor-frases {
    animation-play-state: paused;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .grupo-frases span {
        font-size: 0.9rem;
        padding: 0 15px;
    }
}




/* --- SECCIÓN TU CAMINO MORELOS --- */
.seccion-camino-morelos {
    padding: 0;
    background-color: #fff;
    margin-top: 200px;
}

.contenedor-azul-camino {
    position: relative;
    width: 100%;
    min-height: 1000px;
    /* Curvatura pronunciada en las esquinas inferiores */
    border-radius: 100px; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de fondo con efecto de opacidad */
.background-imagen-camino {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('../img/preparatoria/foto-camino.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Overlay azul marino institucional */
.overlay-azul-camino {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    /* Degradado de azul oscuro transparente a azul marino sólido */
    background: linear-gradient(
        to bottom, 
        rgba(8, 72, 102, 0.4) 0%,    /* Arriba: muy transparente */
        rgba(8, 72, 102, 0.85) 50%,  /* Medio: se empieza a oscurecer */
        rgba(8, 72, 102, 1) 100%     /* Abajo: totalmente sólido */
    );
    z-index: 2;
}

.contenido-camino {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    padding: 60px 20px;
}

.hashtag-camino {
    font-size: 4.3rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.subtitulo-camino {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 70px;
}

/* Grid de Fases */
.grid-fases-camino {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.item-fase {
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circulo-blanco-icono {
    width: 160px;
    height: 160px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.circulo-blanco-icono:hover {
    transform: scale(1.05);
}

.circulo-blanco-icono img {
    width: 95px;
    height: auto;
}

.item-fase h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.item-fase p {
    font-size: 1rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* Responsivo */
@media (max-width: 768px) {
    .hashtag-camino { font-size: 2.2rem; }
    .subtitulo-camino { font-size: 1.1rem; }
    .grid-fases-camino { gap: 40px; }
    .contenedor-azul-camino { border-radius: 0 0 50px 50px; }
}






.seccion-orgullo-ium {
    width: 100%;
    overflow-x: hidden; /* EVITA QUE APAREZCA EL SCROLL LATERAL */
    padding: 80px 0;
    position: relative;
}

.hashtag-orgullo {
    color: #084866; /* Azul marino institucional */
    font-size: 4.5rem; /* Tamaño grande e imponente */
    font-weight: 800; /* Peso extra-bold para que resalte */
    margin-bottom: 30px;
    margin-top: 60px;
    letter-spacing: -1px; /* Letras un poco más juntas para un look moderno */
    text-align: center;
}

.encabezado-orgullo p {
    color: #4a4a4a; /* Gris oscuro para que no compita con el título */
    font-size: 1.8rem; /* Legible y elegante */
    font-weight: 400;
    margin-top: 0;
    text-align: center;
}

.contenedor-relativo-orgullo {
    max-width: 100%;
    margin: 0 auto;
    position: relative; /* Base para las cintas absolutas */
    padding: 40px 20px;
}

/* GRID DE 2 COLUMNAS */
.grid-especialidades-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; 
    max-width: 1000px; /* Al limitar esto, las tarjetas dejan de ser gigantes */
    margin: 50px auto; /* Centra el grid en la página */
    padding: 0 20px;
}

/* TARJETA CON BORDES REDONDEADOS */
.tarjeta-especialidad {
    background: #fff;
    border-radius: 45px; /* Curva pronunciada de la imagen */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición suave */
    transform: translateY(0);
}

.tarjeta-especialidad:hover {
    transform: translateY(-15px); /* Se mueve un poco hacia arriba */
    box-shadow: 0 20px 40px rgba(8, 72, 102, 0.25); /* La sombra se vuelve más profunda */
    border-color: #084866; /* El borde se resalta con el color institucional */
}

.tarjeta-especialidad:hover .circulo-icono-tarjeta {
    transform: translateX(-50%) scale(1.1); /* El icono crece un poquito */
    background-color: #f0f7fa;
}

.header-tarjeta {
    position: relative;
    height: 220px;
}

.img-fondo-header {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 10px solid #084866;
}

/* Icono circular flotante */
.circulo-icono-tarjeta {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 95px;
    height: 95px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 3px solid #084866;
    z-index: 5;
}

.circulo-icono-tarjeta img {
    width: 60px;
}

/* CUERPO Y BOTÓN FIJO */
.cuerpo-tarjeta {
    padding: 50px 30px 35px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.etiqueta-bachillerato {
    font-size: 0.9rem;
    color: #000000;
    font-weight: 600;
}

.cuerpo-tarjeta h3 {
    color: #084866;
    font-size: 1.3rem;
    margin: 10px 0 15px;
    font-weight: 800;
}

.cuerpo-tarjeta p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 25px;
}

.btn-mas-info {
    margin-top: auto; /* Empuja el botón al fondo */
    background-image: linear-gradient(to top,#06185a,#0d6994);
    color: white;
    border: 2px solid #9bf8ff;
    text-decoration: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: lowercase; /* Estilo de la imagen */
}



.btn-banner, .btn-mas-info, .btn-inicia-camino {
    position: relative;
    overflow: hidden; /* Necesario para el efecto de brillo */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-banner:hover, .btn-mas-info:hover, .btn-inicia-camino:hover {
    transform: translateY(-5px); /* Se eleva ligeramente */
    box-shadow: 0 0 10px rgba(1, 255, 255, 0.733); /* Sombra que brilla */
    filter: brightness(1.1);
}

/* Responsivo para celulares (pasa a 1 columna) */
@media (max-width: 768px) {
    .grid-especialidades-2x2 {
        grid-template-columns: 1fr;
    }
}


















/* =========================================
   FOOTER
   ========================================= */

/* 1. ASEGURAR QUE EL PADRE NO TENGA ESPACIO ABAJO */
.footer-completo {
    background-color: #ffffff;
    padding-top: 150px; 
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 150px;
}

.fondo-campus-ajustado {
    background-image: url('../img/escuela-final.png');
    background-size: cover; 
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
    height: 550px; 
    display: flex;
    align-items: flex-end;
}

/* 2. CAJA AZUL PRINCIPAL */
.caja-azul-footer {
    background-color: #084866;
    border-radius: 70px 70px 0 0; 
    color: #ffffff;
    position: relative;
    z-index: 30; /* Subimos el nivel para que los clics funcionen siempre */
    min-height: 625px; 
    padding: 60px 50px 40px 120px !important;
    margin-left: 200px !important;
    margin-bottom: -13px !important; 
    margin-right: -10px;
}

/* Contenedor de columnas */
.caja-azul-footer .row {
    display: flex; 
    flex-wrap: wrap;
    justify-content: flex-start; 
    align-items: flex-start; 
    margin-top: 10px !important; 
    gap: 40px; 
    width: 100%;
}

/* 3. COLUMNAS */
.col-m-5 {
    flex: 0 0 auto;
    max-width: 45%;
    padding-right: 15px;
}

.col-m-7 {
    flex: 0 0 auto;
    max-width: 50%;
    padding-left: 10px; 
}

/* Títulos h3 */
.caja-azul-footer h3 {
    font-family: 'Poppins-Regular', sans-serif;
    margin-top: 10px;
    margin-bottom: 30px; 
    font-size: 1.5rem; 
    text-align: left;
    color: white;
    font-weight: 550;
}

/* 4. MAPA DE SITIO (ENLACES) */
.lista-footer {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 320px; 
}

.lista-footer li {
    margin-bottom: 18px; 
    position: relative;
    display: flex;
    align-items: flex-start; 
}

.lista-footer li a {
    font-size: 1.5rem; 
    color: white !important;
    text-decoration: none !important;
    font-family: 'Poppins-Regular', sans-serif;
    display: inline-block;
    padding-left: 35px; 
    line-height: 1.2;
    cursor: pointer; /* Mano del mouse */
    transition: all 0.3s ease;
    position: relative;
    z-index: 40; /* Asegura que el enlace sea lo más superficial */
}

.lista-footer li a::before {
    content: "•";
    color: white;
    position: absolute;
    left: 10px;
    top: -4px; 
    font-size: 2.2rem;
    pointer-events: none; /* El punto no estorba al clic */
}

.lista-footer li a:hover {
    color: #81cde6 !important;
    transform: translateX(8px);
}

/* 5. CONTACTO */
.caja-azul-footer .col-m-7 .d-flex {
    display: flex !important;
    align-items: center; 
    margin-bottom: 25px !important;
    gap: 20px; 
}

.icono-contacto-f {
    width: 50px !important; 
    height: 50px !important;
    flex-shrink: 0; 
    object-fit: contain;
    margin-left: -35px;
}

.texto-contacto {
    color: white;
    font-size: 1.2rem; 
    font-family: 'Poppins-Regular';
    line-height: 1.3;
    text-decoration: none;
    margin-left: -25px;
}

/* 6. ELEMENTOS DEL BANDERÍN */
.banderin-columna {
    position: absolute;
    bottom: 0; 
    left: 10%; 
    width: 650px;
    height: 778px;
    z-index: 100 !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    pointer-events: none; 
}

.redes-footer {
    margin-top: -340px !important; 
    z-index: 110 !important;
    pointer-events: auto; 
    display: flex;
    flex-wrap: wrap;     
    justify-content: center;
    align-items: center;
    gap: 20px;             
    width: 160px; 
    margin-left: auto;     
    margin-right: auto;
}

.icon-social {
    width: 70px !important; 
    height: 70px !important;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.icon-social:hover {
    transform: scale(1.1);   
}

.hashtag-footer {
    font-family: 'Poppins-Medium'; 
    font-weight: 900;
    color: #0c4a68;
    font-size: 1.9rem;
    margin-top: 70px !important; 
    text-align: center;
    position: relative;
    z-index: 110 !important;
    display: block;
}

.frase-footer {
    width: 100%;
    margin-bottom: 40px !important; 
    margin-top: -5px;
    font-size: 1.4rem;
    font-family: 'Poppins-Bold', sans-serif;
    font-weight: 800;
    text-align: center;
    color: white;
}

.copy-footer {
    width: 100%;
    font-family: 'Poppins-Regular';
    margin-top: 50px;
    padding-top: 5px;
    font-size: 1rem;
    text-align: center;
}


/* ================================================= 
   1. DISEÑO COMPACTO (Móvil y Tablets hasta 1024px)
   Diseño centralizado y limpio.
   ================================================= */
@media (max-width: 1366px) {
    .footer-completo { display: none !important; }
    .footer-mobile { display: block !important; margin-top: 50px; }

    .seccion-azul-compacta {
        background-color: #084866;
        padding: 50px 20px;
        text-align: center;
        border-radius: 40px 40px 0 0;
    }

    /* EDITAR TEXTOS MÓVIL/TABLET AQUÍ */
    .hashtag-footer-compacto { 
        font-size: 1.4rem; 
        font-weight: 800; 
        color: white; 
    }
    .enlaces-footer-compacto a { 
        font-size: 1rem; 
        color: white; 
        margin: 5px 12px; 
        text-decoration: none; 
    }
    .datos-footer-compacto p { 
        font-size: 0.9rem; 
        color: white; 
        margin-bottom: 6px; 
    }
    .copyright-compacto { 
        font-size: 0.8rem; 
        opacity: 0.7; 
    }
}


.redes-sociales-footer-compacto img {
        width: 35px; /* Tamaño del icono */
        margin: 0 10px;
        
        /* OPCIÓN 1: Iconos totalmente BLANCOS (Actualmente activa) */
        filter: brightness(0) invert(1); 
        
        /* OPCIÓN 2: Iconos en un tono CELESTE (Descomenta para usar) */
        /* filter: invert(81%) sepia(21%) saturate(986%) hue-rotate(167deg) brightness(96%) contrast(91%); */
        
        /* OPCIÓN 3: Color ORIGINAL de tus imágenes */
        /* filter: none; */
        
        transition: transform 0.3s ease;
    }

    .redes-sociales-footer-compacto img:hover {
        transform: scale(1.1);
    }




/* ================================================= 
   2. PANTALLAS MEDIANAS (1025px a 1366px)
   Laptops (MacBook Air/Pro). Cuadro azul MÁS ANCHO.
   ================================================= */
@media (min-width: 1367px) and (max-width: 2006px) {
    .footer-mobile { display: none !important; }
    .footer-completo { display: block !important; margin-top: 80px; }

    .caja-azul-footer {
        background-color: #084866;
        border-radius: 70px 70px 0 0;
        /* ENSANCHADO: Reducimos margen para ganar espacio horizontal */
        margin-left: 5px !important; 
        margin-right: -100px !important;
        padding: 50px 40px 40px 100px !important; 
        min-height: 150px;
    }

    .banderin-columna {
        position: absolute;
        bottom: 0;
        left: 0%; 
        width: 400px; /* Banderín más delgado */
        z-index: 100;
        pointer-events: none;
    }

    /* EDITAR TEXTOS LAPTOP/MAC AQUÍ */
    .frase-footer { 
        font-size: 1.2rem; /* Achicamos un poco para que no salte de línea */
        font-weight: 800; 
        text-align: center; 
    }
    .titulo-col-footer { 
        font-size: 1rem; 
        margin-bottom: 20px; 
    }

.redes-footer .icon-social {
    width: 55px !important;        /* Tamaño específico para laptop */
    opacity: 0.9;                  /* Puedes jugar con la transparencia */
}

    .lista-footer li a { 
        font-size: 1rem; /* Enlaces más pequeños para que quepan */
    }
    .texto-contacto { 
        font-size: 1rem; 
    }
    .hashtag-footer { 
        font-size: 1.1rem; 
        margin-top: 40px !important; 
    }
    .copy-footer { 
        font-size: 0.9rem; 
    }
    .redes-footer { 
        margin-top: -380px !important; 
        pointer-events: auto; 
    }
}

/* ================================================= 
   3. PANTALLAS GRANDES (1367px en adelante)
   Diseño de escritorio original (Full Desktop).
   ================================================= */
@media (min-width: 2006px) {
    .footer-mobile { display: none !important; }
    .footer-completo { 
        display: block !important; 
        margin-top: 100px; 
        padding-top: 150px; 
    }

    .caja-azul-footer {
        background-color: #084866;
        border-radius: 70px 70px 0 0;
        padding: 60px 50px 40px 120px !important;
        margin-left: 200px !important; /* Margen amplio original */
        min-height: 625px;
    }

    .banderin-columna {
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 750px;
        z-index: 100;
        pointer-events: none;
    }

    /* EDITAR TEXTOS ESCRITORIO GRANDE AQUÍ */
    .frase-footer { 
        font-size: 1.4rem; 
        font-weight: 800; 
    }
    .titulo-col-footer { 
        font-size: 1.5rem; 
    }
    .lista-footer li a { 
        font-size: 1.4rem; 
    }
    .texto-contacto { 
        font-size: 1.2rem; 
    }
    .hashtag-footer { 
        font-size: 1.9rem; 
        margin-top: 70px !important; 
    }
    .copy-footer { 
        font-size: 1rem; 
    }
}









.modal-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.modal-overlay.mostrar { display: block !important; }

.modal-contenido {
    background-color: #fff;
    margin: 2% auto;
    padding: 30px;
    width: 95%;
    max-width: 1200px;
    border-radius: 40px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.titulo-modal {
    text-align: center;
    color: #084866;
    font-weight: 800;
    margin-bottom: 30px;
}

.grid-semestres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.tarjeta-semestre {
    background: #f8f9fa;
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.header-semestre {
    background: linear-gradient(to right, #084866, #0d6994);
    padding: 15px;
    text-align: center;
}

.header-semestre h4 { color: white; margin: 0; font-size: 0.95rem; text-transform: uppercase; }

.lista-materias { list-style: none; padding: 20px; margin: 0; }

.lista-materias li {
    background: white;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 4px solid #0d6994;
}

.cerrar-modal {
    position: absolute;
    top: 20px; right: 30px;
    font-size: 45px;
    cursor: pointer;
    color: #084866;
    line-height: 1;
}