.elementor-524 .elementor-element.elementor-element-5495483{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-524 .elementor-element.elementor-element-9dcca21 img{filter:brightness( 121% ) contrast( 104% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg );transition-duration:0.3s;}.elementor-524 .elementor-element.elementor-element-9dcca21:hover img{filter:brightness( 110% ) contrast( 100% ) saturate( 99% ) blur( 0px ) hue-rotate( 0deg );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}body:not(.rtl) .elementor-524 .elementor-element.elementor-element-ff218da{left:0px;}body.rtl .elementor-524 .elementor-element.elementor-element-ff218da{right:0px;}.elementor-524 .elementor-element.elementor-element-ff218da{top:0px;text-align:center;}.elementor-524 .elementor-element.elementor-element-ff218da .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;color:var( --e-global-color-abb0baa );}.jet-listing-item.single-jet-engine.elementor-page-524 > .elementor{width:300px;margin-left:auto;margin-right:auto;}/* Start custom CSS for container, class: .elementor-element-5495483 *//* 1. Forzar transparencia en los contenedores de JetEngine */
/* Esto es lo más importante para que el multiply 'atraviese' hasta el fondo crema */
:host, 
.elementor-widget-image,
.jet-listing-grid__item {
    background-color: transparent !important;
}

/* 2. Configuración de la Tarjeta */
.tarjeta-portfolio2 {
    aspect-ratio: 3 / 4 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important; /* Vital */
}

/* 3. La Imagen: Forzamos el Multiply por código */
.tarjeta-portfolio2 .imagen-portfolio2 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    
    /* Forzamos el modo multiplicar aquí para asegurar que el front-end lo aplique */
    mix-blend-mode: multiply !important;
    
    /* Si Elementor no te aplica el gris en el front, actívalo aquí: */
    /* filter: grayscale(100%) !important; */
    
    transition: filter 0.4s ease !important;
}

/* 4. Oscurecimiento en Hover */
.tarjeta-portfolio2:hover .imagen-portfolio2 img {
    /* Al pasar el ratón, multiplicamos con más fuerza bajando el brillo */
    filter: grayscale(100%) brightness(0.4) !important;
}

/* 5. El Título: Centrado Absoluto */
.tarjeta-portfolio2 .titulo-emergente2 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 20px)) !important;
    opacity: 0 !important;
    z-index: 10 !important;
    transition: all 0.4s ease-out !important;
    
    width: 90% !important;
    margin: 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    pointer-events: none;
}

.tarjeta-portfolio2:hover .titulo-emergente2 {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}

/* 6. Capa negra de refuerzo (opcional) */
.tarjeta-portfolio2::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4); 
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 5;
}

.tarjeta-portfolio2:hover::after {
    opacity: 1;
}/* End custom CSS */