/* ════════════════════════════════════════════════════════════
   Bloque · marquee (top ticker)
   ────────────────────────────────────────────────────────────
   MOBILE-FIRST. Breakpoints canónicos:
     600px → tablet+ (más gap, font 13)

   Modos según preferencia de movimiento del usuario:
     - sin reduce-motion (default): scroll horizontal continuo
     - con reduce-motion en MÓVIL: rotación con crossfade entre items
       (6 items, 5s c/u, ciclo 30s · solo opacity → accesible)
     - con reduce-motion en TABLET+: wrap horizontal (cabe todo)
   ════════════════════════════════════════════════════════════ */

/* ─── Base ──────────────────────────────────────────────── */
.dtfm-marquee {
    background: var(--lime-500);
    color: var(--black);
    padding-block: 8px;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-family: var(--ff-display);
    letter-spacing: -0.005em;
}

.dtfm-marquee__inner {
    display: flex;
    gap: var(--sp-4, 24px);
    white-space: nowrap;
    width: max-content;
    animation: dtfm-marquee 30s linear infinite;
    will-change: transform;
}

.dtfm-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--black);
    flex-shrink: 0;
}

.dtfm-marquee__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--black);
    flex-shrink: 0;
}

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

/* ─── 600px+ tablet ─────────────────────────────────────── */
@media (min-width: 600px) {
    .dtfm-marquee {
        font-size: 13px;
        padding-block: 10px;
    }
    .dtfm-marquee__inner {
        gap: var(--sp-5, 32px);
        animation-duration: 38s;
    }
}


/* ════════════════════════════════════════════════════════════
   prefers-reduced-motion · MÓVIL
   ───────────────────────────────────────────────────────────
   Rotación con crossfade: cada item visible ~2.5s, transición ~1.5s,
   ciclo total 30s. Solo cambia opacity (no traslación) → respeta
   las recomendaciones WCAG para usuarios con sensibilidad al movimiento.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .dtfm-marquee__inner {
        display: block;
        position: relative;
        width: 100%;
        height: 1.5em;
        animation: none;
        overflow: hidden;
        text-align: center;
    }
    .dtfm-marquee__item {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: dtfm-marquee-fade 30s ease-in-out infinite;
        animation-fill-mode: forwards;
    }
    /* Duplicados ocultos: rotación solo entre los 6 originales */
    .dtfm-marquee__item.is-duplicate { display: none; }

    /* 6 items × 5s cada uno (asume 6 items por defecto en el ACF).
       Si añades un 7º item en ACF, edita aquí o usa CSS dinámico. */
    .dtfm-marquee__item:nth-child(1) { animation-delay: 0s;  }
    .dtfm-marquee__item:nth-child(2) { animation-delay: 5s;  }
    .dtfm-marquee__item:nth-child(3) { animation-delay: 10s; }
    .dtfm-marquee__item:nth-child(4) { animation-delay: 15s; }
    .dtfm-marquee__item:nth-child(5) { animation-delay: 20s; }
    .dtfm-marquee__item:nth-child(6) { animation-delay: 25s; }
}

@keyframes dtfm-marquee-fade {
    /* Ciclo de 30s, item visible 12% del ciclo (3.6s) con crossfade.
       Calculado para que el solape con el siguiente item (delay +5s)
       cree una transición suave sin oscuros intermedios. */
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    12%  { opacity: 1; }
    22%  { opacity: 0; }
    100% { opacity: 0; }
}


/* ════════════════════════════════════════════════════════════
   prefers-reduced-motion · TABLET+
   ───────────────────────────────────────────────────────────
   En pantallas anchas cabe todo en varias líneas con flex-wrap.
   Anula la rotación de móvil — más eficiente y legible.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) and (min-width: 600px) {
    .dtfm-marquee__inner {
        display: flex;
        flex-wrap: wrap;
        gap: 8px var(--sp-4, 24px);
        justify-content: center;
        white-space: normal;
        width: 100%;
        height: auto;
        text-align: initial;
    }
    .dtfm-marquee__item {
        position: static;
        opacity: 1;
        animation: none;
    }
}