/* ===== Paleta (turquesa/dorado dark) ===== */
:root {
    --dmx-cyan: #00c8c4; /* turquesa vivo */
    --dmx-cyan-dk: #0aa0a0; /* turquesa dark */
    --dmx-gold: #d6b86c; /* dorado suave */
    --dmx-bg: #0f1113; /* fondo dark global */
}

/* ===== 1) Glow Hover sutil (tarjetas, botones, imágenes) ===== */
.dmx-glow, .card, .btn-action, .image {
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    will-change: transform, box-shadow, filter;
}

    .dmx-glow:hover, .card:hover, .btn-action:hover, .image:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 24px rgba(0,200,196,.12), 0 0 16px rgba(214,184,108,.10);
    }

    /* efecto activo al recibir foco por teclado */
    .dmx-glow:focus-visible, .btn-action:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 0 20px rgba(0,200,196,.22);
    }

/* ===== 2) Apariciones con scroll: estado inicial ===== */
.dmx-reveal {
    opacity: 0;
    transform: translateY(22px) scale(.98);
}

    .dmx-reveal.is-in {
        opacity: 1;
        transform: none;
    }

/* ===== 3) Parallax en HERO (sensación de profundidad) ===== */
.dm-hero__stage {
    cursor: default;
}

.dmx-parallax-bg {
    will-change: transform;
}

.dmx-parallax-fg {
    will-change: transform;
}

/* ===== Micro-detalle: partículas opcionales (si las activas por JS) ===== */
.bg-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Respeto a usuarios con reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .dmx-glow, .card, .btn-action, .image {
        transition: none !important;
    }
}