.magnetic_hero {
    container: inline-block;
    place-items: center;
    text-align: center;
    display: flex;
    width: 100%;
    height: 100%;
}

.hero__images {
    display: flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: relative;
    touch-action: none;
    width: 100%;
    height: 40vh; /* Ajusta esto si quieres más o menos altura */
    z-index: 1;
}

.hero__images .hero__image {
    aspect-ratio: 1/1;
    border-radius: 1rem;
    width: clamp(6rem, 100%, 14vw); /* Tamaño responsivo */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.hero__images .hero__image img {
    border-radius: inherit;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Agregué una sombra suave por si falta la var(--shadow) */
    pointer-events: auto;
    width: auto;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -o-object-fit: cover;
    object-fit: cover;
    will-change: transform;
    /* Aquí usa las variables que manda el JS */
    transform: translateX(calc(var(--offsetX) * 1px)) translateY(calc(var(--offsetY) * 1px + var(--translateY)));
    transition: transform .1s linear; /* Ajustado para suavidad */
}

/* Efecto abanico (Fan Effect) */
.hero__images .hero__image:nth-child(1) img { rotate: calc(2deg - var(--velocity) * .25deg); --translateY: 5%; }
.hero__images .hero__image:nth-child(2) img { rotate: calc(-3deg - var(--velocity) * .25deg); --translateY: -6%; }
.hero__images .hero__image:nth-child(3) img { rotate: calc(6deg - var(--velocity) * .25deg); --translateY: 5%; }
.hero__images .hero__image:nth-child(4) img { rotate: calc(-2deg - var(--velocity) * .25deg); --translateY: -4%; }
/* Por si pones más de 4 imágenes, que se repita el patrón */
.hero__images .hero__image:nth-child(n+5) img { rotate: calc(2deg - var(--velocity) * .25deg); --translateY: 0%; }

/* Margen negativo para que se solapen */
.hero__images .hero__image:not(:last-child) {
    margin-right: -6%;
}