/* custom-animations.css - VERSIÓN SIMPLIFICADA Y MODIFICADA */

/* Clases de animación básicas, no cambian */
.custom-animation {
    animation-duration: 0.8s; /* Duración por defecto, se ajustará individualmente */
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* Keyframes (no necesitan cambio si el efecto visual es el deseado) */
@keyframes customFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ===== APLICACIÓN ESPECÍFICA PARA EL SLIDER HERO ===== */

/* Contenedor del título principal */
.hero-title {
    animation-name: customSlideUp; /* O customFadeIn, lo que prefieras */
    animation-duration: 0.8s; /* Duración normal */
    animation-delay: 0s; /* Empieza inmediatamente */
}

/* Contenedor del subtítulo/descripción */
.hero-subtitle {
    animation-name: customSlideUp; /* O customFadeIn */
    animation-delay: 0.2s; /* Empieza 0.2 segundos después */
    /* Calcular la nueva duración: Duración Total - Retraso = 0.8s - 0.2s = 0.6s */
    animation-duration: 0.6s; /* Más corta para terminar al mismo tiempo */
}

/* Responsive: Ajustar también para móviles si aplica */
@media (max-width: 767px) {
    .hero-title {
        animation-duration: 0.6s; /* Adaptar a la duración de móvil */
    }
    .hero-subtitle {
        animation-delay: 0.1s; /* Retraso más corto para móvil */
        animation-duration: 0.5s; /* 0.6s - 0.1s = 0.5s */
    }
}

/* ===== ESTADO INICIAL PARA EVITAR FLASH ===== */

/* Ocultar textos del hero slider por defecto para evitar flash inicial */
.elementor-slide-heading,
.elementor-slide-description {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}