.elementor-419 .elementor-element.elementor-element-2a4f076a{--display:flex;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-419 .elementor-element.elementor-element-40390371{--grid-columns:2;--grid-row-gap:0px;--grid-column-gap:0px;}.elementor-419 .elementor-element.elementor-element-40390371 .elementor-repeater-item-e900fc6{grid-column:span min( 1, var(--grid-columns) );}@media(max-width:1024px){.elementor-419 .elementor-element.elementor-element-40390371{--grid-columns:2;}}@media(max-width:767px){.elementor-419 .elementor-element.elementor-element-40390371{--grid-columns:1;--grid-row-gap:0px;}.elementor-419 .elementor-element.elementor-element-40390371 .elementor-repeater-item-e900fc6{grid-column:span min( 1, var(--grid-columns) );}}/* Start custom CSS *//* ========================================= */
/* CSS REFINADO PARA "MEDIA-BOX"             */
/* ========================================= */

/* 1. Recortamos bordes perfectos (Aquí le puse 12px, usa tus medidas reales de Elementor) */
.media-box {
    position: relative;
    overflow: hidden !important;
    border-radius: 12px; 
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fuerza el corte al estilo Apple/Safari */
}

/* 2. TU CÓDIGO MAESTRO: Escalado del video + OCULTADO por defecto */
.media-box .elementor-background-video-container {
    transform: scale(1.80) !important;
    transform-origin: center center !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    
    /* Esta es la magia: escondemos el div hasta pasar el ratón */
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

/* 3. LA PORTADA VIMEO: Anula sus bordes falsos para que Media-Box la corte fino */
.cover-vimeo {
    transition: opacity 0.4s ease, visibility 0.4s;
    width: 100%;
}
.cover-vimeo img {
    border-radius: 0 !important; 
    display: block;
    width: 100%;
}

/* 4. LAS ANIMACIONES HOVER (Cuando el ratón entra al media box) */
.media-box:hover .elementor-background-video-container {
    opacity: 1 !important; /* Aparece tu video ya escalado de 1.80 */
}
.media-box:hover .cover-vimeo {
    opacity: 0 !important; /* Desvanece la foto hacia atrás */
    visibility: hidden;
}/* End custom CSS */