/* ======= VARIABLES CSS - COLORES INSTITUCIONALES ======= */
:root {
    /* Colores Institucionales Originales */
    --primary-color: #2c5aa0;      /* Azul institucional principal */
    --secondary-color: #4a90d9;    /* Azul secundario más claro */
    --accent-color: #f39c12;       /* Naranja/dorado para acentos */
    --success-color: #27ae60;      /* Verde para éxito */
    --warning-color: #f1c40f;      /* Amarillo para advertencias */
    --danger-color: #e74c3c;       /* Rojo para errores */
    
    /* Colores de Texto */
    --text-primary: #2c3e50;       /* Texto principal */
    --text-secondary: #7f8c8d;     /* Texto secundario */
    --text-light: #bdc3c7;        /* Texto claro */
    --text-white: #ffffff;         /* Texto blanco */
    
    /* Colores de Fondo */
    --bg-primary: #ffffff;         /* Fondo principal */
    --bg-secondary: #f8f9fa;       /* Fondo secundario */
    --bg-dark: #34495e;           /* Fondo oscuro */
    --bg-gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --bg-gradient-accent: linear-gradient(135deg, var(--accent-color), #e67e22);
    
    /* Bordes y Sombras */
    --border-color: #e9ecef;
    --border-light: #f1f3f4;
    --shadow-sm: 0 2px 4px rgba(44, 90, 160, 0.1);
    --shadow-md: 0 4px 8px rgba(44, 90, 160, 0.15);
    --shadow-lg: 0 8px 16px rgba(44, 90, 160, 0.2);
    --shadow-xl: 0 12px 24px rgba(44, 90, 160, 0.25);
    
    /* Transiciones y Animaciones */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    --border-radius: 12px;
    --border-radius-sm: 6px;
    --border-radius-lg: 16px;
}

/* ======= TEMA DINÁMICO ALTERNATIVO (COMENTADO) ======= */
/*
:root.dynamic-theme {
    /* Colores Dinámicos Modernos basados en el logo 
    --primary-color: #1a365d;      /* Azul marino profundo 
    --secondary-color: #2d89ef;    /* Azul vibrante 
    --accent-color: #ff6b35;       /* Naranja energético 
    --success-color: #38b2ac;      /* Verde azulado 
    --warning-color: #ed8936;      /* Naranja cálido 
    --danger-color: #e53e3e;       /* Rojo intenso 
    
    /* Gradientes Dinámicos 
    --bg-gradient-primary: linear-gradient(135deg, #1a365d 0%, #2d89ef 50%, #4299e1 100%);
    --bg-gradient-accent: linear-gradient(135deg, #ff6b35 0%, #f56565 50%, #ed8936 100%);
    --bg-gradient-hero: linear-gradient(135deg, rgba(26, 54, 93, 0.9) 0%, rgba(45, 137, 239, 0.8) 50%, rgba(255, 107, 53, 0.7) 100%);
    
    /* Sombras Coloridas 
    --shadow-primary: 0 8px 25px rgba(45, 137, 239, 0.3);
    --shadow-accent: 0 8px 25px rgba(255, 107, 53, 0.3);
    --shadow-success: 0 8px 25px rgba(56, 178, 172, 0.3);
}
*/

/* ======= LOADING OVERLAY ======= */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-overlay.fade-out {
    opacity: 0;
}

.loading-spinner {
    text-align: center;
    color: white;
}

.spinner-circle {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ======= SCROLL PROGRESS BAR ======= */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1040;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
    transition: width 0.1s ease-out;
    width: 0%;
}

/* ======= SOCIAL BAR MEJORADA ======= */
.social-bar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1050;
    transition: var(--transition);
}

.social-toggle {
    display: none;
    background: var(--primary-color);
    border: none;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    margin-bottom: 10px;
    transition: var(--transition);
}

.social-toggle:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

.social-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0.5rem;
}

.social-link {
    position: relative;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.social-link:hover {
    transform: translateX(5px) scale(1.1);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: white;
}

.social-link:hover::before {
    left: 100%;
}

.social-link.facebook:hover { background: #3b5998; }
.social-link.twitter:hover { background: #1da1f2; }
.social-link.instagram:hover { background: #e4405f; }
.social-link.linkedin:hover { background: #0077b5; }
.social-link.youtube:hover { background: #ff0000; }

.social-tooltip {
    position: absolute;
    left: 55px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    font-size: 0.875rem;
}

.social-link:hover .social-tooltip {
    opacity: 1;
    visibility: visible;
    left: 60px;
}

/* ======= SCROLL INDICATOR ======= */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.scroll-arrow {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* ======= HERO CAROUSEL MEJORADO ======= */
.hero-carousel-section {
    position: relative;
    overflow: hidden;
}

.carousel-image-container {
    position: relative;
    overflow: hidden;
}

.carousel-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: transform 0.3s ease;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(30, 58, 138, 0.7), rgba(59, 130, 246, 0.5));
    border-radius: var(--border-radius);
}

.carousel-caption {
    position: absolute;
    bottom: 20%;
    left: 15%;
    right: 15%;
    text-align: center;
    color: white;
}

.caption-content {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.caption-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.caption-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.caption-actions .btn {
    margin: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px;
    transition: var(--transition);
}

.caption-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ======= CAROUSEL CONTROLS MEJORADOS ======= */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.7;
    transition: var(--transition);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--primary-color);
    border-radius: 50%;
    padding: 20px;
    background-size: 60%;
}

/* ======= CAROUSEL INDICATORS MEJORADOS ======= */
.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: transparent;
    margin: 0 5px;
    transition: var(--transition);
}

.carousel-indicators button.active {
    background: white;
    transform: scale(1.2);
}

/* ======= SECCIÓN DE PRESENTACIÓN MEJORADA ======= */
.intro-img-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.intro-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    filter: brightness(1.1) saturate(1.1);
}

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

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(30, 58, 138, 0.1), rgba(59, 130, 246, 0.1));
    border-radius: var(--border-radius);
    opacity: 0;
    transition: var(--transition);
}

.intro-img-container:hover .img-overlay {
    opacity: 1;
}

.intro-text {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.intro-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
}

.section-heading-upper {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--accent-color);
}

.section-heading-lower {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0.5rem;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.large-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ======= ESTADÍSTICAS ANIMADAS ======= */
.feature-stats {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ======= CTA SECTION MEJORADA CON COLORES VIVOS ======= */
.page-section.cta {
    background: linear-gradient(135deg, 
        #e91e63 0%,           /* Rosa vibrante */
        #9c27b0 25%,          /* Púrpura */
        #3f51b5 50%,          /* Azul índigo */
        #2196f3 75%,          /* Azul brillante */
        #00bcd4 100%          /* Cyan */
    ) !important;
    position: relative;
    overflow: hidden;
}

.page-section.cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 193, 7, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(76, 175, 80, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 87, 34, 0.2) 0%, transparent 70%);
    animation: colorWave 15s ease-in-out infinite;
}

@keyframes colorWave {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    33% {
        transform: translateY(-20px) rotate(120deg) scale(1.1);
        opacity: 0.9;
    }
    66% {
        transform: translateY(20px) rotate(240deg) scale(0.9);
        opacity: 0.8;
    }
}

.cta-inner {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 50px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.cta-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.4) 60deg,
        rgba(255, 20, 147, 0.4) 120deg,
        rgba(0, 255, 255, 0.4) 180deg,
        rgba(50, 205, 50, 0.4) 240deg,
        rgba(255, 69, 0, 0.4) 300deg,
        transparent 360deg
    );
    animation: prismRotate 25s linear infinite;
    pointer-events: none;
}

@keyframes prismRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cta-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* Títulos con gradiente vibrante */
.cta-inner .section-heading-upper {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0, #e15759);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
    font-weight: 700;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.cta-inner .section-heading-lower {
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ff1493, #00ff7f, #1e90ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite reverse;
    font-weight: 800;
    text-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Botones de acción con colores vivos */
.cta-actions .btn {
    margin: 0.5rem;
    padding: 1rem 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-actions .btn-warning {
    background: linear-gradient(135deg, #ff6b35, #f7931e, #ffd700);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cta-actions .btn-warning:hover {
    background: linear-gradient(135deg, #ff8c42, #ffb347, #ffd700);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 20px 40px rgba(255, 107, 53, 0.4),
        0 0 50px rgba(255, 215, 0, 0.3);
    color: #fff;
}

.cta-actions .btn-outline-light {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    backdrop-filter: blur(10px);
}

.cta-actions .btn-outline-light:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: #fff;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 20px 40px rgba(255, 255, 255, 0.2),
        0 0 50px rgba(255, 255, 255, 0.3);
    color: #fff;
}

.cta-actions .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transition: left 0.6s ease;
}

.cta-actions .btn:hover::before {
    left: 100%;
}

/* Efectos de pulsación mejorados */
.animate-pulse {
    animation: pulseVibrant 2s ease-in-out infinite;
}

@keyframes pulseVibrant {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 15px 40px rgba(255, 107, 53, 0.5),
            0 0 30px rgba(255, 215, 0, 0.3);
    }
}

/* Texto con efectos vibrantes */
.cta-inner .large-text {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 500;
    line-height: 1.8;
}

/* ======= PARTNERS SECTION CON COLORES VIBRANTES ======= */
.partners-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.partners-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #ff6b35, #ffd700, #00ff7f, #1e90ff, #ff1493);
    border-radius: 2px;
}

.partners-section h4 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    position: relative;
}

.partners-section h4::after {
    content: '✨';
    margin-left: 10px;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { 
        opacity: 0.7; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2);
    }
}

.partners-logos {
    gap: 2rem !important;
    margin-top: 2rem;
}

.partner-link {
    position: relative;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0) invert(1) contrast(1.2);
    opacity: 0.8;
    border-radius: 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.partner-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 107, 53, 0.2), 
        rgba(255, 215, 0, 0.2), 
        rgba(0, 255, 127, 0.2),
        rgba(30, 144, 255, 0.2)
    );
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.partner-link:hover {
    transform: translateY(-10px) scale(1.1) rotateY(5deg);
    opacity: 1;
    filter: brightness(1) invert(0) contrast(1) saturate(1.3);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(255, 215, 0, 0.4),
        0 0 100px rgba(255, 107, 53, 0.2);
}

.partner-link:hover::before {
    opacity: 1;
}

.partner-link:nth-child(1):hover {
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(59, 130, 246, 0.6),
        0 0 100px rgba(147, 197, 253, 0.4);
}

.partner-link:nth-child(2):hover {
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(16, 185, 129, 0.6),
        0 0 100px rgba(110, 231, 183, 0.4);
}

.partner-link:nth-child(3):hover {
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(245, 158, 11, 0.6),
        0 0 100px rgba(252, 211, 77, 0.4);
}

.partner-logo {
    max-height: 60px;
    width: auto;
    transition: all 0.4s ease;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.3));
}

.partner-link:hover .partner-logo {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

/* Efecto de ondas en el fondo de partners */
.partners-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 100px;
    background: 
        radial-gradient(ellipse at 25% 100%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 100%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
    animation: waveFloat 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes waveFloat {
    0%, 100% {
        transform: translateY(0px) scaleY(1);
    }
    50% {
        transform: translateY(-20px) scaleY(1.1);
    }
}

/* ======= ANIMACIONES ======= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-left {
    animation: slideLeft 0.8s ease-out forwards;
}

.animate-slide-right {
    animation: slideRight 0.8s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

.animate-delay-1 {
    animation-delay: 0.2s;
}

.animate-delay-2 {
    animation-delay: 0.4s;
}

.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Elementos que aparecen al hacer scroll */
.animate-in {
    opacity: 1;
    transform: translateY(0);
}

[class*="animate-"]:not(.animate-in) {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

/* ======= RESPONSIVE DESIGN ======= */
@media (max-width: 991.98px) {
    .social-bar {
        top: auto;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        backdrop-filter: blur(10px);
    }
    
    .social-container {
        flex-direction: row;
    }
    
    .social-toggle {
        display: flex;
        margin-bottom: 0;
        margin-right: 10px;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }

    .intro-img {
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .intro-text {
        padding: 1.5rem;
        margin-top: 0;
    }
    
    .caption-title {
        font-size: 2rem;
    }
    
    .caption-subtitle {
        font-size: 1rem;
    }
    
    .caption-actions .btn {
        padding: 0.5rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .carousel-inner img {
        max-height: 300px;
    }
    
    .carousel-caption {
        bottom: 10%;
        left: 5%;
        right: 5%;
    }
    
    .caption-content {
        padding: 1.5rem;
    }
    
    .caption-title {
        font-size: 1.5rem;
    }
    
    .caption-subtitle {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
    
    .caption-actions .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .section-heading-lower {
        font-size: 1.5rem;
    }
    
    .partners-logos {
        gap: 1rem !important;
    }
    
    .partner-logo {
        max-width: 100px;
    }
    
    .scroll-indicator {
        bottom: 20px;
    }
    
    .scroll-indicator span {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .social-link {
        width: 35px;
        height: 35px;
        font-size: 0.875rem;
    }
    
    .caption-title {
        font-size: 1.25rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .partners-section h4 {
        font-size: 1rem;
    }
}

/* ======= MEJORAS DE ACCESIBILIDAD ======= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ======= MODO OSCURO (OPCIONAL) ======= */
@media (prefers-color-scheme: dark) {
    .intro-text {
        background: rgba(30, 41, 59, 0.95);
        color: white;
    }
    
    .section-heading-lower {
        background: linear-gradient(45deg, #60a5fa, #34d399);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* ======= EFECTOS DE HOVER ADICIONALES ======= */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

/* ======= LOADING STATES ======= */
.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
    opacity: 1;
}

/* ======= FOCUS STATES PARA ACCESIBILIDAD ======= */
.social-link:focus,
.btn:focus,
.carousel-control-prev:focus,
.carousel-control-next:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ======= PRINT STYLES ======= */
@media print {
    .social-bar,
    .scroll-indicator,
    .loading-overlay,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
    }
    
    .carousel-inner img {
        max-height: 200px;
    }
}