.hero-logo-mask {
    width: 100%;
    max-width: 1920px;
    margin: 0px auto 0px auto;
    height: 77vh;
    background-color: var(--primary-red); /* Fondo rojo */
    position: relative;
    overflow: hidden;
}

.hero-logo-mask__container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hero-logo-mask__image {
    width: 72%;
    height: 72%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    will-change: width, height, mask-size, -webkit-mask-size;
    transition: width 0.1s linear, height 0.1s linear;
}