@font-face {
    font-family: "Helvetica Neue Black";
    src: url("/fonts/helvetica-neue-black-condensed.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("/fonts/HelveticaNeueLight.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html, body {
    overflow: none;
}

:root {
    --uo-bg: #898985;
    /*--uo-bg: #E5E3DB;*/ /* Mas claro */
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
    font-family: "Helvetica Neue Black", Helvetica, Arial, sans-serif;
    line-height: 1.1;
}

/* Marquee base */
.marquee-row {
    overflow: hidden;
}

.marquee-track {
    display: inline-flex;
    width: max-content;
    white-space: nowrap;
    gap: 14rem;
    padding-inline: 2rem;
    will-change: transform;
    opacity: 0.75; /* sutil como el mockup */
    animation: scroll-left var(--speed, 30s) linear infinite;
    font-family: "Helvetica Neue Black", Helvetica, Arial, sans-serif;
    font-size: 56px;
    --sy: 1.2; /* escala vertical */
}

.marquee-track span {
    font-weight: bolder;
    letter-spacing: 0.02em;
    user-select: none;
}

.marquee-right {
    animation-name: scroll-right;
}

.marquee-left {
    animation-name: scroll-left;
}

.font-helvetica-black {
    font-family: "Helvetica Neue Black", Helvetica, Arial, sans-serif;
}

@keyframes scroll-left {
    from {
        transform: translateX(0) scaleY(var(--sy));
    }
    to {
        transform: translateX(-50%) scaleY(var(--sy));
    }
}

@keyframes scroll-right {
    from {
        transform: translateX(-50%) scaleY(var(--sy));
    }
    to {
        transform: translateX(0) scaleY(var(--sy));
    }
}