/* ===== Franja negra (ticker) con loop infinito ===== */
.ticker{
  --ticker-height: 52px;
  --ticker-speed: 36s;                 /* ajusta velocidad del loop */
  background:#000; color:#fff;
  height:var(--ticker-height);
  overflow:hidden; position:relative;
  display:flex; align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* desvanecido en lados */
.ticker::before,
.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; z-index:3; pointer-events:none;
}
.ticker::before{ left:0;  background:linear-gradient(90deg,#000 40%,transparent); }
.ticker::after { right:0; background:linear-gradient(270deg,#000 40%,transparent); }

.ticker__track{
  display:flex; gap:0;                 /* dos listas una tras otra */
  will-change: transform;
  animation: ticker-move var(--ticker-speed) linear infinite;
}

.ticker__list{
  display:flex; align-items:center; gap:2rem;
  padding:0 1.25rem; margin:0; list-style:none; white-space:nowrap;
}

.ticker__list li{
  display:flex; align-items:center; gap:.5rem;
  font-size: .95rem;
  opacity:.95;
}
.ticker__list i{ font-size:1.05rem; opacity:.9; }
.ticker a{ color:#fff; text-decoration:underline; text-underline-offset: 2px; }

/* pausa en hover */
.ticker:hover .ticker__track{ animation-play-state: paused; }

/* animación: se mueve exactamente el ancho de una lista (50%) */
@keyframes ticker-move{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
}

/* Responsive: texto un poco más pequeño en móviles */
@media (max-width: 576px){
  .ticker{ --ticker-height: 46px; }
  .ticker__list{ gap:1rem; }
  .ticker__list li{ font-size:.9rem; }
}