/* =========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================= */
:root {
    /* Paleta de Colores Institucionales */
    --color-azul-oscuro: #103a89; /* Azul Inturperu Vivo */
    --color-azul-claro: #003bff;
    --color-amarillo: #ffcc00;
    --color-rojo: #e63946;
    --color-texto: #333333;
    --color-blanco: #ffffff;
    --color-fondo-gris: #f4f4f4;

    /* Tipografía GLOBAL: Poppins */
    --fuente-principal: 'Poppins', sans-serif;
    --altura-header: 120px; 
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    line-height: 1.6;
    padding-top: 0; 
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

ul {
    list-style: none;
}

/* =========================================
   2. ENCABEZADO (HEADER)
   ========================================= */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    box-shadow: none;
}

/* Barra Superior Azul */
.top-bar {
    background-color: var(--color-azul-oscuro);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8px 0;
    font-size: 0.85rem;
}

.top-bar .container-flex {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Iconos de Redes Sociales */
.social-icons a { 
    color: white; 
    margin-right: 10px;
    font-size: 0.9rem;
}
.social-icons a:hover { color: var(--color-amarillo); }

.lang-selector { color: white; font-size: 0.75rem; }

.top-right {
    display: flex;
    gap: 0;
}

.top-link {
    color: white;
    font-size: 0.75rem;
    font-weight: normal; /* Delgado (Normal) */
    letter-spacing: 0.5px;
    padding: 0 15px;
    border-right: 1px solid rgba(255,255,255,0.3);
}
.top-link:last-child { border: none; }
.top-link:hover { color: var(--color-amarillo); }

/* Navegación Principal */
.main-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 5%;
    background: transparent;
    height: 80px;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* Enlaces Blancos */
.white-links a {
    color: white !important;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}
.white-links a:hover {
    color: var(--color-amarillo) !important;
}

/* Botón Contactos Blanco - CORREGIDO */
.white-links a.btn-contactos-white, 
.nav-links .btn-contactos-white {
    display: inline-block;
    background-color: white;
    color: #000000 !important;
    padding: 10px 25px;
    border-radius: 0px;
    font-weight: 600; /* <--- CORREGIDO: Bajado de 800 a 700 (Menos negrita) */
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1;
    margin-left: 15px;
}

/* =========================================
   3. HERO SECTION (BANNER PRINCIPAL)
   ========================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-top: -5px;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.65);
}

/* --- BLOQUE DE CONTENIDO --- */
.hero-content {
    position: absolute;
    top: 40%;                 
    left: 8%;                 
    transform: translateY(-50%);
    text-align: left;
    width: 100%;
    z-index: 5;
    color: white !important;
}

/* Logo interno grande */
.hero-logo-internal {
    width: 180px;
    margin-bottom: 15px;
    display: block;
}

/* === TIPOGRAFÍA UNIFICADA (TODO GRUESO 900) === */

/* TÍTULO PRINCIPAL (Carreras Profesionales) */
.hero-title {
    font-family: var(--fuente-principal);
    font-size: 3.5rem; 
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 700; /* <--- UNIFICADO A 900 */
    text-transform: uppercase;
    color: white !important;
    letter-spacing: -1px;
}

/* PORCENTAJE (100%) */
.big-percent {
    font-family: var(--fuente-principal);
    font-size: 4rem;
    font-weight: 700; /* <--- UNIFICADO A 900 */
    color: white !important;
    letter-spacing: -2px;
}

.percent-line {
    display: flex;
    align-items: center;
    gap: 15px;
}

.white-line-deco {
    height: 4px;
    width: 150px;
    background-color: white;
    position: relative;
}
.white-line-deco::after {
    content: '';
    position: absolute;
    right: -5px; top: -6px;
    width: 16px; height: 16px;
    background-color: white;
    border-radius: 50%;
}

/* TEXTO AMARILLO (A Distancia) */
.highlight-yellow {
    font-family: var(--fuente-principal);
    font-size: 3.5rem;
    font-weight: 700; /* <--- UNIFICADO A 900 */
    color: #ffcc00 !important;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* FRASE (Educación Superior...) */
.hero-tagline {
    font-family: var(--fuente-principal);
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white !important;
    font-weight: 500; /* Peso medio para lectura clara */
    margin-bottom: 5px;
}

/* Efecto Escalera */
.escalera-texto {
    display: inline-block;
    margin-left: 40px; 
}

/* SUBTÍTULO (En 2 años...) */
.hero-subtitle-yellow {
    font-family: var(--fuente-principal);
    font-size: 1.5rem;
    margin-top: 10px; /* <--- CAMBIO: De 15px a 0px para subirlo */
    color: #ffcc00 !important;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}

/* --- BLOQUE LICENCIAMIENTO (Abajo) --- */
.licenciamiento-box {
    position: absolute;
    bottom: 30px;        
    left: 8%;            
    display: flex;
    flex-direction: column; /* Vertical */
    align-items: flex-start;
    gap: 5px;
    z-index: 10;
}

.lic-text {
    font-family: var(--fuente-principal);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.lic-logos {
    background-color: transparent !important;
    padding: 0;
    border: none;
    height: 85px; /* <--- Aumentamos la altura (ajústalo si lo quieres más grande) */
    width: auto;  /* Mantiene la proporción */
    display: block;
}

/* 2. LA IMAGEN DEL LOGO (Aquí forzamos el tamaño) */
.lic-logos img {
    height: 70px !important; /* <--- ¡IMPORTANTÍSIMO! Esto rompe el límite de 40px */
    width: auto;             /* Mantiene la proporción perfecta */
    display: block;
}

/* --- FLECHAS DEL SLIDER (RECTANGULARES Y TRANSPARENTES) --- */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* CAMBIO 1: Quitamos ancho/alto fijo y usamos padding para el área de clic */
    padding: 20px; 
    
    /* CAMBIO 2: Fondo transparente y sin bordes redondeados */
    background-color: transparent;
    border-radius: 0; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Ícono blanco y un poco más grande */
    color: #ffffff;
    font-size: 2.5rem; 
    
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 9999 !important;
}

/* Efecto Hover (Al pasar el mouse) */
.slider-arrow:hover {
    /* Mantenemos el fondo transparente */
    background-color: transparent; 
    
    /* Cambiamos solo el color del ícono a celeste para dar feedback */
    color: #ffffff;
    
    /* Un ligero efecto de aumento */
    transform: translateY(-50%) scale(1.2);
}

/* --- AQUÍ ESTÁ EL CAMBIO PARA EVITAR CONFLICTOS --- */
/* Usamos las nuevas clases únicas */
.hero-prev { 
    left: 30px; 
}

.hero-next { 
    right: 30px; 
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .slider-arrow { width: 40px; height: 40px; font-size: 1rem; }
    .hero-prev { left: 10px; }
    .hero-next { right: 10px; }
}

.slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Detrás del texto */
}

.hero-image {
    position: absolute; /* Para que estén una encima de otra */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.65); /* Mantenemos tu filtro oscuro */
    
    /* EFECTO DE TRANSICIÓN (FADE) */
    opacity: 0; 
    transition: opacity 1s ease-in-out;
}

/* La clase que hace visible a la imagen actual */
.hero-image.active {
    opacity: 1;
}

/* =========================================
   4. SECCIÓN CARRERAS (CORREGIDO: CUADRADOS ENCIMA)
   ========================================= */
.carreras-section {
    padding: 60px 0 80px 0;
    background-color: #fff;
    overflow: visible !important; /* Permite que los elementos salgan */
}

.container-carreras {
    width: 95%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* --- TÍTULO --- */
.carreras-title-box {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-family: var(--fuente-principal);
    font-size: 2.2rem;
    color: #000000;
    font-weight: 900;
    text-transform: uppercase;
}

.title-underline {
    border-bottom: 5px solid var(--color-azul-oscuro);
    padding-bottom: 3px;
    display: inline-block;
}

/* --- WRAPPER --- */
.carreras-wrapper {
    position: relative; 
    margin: 0 auto;
    padding: 0; 
    z-index: 5; /* Nivel base */
}

/* === FLECHAS (GIGANTES) === */
.deco-arrow-img {
    position: absolute;
    /* Ya no usamos top: 50% aquí, lo definimos individualmente abajo */
    
    /* CAMBIO 1: DOBLE DE TAMAÑO (De 70px a 140px) */
    width: 120px; 
    height: auto;
    
    z-index: 30;
    cursor: pointer;
    transition: transform 0.3s ease;

    /* Filtro para mantenerlas AZULES */
    filter: hue-rotate(220deg) brightness(0.5) saturate(1.5); 
}

/* Flecha Izquierda */
.arrow-left {
    /* POSICIÓN VERTICAL: 25% es el centro exacto de la fila de arriba */
    top: 25%;
    /* CAMBIO 2: MUCHA MÁS SEPARACIÓN (Para que no toquen las fotos) */
    left: -160px; 
    transform: translateY(-50%); 
}

/* Flecha Derecha */
.arrow-right {
    /* POSICIÓN VERTICAL: 75% es el centro exacto de la fila de abajo */
    top: 75%;
    /* CAMBIO 2: MUCHA MÁS SEPARACIÓN */
    right: -160px; 
    transform: translateY(-50%) rotate(180deg);
}

/* Hover */
.deco-arrow-img:hover {
    filter: none; /* Vuelve a rojo */
    transform: translateY(-50%) rotate(180deg) scale(1.1);
}
.arrow-left:hover {
    transform: translateY(-50%) scale(1.1); 
}

/* En tablets/móviles las ocultamos porque son muy grandes para la pantalla */
@media (max-width: 1100px) {
    .deco-arrow-img { display: none; }
}

/* === RECTÁNGULOS ROJOS (PEQUEÑOS Y TRANSPARENTES) === */
.deco-square {
    position: absolute;
    width: 42px;    /* <--- CAMBIO 1: Tamaño reducido (de 100px a 80px) */
    height: 55px;
    
    /* CAMBIO 2: Color rojo con transparencia usando RGBA */
    /* El último número (0.7) es la opacidad. 1 es sólido, 0 es invisible. */
    background-color: #D90000; 
    mix-blend-mode: multiply;
    
    z-index: 20;    /* Siguen estando encima de la foto */
    /* He quitado la sombra dura para que el efecto transparente sea más limpio */
    box-shadow: none; 
}

.square-top-left {
    /* Ajuste de posición para el nuevo tamaño */
    top: -20px;   
    left: -20px;  
}

.square-bottom-right {
    /* Ajuste de posición para el nuevo tamaño */
    bottom: -20px; 
    right: -20px;  
}

/* --- GRILLA DE FOTOS --- */
.carreras-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    position: relative;
    
    /* CAMBIO CLAVE: Z-INDEX BAJO */
    /* La grilla se queda en nivel 1, el cuadrado en 20 -> El cuadrado gana */
    z-index: 1; 
    
    background: white; 
    padding: 0;
}

.carrera-card {
    position: relative;
    height: 270px;
    overflow: hidden;
    display: block;
}

.carrera-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.carrera-card:hover img { transform: scale(1.1); }

/* --- TEXTOS --- */
.card-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    z-index: 25; /* El texto debe estar aún más arriba que el cuadrado */
    text-align: center;
}

.card-content h3 {
    font-family: var(--fuente-principal);
    color: white;
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
    margin: 0;
}

/* Textos Grandes (1 y 2) */
.carreras-grid .carrera-card:nth-child(1) .card-content h3,
.carreras-grid .carrera-card:nth-child(2) .card-content h3 {
    font-size: 1.9rem;
}

/* --- SISTEMA DE FILTROS DE COLOR (MÁS SUAVES) --- */

/* 1. Filtro ROJO (Gestión Contable y Administración) */
.card-red-overlay::after {
    content: ''; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    /* CAMBIO: Bajamos a 0.6 (60%) para que la foto se vea mejor */
    background-color: rgba(217, 0, 0, 0.6); 
    
    mix-blend-mode: multiply; 
    z-index: 5; 
}

/* 2. Filtro AZUL (Gestión Jurídica y Negocios Internacionales) */
.card-blue-overlay::after {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    /* CAMBIO: Bajamos a 0.6 (60%) para equilibrar */
    background-color: rgba(16, 58, 137, 0.6); 
    
    mix-blend-mode: multiply; 
    z-index: 5; 
}

/* 3. Sombra Gris (Por seguridad) */
.carrera-card:not(.card-red-overlay):not(.card-blue-overlay)::after {
    content: ''; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); 
    z-index: 5;
}

/* Responsive */
@media (max-width: 768px) {
    .carreras-grid { grid-template-columns: 1fr; }
    .arrow-left, .arrow-right { display: none; }
    .square-top-left { top: -20px; left: -20px; width: 80px; height: 80px;}
    .square-bottom-right { bottom: -20px; right: -20px; width: 80px; height: 80px;}
}

/* =========================================
   5. SECCIÓN BENEFICIOS (ESTILO CARRERAS + ESPACIOS REDUCIDOS)
   ========================================= */
.beneficios-section {
    position: relative; /* Necesario para el overlay */
    
    /* 1. IMAGEN DE FONDO (Sin el filtro aquí, lo haremos con ::before) */
    background-image: url('../img/banner-de-inicio/escuela-inturperu-banner2.png');
    background-size: cover;
    background-position: center;
    
    /* 2. REDUCCIÓN DE ESPACIOS (Lo que marcaste en rojo) */
    /* Antes era 60px, ahora 30px para que sea más compacto */
    padding: 30px 0; 
    
    width: 100%;
    /* Altura mínima ajustada para que no sobre espacio */
    min-height: auto; 
    
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    
    /* Creamos un contexto para que el fondo oscuro funcione bien */
    z-index: 1; 
}

/* --- OVERLAY ESTILO "CARRERAS" (Efecto Multiply) --- */
/* Esto imita exactamente el fondo azul de tus tarjetas de carrera */
.beneficios-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* Color Azul Institucional con mezcla (Igual que en carreras) */
    background-color: rgba(16, 58, 137, 0.6); 
    mix-blend-mode: multiply; /* ESTA ES LA CLAVE DEL EFECTO */
    
    z-index: -1; /* Se coloca detrás del texto pero sobre la foto */
}

.title-yellow {
    font-family: var(--fuente-principal);
    color: #ffcc00;
    font-size: 2rem;
    font-weight: 700;
    
    /* 3. REDUCCIÓN DE ESPACIO ENTRE TÍTULO E ÍCONOS */
    /* Antes era 50px, ahora 20px */
    margin-bottom: 20px; 
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    line-height: 1.1; /* Título más pegadito verticalmente */
}

.beneficios-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; 
    width: 95%;
    max-width: 1400px;
}

.beneficio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 145px;
}

.beneficio-img {
    height: 80px; /* Íconos grandes */
    width: auto;
    max-width: 100%;
    margin-bottom: 10px; /* Menos espacio entre ícono y texto */
    filter: brightness(0) invert(1); 
    transition: transform 0.3s ease;
}

.beneficio-item p {
    font-family: var(--fuente-principal);
    font-size: 0.85rem;
    line-height: 1.2;
    font-weight: 600;
    color: white;
}

/* Efecto Hover */
.beneficio-item:hover .beneficio-img { transform: scale(1.1); }

/* RESPONSIVE */
@media (max-width: 768px) {
    .beneficios-section { padding: 30px 0; }
    .beneficios-grid { gap: 20px; }
    .beneficio-item { width: 45%; margin-bottom: 15px; }
    .beneficio-img { height: 60px; }
}

/* =========================================
   6. FOOTER (CÓDIGO LIMPIO Y CORREGIDO)
   ========================================= */
.site-footer {
    background-color: #ffffff;
    color: #333333;
    height: auto; 
    min-height: 50vh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 90px; 
    padding-bottom: 40px; 
    border-top: none; 
}

.container-footer {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0px; 
}

/* ACTUALIZACIÓN: COLUMNAS PROPORCIONALES PARA QUITAR HUECOS */
.footer-grid {
    display: grid;
    
    /* ANTES: repeat(4, 1fr);  <- Esto creaba columnas iguales y el hueco */
    
    /* AHORA: Usamos porcentajes ajustados al contenido */
    /* Col 1 (22%): Más angosta, para que la siguiente se acerque. */
    /* Col 2 (28%): Más ancha, para los nombres largos de carreras. */
    /* Col 3 (25%) y Col 4 (25%): Estándar. */
    grid-template-columns: 25% 25% 25% 25%;     
    
    gap: 20px; 
    align-items: start;
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
}

/* Títulos */
.footer-title {
    color: var(--color-azul-oscuro);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.mt-4 { margin-top: 20px; } 

/* Textos e Íconos */
.footer-info, .footer-list li {
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    color: #555;
    font-size: 0.8rem;
    line-height: 1.3;
}
.footer-info i, .footer-list i { color: var(--color-azul-oscuro); font-size: 0.9rem; margin-top: 3px; }

/* Sedes */
.sede-name { font-size: 1.2rem; font-weight: 900; color: #000; margin-bottom: 5px; }
.sede-info { font-weight: 700; color: var(--color-azul-oscuro); font-size: 0.75rem; margin-bottom: 5px; }
.btn-mapa {
    display: inline-block;
    background-color: var(--color-azul-oscuro);
    color: white;
    padding: 6px 15px;
    font-weight: 700;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-top: 8px;
}

/* COLUMNA DERECHA (Logos Grandes) */
.col-center { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    justify-content: flex-start; 
}

/* Libro de Reclamaciones */
.libro-reclamaciones {
    margin-bottom: 10px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.libro-reclamaciones img { 
    width: 100px; 
    height: auto;
    margin-bottom: 5px; 
}
.libro-reclamaciones p { 
    font-size: 0.8rem; 
    font-weight: 500;
    color: #000;        
    line-height: 1.2;
    margin-top: 0;
}

/* Logo Escuela */
.footer-logo-box {
    margin-top: 0px; 
    width: 100%;             
    display: flex;
    justify-content: center; 
}
.footer-logo { 
    width: 100%;       
    max-width: 200px;  
    height: auto;      
    display: block;    
}

/* NUEVO ICONO DE LISTA (FLECHA RELLENA) */
.footer-list-icon {
    width: 30px;  /* Tamaño pequeño para lista */
    height: auto;
    margin-top: -7px; /* Alineación con el texto */
    margin-right: -10px; /* Espacio con el texto */
    
    /* EL MISMO FILTRO QUE EN CARRERAS PARA QUE SEA AZUL */
    filter: hue-rotate(220deg) brightness(0.5) saturate(1.5);
    
    /* Si la quieres ROJA original, borra la línea de 'filter' de arriba */
}

/* Ajuste para que la lista se alinee bien con la imagen */
.footer-list li {
    display: flex;           
    align-items: flex-start; /* Alinea todo al inicio (arriba) */
    gap: 12px;               /* Espacio limpio entre flecha y texto */
    margin-bottom: 15px;     /* Separación entre cada carrera */
}

/* --- ESTILO PARA EL MAPA Y BOTÓN SEPARADOS --- */

.mapa-wrapper {
    display: flex;
    align-items: center; /* Los centra verticalmente */
    gap: 15px;           /* Espacio entre el dibujo del mapa y el botón */
    margin-top: 15px;    /* Separación con el texto de arriba */
}

/* Estilo del Ícono Grande (El dibujo del mapa) */
.map-icon-large {
    font-size: 40px;     /* Tamaño grande como en tu foto */
    color: var(--color-azul-oscuro); /* Color azul institucional */
    background: white;   /* Fondo blanco por si acaso */
    /* Si tienes una imagen propia del mapa, avísame para usar <img> en vez de <i> */
}

/* Ajuste del Botón VER MAPA */
.btn-mapa {
    display: inline-block;
    background-color: var(--color-azul-oscuro);
    color: white;
    padding: 10px 20px;  /* Un poco más relleno */
    font-weight: 800;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-top: 0;       /* Quitamos margen porque el wrapper ya lo tiene */
}

/* --- LICENCIAMIENTO INTEGRADO (CORREGIDO) --- */
.licenciamiento-footer-integrated {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    gap: 20px;           
    margin-top: 30px;    
    width: 100%;
}

.licenciamiento-footer-integrated h4 {
    margin: 0 !important; 
    color: #103a89;
    font-size: 0.9rem;    
    font-weight: 900;
}

.licenciamiento-footer-integrated .lic-logos-row {
    display: flex;
    align-items: center;
    gap: 25px; /* Separación entre logos */
    margin-top: 0;
}

/* TAMAÑOS LOGOS (Ordenados y sin conflictos) */
/* Logo 1: Minedu (Más alto) */
.licenciamiento-footer-integrated img:first-child {
    height: 55px; 
    width: auto;
}
/* Logo 2: Sunedu (Más bajo) */
.licenciamiento-footer-integrated img:last-child {
    height: 38px; 
    width: auto;
}

/* AJUSTE PARA PEGARLO ARRIBA */
.licenciamiento-grid {
    display: grid;
    grid-template-columns: 25% 25% 30% 20%; /* Mismas columnas que arriba */
    gap: 15px;
    align-items: center; 
    
    /* ANTES: 40px (Muy separado) */
    /* AHORA: 10px (Pegadito al texto de arriba) */
    margin-top: -90px;    
    
    padding-bottom: 10px;

    position: relative; /* Asegura que se dibuje encima si toca algo */
    z-index: 10;
}

/* Alineación específica para cada celda */
.lic-col-titulo {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Título a la izquierda */
}

.lic-col-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Logos alineados al inicio de su columna */
}

.lic-col-logo img {
    width: auto;
    /* Las alturas ya están en el HTML (55px y 38px), pero esto asegura que no se deformen */
    max-width: 100%; 
}

/* RESPONSIVE: En celular los ponemos uno debajo del otro */
@media (max-width: 900px) {
    .licenciamiento-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 15px;
        margin-top: 30px;
        justify-items: center; /* Centrados */
    }
    .lic-col-titulo, .lic-col-logo {
        justify-content: center;
    }
}

/* =========================================
   BARRA COPYRIGHT
   ========================================= */
.footer-bottom-bar {
    height: 5vh;
    min-height: 35px;
    background-color: var(--color-azul-oscuro);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-bottom-bar p {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* =========================================
   7. RESPONSIVE (MÓVIL) - ACTUALIZADO
   ========================================= */
@media (max-width: 900px) {
    /* Ajustes generales */
    .site-footer { height: auto; padding: 40px 0; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    
    /* CORRECCIÓN: Apuntamos a la nueva clase integrada */
    .licenciamiento-footer-integrated { 
        flex-direction: column; /* En móvil, uno abajo del otro */
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .big-percent { font-size: 2.5rem; }
    .white-line-deco { width: 50px; }
    .hero-logo-internal { width: 150px; }
    
    .carreras-grid { grid-template-columns: 1fr; }
    
    .beneficios-grid { gap: 20px; }
    .beneficio-item { width: 45%; }
    
    .nav-links { display: none; } 
    .site-header { position: relative; background-color: var(--color-azul-oscuro); }
    .hero-content { top: 50%; }
    
    /* Footer en una sola columna para celulares pequeños */
    .footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ESTILOS FINALES BOLSA DE TRABAJO - CORRECCIÓN DE ANCHO (FUERZA BRUTA)
   ========================================================= */

/* --- 1. CONTENEDOR "ANTI-ESTIRAMIENTO" --- */
/* Esto obliga al contenido a no pasarse de 1000px de ancho */
.container-generic {
    width: 90% !important;           
    max-width: 1000px !important; /* <--- AQUÍ ESTÁ EL CAMBIO FUERTE */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 15px !important;      
}

/* --- 2. HEADER --- */
.nav-logo {
    height: auto;
    width: 180px;   
    display: block;
}
.main-nav {
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 5px !important;    
    padding-bottom: 5px !important; 
    height: 90px !important;       
}

/* --- 3. PORTADA (ESTA SÍ VA FULL PANTALLA) --- */
.page-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Pantalla completa */
    margin-top: 0 !important;
    padding: 0;
    background-image: url('../img/bolsa-de-trabajo/Bolsa de trabajo.jpg');
    background-size: cover;
    background-position: center top; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-hero::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 0;
}
.page-hero-content { position: relative; z-index: 2; text-align: center; }
.page-title { 
    color: #fff; font-size: 4rem; font-weight: 700; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); margin: 0; 
}

/* --- 4. TÍTULOS --- */
.title-box-left {
    width: 100%;
    text-align: left !important;
    margin-bottom: 30px; 
}

/* === CORRECCIÓN TÍTULOS NEGROS === */

/* Estilo base del título (Sin forzar alineación ni líneas) */
.section-title-black {
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    text-transform: uppercase;
    position: relative;
}

/* --- REGLA SOLO PARA LA PÁGINA DE MALLAS --- */
/* Solo agregamos la línea automática y alineación izq. si estamos dentro de .malla-title-new */

.malla-title-new .section-title-black {
    text-align: left;
}

.malla-title-new .section-title-black::after {
    content: '';
    display: block;
    width: 100px;
    height: 8px;
    background-color: #D90000;
    margin-top: 10px;
    margin-left: 5px;
}

/* --- 5. SECCIÓN GRIS (POR QUÉ ELEGIRNOS) --- */
.stats-section-final {
    background-color: #f4f4f4 !important; 
    padding-top: 50px;    
    padding-bottom: 50px; 
    margin-bottom: 0 !important; 
}

.stats-grid-clean {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; 
    text-align: center; 
}
.stat-item { background: transparent; }

.stat-number { 
    font-size: 3rem; 
    font-weight: 900; 
    color: #111; 
    margin-bottom: 10px; 
    line-height: 1; 
}
.stat-desc { 
    font-size: 0.9rem; color: #555; line-height: 1.4; padding: 0 5px; 
}

/* --- 6. SECCIÓN "QUÉ OFRECEMOS" (VERSIÓN COMPACTA "FIT SCREEN") --- */
.offer-section-final {
    background-color: #ffffff;
    
    /* Reducimos el aire arriba y abajo para que entre en pantalla */
    padding-top: 30px;    
    padding-bottom: 50px;
    margin-top: 0 !important;
}

/* Contenedor específico más angosto para que las tarjetas no se estiren */
.offer-section-final .container-generic {
    max-width: 950px !important; /* Más angosto que el resto (1000px) */
}

.offers-grid-large {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Menos separación para que se vean unidas y ordenadas */
    gap: 30px; 
}
.offer-card-large { background: #fff; }

.offer-img-top { 
    width: 100%; 
    height: 200px; /* Altura equilibrada */
    object-fit: cover; 
    display: block; 
}

/* Cuerpo de la tarjeta más compacto */
.offer-body-large { padding: 15px 0 0 0; }

.offer-title-blue { 
    color: #103a89; 
    font-size: 1.25rem; /* Letra un poco más chica */
    font-weight: 900; 
    text-transform: uppercase; 
    margin-bottom: 8px; 
}

.offer-subtitle { 
    font-weight: 700; 
    color: #000; 
    margin-bottom: 10px; 
    font-size: 0.9rem; 
}

/* LISTA MUY COMPACTA */
.list-red-arrows { 
    list-style: none; 
    margin-bottom: 15px; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 5px 10px; /* Menos espacio entre renglones */
}

.list-red-arrows li { 
    position: relative; 
    padding-left: 18px; 
    font-size: 0.85rem; /* Texto más pequeño para ahorrar espacio */
    color: #444; 
    line-height: 1.3;
}
.list-red-arrows li::before { 
    content: '➤'; 
    position: absolute; 
    left: 0; 
    top: 3px; 
    color: #e63946; 
    font-size: 0.7rem; 
}

/* BOTÓN MÁS DELGADO */
.btn-blue-full { 
    display: block; 
    width: 100%; 
    background-color: #103a89; 
    color: white; 
    text-align: center; 
    padding: 10px 0; /* Menos relleno (antes 15px) */
    font-weight: 800; 
    text-transform: uppercase; 
    transition: 0.3s; 
    font-size: 0.9rem; 
}
.btn-blue-full:hover { background-color: #003bff; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .offers-grid-large { grid-template-columns: 1fr; }
    .offer-img-top { height: 180px; }
}

/* =========================================================
   ESTILOS FINALES: EVENTOS (GRILLA + LISTA)
   ========================================================= */

.events-section-final {
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* Subtítulo */
.section-subtitle-left {
    margin-top: 10px;
    font-size: 1rem;
    color: #000;
    font-weight: 500;
    margin-bottom: 30px;
    text-align: left;
}

/* --- PARTE 1: DESTACADOS (LOS 2 GRANDES) --- */
.events-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columnas */
    gap: 40px;
    margin-bottom: 40px; /* Espacio antes de la línea */
}

.event-featured-card {
    display: flex;
    flex-direction: column;
}

.event-feat-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 15px;
    display: block;
}

.event-feat-info { text-align: left; }

/* --- LÍNEA SEPARADORA --- */
.full-width-red-line {
    width: 100%;
    height: 2px;
    background-color: #e63946; 
    margin-bottom: 50px; /* Espacio antes de las noticias */
    margin-top: 10px;
}

/* --- PARTE 2: NOTICIAS (LOS 4 EN LISTA) --- */
.events-list-container {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espacio entre noticias */
}

.event-list-item {
    display: flex;       
    align-items: flex-start; 
    gap: 30px;           
    padding-bottom: 30px;
    border-bottom: 1px solid #eee; /* Línea suave opcional */
}
.event-list-item:last-child { border-bottom: none; }

/* Imagen Noticia (Más pequeña) */
.event-list-img-box {
    width: 35%; /* Ocupa menos ancho que los destacados */
    flex-shrink: 0; 
}
.event-list-img-box img {
    width: 100%;
    height: 180px; 
    object-fit: cover;
    display: block;
}

/* Info Noticia */
.event-list-info {
    flex-grow: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Estilos de Texto Comunes */
.event-date-red {
    color: #e63946; 
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.event-title-bold {
    font-size: 1.3rem;   
    font-weight: 900; 
    color: #000;
    line-height: 1.2;
    margin-bottom: 15px;
}

/* Botones Rojos */
.event-tags-row {
    display: flex;
    gap: 10px; 
    flex-wrap: wrap;
}

.tag-red {
    background-color: #e63946; 
    color: white;              
    padding: 6px 15px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .events-featured-grid { grid-template-columns: 1fr; }
    .event-list-item { flex-direction: column; }
    .event-list-img-box { width: 100%; }
}

/* =========================================================
   ESTILOS PLANA DOCENTE (CORREGIDO Y REFORZADO)
   ========================================================= */

/* --- 1. FONDO Y ESPACIADO --- */
.docente-table-section {
    background-color: #ffffff;
    padding: 60px 0;
    min-height: 50vh;
    display: block; /* Asegura que ocupe espacio */
}

/* --- 2. CONTENEDOR TIPO TARJETA (El borde azul externo) --- */
.docente-card-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    
    /* Borde Azul Grueso y Redondeado */
    border: 3px solid #103a89; 
    border-radius: 20px;       
    
    overflow: hidden; /* Corta las esquinas de la tabla */
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra elegante */
}

/* --- 3. TABLA --- */
.docentes-table-styled {
    width: 100%;
    border-collapse: collapse; /* Une los bordes */
    margin: 0;
}

/* CABECERA (Azul con separadores blancos) */
.docentes-table-styled thead {
    background-color: #103a89;
    color: white;
}

.docentes-table-styled th {
    padding: 20px 10px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-transform: none; /* Texto normal, no todo mayúsculas */
    
    /* Línea blanca vertical entre columnas de cabecera */
    border-right: 2px solid #ffffff; 
}
.docentes-table-styled th:last-child { border-right: none; }

/* CUERPO (Blanco con separadores azules) */
.docentes-table-styled td {
    padding: 15px 10px;
    vertical-align: middle;
    text-align: center;
    
    /* Líneas azules divisorias */
    border-bottom: 2px solid #103a89;
    border-right: 2px solid #103a89;
}

/* Quitar bordes al final para que no se dupliquen con el contenedor */
.docentes-table-styled tr:last-child td { border-bottom: none; }
.docentes-table-styled td:last-child { border-right: none; }


/* --- 4. DETALLES INTERNOS --- */

/* Foto redonda o cuadrada según diseño (aquí cuadrada con bordes suaves) */
.docente-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 5px; /* Ligeramente redondeada */
}

/* Nombre en negrita */
.docente-name-cell {
    font-weight: 700;
    color: #000;
    font-size: 1.1rem;
}

/* BOTONES ROJOS */
.btn-red-docente {
    display: inline-block;
    background-color: #D90000; /* Rojo */
    color: white !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px; 
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.3s ease;
    min-width: 150px;
    text-align: center;
}

.btn-red-docente:hover {
    background-color: #b30000; /* Rojo oscuro al pasar mouse */
}

/* RESPONSIVE (Móvil) */
@media (max-width: 768px) {
    .docente-card-container { border: none; box-shadow: none; }
    .docentes-table-styled, .docentes-table-styled tbody, .docentes-table-styled tr, .docentes-table-styled td {
        display: block; width: 100%;
    }
    .docentes-table-styled thead { display: none; }
    
    .docentes-table-styled tr {
        border: 2px solid #103a89;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 15px;
        background: #fff;
    }
    .docentes-table-styled td {
        border: none;
        padding: 5px 0;
        text-align: center;
    }
    .btn-red-docente { width: 100%; }
}

/* =========================================================
   CORRECCIÓN FINAL: SEPARACIÓN DE PORTADAS
   ========================================================= */

/* 1. ESTILO ESPECÍFICO PARA PLANA DOCENTE 
   (Esto sobreescribe la foto de Bolsa de Trabajo solo aquí) */
.hero-docente {
    background-image: url('../img/plana-docente/plana-docente-banner.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Opcional: Ajuste para móvil para que se vean las caras */
@media (max-width: 768px) {
    .hero-docente {
        background-position: top center !important;
    }
}

/* =========================================================
   LÍNEA ROJA FINAL (PLANA DOCENTE)
   ========================================================= */

.docente-separator-line {
    width: 100%;
    height: 4px;           /* Grosor de la línea */
    background-color: #D90000; /* Rojo (Mismo color que tus botones) */
    margin-top: 50px;      /* Espacio entre la tabla y la línea */
    margin-bottom: -40px;   /* Espacio antes del footer */
    border-radius: 2px;    /* Bordes suavizados */
}

/* =========================================================
   ESTILOS CARRERAS A DISTANCIA
   ========================================================= */

/* 1. PORTADA ESPECÍFICA (Cambia la ruta de la imagen si tienes una distinta) */
.hero-distancia {
    /* Aquí usa tu imagen de banner para Programas a Distancia */
    background-image: url('../img/transparencia-reglamentos/banner-carreras-escuelaintur.jpg') !important; 
    /* He puesto la de bolsa temporalmente. ¡Cámbiala por la tuya! */
    
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. AJUSTES DE TABLA (SOLO TEXTO) */
/* Alineamos el nombre del programa a la izquierda para que se lea mejor */
.distancia-table td.text-left {
    text-align: left;
    padding-left: 30px;
}

/* Negrita para el código P01, P02... */
.distancia-table td.text-bold {
    font-weight: 800;
    color: #000;
}

/* Ajuste responsive para la tabla de distancia */
@media (max-width: 768px) {
    .distancia-table td.text-left {
        padding-left: 10px;
        text-align: center; /* En celular quizás mejor centrado */
    }
}

/* =========================================================
   ESTILOS NUESTRAS SEDES (DISEÑO FINAL)
   ========================================================= */

/* 1. PORTADA ESPECÍFICA */
.hero-sedes {
    /* Asegúrate de que esta ruta sea correcta o cámbiala por la foto que quieras */
    background-image: url('../img/nuestras-sedes/nuestras-sedes.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. SECCIÓN GENERAL */
.sedes-content-section {
    background-color: #ffffff;
    padding: 60px 0 80px 0;
}

/* --- BLOQUE 1: SEDE ADMINISTRATIVA --- */
.sede-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 40px;
    align-items: center; /* Centrado vertical */
    margin-top: 30px;
}

/* Dirección con Icono */
.address-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.map-icon-red {
    color: #e63946; /* Rojo */
    font-size: 1.4rem;
    margin-top: 5px;
}

.sede-address-text {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
}

/* Botón VER EN MAPA */
.btn-mapa-blue {
    display: inline-block;
    background-color: #103a89; /* Azul Intur */
    color: white;
    padding: 12px 30px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}
.btn-mapa-blue:hover {
    background-color: #002a6b;
}

/* Imagen Fachada */
.sede-main-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* --- LÍNEA SEPARADORA --- */
.full-width-red-line {
    width: 100%;
    height: 2px;
    background-color: #e63946;
    margin: 60px 0;
}

/* --- BLOQUE 2: OFICINAS --- */
.oficinas-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columnas */
    gap: 40px;
    margin-top: 30px;
}

.oficina-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden; /* Importante para que la imagen respete el borde */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.oficina-img-wrapper {
    width: 100%;
    height: 300px;
}

.oficina-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

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

/* Franja Azul Inferior */
.oficina-footer-blue {
    background-color: #103a89; /* Azul Intur */
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
}

/* RESPONSIVE (Móvil) */
@media (max-width: 768px) {
    .sede-info-grid {
        grid-template-columns: 1fr; /* 1 Columna en móvil */
        gap: 30px;
    }
    .oficinas-gallery {
        grid-template-columns: 1fr; /* 1 Columna en móvil */
    }
    .sede-main-img { height: 250px; }
}

/* =========================================================
   AJUSTE DE ESPACIO (FOOTER COMPACTO)
   ========================================================= */

/* Esta clase elimina el espacio gigante superior del footer solo donde se use */
.footer-compacto {
    padding-top: 10px !important; /* Antes era 90px */
    margin-top: 0 !important;
}

/* Opcional: Ajuste para la sección de licenciamiento si se sube mucho */
.footer-compacto .licenciamiento-grid {
    /* Ajustamos si es necesario, pero con el padding 10px debería verse bien */
    margin-top: 30px; 
}

/* =========================================================
   ESTILOS PROCESO DE MATRÍCULA (DISEÑO FINAL - LISTA)
   ========================================================= */

/* 1. PORTADA ESPECÍFICA (Mantenemos esto) */
.hero-matricula {
    background-image: url('../img/proceso-de-matricula/banner-proceso-de-matricula.jpg') !important; /* Cambia por tu foto real */
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. SECCIÓN DE CONTENIDO */
.matricula-content-section {
    background-color: #ffffff;
    padding: 60px 0 40px 0;
}

.matricula-header {
    margin-bottom: 40px;
    text-align: left;
}

/* 3. LISTA VERTICAL DE BANNERS */
.steps-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espacio entre cada banner de paso */
    max-width: 1000px; /* Ancho máximo para que no se estiren demasiado */
    margin: 0 auto; /* Centrado horizontalmente */
}

/* EL BANNER DEL PASO (Contenedor con borde azul) */
.step-banner {
    display: flex;
    align-items: center; /* Centrado vertical del contenido */
    background-color: #ffffff;
    border: 3px solid #103a89; /* Borde Azul Grueso */
    padding: 20px 40px;
    border-radius: 0; /* Bordes rectos según la imagen */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Sombra suave opcional */
}

/* NÚMERO GRANDE AZUL (Izquierda) */
.step-num-large {
    font-size: 5rem; /* Número muy grande */
    font-weight: 900;
    color: #103a89; /* Color Azul Intur */
    line-height: 1;
    margin-right: 40px; /* Espacio entre número y texto */
    flex-shrink: 0; /* Evita que el número se aplaste */
}

/* Envoltorio de Título y Descripción (Derecha) */
.step-info-wrapper {
    text-align: left;
    flex-grow: 1;
}

/* TÍTULO (PASO X) */
.step-title-banner {
    font-size: 1.5rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* DESCRIPCIÓN */
.step-desc-banner {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

/* RESPONSIVE (Móvil) */
@media (max-width: 768px) {
    .step-banner {
        flex-direction: column; /* Uno debajo del otro en celular */
        padding: 30px 20px;
        text-align: center;
    }
    .step-num-large {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .step-info-wrapper {
        text-align: center;
    }
}

/* =========================================================
   ESTILOS SOBRE NOSOTROS
   ========================================================= */

/* 1. PORTADA ESPECÍFICA */
.hero-nosotros {
    /* CAMBIA ESTA RUTA POR TU FOTO DE ESTUDIANTES */
    background-image: url('../img/sobre-nosotros/nosotros.jpg') !important; 
    
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. INTRODUCCIÓN (Quiénes Somos) */
.about-intro-section {
    background-color: #fff;
    padding: 80px 0 60px 0;
}

.about-grid-intro {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Texto más ancho que logo */
    gap: 50px;
    align-items: center;
}

.about-desc {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.about-logo-large {
    width: 100%;
    max-width: 300px; /* Tamaño controlado del logo */
    display: block;
    margin: 0 auto;
}

/* 3. MISIÓN Y VISIÓN */
.mission-vision-section {
    background-color: #f8f9fa; /* Fondo gris muy suave */
    padding: 60px 0;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mv-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border-top: 5px solid #103a89; /* Línea azul arriba */
}

.mv-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #103a89;
    margin-bottom: 10px;
    text-align: center;
}

.mv-line {
    width: 60px;
    height: 4px;
    background-color: #e63946; /* Rojo */
    margin: 0 auto 20px auto;
}

.mv-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 15px;
}

/* 4. VALORES */
.values-section {
    background-color: #fff;
    padding: 80px 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columnas */
    gap: 30px;
}

.value-card {
    background: #fff;
    padding: 30px 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
}

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

.value-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: #f0f0f0; /* Número gris muy claro de fondo */
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
}

.value-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #103a89;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.value-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .about-grid-intro { grid-template-columns: 1fr; text-align: center; }
    .about-desc { text-align: center; }
    .mv-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* =========================================================
   ESTILOS LOGIN (INICIO DE SESIÓN)
   ========================================================= */

/* 1. CONFIGURACIÓN DE PANTALLA COMPLETA */
.login-page-body {
    /* Imagen de fondo (puedes usar la misma de bolsa o una de alumnos) */
    background-image: url('../img/bolsa-de-trabajo/Bolsa de trabajo.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    height: 100vh; /* Altura completa de la ventana */
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: var(--fuente-principal);
}

/* Capa oscura para que resalte la tarjeta */
.login-bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(16, 58, 137, 0.6); /* Azul institucional con transparencia */
    backdrop-filter: blur(5px); /* Efecto borroso elegante */
    z-index: 1;
}

/* 2. TARJETA DE LOGIN */
.login-container-center {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.login-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 400px; /* Ancho máximo de la tarjeta */
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
    border-top: 5px solid #e63946; /* Línea roja decorativa arriba */
}

/* 3. ELEMENTOS INTERNOS */

/* Etiqueta "Alumno" */
.user-role-badge {
    background-color: #f0f0f0;
    color: #555;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
}

/* Logo */
.login-logo-img {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

/* Título */
.login-title {
    font-size: 1.5rem;
    color: #103a89;
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Campos de Formulario */
.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 12px 15px 12px 40px; /* Espacio para el icono a la izquierda */
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.95rem;
    background-color: #f9f9f9;
    transition: 0.3s;
    font-family: var(--fuente-principal);
}

.input-group input:focus {
    border-color: #103a89;
    background-color: #fff;
    outline: none;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 0.9rem;
}

/* Botón Login */
.btn-login {
    width: 100%;
    background-color: #103a89;
    color: white;
    border: none;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-login:hover {
    background-color: #002a6b;
}

/* Texto de Ayuda */
.login-help-text {
    margin-top: 25px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

/* Enlace Volver */
.login-footer-link {
    margin-top: 20px;
}
.login-footer-link a {
    font-size: 0.8rem;
    color: #999;
    text-decoration: none;
}
.login-footer-link a:hover {
    color: #103a89;
}

/* =========================================================
   ESTILOS AUTORIDADES
   ========================================================= */

/* 1. PORTADA ESPECÍFICA */
.hero-autoridades {
    /* CAMBIA ESTA RUTA POR TU FOTO DE "AUTORIDADES" DEL PDF */
    background-image: url('../img/autoridades/autoridades-banner.jpg') !important; 
    
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. AJUSTES DE TABLA DE AUTORIDADES */

/* Cargo (Columna Izquierda) */
.autoridades-table .cargo-cell {
    text-align: left; /* Alineado a la izquierda */
    padding-left: 40px; /* Sangría */
    font-weight: 700;
    color: #103a89; /* Azul Intur para el cargo */
    text-transform: uppercase;
    font-size: 0.95rem;
}

/* Nombre (Columna Derecha) */
.autoridades-table .nombre-cell {
    text-align: left;
    padding-left: 20px;
    font-weight: 500;
    color: #000;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .autoridades-table .cargo-cell, 
    .autoridades-table .nombre-cell {
        padding-left: 15px;
        font-size: 0.85rem;
    }
}

/* =========================================================
   ESTILOS TRANSPARENCIA
   ========================================================= */

/* 1. PORTADA ESPECÍFICA */
.hero-transparencia {
    /* IMPORTANTE: Usa la foto del hombre y mujer viendo papeles si la tienes */
    /* De momento uso la de bolsa como base */
    background-image: url('../img/transparencia-banner/transparencia-banner.jpg') !important; 
    
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. SECCIÓN PRINCIPAL */
.transparencia-section {
    background-color: #ffffff;
    padding: 60px 0 40px 0;
}

/* 3. GRILLA DE DOCUMENTOS (3 COLUMNAS) */
.transparencia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Espacio entre tarjetas */
}

/* TARJETA INDIVIDUAL */
.doc-card {
    position: relative;
    height: 240px; /* Altura rectangular */
    overflow: hidden;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Imagen de Fondo de la Tarjeta */
.doc-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* Overlay Azul (Filtro) */
.doc-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* Azul Institucional con transparencia (85% opaco) */
    background: rgba(16, 58, 137, 0.308); 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    transition: background 0.3s ease;
}

.doc-card:hover .doc-overlay {
    background: rgba(16, 58, 137, 0.67); /* Más oscuro al pasar mouse */
}

/* Título del Documento */
.doc-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Botón Pastilla (Descargar/Ver más) */
.btn-doc-pill {
    display: inline-block;
    background-color: #ffffff;
    color: #103a89;
    padding: 6px 25px;
    border-radius: 20px; /* Forma de pastilla */
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-doc-pill:hover {
    background-color: #ffcc00; /* Amarillo al pasar mouse */
    color: #000;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .transparencia-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (max-width: 600px) {
    .transparencia-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
}

/* =========================================================
   ESTILOS CONTACTOS (COMPACTO Y BALANCEADO)
   ========================================================= */
.hero-contacto {
    background-image: url('../img/bolsa-de-trabajo/Bolsa de trabajo.jpg') !important; 
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.contacto-section {
    background-color: #ffffff;
    padding: 60px 0 40px 0;
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start; 
    margin-bottom: 60px;
}

/* --- COLUMNA IZQ: INFO --- */
.contacto-info-col { padding-top: 10px; }
.contacto-intro { font-size: 0.95rem; color: #555; margin-bottom: 20px; line-height: 1.5; }
.info-item { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-start; }
.info-icon { font-size: 1.3rem; color: #e63946; width: 25px; text-align: center; margin-top: 2px; }
.info-label { font-size: 1rem; font-weight: 800; color: #103a89; margin-bottom: 2px; }
.info-text { font-size: 0.9rem; color: #444; line-height: 1.4; margin: 0; }

/* MAPA AJUSTADO (180px) */
.mapa-small {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.mapa-small iframe { height: 180px !important; }

/* --- COLUMNA DER: FORMULARIO --- */
.form-box-clean {
    background-color: #f8f9fa; 
    padding: 25px 30px; 
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.form-title-blue {
    font-size: 1.6rem; 
    font-weight: 900;
    color: #103a89;
    line-height: 1.1;
    margin-bottom: 15px; 
    text-transform: uppercase;
}
.intur-form .form-group { margin-bottom: 10px; }
.intur-form label {
    display: block; font-weight: 600; color: #333; margin-bottom: 2px; font-size: 0.85rem; 
}
.intur-form input[type="text"],
.intur-form input[type="email"],
.intur-form input[type="tel"],
.intur-form select {
    width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 5px;
    font-family: var(--fuente-principal); font-size: 0.9rem; color: #555;
    background-color: #fff; transition: 0.3s; height: auto;
}
.intur-form input:focus, .intur-form select:focus {
    border-color: #103a89; outline: none; box-shadow: 0 0 5px rgba(16, 58, 137, 0.1);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; margin-top: 10px; }
.form-check input { margin-top: 4px; }
.form-check label { font-weight: 400; font-size: 0.75rem; color: #666; margin: 0; line-height: 1.2; }
.btn-enviar-full {
    width: 100%; background-color: #e63946; color: white; font-weight: 800; text-transform: uppercase;
    padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: 0.3s;
}
.btn-enviar-full:hover { background-color: #b30000; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
    .form-row-2 { grid-template-columns: 1fr; }
    .mapa-small iframe { height: 250px !important; }
}

/* =========================================
   ESTILOS POP-UP (MODAL) - DISEÑO INTUR
   ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(16, 58, 137, 0.85); /* Fondo Azul transparente */
    display: none; justify-content: center; align-items: center; z-index: 9999;
    backdrop-filter: blur(4px);
}
.success-card {
    background: white; padding: 50px 40px; border-radius: 15px; text-align: center;
    max-width: 400px; width: 90%; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: slide-up 0.4s ease; border-top: 6px solid #e63946;
}
@keyframes slide-up {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.icon-circle {
    width: 80px; height: 80px; border: 4px solid #103a89; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; margin: 0 auto 25px auto;
}
.icon-check { font-size: 40px; color: #103a89; }
.success-title {
    font-family: var(--fuente-principal); font-size: 1.5rem; font-weight: 900;
    color: #103a89; margin-bottom: 15px; text-transform: uppercase;
}
.success-text { font-size: 0.95rem; color: #555; line-height: 1.5; margin-bottom: 30px; }
.btn-modal-red {
    display: inline-block; background-color: #e63946; color: white; border: none;
    padding: 12px 40px; border-radius: 5px; font-weight: 800; font-size: 1rem;
    cursor: pointer; transition: 0.3s; font-family: var(--fuente-principal);
    text-transform: uppercase; width: 100%;
}
.btn-modal-red:hover { background-color: #b30000; }

/* =========================================================
   ESTILOS LOGIN (COMÚN PARA INTRANET Y EVA)
   ========================================================= */

/* 1. PANTALLA COMPLETA */
.login-page-body {
    background-image: url('../img/bolsa-de-trabajo/Bolsa de trabajo.jpg'); /* O la imagen que prefieras */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: var(--fuente-principal);
}

.login-bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(16, 58, 137, 0.6); /* Azul transparente */
    backdrop-filter: blur(5px);
    z-index: 1;
}

/* 2. TARJETA */
.login-container-center {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.login-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 400px;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    text-align: center;
    border-top: 5px solid #e63946;
}

/* 3. ELEMENTOS INTERNOS */
.user-role-badge {
    background-color: #f0f0f0;
    color: #555;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
}

.login-logo-img {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.login-title {
    font-size: 1.5rem;
    color: #103a89;
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.95rem;
    background-color: #f9f9f9;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 0.9rem;
}

.btn-login {
    width: 100%;
    background-color: #103a89;
    color: white;
    border: none;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-login:hover { background-color: #002a6b; }

.login-help-text {
    margin-top: 25px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.login-footer-link { margin-top: 20px; }
.login-footer-link a { font-size: 0.8rem; color: #999; text-decoration: none; }

/* =========================================================
   ESTILOS BLOG (NOTICIA DETALLE)
   ========================================================= */

/* 1. PORTADA BLOG */
.hero-blog {
    /* Usa una imagen genérica o de noticias */
    background-image: url('../img/bolsa-de-trabajo/Bolsa de trabajo.jpg') !important; 
    
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. ESTRUCTURA PRINCIPAL */
.blog-section {
    background-color: #ffffff;
    padding: 60px 0;
}

.blog-layout {
    display: grid;
    grid-template-columns: 2.5fr 1fr; /* Columna ancha izquierda, estrecha derecha */
    gap: 50px;
}

/* --- COLUMNA ARTÍCULO --- */
.post-header {
    margin-bottom: 25px;
}

.post-title {
    font-size: 2.2rem;
    color: #103a89; /* Azul Intur */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}

.post-meta {
    font-size: 0.9rem;
    color: #777;
    display: flex;
    gap: 20px;
}

.post-date i, .post-cat i {
    color: #e63946; /* Rojo */
    margin-right: 5px;
}

.post-image-box {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.post-img {
    width: 100%;
    height: auto;
    display: block;
}

.post-body {
    color: #444;
    font-size: 1rem;
    line-height: 1.8;
}

.post-body p { margin-bottom: 20px; text-align: justify; }

.post-body h3 {
    color: #000;
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.lead-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: #103a89;
    border-left: 4px solid #e63946;
    padding-left: 15px;
    font-style: italic;
}

.btn-back {
    display: inline-block;
    margin-top: 30px;
    color: #103a89;
    font-weight: 700;
    text-decoration: underline;
}

/* --- COLUMNA SIDEBAR --- */
.blog-sidebar {
    border-left: 1px solid #eee;
    padding-left: 30px;
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sidebar-list {
    list-style: none;
    padding: 0;
}

.sidebar-list li {
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.sidebar-list li:last-child { border: none; }

.sidebar-list a {
    display: block;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: 0.3s;
}
.sidebar-list a:hover { color: #e63946; }

.sidebar-date {
    display: block;
    font-size: 0.8rem;
    color: #999;
    font-weight: 400;
    margin-bottom: 3px;
}

.sidebar-banner {
    margin-top: 40px;
    background-color: #f9f9f9;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; } /* Una sola columna en móvil */
    .blog-sidebar { border-left: none; padding-left: 0; margin-top: 50px; }
}

/* =========================================================
   ESTILOS NOTICIAS (FEED)
   ========================================================= */

/* 1. PORTADA NOTICIAS */
.hero-noticias {
    background-image: url('../img/noticias/banner-noticia.jpg') !important; 
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 2. SECCIÓN PRINCIPAL */
.news-section {
    background-color: #ffffff;
    padding: 60px 0;
}

/* Reutilizamos .blog-layout del paso anterior para las columnas */
/* Si no lo tienes, asegúrate de haber pegado el CSS de BLOG antes */

/* --- COLUMNA DE NOTICIAS --- */
.news-feed-col {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* --- NOTICIA DESTACADA (GRANDE) --- */
.news-card-featured {
    border-bottom: 1px solid #eee;
    padding-bottom: 40px;
}

.news-feat-img-box {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
}

.news-feat-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.news-card-featured:hover .news-feat-img { transform: scale(1.05); }

/* Etiqueta de Fecha sobre imagen */
.news-date-badge {
    position: absolute;
    top: 20px; left: 20px;
    background-color: #e63946; /* Rojo */
    color: white;
    padding: 10px 15px;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    border-radius: 4px;
    font-size: 0.9rem;
}

.news-feat-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #103a89;
    line-height: 1.2;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.news-excerpt {
    font-size: 1rem;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Botón Ver Más Rojo */
.btn-ver-mas-red {
    display: inline-block;
    background-color: #e63946;
    color: white;
    padding: 10px 25px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: 0.3s;
}
.btn-ver-mas-red:hover { background-color: #b30000; }

/* --- GRILLA DE NOTICIAS SECUNDARIAS --- */
.news-grid-secondary {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columnas */
    gap: 30px;
}

.news-card-small {
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.news-small-img-box {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}
.news-small-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.news-card-small:hover .news-small-img { transform: scale(1.1); }

.news-date-small {
    font-size: 0.8rem;
    color: #999;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.news-small-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    line-height: 1.3;
    margin-bottom: 10px;
    text-transform: uppercase;
    min-height: 2.6em; /* Para alinear alturas */
}

.news-small-excerpt {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.link-arrow {
    color: #103a89;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.link-arrow:hover { gap: 12px; color: #e63946; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .news-grid-secondary { grid-template-columns: 1fr; } /* 1 Columna en móvil */
    .news-feat-img-box { height: 250px; }
}

/* =========================================================
   ESTILOS CARRERA: MALLA CURRICULAR (DISEÑO FINAL)
   ========================================================= */

/* --- 1. PORTADA ESPECÍFICA --- */
.hero-adm {
    background-image: url('../img/en-que-consiste/administracion-de-negocios-internacionales.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* --- 2. SECCIÓN INFO "¿EN QUÉ CONSISTE?" --- */
.carrera-info-section {
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 0;
    position: relative;
}

/* Grid Texto + Imagen */
.consiste-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
}

/* Títulos y Decoración */
.titulo-consiste {
    font-family: var(--fuente-principal);
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    line-height: 1;
    margin-bottom: 15px;
    text-transform: uppercase;
    text-align: left;
}

.barra-roja-titulo {
    width: 150px;
    height: 8px;
    background-color: #D90000;
    margin-bottom: 30px;
}

/* Texto del párrafo */
.texto-justificado {
    font-family: var(--fuente-principal);
    font-size: 1rem; /* Ajustado para mejor lectura */
    line-height: 1;
    color: #333;
    text-align: justify;
}
.texto-justificado strong { font-weight: 800; color: #000; }

/* Imagen con Marcos Decorativos */
.consiste-img-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.img-consiste {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.deco-square-red {
    position: absolute;
    top: -20px; left: -20px;
    width: 40px; height: 50px;
    background-color: #D90000;
    mix-blend-mode: multiply;
    z-index: 2;
}

.deco-square-blue {
    position: absolute;
    bottom: -20px; right: -20px;
    width: 40px; height: 50px;
    background-color: #103a89;
    mix-blend-mode: multiply;
    z-index: 2;
}

/* --- 3. SECCIÓN "¿POR QUÉ ESTUDIAR?" --- */
.porque-estudiar-final-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 60px auto;
    text-align: center;
}

.linea-roja-full, .full-separator-red {
    width: 100%;
    height: 4px;
    background-color: #D90000;
    margin: 50px 0;
    border-radius: 2px;
}

.titulo-porque-nuevo {
    font-family: var(--fuente-principal);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0px;
    line-height: 1;
    text-transform: uppercase;
}

.texto-negro { color: #000; margin-right: 10px; }
.texto-rojo  { color: #D90000; }

.subtitulo-con-flechas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: -10px;
    margin-bottom: 20px;
}

.subtitulo-con-flechas .texto-rojo {
    font-family: var(--fuente-principal);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
}

.flecha-azul-icono {
    width: 80px;
    height: auto;
    filter: hue-rotate(220deg) brightness(0.6) saturate(1.2); /* Vuelve azul la flecha roja */
}
.rotada-izq { transform: rotate(180deg); }

.texto-centro-final {
    font-size: 0.9rem;
    color: #444;
    line-height: 1;
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.texto-centro-final strong { color: #000; font-weight: 700; }


/* --- 4. MALLA CURRICULAR (GRILLA Y TARJETAS) --- */

.malla-section {
    padding-bottom: 60px;
}

.malla-title-new {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
    text-align: center;
}

/* Flecha roja junto al título */
.arrow-red-original {
    height: 80px;
    width: auto;
    margin-top: 10px;
}

.section-title-black {
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: left;
    position: relative;
}

/* Barra roja debajo del título usando ::after */
.section-title-black::after {
    content: '';
    display: block;
    width: 100px;
    height: 8px;
    background-color: #D90000;
    margin-top: 10px;
    margin-left: 5px;
}

/* === GRILLA PRINCIPAL (ZIG-ZAG) === */
.malla-grid {
    display: grid;
    /* Columnas fijas de 340px para que sean tarjetas delgadas y altas */
    grid-template-columns: 340px 340px;
    justify-content: center;
    
    /* Espaciado: 80px vertical, 220px horizontal (para las flechas largas) */
    gap: 80px 220px;
    
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 80px;
    
    /* CRUCIAL: 'dense' permite reordenar visualmente para el zig-zag */
    grid-auto-flow: dense;
}

/* -- ORDENAMIENTO ZIG-ZAG (SERPIENTE) -- */
/* Fila 1 (Normal) */
.ciclo-card:nth-child(1) { grid-column: 1; }
.ciclo-card:nth-child(2) { grid-column: 2; }
/* Fila 2 (Invertida: El 3 va a la derecha, el 4 a la izquierda) */
.ciclo-card:nth-child(3) { grid-column: 2; }
.ciclo-card:nth-child(4) { grid-column: 1; }
/* Fila 3 (Normal) */
.ciclo-card:nth-child(5) { grid-column: 1; }
.ciclo-card:nth-child(6) { grid-column: 2; }
/* Fila 4 (Invertida) */
.ciclo-card:nth-child(7) { grid-column: 2; }
.ciclo-card:nth-child(8) { grid-column: 1; }

/* === TARJETA DEL CICLO === */
.ciclo-card {
    background: #fff;
    border: 4px solid #D90000;
    border-radius: 20px;
    
    /* ALTURA: Asegura que sean altas (verticales) */
    min-height: 490px;
    
    padding: 35px 25px 20px 25px;
    
    /* Margen superior para compensar el título flotante */
    margin-top: 60px;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    overflow: visible !important; /* Para que se vean las flechas conectoras */
    position: relative;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Encabezado Azul Flotante */
.ciclo-header {
    background-color: #103a89;
    color: white;
    font-family: var(--fuente-principal);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border-radius: 50px;
    width: fit-content;
    margin: -55px auto 25px auto; /* Flota fuera de la tarjeta hacia arriba */
    position: relative;
    z-index: 15;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Lista de Cursos */
.curso-list {
    padding: 10px 0 0 10px;
    list-style: none;
    margin: 0;
}

.curso-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 18px;
    font-family: var(--fuente-principal);
    font-weight: 700;   /* Negrita */
    color: #000;        /* Negro */
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Flechita roja pequeña junto al texto (➤) */
.curso-list li::before {
    content: '➤';
    color: #D90000;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.8rem;
    font-weight: 900;
    transform: scaleX(1.2);
}

/* === CONECTORES ROJOS (LAS LÍNEAS DE LA SERPIENTE) === */
/* Solo visibles en pantallas grandes */
@media (min-width: 900px) {
    
    /* 1. Flecha DERECHA (De 1->2 y 5->6) */
    .ciclo-card:nth-child(1)::after,
    .ciclo-card:nth-child(5)::after {
        content: ''; position: absolute;
        top: 50%; left: 100%;
        width: 240px; height: 4px; background: #D90000; z-index: -1;
    }

    /* 2. Flecha ABAJO (De 2->3 y 6->7) */
    .ciclo-card:nth-child(2)::after,
    .ciclo-card:nth-child(6)::after {
        content: ''; position: absolute;
        top: 100%; left: 50%;
        width: 4px; height: 180px; /* Largo para cubrir el gap */
        background: #D90000; z-index: -1;
    }

    /* 3. Flecha IZQUIERDA (De 3->4 y 7->8) */
    .ciclo-card:nth-child(3)::after,
    .ciclo-card:nth-child(7)::after {
        content: ''; position: absolute;
        top: 50%; right: 100%;
        width: 240px; height: 4px; background: #D90000; z-index: -1;
    }

    /* 4. Flecha ABAJO LADO IZQ (De 4->5) */
    /* El :not(:last-child) evita que el ciclo 8 tenga flecha abajo */
    .ciclo-card:nth-child(4):not(:last-child)::after {
        content: ''; position: absolute;
        top: 100%; left: 50%;
        width: 4px; height: 180px;
        background: #D90000; z-index: -1;
    }
}

/* --- 5. SECCIÓN CERTIFICACIÓN --- */
.certificacion-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

.certificacion-content { padding: 40px 0; }

.certificacion-title {
    font-family: var(--fuente-principal);
    font-size: 3.5rem;
    font-weight: 800;
    color: #103a89;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1;
}

.certificacion-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #000;
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 6. RESPONSIVE (MÓVIL) --- */
@media (max-width: 900px) {
    /* En móvil, la malla es una sola columna vertical */
    .malla-grid { 
        display: flex; 
        flex-direction: column; 
        gap: 60px; 
        max-width: 100%; 
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Quitamos el orden forzado para que salga 1,2,3,4... */
    .ciclo-card { 
        grid-column: auto !important; 
        min-height: auto; 
    }
    
    /* Ocultamos conectores */
    .ciclo-card::after { display: none !important; }

    /* Ajuste de títulos en móvil */
    .titulo-consiste, .titulo-porque-nuevo, .subtitulo-con-flechas .texto-rojo, .section-title-black, .certificacion-title {
        font-size: 2rem;
    }
    
    .consiste-grid { grid-template-columns: 1fr; gap: 40px; }
    .malla-title-new { flex-direction: column; }
    .arrow-red-original { transform: rotate(90deg); margin-bottom: 0; }
    
    .certificacion-text { text-align: justify; }
    .hide-mobile { display: none; }
}

/* --- 7. CONTENEDOR GLOBAL (FUERZA BRUTA PARA ANCHO) --- */
.container-generic {
    width: 95% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px !important;
}

/* Portada para Negocios Internacionales */
.hero-negocios {
    /* Asegúrate de tener la foto correcta en tu carpeta img */
    background-image: url('../img/carreras-banner/gestion-aduanera.jpg') !important; 
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Portada para Gestión Contable */
.hero-contable {
    /* Asegúrate de tener una foto llamada 'contabilidad-banner.jpg' o cambia el nombre aquí */
    background-image: url('../img/carreras-banner/gestion-contable.jpg') !important; 
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Portada para Gestión Jurídica */
.hero-juridica {
    /* Asegúrate de tener una foto adecuada (ej: balanza, abogados) */
    background-image: url('../img/carreras-banner/gestion-juridica.jpg') !important; 
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* =========================================
   OCULTAR LOGO HEADER SOLO EN INICIO
   ========================================= */
.home-page .site-header .logo-link {
    display: none !important;
}

/* Ajuste Opcional: Para celulares, si quieres que en el móvil SÍ se vea el logo del menú
   (porque el banner a veces se corta), borra las líneas de abajo. 
   Si quieres ocultarlo también en celular, deja esto tal cual. */
@media (max-width: 768px) {
    .home-page .site-header .logo-link {
        display: block !important; /* En móvil sí lo mostramos por seguridad */
        width: 120px; /* Un poco más pequeño para que entre bien */
    }
    
    /* Si decides mostrarlo en móvil, ajustamos el header para que no se monte */
    .home-page .site-header {
        background-color: rgba(16, 58, 137, 0.9); /* Fondo azulito para que se lea */
    }
}

/* =========================================
   9. MENÚ DESPLEGABLE (DROPDOWN)
   ========================================= */

/* Contenedor del item con menú */
.nav-links li.dropdown {
    position: relative;
    display: inline-block;
}

/* El contenido del menú (Oculto por defecto) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 240px; /* Ancho suficiente para los textos */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-top: 4px solid var(--color-rojo); /* Línea roja decorativa arriba */
    top: 100%; 
    left: 0;
    padding: 0;
    border-radius: 0 0 5px 5px;
}

/* Mostrar el menú al pasar el mouse */
.nav-links li.dropdown:hover .dropdown-content {
    display: block;
}

/* Estilo de los enlaces DENTRO del menú */
.dropdown-content li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
}
.dropdown-content li:last-child {
    border-bottom: none;
}

.dropdown-content li a {
    color: #333 !important; /* Texto negro/gris (sobrescribe el blanco del header) */
    padding: 15px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* Efecto Hover en los items del submenú */
.dropdown-content li a:hover {
    background-color: #f9f9f9;
    color: var(--color-azul-oscuro) !important; /* Azul al pasar el mouse */
    padding-left: 25px; /* Pequeño movimiento a la derecha */
    border-left: 3px solid var(--color-azul-oscuro);
}

/* --- AJUSTES PARA MÓVIL (Dentro de la hamburguesa) --- */
@media (max-width: 768px) {
    .nav-links li.dropdown {
        width: 100%;
    }
    
    .dropdown-content {
        position: relative; /* Ya no flota, se empuja dentro del menú */
        box-shadow: none;
        background-color: rgba(0,0,0,0.1); /* Fondo oscuro suave */
        width: 100%;
        border-top: none;
    }
    
    /* En celular, los links vuelven a ser blancos/claros */
    .dropdown-content li a {
        color: #e0e0e0 !important;
        padding-left: 30px; /* Indentación para que se note que es submenú */
        font-size: 0.8rem;
    }
    
    .dropdown-content li a:hover {
        background-color: transparent;
        color: var(--color-amarillo) !important;
        border-left: none;
    }
}

/* =========================================
   10. BOTÓN FLOTANTE WHATSAPP (LATE Y SE EXPANDE)
   ========================================= */

/* 1. Definimos la animación del latido */
@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        transform: scale(1);
    }
}

/* 2. Estilo base (REDONDO y con texto OCULTO) */
.btn-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado perfecto del icono */
    border-radius: 50px;
    width: 60px;  /* Ancho de círculo */
    height: 60px; /* Alto de círculo */
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Importante para ocultar el texto */
    transition: all 0.4s ease; /* Suavidad al estirarse */
    
    /* Animación activa siempre */
    animation: pulse-whatsapp 2s infinite;
}

/* Estilo del Icono */
.btn-whatsapp i {
    font-size: 32px;
    flex-shrink: 0; /* Evita que el icono se aplaste */
}

/* Estilo del Texto (OCULTO POR DEFECTO) */
.whatsapp-text {
    max-width: 0; /* Ancho cero = invisible */
    opacity: 0;   /* Transparente */
    white-space: nowrap; /* El texto no salta de línea */
    font-family: var(--fuente-principal);
    font-weight: 700;
    font-size: 1rem;
    margin-left: 0;
    transition: all 0.4s ease; /* Aparece suavemente */
}

/* --- 3. EFECTO HOVER (AL PASAR EL MOUSE) --- */
.btn-whatsapp:hover {
    width: 210px; /* SE ESTIRA A PÍLDORA */
    background-color: #20b857;
    justify-content: flex-start; /* Mueve el contenido a la izquierda */
    padding-left: 20px; /* Ajusta el icono */
    animation: none; /* Detiene el latido para que no moleste al leer */
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Mostrar el texto al pasar el mouse */
.btn-whatsapp:hover .whatsapp-text {
    max-width: 200px; /* Se abre espacio para el texto */
    opacity: 1;       /* Se hace visible */
    margin-left: 12px; /* Se separa del icono */
}

/* --- AJUSTE PARA MÓVIL --- */
@media (max-width: 768px) {
    .btn-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    
    .btn-whatsapp i {
        font-size: 28px;
    }
    
    /* En móvil, al tocar, también se expandirá gracias al :hover/active */
}

/* =========================================
   ESTILOS SOLO PARA PÁGINAS INTERNAS (404 y Libro)
   ========================================= */

/* 1. Header con fondo AZUL (para que se vean las letras blancas) */
body.pagina-interna .site-header {
    background-color: var(--color-azul-oscuro);
    position: relative; /* Deja de ser flotante/transparente */
}

/* 3. Ajuste de espaciado para que el contenido no se pegue arriba */
body.pagina-interna main {
    margin-top: 0; /* Reseteamos márgenes porque el header ya no flota encima */
}

/* --- AGREGAR ESTO EN TU CSS PARA QUE EL MENÚ MÓVIL FUNCIONE --- */
@media (max-width: 768px) {
    /* Estilo base del menú desplegado */
    .nav-links.active {
        display: flex !important; /* Fuerza a que aparezca */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Justo debajo del header */
        left: 0;
        width: 100%;
        background-color: var(--color-azul-oscuro);
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 1000;
        align-items: center; /* Centra los textos */
    }

    /* Ajuste para que los links tengan espacio en vertical */
    .nav-links.active li {
        margin: 15px 0;
        width: 100%;
        text-align: center;
    }

    /* El botón hamburguesa se transforma (Opcional visual) */
    .menu-toggle.open .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .menu-toggle.open .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.open .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

@media (max-width: 768px) {
    .site-header { 
        position: relative; /* En celular deja de flotar para no tapar contenido */
        background-color: var(--color-azul-oscuro); /* Siempre fondo azul en celular */
    }
}

/* =========================================
   ESTILOS LIBRO DE RECLAMACIONES (FINAL)
   ========================================= */
.reclamaciones-section { padding: 60px 20px; background-color: #f4f6f9; }

.hoja-reclamacion {
    max-width: 900px; margin: 0 auto; border: 1px solid #ddd; border-top: 6px solid #103a89;
    padding: 50px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 8px;
}
.hoja-header { text-align: center; margin-bottom: 40px; border-bottom: 2px solid #eee; padding-bottom: 20px; }
.hoja-header h1 { color: #103a89; font-weight: 900; font-size: 2rem; margin-bottom: 5px; }

.form-section-title {
    background-color: #103a89; color: white; padding: 12px 20px; font-size: 1rem;
    font-weight: 700; margin-top: 35px; margin-bottom: 25px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 20px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-full { width: 100%; margin-bottom: 20px; }

.form-label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; color: #333; }
.form-input, .form-textarea, .form-select {
    width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px;
    font-family: var(--fuente-principal); font-size: 0.95rem; color: #555;
    background-color: #fafafa; transition: 0.3s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: #103a89; background-color: #fff; outline: none;
    box-shadow: 0 0 5px rgba(16, 58, 137, 0.1);
}
.input-group-row { display: flex; gap: 10px; }

.nota-legal-box {
    background-color: #f8f9fa; border-left: 4px solid #103a89; padding: 20px;
    margin-top: 40px; font-size: 0.85rem; color: #555; line-height: 1.6;
}
.btn-ver-mas-red {
    background-color: #e63946; color: white; font-weight: 800; text-transform: uppercase;
    padding: 15px 50px; border: none; border-radius: 5px; cursor: pointer;
    font-size: 1rem; transition: 0.3s;
}
.btn-ver-mas-red:hover { background-color: #b30000; }

@media (max-width: 768px) {
    .hoja-reclamacion { padding: 25px; }
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; gap: 15px; }
    .input-group-row { flex-direction: column; }
}

/* =======================================================
   CORRECCIÓN: OCULTAR DUPLICADOS EN ESCRITORIO
   ======================================================= */

/* 1. Por defecto (en PC/Laptop), estos enlaces NO existen */
.mobile-only {
    display: none !important;
}

/* 2. En celular, SÍ existen (dentro del menú lateral) */
@media screen and (max-width: 768px) {
    .mobile-only {
        display: block !important;
        width: 100%; /* Para que ocupe el ancho en el menú lateral */
    }
}

/* ==========================================================================
   CÓDIGO MÓVIL MAESTRO - ESCUELA INTUR (VERSIÓN FINAL LIMPIA)
   (Incluye: Sidebar Menú Azul, Header Transparente, Fixes de Diseño)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* --- 1. AJUSTES GENERALES Y RESET --- */
    body, html { 
        overflow-x: hidden; /* Evita que la pantalla se mueva a los lados */
        width: 100%; 
    }
    
    /* Contenedores generales a ancho completo con padding */
    .container-generic, .container-carreras, .page-hero-content, .container-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
    }
    
    /* Ocultamos las barras superiores que no caben en móvil */
    /* (Sus enlaces ya deben estar copiados en el menú principal en el HTML) */
    .top-bar, .header-top { display: none !important; }


    /* --- 2. HEADER TRANSPARENTE & LOGO GRANDE --- */
    .site-header {
        background-color: transparent !important; /* Transparente */
        background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); /* Sombra para leer */
        position: absolute !important; /* Flotante */
        top: 0; left: 0; width: 100%;
        padding: 15px 0 !important;
        z-index: 1000;
        height: auto !important;
    }

    /* Logo visible y grande en móvil */
    .nav-logo {
        width: 180px !important;      /* Tamaño grande y legible */
        height: auto !important;
        margin-left: 20px !important;
        display: block !important;
    }
    
    /* Aseguramos que el logo sea visible incluso en la Home */
    .home-page .site-header .logo-link { display: block !important; }


    /* --- 3. MENÚ LATERAL (SIDEBAR AZUL DESLIZANTE) --- */
    .nav-links {
        display: none; /* Oculto hasta que se active */
        position: fixed !important;
        top: 0; 
        right: 0; /* Pegado a la derecha */
        width: 85%; /* Ocupa la mayoría de la pantalla */
        height: 100vh; /* Altura completa */
        background-color: #103a89 !important; /* AZUL INTUR */
        flex-direction: column;
        padding: 80px 0 40px 0; /* Espacio arriba para la X de cerrar */
        z-index: 9999;
        box-shadow: -5px 0 50px rgba(0,0,0,0.5);
        overflow-y: auto; /* Scroll si hay muchos items */
    }

    .nav-links.active {
        display: flex !important; /* JS añade esta clase para mostrarlo */
    }

    /* --- 4. ESTILO DE LOS ENLACES DEL MENÚ --- */
    .nav-links li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Línea separadora fina */
        text-align: left;
    }

    .nav-links li a {
        color: #ffffff !important;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 0.95rem;
        text-transform: uppercase;
        padding: 18px 25px; /* Espaciado cómodo para el dedo */
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* Flechita (>) al final de cada enlace */
    .nav-links li a::after {
        content: '\f054'; /* Icono Chevron Right FontAwesome */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 0.8rem;
        opacity: 0.7;
    }

    /* --- 5. BOTÓN "CONTACTOS" DESTACADO (BLANCO) --- */
    /* Este estilo es para el botón que se ve diferente al resto */
    .nav-links li:has(.btn-contactos-white) {
        border-bottom: none;
        padding: 20px 25px 10px 25px;
    }

    .nav-links li a.btn-contactos-white {
        background-color: #ffffff;
        color: #103a89 !important; /* Texto Azul */
        justify-content: center;
        text-align: center;
        border-radius: 4px;
        font-weight: 800;
        padding: 12px 0;
    }
    .nav-links li a.btn-contactos-white::after { content: none; } /* Sin flecha */


    /* --- 6. BOTÓN HAMBURGUESA (RAYITAS -> X) --- */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 35px; height: 24px;
        position: absolute !important;
        top: 25px !important;
        right: 25px !important;
        cursor: pointer;
        z-index: 10000; /* Encima de todo */
    }

    .menu-toggle .bar {
        width: 100%; height: 3px;
        background-color: #ffffff !important; /* Blancas */
        border-radius: 3px;
        transition: all 0.3s ease;
        display: block !important;
    }

    /* Animación de X cuando abre */
    .menu-toggle.open {
        position: fixed !important;
        right: 25px !important; /* Mantiene posición fija */
    }
    
    .menu-toggle.open .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .menu-toggle.open .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.open .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }


    /* --- 7. CORRECCIONES DE DISEÑO GENERAL (GRILLAS A 1 COLUMNA) --- */
    
    /* Bajamos el texto del banner para que no choque con el logo */
    .hero-content { padding-top: 160px !important; text-align: center; }
    h1.page-title, .hero-title { font-size: 2rem !important; line-height: 1.2; }
    
    /* Convertimos todas las grillas de 2, 3 o 4 columnas a 1 sola */
    .carreras-grid, .transparencia-grid, .malla-grid, .stats-grid-clean,
    .beneficios-grid, .offers-grid-large, .contacto-grid, .about-grid-intro,
    .footer-grid, .form-grid-2, .form-grid-3, .licenciamiento-grid, 
    .blog-layout, .sede-info-grid, .oficinas-gallery {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 30px;
        width: 100%;
    }

    /* Plana Docente (Tabla convertida a Tarjetas) */
    .docentes-table-styled thead { display: none; }
    .docentes-table-styled tr {
        display: block; border: 2px solid #103a89;
        margin-bottom: 20px; padding: 15px; border-radius: 10px;
    }
    .docentes-table-styled td { display: block; text-align: center; border: none; }
    .btn-red-docente { width: 100%; margin-bottom: 5px; }
    
    /* Ajuste de Footer */
    .site-footer { text-align: center; padding-bottom: 80px; } /* Espacio para botón WhatsApp */
    .footer-col { align-items: center; }
    .btn-whatsapp { bottom: 20px; right: 20px; }
}

@media (max-width: 768px) {
    .ocultar-en-movil { display: none !important; }
}

/* =======================================================
   MENÚ MÓVIL (FUERZA VISUALIZACIÓN)
   ======================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. EL CONTENEDOR DEL MENÚ AZUL */
    .nav-links {
        display: none; /* Oculto por defecto */
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 85% !important;
        height: 100vh !important;
        background-color: #103a89 !important; /* Azul Intur */
        flex-direction: column !important;
        padding: 80px 0 40px 0 !important;
        z-index: 99999 !important; /* ¡Muy alto para que nada lo tape! */
        box-shadow: -10px 0 50px rgba(0,0,0,0.8) !important;
        overflow-y: auto !important;
    }

    /* 2. CLASE QUE LO HACE VISIBLE (JS la activa) */
    .nav-links.active {
        display: flex !important;
    }

    /* 3. ESTILOS DE LOS ENLACES */
    .nav-links li {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    
    .nav-links li a {
        color: white !important;
        font-size: 1rem;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        text-transform: uppercase;
    }

    /* 4. BOTÓN DE CERRAR (X) */
    /* Cuando se abre, la X se fija encima del menú */
    .menu-toggle.open {
        position: fixed !important;
        right: 20px !important;
        top: 25px !important;
        z-index: 100000 !important;
    }
    
    /* Estilo de la X */
    .menu-toggle.open .bar { background-color: white !important; }
    .menu-toggle.open .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .menu-toggle.open .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.open .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}

/* =======================================================
   MENÚ MÓVIL (FUERZA VISUALIZACIÓN - VERSIÓN ULTRA COMPACTA)
   ======================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. EL CONTENEDOR DEL MENÚ AZUL */
    .nav-links {
        display: none; /* Oculto por defecto */
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 85% !important;
        height: 100vh !important;
        background-color: #103a89 !important; /* Azul Intur */
        flex-direction: column !important;
        padding: 60px 0 20px 0 !important; /* Menos espacio arriba y abajo */
        z-index: 99999 !important;
        box-shadow: -10px 0 50px rgba(0,0,0,0.8) !important;
        overflow-y: auto !important;
    }

    /* 2. VISIBILIDAD */
    .nav-links.active {
        display: flex !important;
    }

    /* 3. ESTILOS DE LOS ENLACES (ULTRA COMPACTOS) */
    .nav-links li {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Línea aún más sutil */
        margin: 0 !important; /* Asegurar que no haya márgenes externos */
    }
    
    .nav-links li a {
        color: white !important;
        font-size: 0.9rem !important; /* Texto un pelín más pequeño para que entre todo */
        /* AQUÍ ESTÁ EL CAMBIO EXTREMO: */
        padding: 12px 20px !important; /* Reducido al mínimo cómodo */
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        line-height: 1; /* Línea apretada */
        min-height: auto !important;
    }

    /* Ajuste para el botón CONTACTOS blanco */
    .nav-links li:has(.btn-contactos-white) {
        padding: 10px 20px !important; 
        border-bottom: none !important;
    }
    .nav-links li a.btn-contactos-white {
        padding: 8px 0 !important; /* Botón delgado */
        margin: 0 !important;
        background-color: white;
        color: #103a89 !important;
        justify-content: center;
        border-radius: 4px;
        font-weight: 800;
    }

    /* 4. BOTÓN DE CERRAR (X) */
    .menu-toggle.open {
        position: fixed !important;
        right: 20px !important;
        top: 20px !important; /* Subimos un poco la X también */
        z-index: 100000 !important;
    }
    .menu-toggle.open .bar { background-color: white !important; }
    .menu-toggle.open .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .menu-toggle.open .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.open .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}

/* =======================================================
   8. ARREGLO MENÚ DESPLEGABLE (SOLO MÓVIL)
   ======================================================= */
@media screen and (max-width: 768px) {
    
    .nav-links li.dropdown {
        display: block !important;
        width: 100% !important;
    }

    .nav-links li.dropdown > a {
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    
    /* ESTILOS DE LA CAJA (SOLO EN MÓVIL SE VE AZUL) */
    .dropdown-content {
        position: relative !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        background-color: #0d2e6e !important; 
        border-top: none !important;
        border-radius: 0 !important;
        display: none; 
        padding: 0 !important;
    }

    /* Cuando JS pone la clase .active, mostramos el menú */
    .nav-links li.dropdown.active .dropdown-content {
        display: block !important; 
    }

    .dropdown-content li {
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        margin: 0 !important;
    }

    .dropdown-content li a {
        font-size: 0.85rem !important;
        padding: 12px 20px 12px 40px !important;
        color: #d1d9e6 !important;
        font-weight: 500 !important;
    }
    
    .dropdown-content li a:hover {
        background-color: transparent !important;
        color: #ffcc00 !important;
    }

    /* Animación de flecha SOLO EN MÓVIL */
    .nav-links li.dropdown > a::after {
        transition: transform 0.3s ease !important;
        display: inline-block;
    }

    .nav-links li.dropdown.active > a::after {
        transform: rotate(90deg) !important;
        color: #ffcc00 !important;
    }
}

/* =======================================================
   AJUSTES HOME MÓVIL (LICENCIA IZQUIERDA Y LOGO GRANDE)
   ======================================================= */
@media screen and (max-width: 768px) {

    /* 1. HEADER: LOGO VISIBLE */
    .home-page .site-header .nav-logo,
    .home-page .site-header .logo-link {
        display: block !important;
        width: 130px !important;
        margin-left: 0 !important;
    }
    
    /* Ocultamos logo interno */
    .hero-logo-internal { display: none !important; }

    /* 2. CONTENEDOR PRINCIPAL: CENTRADO */
    .hero-content, 
    .hero-content.text-left { 
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        padding-top: 180px !important; 
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: flex-start !important;
        text-align: center !important;
        z-index: 10 !important;
    }

    /* --- REGLA MAESTRA DE CENTRADO --- */
    /* Centramos todo por defecto... */
    .hero-content > h1, 
    .hero-content > p, 
    .hero-content > span, 
    .hero-content > div:not(.licenciamiento-box) { /* ...EXCEPTO la caja de licencia */
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3. TÍTULO */
    h1.hero-title, .hero-title {
        font-size: 1.9rem !important;
        line-height: 1.1 !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }
    
    /* 4. BLOQUE 100% CON CÍRCULO */
    .percent-line {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0px 0 !important;
        width: 100% !important;
    }
    
    .big-percent {
        font-size: 3rem !important;
        font-weight: 700 !important;
        display: block !important;
        width: auto !important; 
        margin: 0 !important;
    }
    
    .white-line-deco {
        width: 70px !important;
        height: 3px !important;
        background-color: white !important;
        margin-left: 10px !important;
        display: block !important;
        position: relative !important;
        border-radius: 2px !important;
    }

    .white-line-deco::after {
        content: '' !important;
        position: absolute !important;
        right: -2px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 14px !important;
        height: 14px !important;
        background-color: white !important;
        border-radius: 50% !important;
    }

    /* 5. TEXTOS */
    .highlight-yellow {
        font-size: 2rem !important;
        margin-top: 0px !important;
        display: block !important;
        color: #ffc107 !important;
    }

    .hero-tagline {
        font-size: 1rem !important;
        margin-top: 0px !important;
        font-weight: 400 !important;
        display: block !important;
        width: 90% !important;
    }

    .hero-tagline span, .escalera-texto { display: block !important; }

    .hero-subtitle-yellow {
        font-size: 1.3rem !important;
        margin-top: 10px !important;
        color: #ffc107 !important;
    }

    /* =======================================================
       7. LICENCIAMIENTO (CORRECCIÓN SOLICITADA)
       - Pegado a la izquierda
       - Texto alineado a la izquierda
       - Logo más grande
       ======================================================= */
    .licenciamiento-box {
        position: absolute !important;
        bottom: 30px !important;       
        left: 25px !important;  /* Margen izquierdo */
        right: auto !important; /* Anulamos derecha */
        width: auto !important; /* Ancho automático */
        
        display: flex !important;
        flex-direction: column !important; /* Uno debajo del otro */
        align-items: flex-start !important; /* Alinear a la izquierda */
        justify-content: flex-start !important;
        
        transform: none !important; 
        z-index: 20 !important;
        margin: 0 !important;
    }
    
    /* Texto "ESCUELA LICENCIADA..." */
    .licenciamiento-box .lic-text {
        text-align: left !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 5px !important;
        width: auto !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        display: block !important;
    }

    /* Contenedor del logo */
    .licenciamiento-box .lic-logos {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Logo MINEDU */
    .licenciamiento-box .lic-logos img {
        height: 50px !important; /* ANTES ERA 40PX -> AHORA 55PX */
        width: auto !important;
        display: block !important;
        max-width: none !important;
    }

    .menu-toggle {
        top: 25px !important;
        right: 25px !important;
    }
}

/* =======================================================
   1. AJUSTES HERO MÓVIL (MIXTO: ARRIBA CENTRO / ABAJO IZQ)
   ======================================================= */
@media screen and (max-width: 768px) {

    /* --- HEADER --- */
    .home-page .site-header .nav-logo,
    .home-page .site-header .logo-link {
        display: block !important;
        width: 130px !important;
        margin-left: 0 !important;
    }
    .hero-logo-internal { display: none !important; }

    /* --- CONTENEDOR PRINCIPAL (Flexbox) --- */
    .hero-content, 
    .hero-content.text-left { 
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important; /* Ocupa toda la pantalla */
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Centrado Vertical */
        align-items: center !important;     /* Centrado Horizontal (por defecto) */
        
        padding-top: 0 !important; /* El justify-content se encarga de la altura */
        padding-bottom: 100px !important; /* Espacio para el logo de abajo */
        z-index: 10 !important;
    }

    /* --- ELEMENTOS CENTRADOS (Por defecto) --- */
    h1.hero-title, 
    .hero-title,
    .percent-line,
    .highlight-yellow {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Ajuste de tamaños */
    h1.hero-title { font-size: 1.9rem !important; line-height: 1.1 !important; margin-bottom: 10px !important; }
    .big-percent { font-size: 3rem !important; font-weight: 700 !important; }
    .highlight-yellow { font-size: 2rem !important; display: block !important; color: #ffc107 !important; }

    /* --- ELEMENTOS A LA IZQUIERDA (Aquí está el cambio) --- */
    /* Usamos 'align-self: flex-start' para romper el centrado del padre */
    
    .hero-tagline {
        font-size: 1rem !important;
        font-weight: 400 !important;
        margin-top: 20px !important;
        
        /* ALINEACIÓN IZQUIERDA */
        align-self: center !important; 
        text-align: center !important;
        padding-left: 0 !important; /* Mismo margen que el logo de abajo */
        width: 90% !important;
    }

    /* Quitamos el margen de la escalera para que quede centrada */
    .escalera-texto { 
        display: block !important; 
        margin-left: 0 !important; 
    }
    .hero-tagline span { display: block !important; }

    .hero-subtitle-yellow {
        font-size: 1.3rem !important;
        margin-top: 5px !important;
        color: #ffc107 !important;
        
        /* ALINEACIÓN IZQUIERDA */
        align-self: center !important;
        text-align: center !important;
        padding-left: 0 !important;
    }
    
    /* Aseguramos que los span se comporten como bloque para respetar la alineación */
    .hero-tagline span, .escalera-texto { display: block !important; }

    /* --- CAJA DE LICENCIAMIENTO (Abajo Izquierda) --- */
    .licenciamiento-box {
        position: absolute !important;
        bottom: 30px !important;       
        left: 25px !important; 
        
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        z-index: 20 !important;
        margin: 0 !important;
    }
    
    .lic-text { text-align: left !important; font-size: 1.2rem !important; line-height: 1 !important; margin-bottom: 5px !important; }
    .licenciamiento-box .lic-logos img { height: 50px !important; }
    
    /* Ajuste flechas slider para que no estorben */
    .slider-arrow { display: none !important; } 
    .menu-toggle { top: 25px !important; right: 25px !important; }
}

/* =======================================================
   2. AJUSTES BENEFICIOS MÓVIL (CENTRADO PERFECTO)
   ======================================================= */
@media screen and (max-width: 768px) {

    /* 1. EL CONTENEDOR PRINCIPAL */
    .beneficios-section {
        padding: 50px 10px !important; /* Un poco de aire a los lados */
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centra el título y la grilla */
    }

    /* 2. EL TÍTULO AMARILLO */
    .beneficios-section h2.title-yellow,
    .title-yellow {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 40px !important;
        font-size: 1.8rem !important;
        display: block !important;
    }

    /* 3. LA CUADRÍCULA (GRID) */
    .beneficios-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 Columnas iguales */
        gap: 40px 20px !important; /* Espacio vertical y horizontal */
        
        width: 100% !important;
        max-width: 380px !important; /* Evita que se estiren demasiado a los bordes */
        margin: 0 auto !important;   /* Mágico: centra el bloque grid */
        
        justify-items: center !important; /* CENTRA LOS ÍCONOS EN SU CELDA */
        justify-content: center !important;
    }

    /* 4. CADA ÍTEM (ÍCONO + TEXTO) */
    .beneficio-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centra el contenido verticalmente */
        text-align: center !important;  /* Centra el texto */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. EL ÍCONO */
    .beneficio-item img.beneficio-img {
        height: 55px !important;
        width: auto !important;
        margin: 0 auto 15px auto !important; /* Margen auto a los lados para asegurar centro */
        display: block !important;
    }

    /* 6. EL TEXTO DEL BENEFICIO */
    .beneficio-item p {
        text-align: center !important; /* REFUERZO DE CENTRADO */
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        color: white !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* =======================================================
   9. AJUSTES FOOTER MÓVIL (SOLO PANTALLAS PEQUEÑAS)
   ======================================================= */
@media screen and (max-width: 768px) {

    .site-footer {
        text-align: left !important;
        padding-bottom: 30px !important;
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .footer-col {
        width: 100% !important;
        padding: 0 10px !important;
        margin-bottom: 0 !important;
        align-items: flex-start !important;
    }
    
    /* --- ORDENAMIENTO VISUAL (SOLO MÓVIL) --- */
    .section-contacto  { order: 1; }
    .line-order-1      { order: 2; }
    .section-programas { order: 3; }
    .line-order-2      { order: 4; }
    .section-sedes     { order: 5; }
    .line-order-3      { order: 6; } 
    .licenciamiento-grid { order: 7; } /* Licenciamiento sube */
    .line-order-4      { order: 8; } 
    .section-final-mobile { order: 9; } /* Libro y Logo bajan */

    /* --- LÍNEAS ROJAS --- */
    .footer-line-red {
        width: 100%;
        height: 2px;
        background-color: #e63946;
        margin: 10px 0 !important;
        display: block !important;
    }

    /* --- LICENCIAMIENTO MÓVIL --- */
    .licenciamiento-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 5px !important;
        padding-bottom: 0 !important;
        gap: 5px !important;
    }

    .lic-col-titulo {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 5px !important;
    }
    .lic-col-titulo h4 {
        font-size: 1.3rem !important;
        margin: 0 !important;
    }

    .lic-logos-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
    }
    .lic-col-logo img { height: 40px !important; width: auto; }

    /* --- SECCIÓN FINAL MÓVIL (LADO A LADO) --- */
    .section-final-mobile {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 5px !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }
    
    .libro-reclamaciones {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 45%; 
    }
    .libro-reclamaciones img { width: 60px !important; margin-bottom: 3px; }
    
    .footer-logo-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
    }
    .footer-logo { max-width: 160px !important; }

    .mapa-wrapper { margin-top: 10px; gap: 10px; }
    .map-icon-large-blue { font-size: 2.5rem !important; }
}

/* =======================================================
   10. CORRECCIÓN DEFINITIVA DESKTOP (LOGOS PEQUEÑOS)
   ======================================================= */
@media screen and (min-width: 769px) {

    /* 1. Estructura principal */
    .footer-grid {
        display: grid !important;
        grid-template-columns: 22% 28% 25% 25% !important; 
        grid-template-areas: 
            "contacto programas sedes final"
            "licencia licencia licencia licencia" !important;
        
        row-gap: 0px !important; 
        column-gap: 20px !important;
        align-items: start !important;
        margin-bottom: 0 !important;
    }

    /* 2. Asignación de áreas */
    .section-contacto { grid-area: contacto; }
    .section-programas { grid-area: programas; }
    .section-sedes { grid-area: sedes; }
    
    /* Columna Derecha */
    .section-final-mobile { 
        grid-area: final; 
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        gap: 0px !important; 
        margin-top: 0 !important;
    }

    .libro-reclamaciones { margin-bottom: 5px !important; }
    .footer-logo-box { margin-top: 0 !important; }

    /* --- FILA INFERIOR (LICENCIAMIENTO) --- */
    .licenciamiento-grid {
        grid-area: licencia;
        display: flex !important;
        flex-direction: row !important; 
        justify-content: flex-start !important; 
        align-items: center !important;
        
        margin-top: 10px !important; 
        padding-top: 15px !important;
        border-top: 1px solid #eee !important;
        gap: 30px !important;
        width: 100% !important;
    }

    /* --- 3. AJUSTE DE TAMAÑOS (AQUÍ ESTÁ EL CAMBIO) --- */
    
    /* Logos Minedu y Sunedu más pequeños */
    .lic-col-logo img { 
        height: 40px !important; /* Antes 50px -> Ahora 35px */
        width: auto !important; 
    }

    /* Otros tamaños */
    .libro-reclamaciones, .footer-logo-box { width: 100% !important; }
    .footer-logo { max-width: 180px !important; }
    
    .lic-col-titulo { 
        text-align: left !important; 
        width: auto !important; 
        margin-bottom: 0 !important; 
    }
    .lic-col-titulo h4 {
        margin: 0 !important; 
        color: #103a89;
        font-size: 0.9rem;    
        font-weight: 1000;
    }  
    .lic-logos-wrapper { display: flex !important; gap: 20px !important; }

    /* 4. Limpieza */
    .mobile-only { display: none !important; }
    .footer-col { order: unset !important; }
}