/* =====================================================================
   BLACK 2026 | ISA PRA SEMPRE :: faixa de transicao para o acervo
   Reta, 100% da largura, espresso com filetes dourados em cima e embaixo.
   Anda para a DIREITA (a faixa da hero anda para a esquerda).
   ===================================================================== */

.tb26 {
    --tb-h: 54px;
    --tb-ink: #e7d2a2;
    --tb-gem: #b8914f;
    position: relative;
    width: 100%;
    height: var(--tb-h);
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #130c08 0%, #1f120b 50%, #130c08 100%);
    box-shadow: inset 0 10px 18px -14px rgba(0, 0, 0, .8), inset 0 -10px 18px -14px rgba(0, 0, 0, .8);
}

/* filetes dourados (ouro envelhecido) + reflexo ocasional correndo pelo filete */

.tb26::before,
.tb26::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(255, 244, 214, 0) 0%, rgba(255, 244, 214, .95) 50%, rgba(255, 244, 214, 0) 100%), linear-gradient(90deg, rgba(168, 128, 64, .35) 0%, rgba(201, 164, 98, .85) 20%, rgba(214, 180, 116, .95) 50%, rgba(201, 164, 98, .85) 80%, rgba(168, 128, 64, .35) 100%);
    background-size: 18% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: -20% 0, 0 0;
    box-shadow: 0 0 6px rgba(214, 180, 116, .18);
}

.tb26::before {
    top: 0;
    animation: tb26-shine 11s linear 2s infinite;
}

.tb26::after {
    bottom: 0;
    animation: tb26-shine 11s linear 7.5s infinite;
}

/* o reflexo atravessa o filete em ~2,2s e some; nunca passa por cima do texto */

@keyframes tb26-shine {
    0% {
        background-position: -20% 0, 0 0;
    }
    20% {
        background-position: 120% 0, 0 0;
    }
    20.01%,
    100% {
        background-position: 120% 0, 0 0;
    }
}

.tb26-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    animation: tb26-slide 140s linear infinite;
}

.tb26-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.tb26-t {
    font-family: "Poppins", "Plus Jakarta Sans", Arial, sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tb-ink);
    padding-left: .3em;
    /* compensa o tracking para centralizar entre losangos */
}

.tb26-g {
    font-size: 7px;
    line-height: 1;
    color: var(--tb-gem);
    opacity: .85;
    padding: 0 clamp(26px, 2.8vw, 44px);
    transform: translateY(-.5px);
}

/* sentido oposto ao da hero: da esquerda para a direita, velocidade constante */

@keyframes tb26-slide {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 1024px) {
    .tb26 {
        --tb-h: 48px;
    }
    .tb26-t {
        font-size: 11.5px;
        letter-spacing: .26em;
        padding-left: .26em;
    }
    .tb26-g {
        padding: 0 24px;
    }
}

@media (max-width: 767px) {
    .tb26 {
        --tb-h: 44px;
    }
    .tb26-t {
        font-size: 10.5px;
        letter-spacing: .24em;
        padding-left: .24em;
    }
    .tb26-g {
        font-size: 6px;
        padding: 0 20px;
    }
    .tb26-track {
        animation-duration: 110s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb26-track,
    .tb26::before,
    .tb26::after {
        animation: none;
    }
}