/* omb-styles.css - Versión High Fluidity */

:root {
    --card-bg-solid: #111827;
    --card-bg-focus: rgb(31 41 55 / 0.75);
    
    --color-polaris: #3b82f6;
    --color-andromeda: #a855f7;
    --color-omb-codes: #eab308;
    --color-busi: #ec4899;
    --color-lava: #22d3ee;
    --color-assist: #f7fee7;
    --color-licencias: #bef264; /* Lime-400 */
    --color-postventa: #f87171;  /* Red-400 */
    --color-sitio: #4ade80;     /* Green-400 */
    --color-cobo: #a5b4fc;      /* Indigo-300 */
    --color-divisas: #fb923c;   /* Orange-400 */
}

.card-touch {
    background-color: var(--card-bg-solid);
    /* Transición fluida: 150ms es el 'sweet spot' entre velocidad y suavidad */
    transition: 
        transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), 
        background-color 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
    
    border: 2px solid transparent; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(0px);
    
    /* Evita vibraciones en los bordes durante el escalado */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    will-change: transform;
}

/* El icono se mueve con una curva elástica independiente para mayor fluidez visual */
.card-touch svg {
    transition: transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* EFECTO EN FOCO (Escritorio) */
@media (hover: hover) {
    .card-touch:hover {
        background-color: var(--card-bg-focus);
        backdrop-filter: blur(12px);
        /* Zoom fluido y ligero desplazamiento hacia arriba */
        transform: scale(1.04) translateY(-6px); 
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        z-index: 50;
    }

    /* El icono crece con un efecto de "pop" suave */
    .card-touch:hover svg {
        transform: scale(1.2) translateY(-2px);
    }

    /* Colores de bordes */
    .card-polaris:hover   { border-color: var(--color-polaris); }
    .card-andromeda:hover { border-color: var(--color-andromeda); }
    .card-omb-codes:hover { border-color: var(--color-omb-codes); }
    .card-busi:hover      { border-color: var(--color-busi); }
    .card-lava:hover      { border-color: var(--color-lava); }
    .card-assist:hover    { border-color: var(--color-assist); }
    .card-licencias:hover { border-color: var(--color-licencias); }
    .card-postventa:hover { border-color: var(--color-postventa); }
    .card-sitio:hover     { border-color: var(--color-sitio); }
    .card-cobo:hover      { border-color: var(--color-cobo); }
    .card-divisas:hover   { border-color: var(--color-divisas); }
}

/* EFECTO TÁCTIL (Móvil) - Se siente como un botón físico */
@media (hover: none) {
    .card-touch:active {
        background-color: var(--card-bg-focus) !important;
        backdrop-filter: blur(8px);
        transform: scale(0.96);
        transition: all 100ms ease;
    }
}

/* Suavizado de textos */
.card-touch h2, .card-touch p {
    transition: color 150ms ease;
}

.card-touch:hover h2, .card-touch:active h2,
.card-touch:hover p, .card-touch:active p { 
    color: #ffffff !important; 
}