.c420-reveal-fx {
    --c420-x: 50%;
    --c420-y: 50%;
    --c420-radius: 150px;
    --c420-inner-radius: 78px;
    --c420-mid-radius-1: 110px;
    --c420-mid-radius-2: 138px;
    --c420-outer-radius: 172px;
    --c420-glass-blur: 7px;
    --c420-glass-opacity: .34;
    --c420-final-radius: 0px;
    --c420-final-feather: 72px;
    --c420-final-mid-feather: 32px;
    position: relative;
    isolation: isolate;
}

/*
 * v0.2 usa snapshots completos del Container, no solo de sus hijos.
 * Así también se clonan el fondo del propio contenedor, overlays y estilos
 * ligados a la clase/ID de Elementor; es importante en heroes con background-image.
 */
.c420-reveal-fx > .c420-reveal-stage {
    position: absolute;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    contain: paint;
}

.c420-reveal-fx > .c420-reveal-stage > .c420-reveal-snapshot {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    overflow: hidden;
}

.c420-reveal-fx > .c420-reveal-stage > .c420-reveal-gray {
    filter: grayscale(1) saturate(.12) contrast(.96) brightness(.97);
}

.c420-reveal-fx > .c420-reveal-stage > .c420-reveal-color {
    opacity: 0;
    will-change: mask-image, -webkit-mask-image, opacity;
}

/* LIQUID GLASS: no hay aro ni borde sólido. El color desaparece por alfa. */
.c420-reveal-fx.c420-lens-liquid > .c420-reveal-stage > .c420-reveal-color {
    -webkit-mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        #000 var(--c420-inner-radius),
        rgba(0,0,0,.92) var(--c420-mid-radius-1),
        rgba(0,0,0,.48) var(--c420-mid-radius-2),
        rgba(0,0,0,.12) var(--c420-radius),
        transparent var(--c420-outer-radius)
    );
    mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        #000 var(--c420-inner-radius),
        rgba(0,0,0,.92) var(--c420-mid-radius-1),
        rgba(0,0,0,.48) var(--c420-mid-radius-2),
        rgba(0,0,0,.12) var(--c420-radius),
        transparent var(--c420-outer-radius)
    );
}

/* SUAVE: transición difuminada más contenida. */
.c420-reveal-fx.c420-lens-soft > .c420-reveal-stage > .c420-reveal-color {
    -webkit-mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        #000 var(--c420-inner-radius),
        rgba(0,0,0,.72) var(--c420-mid-radius-2),
        transparent var(--c420-radius)
    );
    mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        #000 var(--c420-inner-radius),
        rgba(0,0,0,.72) var(--c420-mid-radius-2),
        transparent var(--c420-radius)
    );
}

/* NÍTIDO: mantiene el comportamiento original para quien quiera un corte preciso. */
.c420-reveal-fx.c420-lens-sharp > .c420-reveal-stage > .c420-reveal-color {
    -webkit-mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        #000 calc(var(--c420-radius) - 2px),
        transparent var(--c420-radius)
    );
    mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        #000 calc(var(--c420-radius) - 2px),
        transparent var(--c420-radius)
    );
}

/* Capa óptica: blur localizado + brillo muy leve. Sin stroke/outline/borde. */
.c420-reveal-fx > .c420-reveal-stage > .c420-reveal-glass {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        rgba(255,255,255,.10) 0,
        rgba(255,255,255,.055) 42%,
        rgba(255,255,255,.018) 66%,
        transparent 82%
    );
    -webkit-backdrop-filter: blur(var(--c420-glass-blur)) saturate(1.08) brightness(1.025);
    backdrop-filter: blur(var(--c420-glass-blur)) saturate(1.08) brightness(1.025);
    -webkit-mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        rgba(0,0,0,.86) var(--c420-mid-radius-2),
        rgba(0,0,0,.22) var(--c420-radius),
        transparent var(--c420-outer-radius)
    );
    mask-image: radial-gradient(
        circle at var(--c420-x) var(--c420-y),
        #000 0,
        rgba(0,0,0,.86) var(--c420-mid-radius-2),
        rgba(0,0,0,.22) var(--c420-radius),
        transparent var(--c420-outer-radius)
    );
    transition: opacity 160ms ease;
    will-change: opacity, backdrop-filter;
}

.c420-reveal-fx.c420-pointer-active > .c420-reveal-stage > .c420-reveal-color {
    opacity: 1;
}

.c420-reveal-fx.c420-lens-liquid.c420-pointer-active > .c420-reveal-stage > .c420-reveal-glass {
    opacity: var(--c420-glass-opacity);
}

/* El click también revela con borde progresivo, evitando un círculo duro al expandir. */
.c420-reveal-fx.c420-final > .c420-reveal-stage > .c420-reveal-color {
    opacity: 1;
    -webkit-mask-image: radial-gradient(
        circle at var(--c420-final-x) var(--c420-final-y),
        #000 0,
        #000 max(0px, calc(var(--c420-final-radius) - var(--c420-final-feather))),
        rgba(0,0,0,.55) max(0px, calc(var(--c420-final-radius) - var(--c420-final-mid-feather))),
        transparent var(--c420-final-radius)
    );
    mask-image: radial-gradient(
        circle at var(--c420-final-x) var(--c420-final-y),
        #000 0,
        #000 max(0px, calc(var(--c420-final-radius) - var(--c420-final-feather))),
        rgba(0,0,0,.55) max(0px, calc(var(--c420-final-radius) - var(--c420-final-mid-feather))),
        transparent var(--c420-final-radius)
    );
}

.c420-reveal-fx.c420-final > .c420-reveal-stage > .c420-reveal-glass {
    opacity: 0;
}

.c420-reveal-fx.c420-complete > .c420-reveal-stage {
    display: none;
}

/*
 * Mientras el snapshot está activo ocultamos el contenido/fondo real del Container.
 * Al terminar se quita c420-mounted y Elementor vuelve a quedar intacto.
 */
.c420-reveal-fx.c420-mounted {
    background-image: none !important;
    background-color: transparent !important;
}

.c420-reveal-fx.c420-mounted::before,
.c420-reveal-fx.c420-mounted::after {
    opacity: 0 !important;
}

.c420-reveal-fx.c420-mounted > :not(.c420-reveal-stage) {
    visibility: hidden !important;
}

.c420-reveal-fx.c420-complete > :not(.c420-reveal-stage) {
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .c420-reveal-fx { --c420-motion-reduced: 1; }
    .c420-reveal-fx > .c420-reveal-stage > .c420-reveal-glass { transition: none; }
}