/* Variables globales */
:root {
    --color-primary: #790015; /* Rojo institucional */
    --color-secondary: #FFED00; /* Amarillo */
    --color-dark: #08171C; /* Negro */
    --color-gray: #C0C0C0; /* Gris claro */
    --color-white: #FFFFFF;
}

/* Fuente principal */
body {
    font-family: 'TT Commons', sans-serif;
    background-color: #fff;
    color: var(--color-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary);
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
    color: #fff !important; /* Texto blanco en el menú */
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}



/* Header Sticky */
.sticky-header {
    transition: all 0.3s ease;
    padding: 10px 0;
}

.sticky-header.scrolled {
    background-color: var(--color-primary); /* Asegura que el header sea rojo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hero Section */
#hero {
    position: relative;
    background-image: url('../img/congreso.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1; /* Aseguramos que esté por debajo del contenido */
}

#hero .btn {
    position: relative;
    z-index: 2; /* Aseguramos que el botón esté por encima del overlay */
    margin-top: 20px;
}
.logo-hero {
    filter: drop-shadow(0 0 10px #fff);
}

/* === Footer Styles === */

.bg-dark-mode {
    background-color: #08171C;
}

.footer,
.footer a {
    font-family: 'TT Commons', sans-serif;
    color: #fff;
}

.footer h6 {
    font-family: 'Gilroy', sans-serif;
    font-weight: bold;
}

/* Iconos */
.bi {
    font-size: 2rem;
}

.card-title {
    font-family: 'Gilroy', sans-serif;
}

/* === Estilos exclusivos para header2.php === */

/* Fondo rojo institucional */
.bg-redues-header2 {
    background-color: #790015 !important; /* Rojo institucional */
}

/* Contenedor principal del menú */
.header2-main {
    font-family: 'Gilroy', sans-serif;
    z-index: 1000; /* Asegura que siempre esté sobre otros elementos */
}

/* Logo */
.header2-logo {
    max-width: 160px; /* Ancho fijo de 160px */
    transition: transform 0.3s ease;
}
.header2-logo:hover {
    transform: scale(1.1);
}

/* Título del logo */
.header2-title {
    font-family: 'Gilroy', sans-serif;
    font-size: 1rem;
    color: white !important;
    letter-spacing: 0.5px;
}

/* Enlaces del menú */
.header2-link {
    font-weight: 500;
    transition: color 0.3s ease;
}
.header2-link:hover {
    color: #FFED00 !important; /* Amarillo institucional */
}

/* Barra de navegación */
.navbar-dark .nav-link {
    color: white !important;
}
.navbar-dark .nav-link:hover {
    color: #FFED00 !important;
}

.hero-section-facultad {
    padding-top: 80px; /* Ajusta según la altura del menú */
}

.text-blanco {
    color: #FFFFFF;
}

.bg-negro {
    background-color: #08171C;
}


/* === Estilos para la sección de Opciones Académicas === */

/* Fondo azul oscuro */
.bg-dark-mode {
    background-color: #08171C; /* Negro profundo institucional */
}

/* Tarjetas */
.card {
    border: none;
    background-color: #790015; /* rojo primario */
    color: white;
    text-align: center;
    transition: transform 0.3s ease;
}

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

.card-body {
    padding: 20px;
}

.bi {
    font-size: 2rem;
}

/* === Estilos para la sección de Correos Electrónicos === */

.correos-electronicos-section {
    background-color: #F8F9FA; /* Fondo claro */
}

.cardcorreo {
    border: none;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cardcorreo-body {
    padding: 20px;
}

.bi {
    font-size: 2rem;
}

.text-primary {
    color: #790015; /* Rojo institucional */
}

.bg-gray {
    background-color: #d8d8df; /* Gris claro institucional */
}

/* === Estilos para la sección del Equipo === */

.team-section {
    background-color: #F8F9FA; /* Fondo claro */
}

.card3 {
    border: none;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card3:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card3 img {
    width: 100%;
    max-width: 200px;
    object-fit: cover;
}

.border-primary {
    border-color: #790015; /* Rojo institucional */
}

.transition-effect {
    transition: all 0.3s ease;
}

.text-warning {
    color: #FFED00 !important; /* Amarillo institucional */
}