/* ==========================================================================
   COMPETÊNCIAS GRID & CARDS - REFACTORED
   Focado em suavidade extrema e zero conflitos de transição
   ========================================================================== */

/* --- Grid Container --- */
.competencias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    width: 100%;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* --- Card Base --- */
.competencia-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    isolation: isolate;
    
    /* Otimização de Renderização */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;

    /* 
       CRÍTICO: Definimos a transição com !important para garantir que ela
       sobrescreva a transição genérica do .animate-on-scroll.
       Isso resolve o problema do "corte seco".
    */
    transition: 
        transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        background 0.4s ease !important;
}

/* --- Icon Wrapper --- */
.competencia-card .icon-wrapper {
    transition: 
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
        box-shadow 0.4s ease,
        background 0.4s ease;
}

/* --- SVG Icon --- */
.competencia-card svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Typography --- */
.competencia-card h3,
.competencia-card p {
    transition: color 0.3s ease;
}

/* ==========================================================================
   DESKTOP INTERACTIONS (Hover)
   ========================================================================== */
@media (min-width: 901px) {
    .competencia-card:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 
            0 20px 40px -5px rgba(0, 0, 0, 0.3),
            0 10px 20px -5px rgba(99, 102, 241, 0.2),
            0 0 0 1px rgba(99, 102, 241, 0.3);
        border-color: rgba(99, 102, 241, 0.6) !important;
        z-index: 10;
    }

    .competencia-card:hover .icon-wrapper {
        transform: scale(1.15) rotate(3deg) translateY(-5px);
        box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4) !important;
    }

    .competencia-card:hover svg {
        transform: scale(1.1);
    }
}

/* ==========================================================================
   MOBILE INTERACTIONS (Touch/Active)
   ========================================================================== */
@media (max-width: 900px) {
    .competencias-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .competencia-card {
        /* Ajuste para mobile: padding menor se necessário, mas mantendo a transição suave */
        padding: 32px !important;
    }

    /* Estado Active (Toque) no Mobile */
    .competencia-card:active {
        transform: scale(0.98);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: rgba(99, 102, 241, 0.4) !important;
    }

    .competencia-card:active .icon-wrapper {
        transform: scale(0.95);
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .competencia-card,
    .competencia-card .icon-wrapper,
    .competencia-card svg {
        transition: none !important;
        transform: none !important;
    }
}