.elementor-8544 .elementor-element.elementor-element-0489540{--spacer-size:50px;}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}:root{--page-title-display:none;}/* Start custom CSS for image, class: .elementor-element-83760b7 *//* IMAGEN CON ENLACE - MANTENER TAMAÑO */

.thegap-hover,
.thegap-hover a {
    display: block;
    width: 576px;
    height: 369px;
    overflow: hidden;
    position: relative;
}

.thegap-hover img,
.thegap-hover a img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .35s ease;
}

.thegap-hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background .35s ease;
    z-index: 1;
    pointer-events: none;
}

.thegap-hover:hover img {
    transform: scale(1.08);
}

.thegap-hover:hover::before {
    background: rgba(0,0,0,.25);
}

.thegap-hover::after {
    content: "THE GAP";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -60px;
    height: 42px;
    background: #fff;
    color: #222;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: bottom .35s ease;
    z-index: 2;
    pointer-events: none;
}

.thegap-hover:hover::after {
    bottom: 20px;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9b9e3ad *//* ===========================
   CÓDIGO 1
   =========================== */

.griferia-hover {
    position: relative;
    overflow: hidden;
}

.griferia-hover img {
    display: block;
    width: 100%;
    transition: transform .35s ease;
}

/* Capa oscura */
.griferia-hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background .35s ease;
    z-index: 1;
}

/* Zoom */
.griferia-hover:hover img {
    transform: scale(1.08);
}

/* Oscurecido */
.griferia-hover:hover::before {
    background: rgba(0,0,0,.25);
}

/* Franja blanca inferior */
.griferia-hover::after {
    content: "SERIE SIRIO";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -60px;
    height: 42px;
    background: #fff;
    color: #222;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: bottom .35s ease;
    z-index: 2;
}

/* Mostrar franja */
.griferia-hover:hover::after {
    bottom: 20px;
}/* End custom CSS */