/* =====================================================================
   01 · HUINCHA SUPERIOR (id="huincha")
   Franja delgada arriba de todo con mensajes que se desplazan.
   Los textos se editan en index.html, dentro de <div class="huincha__pista">.
   ===================================================================== */

.huincha {
  height: 42px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--negro);
  border-bottom: 1px solid var(--carbon);
  color: var(--texto-2);
  font-size: 14px;
  letter-spacing: 1px;
}

/* La "pista" contiene los mensajes (duplicados por JS) y se mueve */
.huincha__pista {
  display: flex;
  flex-shrink: 0;
  gap: 36px;
  padding-right: 36px;
  white-space: nowrap;
  animation: desplazar 95s linear infinite;   /* velocidad de la huincha: más segundos = más lenta (antes 40s) */
}

.huincha__pista span { display: inline-flex; align-items: center; gap: 36px; }

/* Estrellita separadora entre mensajes */
.huincha__pista span::after { content: "✦"; color: var(--cobre); }

@media (max-width: 700px) {
  .huincha { height: 34px; font-size: 12px; }
}