/* Contenedor full width pero “elegante” (un poco de aire arriba/abajo) */
.promo-image {
    width: 100%;
    background: #fff;
    padding: clamp(10px, 1.6vw, 18px) 0;

    margin-top: 5rem;
}

/* “Stretched” como Elementor: ocupa todo el ancho disponible */
.promo-image__container {
    width: calc(100% - 10px);
    /* un poco más ancho que 1200 */
    margin: 0 auto;
}

.promo-image__link {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    /* border-radius: 6px; */
    /* sutil, moderno */
    background: #111;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transform: translateZ(0);
}

/* Mantiene look de banner: alto responsivo sin deformar */
.promo-image__link::before {
    content: "";
    display: block;
    aspect-ratio: 2601 / 986;
    /* misma proporción de tu imagen */
}

.promo-image__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
    transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* Hover premium: overlay + zoom leve */
.promo-image__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}

.promo-image__link:hover .promo-image__img {
    transform: scale(1.04);
}

.promo-image__link:hover::after {
    opacity: 1;
}

/* Accesibilidad (teclado) */
.promo-image__link:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 4px;
}

/* ===== Responsive ===== */
/* En móvil: que no quede demasiado “aplastado” */
@media (max-width: 768px) {
    .promo-image__container {
        width: calc(100% - 20px);
    }

    .promo-image__link {
        /* border-radius: 10px; */
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
    }

    .promo-image__link::before {
        aspect-ratio: 16 / 9;
        /* un poco más “mobile friendly” */
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    .promo-image__img,
    .promo-image__link::after {
        transition: none !important;
    }
}