/* Paleta de colores basada en el diseño */
.navbar-custom {
    background-color: #8c4a14;
}
.navbar-custom .nav-link {
    color: #ffffff !important; /* Forzar el color blanco */
    font-weight: bold;
}
.navbar-custom .nav-link:hover {
    color: #f0f0f0 !important;
}

/* Sección del Hero / Contador */
.hero-section {
    background-color: #6c757d; /* Color gris de fondo por si no carga la imagen */
    /* background: url('../img/tu-imagen.jpg') no-repeat center center; (Descomenta cuando tengas la imagen) */
    background-size: cover;
    padding: 80px 0;
    color: white;
    text-align: center;
    position: relative;
    min-height: 300px;
}
.hero-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.countdown-box {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 15px;
    display: inline-block;
    margin: 10px;
    min-width: 90px;
}
.countdown-number {
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
}
.countdown-label {
    font-size: 0.9rem;
}
.form-section {
    max-width: 600px;
    margin: 0 auto;
}

/* Transición suave para la Navbar */
.transition-all {
    transition: all 0.5s ease-in-out;
}

.navbar-transparent {
    background-color: transparent !important;
    padding: 20px 0;
}

.navbar-scrolled {
    background-color: #8c4a14 !important; /* El color café de tu diseño */
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* --- Fondo café al hacer hover sobre la Navbar --- */
#mainNavbar:hover {
    background-color: #8c4a14 !important;
}

/* Contenedor principal con recorte curvo abajo */
.hero-curved {
    position: relative;
    width: 100%;
    height: 70vh; /* Altura reducida (antes 100vh) */
    min-height: 500px;
    overflow: hidden;
    border-radius: 0 0 50% 50% / 0 0 10% 10%; /* Crea la curva en la parte inferior */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Sombrita para que resalte */
}

/* El carrusel se adapta al tamaño del contenedor curvo */
.hero-curved .carousel, 
.hero-curved .carousel-inner, 
.hero-curved .carousel-item {
    height: 100%;
}

.carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    animation: zoomEffect 10s infinite alternate;
}

@keyframes zoomEffect {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

.hero-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ocupa todo el espacio de la imagen */
    z-index: 10;
    
    /* Magia de Flexbox para centrar dinámicamente */
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    
    /* Este padding crea un "muro" invisible arriba del tamaño de tu navbar 
       para que el texto NUNCA la toque, ajusta los 100px si tu navbar es más ancha */
    padding-top: 100px; 
    text-align: center;
}

.hero-overlay-dark {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Oscurece las imágenes para leer mejor el contador */
    z-index: 5;
}

/* Posicionamiento relativo para la línea animada */
.navbar-nav .nav-link {
    position: relative;
    padding-bottom: 5px;
}

/* Estado inicial de la línea oculta a la derecha */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0; /* Anclado a la derecha */
    background-color: #ffffff; /* Color de la línea */
    transition: width 0.4s ease-in-out;
}

/* Efecto Hover: La línea crece hacia la izquierda (porque está anclada a la derecha) */
.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Estado Activo: Línea fija y texto resaltado */
.navbar-nav .nav-link.active::after {
    width: 100%;
}

.navbar-nav .nav-link.active {
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Ajustes adicionales para que los submenús destaquen cuando están activos */
.dropdown-item.active, .dropdown-item:active {
    background-color: #8c4a14; /* Tu color principal */
    color: white;
}

/* --- DISEÑO DE LOS MENÚS DESPLEGABLES --- */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra elegante */
    padding: 10px 0;
    margin-top: 15px; /* Lo separa un poco de la barra */
}

.dropdown-item {
    color: #4a4a4a; /* Gris oscuro para el texto normal */
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por las opciones */
.dropdown-item:hover, .dropdown-item:focus {
    background-color: transparent; /* Quitamos el fondo azul por defecto de Bootstrap */
    color: #b5651d; /* Tu color principal */
    padding-left: 25px; /* Empuja el texto un poquito a la derecha */
}

/* Opcional: Una línea divisoria más suave si usas <li><hr class="dropdown-divider"></li> */
.dropdown-divider {
    border-top: 1px solid #f0f0f0;
}


/* --- ESTILOS DEL FOOTER --- */
.privacy-link {
    color: #6c757d; /* Gris por defecto */
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.privacy-link:hover {
    color: #b5651d; /* Cambia a tu color café al hacer hover */
}

/* Asegurar que las imágenes del footer no se vean gigantes en móviles */
footer img {
    max-width: 100%;
    object-fit: contain;
}


/* --- DESPLIEGE DE MENÚ AL PASAR EL MOUSE --- */
@media (min-width: 992px) {
    /* Muestra el menú al pasar el cursor por el elemento padre */
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Alineación perfecta con la barra */
        opacity: 1;
        visibility: visible;
        animation: fadeInDown 0.3s ease; /* Animación de entrada suave */
    }

    /* Evita que el menú desaparezca si hay un pequeño espacio entre la barra y el dropdown */
    .dropdown-menu {
        margin-top: 0;
    }
}

/* Animación opcional para que el despliegue no sea brusco */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ANIMACIÓN CONTINUA DE PATROCINADORES (MARQUEE) --- */

.sponsor-marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
}

/* La pista que contiene todas las imágenes */
.sponsor-marquee-track {
    display: inline-flex;
    gap: 5rem; /* Espacio de separación entre cada logo */
    align-items: center;
    /* La animación dura 20 segundos, es lineal (misma velocidad siempre) y no se detiene */
    animation: scrollMarquee 20s linear infinite;
}

/* Opcional: Pausar la animación si el usuario pone el ratón encima para ver bien la marca */
.sponsor-marquee-container:hover .sponsor-marquee-track {
    animation-play-state: paused;
}

.sponsor-item {
    display: inline-block;
    flex-shrink: 0;
}

/* Efecto de movimiento de derecha a izquierda */
@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza exactamente a la mitad (-50%) porque duplicamos las imágenes en PHP */
        transform: translateX(-50%);
    }
}

/* --- HERO PARA PÁGINAS INTERNAS (CORTO Y CON ONDAS) --- */
.hero-sub {
    position: relative;
    width: 100%;
    height: 40vh; /* Altura mucho más recortada */
    min-height: 350px;
    overflow: hidden;
    /* Recorte en forma de ondas usando clip-path */
    clip-path: url(#wave-clip); /* Referencia al SVG que pondremos en el PHP */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 95%, 70% 85%, 50% 98%, 30% 85%, 15% 95%, 0 85%);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.hero-sub .carousel, 
.hero-sub .carousel-inner, 
.hero-sub .carousel-item {
    height: 100%;
}

/* Ajuste del contenido para que no quede muy pegado arriba por la navbar */
.hero-sub .hero-content-overlay {
    padding-top: 100px; 
    top: 0; /* Baja un poco el texto para centrarlo en el área recortada */
}

/* --- SECCIÓN MISIÓN Y VISIÓN CON FONDO DE DIAPOSITIVA --- */

.slide-background-section {
    /* 1. Pon la ruta correcta hacia tu imagen vacía (sin texto) */
    background-image: url('/hangeles/smorlcongreso/img/media/image8.png');
    
    /* 2. Cover asegura que cubra todo sin deformarse (manteniendo su proporción) */
    background-size: cover; 
    background-position: center top;
    
    /* 3. Fixed crea el efecto donde el fondo se queda quieto al dar scroll */
    background-attachment: fixed; 
    
    /* Fondo de respaldo por si tarda en cargar la imagen */
    background-color: #fcf9f2; 
    position: relative;
    min-height: 80vh;
}

/* Caja tipo "papel" superpuesta */
.slide-background-section .content-paper {
    /* Fondo blanco al 85% de opacidad para que se alcance a ver el patrón de la diapo de fondo */
    background-color: rgba(255, 255, 255, 0.85); 
    
    /* Opcional: difumina lo que hay detrás de la caja para dar un toque elegante */
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    
    /* Borde sutil combinando con los colores de tu diseño */
    border: 1px solid rgba(181, 101, 29, 0.3); 
}

/* ============================================== */
/* ANIMACIONES HOVER PARA EL COMITÉ ORGANIZADOR   */
/* ============================================== */

/* 1. Efecto de elevación para todas las tarjetas y recuadros */
.content-paper .card,
.content-paper .border.rounded {
    /* Prepara la animación para que sea suave y no de golpe */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Al pasar el mouse encima de las tarjetas... */
.content-paper .card:hover,
.content-paper .border.rounded:hover {
    transform: translateY(-8px); /* Eleva la caja 8 pixeles hacia arriba */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important; /* Hace la sombra más grande y difusa */
    z-index: 10; /* Asegura que la tarjeta resaltada quede por encima de las demás */
}


/* 2. Efecto de resalte para los elementos de las listas y coordinadores (Nombres) */
.content-paper ul li,
.content-paper .card-body p.mb-3 {
    /* Prepara la animación de los textos */
    transition: all 0.2s ease-in-out;
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 3px solid transparent; 
}

/* Al pasar el mouse sobre un nombre específico... */
.content-paper ul li:hover,
.content-paper .card-body p.mb-3:hover {
    background-color: rgba(106, 27, 154, 0.05); 
    border-left: 3px solid #6a1b9a; 
    color: #6a1b9a !important; 
    transform: translateX(6px); 
}

/* Ajuste especial para que los nombres de la mesa directiva también tengan el efecto de texto (ya que no están en lista) */
.content-paper .p-4.border.rounded h5,
.content-paper .p-4.border.rounded p {
    transition: transform 0.3s ease;
}

.content-paper .p-4.border.rounded:hover p {
    transform: scale(1.03); /* El nombre de la directora/secretaria/tesorero crece un 3% sutilmente */
    color: #000;
}


/* ============================================== */
/* ANIMACIONES PARA TARJETAS DE CUOTAS (MÓVIL)    */
/* ============================================== */

/* 1. Preparamos la tarjeta con una transición suave y un borde invisible */
.d-lg-none .card {
    transition: all 0.3s ease-in-out;
    border-left: 4px solid transparent !important; /* Borde oculto para que no brinque */
}

/* 2. El efecto al tocar la tarjeta (celular) o pasar el cursor (PC) */
.d-lg-none .card:hover,
.d-lg-none .card:active {
    border-left: 4px solid #6a1b9a !important; /* Aparece la línea morada gruesa */
    transform: translateX(8px); /* La tarjeta da un saltito elegante hacia la derecha */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; /* Sombra más pronunciada */
}

/* 3. Un detalle extra: que el encabezado también reaccione al toque */
.d-lg-none .card:hover .card-header,
.d-lg-none .card:active .card-header {
    background-color: rgba(106, 27, 154, 0.08) !important; /* Fondo moradito ultra tenue */
    color: #6a1b9a !important; /* El texto azul cambia a morado SMORLCCC */
    transition: all 0.3s ease-in-out;
}


/* ============================================== */
/* RESALTE INDIVIDUAL POR RENGLÓN (MÓVIL)         */
/* ============================================== */

/* 1. Preparamos cada renglón (.d-flex) para la animación */
.d-lg-none .card-body .d-flex {
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent; /* Borde invisible para que no brinque */
    padding: 4px 8px; /* Un poco de aire interior */
    margin: 0 -8px; /* Margen negativo para compensar el padding y no deformar la tarjeta */
    border-radius: 4px;
}

/* 2. El efecto al tocar o pasar el mouse sobre un renglón específico */
.d-lg-none .card-body .d-flex:hover,
.d-lg-none .card-body .d-flex:active {
    background-color: rgba(106, 27, 154, 0.05); /* Fondo moradito muy sutil */
    border-left: 3px solid #b5651d; /* Le ponemos una franja naranja elegante a la izquierda */
    transform: translateX(4px); /* El renglón da un pequeño paso a la derecha */
}

/* 3. Forzamos a que todo el texto de ese renglón se pinte del color principal para destacar */
.d-lg-none .card-body .d-flex:hover span,
.d-lg-none .card-body .d-flex:active span {
    color: #6a1b9a !important; 
}


/* ============================================== */
/* ANIMACIONES PARA SECCIÓN DE HOSPEDAJE          */
/* ============================================== */

/* 1. Preparamos las columnas de los hoteles para que se comporten como tarjetas */
.content-paper .row.text-center > div[class*="col-12"] {
    transition: all 0.3s ease-in-out;
    padding: 15px; /* Les damos un poquito de aire interior */
    border-radius: 12px;
    border-bottom: 4px solid transparent; /* Franja invisible lista para aparecer */
}

/* 2. Efecto de elevación al pasar el mouse (o tocar en celular) */
.content-paper .row.text-center > div[class*="col-12"]:hover {
    transform: translateY(-8px); /* Flota hacia arriba */
    background-color: rgba(255, 255, 255, 0.6); /* Se ilumina con un fondo blanco sutil */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sombra elegante */
    border-bottom: 4px solid #0076a8; /* Aparece la franja azul de tu paleta */
}

/* 3. Efecto de zoom suave en las fotografías de los hoteles */
.content-paper .row.text-center > div[class*="col-12"] img {
    transition: transform 0.4s ease;
}

.content-paper .row.text-center > div[class*="col-12"]:hover img {
    transform: scale(1.03); /* La foto crece un 3% para dar sensación de profundidad */
}

/* 4. El título cambia a color morado para indicar que tiene un link activo */
.content-paper .row.text-center > div[class*="col-12"] h5 a {
    transition: color 0.3s ease;
}

.content-paper .row.text-center > div[class*="col-12"]:hover h5 a {
    color: #6a1b9a !important; /* Morado SMORLCCC */
}

/* Estilo base del mensaje (Oculto y en el centro) */
#toastNotificacion {
    position: fixed;
    /* Centrado inicial */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5); /* Empieza a la mitad de su tamaño */
    opacity: 0; 
    
    color: white;
    padding: 15px 30px;
    font-weight: bold;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    pointer-events: none; /* Evita que estorbe al hacer clic */
    
    /* La transición fluida para el movimiento y la opacidad */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}

/* Clase que activa la animación hacia la esquina inferior derecha */
#toastNotificacion.mostrar {
    opacity: 1;
    /* Sobreescribimos el top/left para mandarlo a la esquina */
    top: auto;
    left: auto;
    bottom: 30px;
    right: 30px;
    transform: translate(0, 0) scale(1); /* Regresa a su tamaño normal */
}

/* Clase para que el mensaje salga cayendo hacia abajo */
#toastNotificacion.ocultar {
    top: auto !important;
    left: auto !important;
    bottom: -100px !important; /* Lo empuja por debajo de la pantalla */
    right: 30px !important;
    transform: translate(0, 0) scale(1) !important;
    opacity: 0 !important;
}

/* Clases de colores dinámicos */
.toast-exito { background-color: #28a745; } /* Verde */
.toast-error { background-color: #dc3545; } /* Rojo */



/* ============================================== */
/* COORDINACIÓN INTERESTATAL                      */
/* ============================================== */

.coordinacion-card {
    background: rgba(255,255,255,0.92);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.35s ease;
    border-top: 5px solid #6a1b9a;
}

.coordinacion-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 35px rgba(0,0,0,0.15) !important;
}

.coordinacion-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    background: white;
    border-radius: 12px;
    padding: 10px;
}

.directiva-logo {
    width: 350px;
    /* height: 140px; */
    object-fit: contain;
    background: white;
    border-radius: 12px;
    padding: 10px;
}

.coordinacion-card h4 {
    font-size: 1.5rem;
    line-height: 1.3;
}

.coordinacion-card p {
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 991.98px) {

    .coordinacion-logo {
        width: 110px;
        height: 110px;
    }

    .coordinacion-card h4 {
        font-size: 1.2rem;
    }

    /* --- 2. BAJAR EL TEXTO PRINCIPAL EN MÓVIL --- */
    .hero-content-overlay {
        padding-top: 160px !important; /* Aumenta o disminuye este valor si lo quieres más arriba o más abajo */
    }

    .directiva-logo {
        width: 110px;
        height: 110px;
    }

}


/* ============================================== */
/* CUOTAS DE INSCRIPCIÓN                          */
/* ============================================== */

.cuotas-btn-green {
    background: #3ccadd;
    color: white;
    border: none;
}

.cuotas-btn-green:hover {
    background: #4fc59b;
    color: white;
}

.cuotas-btn-blue {
    background: #005fbe;
    color: white;
    border: none;
}

.cuotas-btn-blue:hover {
    background: #4fc59b;
    color: white;
}

.cuotas-tabs .nav-link {
    border-radius: 0;
    padding: 14px 28px;
    font-weight: 700;
    color: white;
    background: #005fbe;
    border: none;
}

.cuotas-tabs .nav-link.active {
    background: #dc3545;
    color: white;
}

.cuotas-alert {
    background: #d8edf7;
    color: #255b7a;
    border-left: 5px solid #0076a8;
    font-size: 1.2rem; /* Ajusta este valor para hacer la letra más grande */
    line-height: 1.6;  /* Da un poco más de separación entre los renglones */
}

.cuotas-card {
    overflow: hidden;
    border-radius: 0;
    background: #efefef;
    transition: all .3s ease;
}

.cuotas-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.15) !important;
}

.cuotas-header {
    color: white;
    padding: 28px 20px;
}

.cuotas-header h3 {
    font-weight: 700;
    margin-bottom: 6px;
}

.cuotas-blue .cuotas-header {
    background: #005fbe;
}

.cuotas-green .cuotas-header {
    background: #65d2aa;
}

.cuotas-red .cuotas-header {
    background: #dc3545;
}

.cuotas-yellow .cuotas-header {
    background: #b69d30;
}

.cuotas-orange .cuotas-header {
    background: #d36821;
}

.cuotas-morado .cuotas-header {
    background: #9314a3ab;
}

.cuotas-price {
    font-size: 4rem;
    font-weight: 800;
    color: #5f5f5f;
    line-height: 1;
    margin-top: 20px;
}

.cuotas-price .currency {
    font-size: 2rem;
    vertical-align: top;
}

.cuotas-price .decimals {
    font-size: 2rem;
    vertical-align: top;
}

.cuotas-mxn {
    color: #65d2aa;
    font-weight: 700;
    margin-top: 10px;
}

.cuotas-list li {
    padding: 14px 0;
    border-bottom: 1px solid #d8d8d8;
    color: #666;
}

.cuotas-register-btn {
    background: #dc3545;
    color: white;
    padding: 10px 34px;
    border-radius: 4px;
    font-weight: 700;
    margin-top: 20px;
}

.cuotas-register-btn:hover {
    background: #bb2d3b;
    color: white;
}

@media (max-width: 991px) {

    .cuotas-tabs .nav-link {
        width: 100%;
        margin-bottom: 8px;
        border-radius: 8px;
    }

    .cuotas-price {
        font-size: 3rem;
    }

}

/* ============================================== */
/* AJUSTE PARA PANTALLAS CORTAS (EJ. 767x632px)   */
/* ============================================== */

@media (max-width: 991.98px) {
    /* Le damos un poco más de espacio vital al contenedor en móviles */
    .hero-curved {
        min-height: 600px; 
    }
}

/* Regla especial: Si es móvil Y ADEMÁS la pantalla mide menos de 700px de alto */
@media (max-width: 991.98px) and (max-height: 700px) {
    .hero-content-overlay {
        /* Reducimos el muro invisible porque en pantallas bajas estorba */
        padding-top: 100px !important; 
    }
    
    .hero-content-overlay .display-3 {
        /* Achicamos un poco el título para que no salte a tantas líneas */
        font-size: 1.8rem !important; 
    }
    
    /* Hacemos el contador más compacto */
    .countdown-box {
        padding: 5px 10px !important;
        margin: 5px !important;
    }
    .countdown-number {
        font-size: 1.8rem !important;
    }
}

/* Ajustes para Macs y laptops (Pantallas anchas pero con poca altura) */
@media (min-width: 992px) and (max-height: 900px) {
    .hero-curved {
        min-height: 600px; /* Asegura un buen espacio vertical vital */
    }
    
    .hero-content-overlay {
        padding-top: 150px; /* Supera la altura real de la navbar (132px) */
    }

    .hero-content-overlay .display-3 {
        font-size: 2.5rem !important; /* Reduce sutilmente el título principal para que no salte a 3 o 4 líneas */
    }
    
    .hero-content-overlay .fs-3 {
        font-size: 1.5rem !important; /* Ajusta el subtítulo en proporción */
    }
}

@media (max-width: 991.98px){

    #mainNavbar .navbar-brand img{
        height:55px !important;
    }

    #navbarNav{
        background:#8c4a14;
        margin-top:10px;
        padding:15px;
        border-radius:12px;
        max-height:70vh;
        overflow-y:auto;
    }

    /* --- NUEVO: Anclaje del menú hamburguesa --- */
    #mainNavbar .container {
        position: relative; /* Necesario para que el absolute del botón funcione dentro de este contenedor */
    }

    .navbar-toggler {
        position: absolute;
        top: 20px;   /* Ajusta este valor si quieres subir o bajar el botón */
        right: 15px; /* Ajusta este valor si quieres acercarlo o alejarlo de la orilla derecha */
    }

}

/* ------------------------------------------------------------- */
/* 1. Pantallas Medianas (992px - 1199px) Laptops pequeñas / iPads horizontales */
/* Aquí es donde ocurre el desborde porque hay muchos elementos */
/* ------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-nav .nav-link {
        font-size: 0.70rem !important; /* Forzamos texto más pequeño para que quepa */
        padding-left: 4px !important;  /* Reducimos el aire entre los enlaces */
        padding-right: 4px !important;
    }
    
    .navbar-brand img {
        height: 60px !important; /* Achicamos un poco el logo para ganar espacio vital al centro */
    }

    .navbar-nav {
        gap: 0 !important; /* Anulamos espacios extra que rompan el centrado */
        width: 100%;
        justify-content: center; /* Aseguramos que se agrupe al centro */
    }
}

/* ------------------------------------------------------------- */
/* 2. Pantallas Grandes (1200px - 1399px) Laptops estándar */
/* Aquí ya hay espacio suficiente, podemos soltar un poco el diseño */
/* ------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-nav .nav-link {
        font-size: 0.85rem;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .navbar-brand img {
        height: 75px !important;
    }
}


.formato-card{
    background:#f5f5f5;
    border:1px solid #cfcfcf;
    border-radius:12px;
    padding:20px;
    height:100%;
    transition:.3s ease;
}

.formato-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,.12);
}

.formato-img{
    width:100%;
    height:180px;
    object-fit:contain;
    margin-bottom:20px;
}

.formato-card h4{
    color:#1298e6;
    font-weight:600;
    min-height:70px;
}

.formato-card h4 small{
    font-size:.8em;
}

.formato-btn{
    background:#dc3545;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 24px;
    font-weight:600;
}

.formato-btn:hover{
    background:#bb2d3b;
    color:#fff;
}

/* BOTON CONVOCATORIA */
.convocatoria-btn{
    display:block;
    width:230px;
    margin:0 auto 22px auto;
    background:#e5e8eb;
    color:#777;
    font-weight:600;
    border-radius:50px;
    padding:12px 20px;
    text-decoration:none;
    transition:.3s ease;
}

.convocatoria-btn:hover{
    background:#d8dde2;
    color:#005fbe;
    transform:translateY(-2px);
}

.contacto-academico{
    display: flex;
    align-items: center;
    gap: 25px;

    background: #fff;
    border-radius: 18px;
    padding: 25px 35px;

    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    border: 1px solid #ececec;
}

.contacto-icono{
    font-size: 4rem;
    flex-shrink: 0;
}

.contacto-info h4{
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.contacto-info .cargo{
    margin: 5px 0 12px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #666;
}

.contacto-info p{
    margin-bottom: 6px;
    font-size: 1.1rem;
    color: #555;
}

/* Quitar apariencia de enlace */
.contacto-info a{
    color: inherit;
    text-decoration: none;
}

.contacto-info a:hover{
    color: #dc3545;
}

/* Responsive */
@media (max-width: 768px){

    .contacto-academico{
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .contacto-icono{
        font-size: 3rem;
    }
}

.pdf-container{
    width: 840px;
    max-width: 100%;
    height: 450px;
    background-color: #525659;
}