/* =========================================
   EMHA DIAGRAM STYLES
   ========================================= */

/* 1. Estado inicial: Oculto */
.emha-animate {
    opacity: 0;
    transform: translateY(15px); /* Posición inicial para el efecto slide */
}

/* 2. Keyframes (Sin cambios) */
@keyframes emhaFadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. ACTIVADOR: La animación solo corre cuando el padre tiene la clase .emha-in-view */
.emha-in-view .emha-animate {
    animation: emhaFadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Delays (Igual que antes) */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

.delay-6 {
    animation-delay: 0.6s;
}

.delay-7 {
    animation-delay: 0.7s;
}

.delay-8 {
    animation-delay: 0.8s;
}


/* Interacciones (Hover) */
.emha-box {
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    z-index: 2;
}

    .emha-box:hover {
        /* AGREGAR !important AQUÍ */
        transform: translateY(-4px) !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        background-color: #666 !important;
    }

.emha-bar {
    transition: all 0.3s ease;
    cursor: default;
}

    .emha-bar:hover {
        /* AGREGAR !important AQUÍ */
        transform: translateY(-2px) scale(1.01) !important;
        box-shadow: 0 6px 12px rgba(0, 70, 173, 0.25);
    }