/* =========================================================
   HIGH VOLTAGE
   CINTAS EN MOVIMIENTO
   Sustituye al bloque "MARQUEE" (.marquee) de styles.css
   ========================================================= */

.hv-marquee {
    position: relative;
    height: 200px;
    overflow: hidden;

    /* Mitad de arriba = color de la sección de arriba,
       mitad de abajo = color de la sección de abajo */
    background: linear-gradient(to bottom, #e4e4e4 50%, #d4d4d4 50%);

    pointer-events: none;
    user-select: none;
}


/* =========================
   CINTA
   ========================= */

.hv-tape {
    position: absolute;
    top: 50%;
    left: -5%;
    right: -5%;

    overflow: hidden;
    white-space: nowrap;
}

.hv-tape--front {
    z-index: 2;
    transform: translateY(-50%) rotate(-3deg);

    color: #fff;
    background-color: var(--rojo);
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}

.hv-tape--back {
    z-index: 1;
    transform: translateY(-50%) rotate(2.5deg);

    color: #fff;
    background-color: #000;
}

.hv-tape__track {
    display: flex;
    width: max-content;

    animation: hvTape 60s linear infinite;
}

.hv-tape--back .hv-tape__track {
    animation-direction: reverse;
    animation-duration: 75s;
}

.hv-tape__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hv-tape__group span {
    padding: 14px 0 10px;

    font-size: 3rem;
    line-height: 1;
    letter-spacing: .02em;
}

.hv-tape--back .hv-tape__group span {
    font-size: 2.2rem;
    opacity: .75;
}

.hv-tape__bolt {
    flex-shrink: 0;

    width: 18px;
    height: auto;
    margin: 0 26px;

    fill: currentColor;
}

.hv-tape--back .hv-tape__bolt {
    width: 14px;
    fill: var(--rojo);
}

@keyframes hvTape {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* =========================
   MOVIMIENTO REDUCIDO
   ========================= */

@media (prefers-reduced-motion: reduce) {
    .hv-tape__track {
        animation: none;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    .hv-marquee {
        height: 170px;
    }

    /* En pantallas estrechas se cruzan más para que se vean las dos */
    .hv-tape--front {
        transform: translateY(-50%) rotate(-7deg);
    }

    .hv-tape--back {
        transform: translateY(-50%) rotate(6deg);
    }

    .hv-tape__group span {
        font-size: 2.2rem;
        padding: 11px 0 8px;
    }

    .hv-tape--back .hv-tape__group span {
        font-size: 1.7rem;
    }

    .hv-tape__bolt {
        width: 14px;
        margin: 0 18px;
    }
}