/* Configuración de colores y componentes */
:root {
    --red-brand: #D32F2F;
    --red-hover: #B71C1C;
}

/* Extensiones de Tailwind */
.bg-red-institutional { background-color: var(--red-brand); }
.text-red-institutional { color: var(--red-brand); }
.border-red-institutional { border-color: var(--red-brand); }

/* Estilos de Botones */
.btn-primary {
    background-color: var(--red-brand);
    color: white;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.btn-primary:hover {
    background-color: var(--red-hover);
    transform: translateY(-2px);
}

/* Navbar Scrolled State */
nav.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

nav.scrolled .nav-link-item {
    color: #1f2937; /* Gray-800 */
}

nav.scrolled #navLogoText {
    color: #1f2937;
}

nav.scrolled #mobileMenuBtn {
    color: #1f2937;
}

/* Estilos de Tarjetas de Carrera y Noticias */
.career-card {
    background: white;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.career-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px -15px rgba(211, 47, 47, 0.2);
}

/* Animaciones de Entrada (Scroll Reveal) */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* Animación inicial del Hero Text */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

/* Animaciones para el Modal */
@keyframes modalShow {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-active {
    animation: modalShow 0.5s forwards;
}