/* ═══════════════════════════════════════════════════════
   Efeitos dinâmicos (Fase 1) — reversível via DYNAMIC_FEATURES
   ═══════════════════════════════════════════════════════ */

/* Entrada suave: fade + slide */
.fx-enter {
    opacity: 0;
    transform: translateY(14px);
    animation: fx-enter .5s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: var(--fx-delay, 0ms);
}
@keyframes fx-enter {
    to { opacity: 1; transform: translateY(0); }
}

/* Hover: elevação + brilho turquesa */
.fi-wi-stats-overview-stat {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -12px rgba(0, 234, 174, .28);
}
.es-top-card:hover {
    box-shadow: 0 12px 28px -12px rgba(0, 234, 174, .28);
}

/* Responsivo: valores nunca estouram no mobile */
@media (max-width: 640px) {
    .es-top-card p.mt-3,
    .fi-wi-stats-overview-stat-value {
        font-size: 1.4rem !important;
        line-height: 1.25;
        word-break: break-word;
    }
    .es-top-card {
        padding: 1.1rem !important;
    }
}

/* Acessibilidade: respeita "reduzir movimento" */
@media (prefers-reduced-motion: reduce) {
    .fx-enter { animation: none !important; opacity: 1 !important; transform: none !important; }
}