/* ═══════════════════════════════════════════════════════════
   SPONSORS — franja superior del footer (footer.php + tm_sponsors())
   Cinta infinita de logos blancos sobre negro, con separadores
   dorados y fundido en los bordes. Sin JS: todo CSS.
   ═══════════════════════════════════════════════════════════ */

.tm-sponsors {
    --sp-gap:      clamp(2rem, 4.5vw, 4rem);
    --sp-duration: 48s;
    --sp-scale:    1;
    position: relative;
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(201,168,106,.09), transparent 70%),
        var(--tm-black-deep);
    overflow: hidden;
}

/* Filetes dorados arriba y abajo: se desvanecen hacia los costados */
.tm-sponsors::before,
.tm-sponsors::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,106,.45) 50%, transparent);
}
.tm-sponsors::before { top: 0; }
.tm-sponsors::after  { bottom: 0; opacity: .5; }

/* ── Encabezado ─────────────────────────────────────────── */
.tm-sponsors__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
    text-align: center;
}
.tm-sponsors__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tm-gold);
}
.tm-sponsors__eyebrow::before,
.tm-sponsors__eyebrow::after {
    content: "";
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: .6;
}
.tm-sponsors__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.3;
    color: var(--tm-white);
}

/* ── Cinta ──────────────────────────────────────────────── */
.tm-sponsors__marquee {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tm-sponsors__track {
    display: flex;
    align-items: center;
    width: max-content;
    list-style: none;
    /* footer.php imprime la lista 4 veces: -50% = 2 vueltas completas,
       así el reinicio de la animación cae en un punto idéntico (sin salto). */
    animation: tm-sponsors-scroll var(--sp-duration) linear infinite;
}
.tm-sponsors__marquee:hover .tm-sponsors__track,
.tm-sponsors__marquee:focus-within .tm-sponsors__track {
    animation-play-state: paused;
}
@keyframes tm-sponsors-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.tm-sponsors__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(56px * var(--sp-scale) + 1.5rem);
    padding-inline: var(--sp-gap);
}
/* Separador: rombo dorado entre logos */
.tm-sponsors__item::before {
    content: "";
    position: absolute;
    left: -2px; top: 50%;
    width: 4px; height: 4px;
    background: var(--tm-gold);
    opacity: .45;
    transform: translateY(-50%) rotate(45deg);
}
.tm-sponsors__item a { display: block; }

.tm-sponsors__img {
    display: block;
    width: auto;
    max-width: none;
    height: calc(var(--logo-h, 40px) * var(--sp-scale));
    opacity: .6;
    transition: opacity var(--transition), transform var(--transition), filter var(--transition);
}
.tm-sponsors__item:hover .tm-sponsors__img,
.tm-sponsors__item a:focus-visible .tm-sponsors__img {
    opacity: 1;
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 0 14px rgba(201,168,106,.35));
}
.tm-sponsors__item a:focus-visible {
    outline: 1px solid var(--tm-gold);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
}

/* Entrada suave al aparecer en pantalla (donde el navegador lo soporte) */
@supports (animation-timeline: view()) {
    .tm-sponsors__head,
    .tm-sponsors__marquee {
        animation: tm-sponsors-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }
    @keyframes tm-sponsors-reveal {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .tm-sponsors { --sp-scale: .85; --sp-duration: 40s; }
}
@media (max-width: 580px) {
    .tm-sponsors { --sp-scale: .7; --sp-duration: 32s; --sp-gap: 1.75rem; }
    .tm-sponsors__marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
}

/* Sin animaciones: grilla estática centrada, sin las copias decorativas */
@media (prefers-reduced-motion: reduce) {
    .tm-sponsors__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1rem;
    }
    .tm-sponsors__marquee { -webkit-mask-image: none; mask-image: none; }
    .tm-sponsors__item--copy { display: none; }
    .tm-sponsors__item::before { display: none; }
    .tm-sponsors__head,
    .tm-sponsors__marquee { animation: none; }
}