/* ============================================================
   PREMIUM LAYER — pulido aditivo (capa encima, NO reescribe base)
   Cargado al final. Si algo no cuadra, se quita su <link> y ya.
   ============================================================ */
:root {
    /* Escala de elevacion coherente (para usar progresivamente) */
    --elev-1: 0 1px 3px rgba(0, 0, 0, .30);
    --elev-2: 0 4px 14px rgba(0, 0, 0, .30);
    --elev-3: 0 12px 28px rgba(0, 0, 0, .42);
    --elev-4: 0 20px 50px rgba(0, 0, 0, .55);
    /* Escala de espaciado base 8px */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 40px;
    /* Easing con sensacion de muelle */
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Efecto ripple OPT-IN: solo en elementos con .cm-fx, para no afectar
   botones que llevan badges/elementos absolutos fuera de su caja. */
.cm-fx {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cm-fx>* {
    position: relative;
    z-index: 1;
}

.cm-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: radial-gradient(circle, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
    animation: cmRipple .55s ease-out forwards;
}

@keyframes cmRipple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* Profundidad tactil sutil al pulsar (solo en .cm-fx) */
.cm-fx:active {
    transform: translateY(1px) scale(.985);
}