/* =====================================================================
   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; }
}
