/* ==========================================================================
   AREA UNITED · Banda diagonal
   Cinta amarilla en diagonal con texto en movimiento. Componente reutilizable:
   .au-band en cualquier sección. El texto se duplica en el HTML para que el
   bucle sea continuo.
   ========================================================================== */
.au-band {
  --band-tilt: 3deg;
  --band-h: clamp(24px, 2.4vw, 32px);
  position: relative;
  height: calc(var(--band-h) * 3);
  overflow: hidden;             /* recorta los extremos de las cintas inclinadas */
  background: var(--black-pure);
  contain: paint;
}
.au-band-strip {
  position: absolute;
  left: -8%;
  width: 116%;
  top: 50%;
  height: var(--band-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.au-band-strip--front {
  z-index: 2;
  background: var(--yellow);
  color: var(--black);
  transform: translateY(-50%) rotate(calc(var(--band-tilt) * -1));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.au-band-track {
  display: flex;
  flex: none;
  width: max-content;
  animation: au-band-move 38s linear infinite;
}
.au-band-group {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(16px, 2vw, 28px);
  padding-right: clamp(16px, 2vw, 28px);
  font-family: var(--font-display-wide);
  font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.au-band-group img { width: 10px; height: auto; flex: none; }
@keyframes au-band-move { to { transform: translateX(-50%); } }

@media (max-width: 767px) {
  .au-band { --band-tilt: 4deg; --band-h: 24px; height: calc(var(--band-h) * 3); }
}
@media (prefers-reduced-motion: reduce) {
  .au-band-track { animation: none; }
}

/* Variante "costura": la banda va dentro de la sección anterior, en absoluto
   sobre su borde inferior. No ocupa espacio en el flujo. */
.disciplines { position: relative; }
.au-band--seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  background: transparent;
  z-index: 5;
  pointer-events: none;
  /* solo se recortan los extremos laterales; la sombra puede salirse por abajo */
  overflow-x: clip;
  overflow-y: visible;
  contain: none;
}
.au-band--seam .au-band-strip--front { box-shadow: 0 6px 14px rgba(0, 0, 0, .28); }