/**
 * Mask Fade Extension - CSS
 * Efecto de degradado a transparencia real usando CSS mask-image
 * 
 * @package LT Widgets Modular
 * @version 1.0
 */

/* =================================================================
   VARIABLES POR DEFECTO (se sobrescriben con los controles)
   ================================================================= */
.lt-maskfade,
.lt-maskfade-enabled-yes {
    --lt-angle: 90deg;
    --lt-s: 0%;
    --lt-m: 50%;
    --lt-e: 100%;
    --lt-mid-alpha: 0.5;
}

/* =================================================================
   APLICACIÓN DEL MASK - WIDGET IMAGE
   La máscara se aplica a la imagen (<img>)
   ================================================================= */
.lt-maskfade-image img,
.lt-maskfade-enabled-yes.elementor-widget-image img {
    -webkit-mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* =================================================================
   APLICACIÓN DEL MASK - CONTAINER
   La máscara se aplica al contenedor completo
   (afecta fondo, bordes y contenido interno)
   ================================================================= */
.lt-maskfade-container,
.lt-maskfade-enabled-yes.e-con {
    -webkit-mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* =================================================================
   COMPATIBILIDAD CON DIFERENTES LAYOUTS
   ================================================================= */

/* Asegurar que la imagen no tenga conflictos con otros estilos */
.lt-maskfade-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Para contenedores flex */
.lt-maskfade-container.e-con {
    position: relative;
}

/* =================================================================
   RESPONSIVE - Las variables CSS se ajustan automáticamente
   gracias a los controles responsive de Elementor
   ================================================================= */