/* Personalización de fuentes y colores base */
:root {
    --primary-blue: #003366; /* Azul oscuro institucional */
    --accent-green: #f8ac1c; /* Amarillo institucional actualizado */
    --accent-orange: #F7931E; /* Naranja complementario si aplica */
    --light-gray: #f8f9fa;
}
    
html, body {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    overflow-x: hidden; /* Prevenir scroll horizontal accidental en móviles */
    position: relative;
    width: 100%;
}
    
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* Utilidades personalizadas */
.bg-primary { background-color: var(--primary-blue); }
.text-primary { color: var(--primary-blue); }
.bg-accent { background-color: var(--accent-green); }
.text-accent { color: var(--accent-green); }
.border-accent { border-color: var(--accent-green); }
    
.border-primary { border-color: var(--primary-blue); }

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: #002244;
}

.btn-accent {
    background-color: var(--accent-green);
    color: white;
    transition: all 0.3s ease;
}
.btn-accent:hover {
    background-color: #ffffff;
    color: var(--primary-blue);
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

.btn-outline-hero {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}
/* Al hacer hover, se pone amarillo */
.btn-outline-hero:hover {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
    transform: translateY(-2px);
}

/* Efectos de las tarjetas */
.program-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Forma curva suave para separadores */
.curve-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 20; 
}
.curve-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}
.curve-bottom .shape-fill {
    fill: #FFFFFF;
}
    
/* Estabilización del menú */
header {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* --- ANIMACIÓN MENÚ ESCRITORIO --- */
.nav-item {
    position: relative;
    display: inline-block;
}
.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent-green);
    transition: width 0.3s ease-in-out;
}
.nav-item:hover::after {
    width: 100%;
}

/* --- ESTILOS DEL SLIDER --- */
.slide {
    transition: opacity 0.8s ease-in-out;
}
.slide.active {
    opacity: 1;
    z-index: 10;
}
.slide:not(.active) {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* --- NUEVAS ANIMACIONES DE ENTRADA (Scroll Reveal) --- */
    
/* Estado inicial invisible */
.reveal-left, .reveal-up, .reveal-right {
    opacity: 0;
    transition: all 1s ease-out; /* Duración suave de 1 segundo */
}

/* Posiciones iniciales - Reducidas para evitar desbordamiento en móviles */
.reveal-left { transform: translateX(-30px); }
.reveal-up   { transform: translateY(30px); }
.reveal-right { transform: translateX(30px); }

/* Estado final activo: CORREGIDO para que funcione en elementos individuales y contenedores */
.active .reveal-left, .reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}
.active .reveal-up, .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}
.active .reveal-right, .reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* --- NUEVA ANIMACIÓN REVEAL ZOOM (Desde atrás) --- */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.8); /* Empieza pequeño (atrás) */
    transition: all 1s ease-out;
}
.active .reveal-zoom, .reveal-zoom.active {
    opacity: 1;
    transform: scale(1); /* Termina en tamaño normal */
}

/* --- NUEVA ANIMACIÓN BOTÓN CONSULTAR --- */
/* Efecto de 'atrás hacia adelante' simulado con escala */
@keyframes pulse-zoom {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); /* Sombra más fuerte al acercarse */
    }
}
.animate-pulse-zoom {
    animation: pulse-zoom 2s infinite ease-in-out;
}

/* --- EFECTO MÁQUINA DE ESCRIBIR (CURSOR PARPADEANTE) --- */
@keyframes blink-cursor {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-blue); }
}
.typewriter-cursor {
    border-right: 4px solid var(--primary-blue);
    white-space: nowrap; /* Evita que el texto salte de línea mientras se escribe */
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}
.cursor-blink {
    animation: blink-cursor .75s step-end infinite;
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

/* --- NUEVA ANIMACIÓN SLIDER: ENTRADA DESDE LA IZQUIERDA --- */
@keyframes slide-in-left-hero {
    0% { 
        opacity: 0; 
        transform: translateX(-100px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}
    
/* La animación solo se ejecuta cuando el slide tiene la clase 'active' */
.slide.active .hero-text-animate {
    animation: slide-in-left-hero 1s ease-out forwards;
}


/* Modal: robust stacking, visibility and animation (no heavy blur) */
.site-modal { position: fixed; inset: 0; display: none; z-index: 100000; }
.site-modal[aria-hidden="false"] { display: block; }

/* Backdrop: dim the page but avoid strong blur that can hide UI; pointer-events enabled to capture clicks */
.site-modal [data-modal-backdrop] { position: absolute; inset: 0; background: rgba(0,0,0,0.40); z-index: 99990; pointer-events: auto; }

/* Outer wrapper must sit above transformed/stacked content */
.modal-outer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 100000; }

/* Panel: isolation avoids backdrop or parent stacking from affecting it */
.site-modal .modal-panel {
    position: relative;
    z-index: 100001;
    isolation: isolate;
    background-color: #ffffff;
    background-clip: padding-box;
    box-shadow: 0 30px 60px rgba(2,6,23,0.45);
    border: 1px solid rgba(15,23,42,0.06);
    opacity: 0;
    transform: translateY(6px) scale(0.995);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2,.9,.2,1);
    max-height: 85vh;
}

/* Show animation when modal is open */
.site-modal[aria-hidden="false"] .modal-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Smooth opacity transition for backdrop/panel children */
.site-modal .transition-opacity { transition: opacity .22s ease; }

/* Prevent page scroll when modal is open */
body.modal-open { overflow: hidden; }

/* When closed, block pointer events entirely so nothing above page is interactive */
.site-modal[aria-hidden="true"] { pointer-events: none; }