/* =====================================================================
   AUSPICIADORES + PIE de la portada en vivo (maqueta v3, 26-oct)
   Réplica de la pantalla 3 de la landing (SponsorsFooter.tsx + Marquee.tsx
   + las reglas sponsor-* y marquee-* de landing/src/index.css), adaptada a
   una página con scroll: título gigante centrado, bajada, la estela de
   logos bajo el cursor (solo puntero fino y sin movimiento reducido), la
   cinta de logos en tarjetas blancas, y el pie con la dirección, las redes
   y el botón "Subir" montado sobre la línea.
   Dueño: TG.auspiciadores (auspiciadores.js). Prefijo de clases: au-.
   Medidas: las de la landing (px de Tailwind) salvo donde se dice.
   ===================================================================== */

.au-bloque {
  --au-fondo: #000;
  --au-texto-suave: rgba(255, 255, 255, 0.85);   /* bajada (text-white/85) */
  --au-texto-pie: rgba(255, 255, 255, 0.9);      /* dirección (text-white/90) */
  --au-linea: rgba(255, 255, 255, 0.15);         /* border-white/15 */
  --au-punto: var(--tg-rojo, #f5313e);           /* el "•" de la dirección */
  --au-riel: 24px;                               /* px-6 */
  --au-riel-pie: 24px;                           /* footer px-6 / md:px-16 */
  --au-subir-der: 20px;                          /* right-5 / md:right-12 */
  --au-slot: 96px;                               /* h-[96px] / md:h-[116px] */
  --au-tarjeta-h: 64px;                          /* h-[64px] / md:h-[76px] */
  --au-logo-h: 36px;                             /* h-9 / md:h-11 */
  --au-gap: 28px;
  --au-reserva: var(--tg-reserva-inferior, 0px); /* chrome flotante (pastilla del himno y El Timón) */

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  background: var(--au-fondo);
  color: #fff;
  font-family: var(--tg-font);
  line-height: 1.5;
}
.au-bloque[data-alto="contenido"] {
  min-height: 0;
}
.au-bloque[data-sangrado] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.au-bloque[data-reserva="0"] {
  --au-reserva: 0px;
}
/* fondo rojo (opción): el rojo ACCESIBLE, porque lleva texto blanco chico (4,53:1) */
.au-bloque[data-fondo="rojo"] {
  --au-fondo: var(--tg-rojo-a11y, #e12d39);
  --au-texto-suave: #fff;
  --au-texto-pie: #fff;
  --au-linea: color-mix(in srgb, #fff 38%, var(--tg-rojo-a11y, #e12d39));
  --au-punto: #fff;
}
@media (min-width: 48rem) {
  .au-bloque {
    --au-riel-pie: 64px;
    --au-subir-der: 48px;
    --au-slot: 116px;
    --au-tarjeta-h: 76px;
    --au-logo-h: 44px;
  }
}

/* ---------- estela bajo el cursor (.sponsor-trail) ---------- */
.au-estela {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}
.au-naipe {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;                            /* px-5 py-4 */
  border-radius: 16px;                           /* rounded-2xl */
  background: #fff;
  box-shadow: 0 10px 30px rgba(90, 5, 12, 0.3);
  animation: au-naipe-vida var(--au-vida, 1s) ease-out forwards;
}
.au-naipe img {
  display: block;
  height: 56px;                                  /* h-14 / md:h-16 */
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
@media (min-width: 48rem) {
  .au-naipe img { height: 64px; }
}
@keyframes au-naipe-vida {
  0% { opacity: 0; scale: 0.6; }
  12% { opacity: 1; scale: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; scale: 0.8; }
}
/* despedida al terminar el juego: bajan hacia la cinta y se funden */
.au-naipe--sale {
  animation: au-naipe-sale 760ms cubic-bezier(0.45, 0, 0.55, 1) forwards;
}
@keyframes au-naipe-sale {
  from { opacity: 1; translate: 0 0; scale: 1; }
  to { opacity: 0; translate: 0 92px; scale: 0.84; }
}

/* ---------- sección: título, bajada y señal ---------- */
.au {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.au-cabeza {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;                                     /* gap-4 / md:gap-6 */
  /* en la landing el pt-[96px] libra el header fijo; aquí el header no flota sobre
     esta sección, así que basta el aire */
  padding: clamp(48px, 9vh, 96px) var(--au-riel) 32px;
  text-align: center;
}
.au-titulo {
  margin: 0;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  /* text-[14vw]: en celular ya ocupa casi todo el ancho, no puede crecer con A+/A++ */
  font-size: 14vw;
}
.au-bajada {
  margin: 0;
  max-width: 640px;
  font-size: calc(18px * var(--a11y-fs));
  font-weight: 600;
  color: var(--au-texto-suave);
}
.au-senal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;                               /* mt-2 / md:mt-3 */
  transition: opacity 700ms ease, transform 700ms ease;
}
.au-senal[data-descubierta] {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.au-senal-cursor {
  display: inline-flex;
  flex: none;
  width: 24px;
  height: 24px;
  color: #fff;
  animation: au-vagar 2.6s ease-in-out infinite;
}
.au-senal-cursor svg {
  width: 100%;
  height: 100%;
}
.au-senal-brillo {
  font-size: calc(17px * var(--a11y-fs));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.55) 35%,
    #fff 47%,
    #ffd7db 53%,
    rgba(255, 255, 255, 0.55) 65%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: au-brillo 2.4s linear infinite;
}
@keyframes au-brillo {
  from { background-position: 180% 0; }
  to { background-position: -40% 0; }
}
@keyframes au-vagar {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(2px, 1px); }
}
@media (min-width: 48rem) {
  .au-cabeza { gap: 24px; }
  /* md:text-[min(120px,7.5vw)], y con A+/A++ crece hasta 10vw (nunca desborda) */
  .au-titulo { font-size: min(calc(min(120px, 7.5vw) * var(--a11y-fs)), 10vw); }
  .au-bajada { font-size: calc(24px * var(--a11y-fs)); }
  .au-senal { margin-top: 12px; }
  .au-senal-cursor { width: 32px; height: 32px; }
  .au-senal-brillo { font-size: calc(24px * var(--a11y-fs)); }
}

/* ---------- ranura de la cinta (alto reservado: montarla no mueve nada) ---------- */
.au-slot {
  position: relative;
  z-index: 5;
  height: var(--au-slot);
}
.au-entra {
  animation: au-entra 1450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes au-entra {
  from { opacity: 0; transform: translateY(52px) scale(0.97); filter: blur(10px); }
  60% { opacity: 1; filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.au-tarjeta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--au-tarjeta-h);
  padding: 0 24px;                               /* px-6 */
  border-radius: 16px;
  background: #fff;
}
.au-tarjeta img {
  display: block;
  height: var(--au-logo-h);
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

/* cinta en movimiento (.marquee-container + .marquee-track) */
.au-cinta {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 4px;
}
.au-cinta-mascara {
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
}
.au-pista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: au-cinta-corre 30s linear infinite;
  will-change: transform;
}
.au-mitad,
.au-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--au-gap);
}
.au-mitad { margin-right: var(--au-gap); }
@keyframes au-cinta-corre {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* pausas: fuera de la vista, por pedido del integrador (pausar()), con el puntero
   encima o con el foco de teclado en la cinta (WCAG 2.2.2) */
.au-bloque[data-au-fuera] .au-pista,
.au-bloque[data-au-pausa] .au-pista,
.au-cinta:focus-visible .au-pista {
  animation-play-state: paused;
}
@media (hover: hover) {
  .au-cinta:hover .au-pista { animation-play-state: paused; }
}
.au-bloque[data-au-fuera] .au-pista,
.au-bloque[data-au-pausa] .au-pista {
  will-change: auto;
}
.au-bloque[data-au-fuera] :is(.au-senal-brillo, .au-senal-cursor),
.au-bloque[data-au-pausa] :is(.au-senal-brillo, .au-senal-cursor) {
  animation-play-state: paused;
}

/* fila quieta (movimiento reducido o "Pausar animaciones"): los 20 logos, deslizable */
.au-fila {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 8px var(--au-riel);                   /* px-6 py-2 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
.au-fila-lista {
  display: flex;
  width: max-content;
  gap: var(--au-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* el anillo de foco va por dentro: el bloque recorta lo que sale */
.au-cinta:focus-visible,
.au-fila:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* ---------- pie ---------- */
.au-pie {
  position: relative;
  z-index: 20;
  padding: 0 var(--au-riel-pie) calc(20px + var(--au-reserva)); /* pb-5 / md:pb-6, más la reserva del chrome */
}
@media (min-width: 48rem) {
  .au-pie { padding-bottom: calc(24px + var(--au-reserva)); }
}
.au-pie-fila {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;                                     /* gap-5 */
  padding-top: 24px;                             /* pt-6 / md:pt-7 */
  border-top: 1px solid var(--au-linea);
}
@media (min-width: 48rem) {
  .au-pie-fila {
    flex-direction: row;
    flex-wrap: wrap;                             /* con A++ las redes bajan enteras, no se parten */
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding-top: 28px;
  }
}
.au-direccion {
  margin: 0;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 600;
  color: var(--au-texto-pie);
}
@media (min-width: 48rem) {
  .au-direccion { font-size: calc(15px * var(--a11y-fs)); }
}
.au-punto {
  margin: 0 8px;
  color: var(--au-punto);
}

/* redes: logos blancos monocromos, sin chips. Cada enlace mide 44×44 (área táctil) y
   la separación visual queda igual que en la landing (íconos de 24 px a 20 px) */
.au-redes {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin: -6px -10px;
}
.au-red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  transition: transform 200ms ease;
}
.au-red img {
  display: block;
  height: 24px;                                  /* h-6 */
  width: auto;
  max-width: 28px;
  object-fit: contain;
}
/* 3-nov (Camilo: "los logos de redes pueden tener el mismo porte todos? por ejemplo, el de instagram se ve
   pequeñísimo"): a 24 px de alto los archivos no se ven del mismo tamaño. El de Instagram trae margen propio (su
   tinta es el 75 % de la caja: 18 px), Facebook y LinkedIn llenan la caja (24 px) y YouTube, apaisado, quedaba
   topado por el ancho. Cada uno lleva su alto para que la tinta mida parecido (21 a 23 px; YouTube, 19 de alto
   por ser ancho); los cuadrados llenos (LinkedIn) y la X van un poco más chicos porque pesan más a la vista */
.au-red[data-red] img { max-width: none; }
.au-red[data-red="tiktok"] img { height: 24px; }      /* tinta 22 */
.au-red[data-red="instagram"] img { height: 29px; }   /* tinta 22 */
.au-red[data-red="facebook"] img { height: 23px; }
.au-red[data-red="youtube"] img { height: 19px; }     /* 27 de ancho */
.au-red[data-red="linkedin"] img { height: 21px; }
.au-red[data-red="x"] img { height: 21px; }
@media (hover: hover) and (pointer: fine) {
  .au-red:hover { transform: scale(1.15); }
}

/* "Subir": círculo blanco sobre la línea; la palabra se despliega a la izquierda */
.au-subir {
  position: absolute;
  top: 0;
  right: var(--au-subir-der);
  z-index: 20;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-rojo-a11y, #e12d39);
  font: inherit;
  font-size: calc(11px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transform: translateY(-50%);
}
.au-subir svg { flex: none; }
.au-subir-txt {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 300ms ease, opacity 300ms ease, margin-right 300ms ease;
}
.au-subir:hover .au-subir-txt,
.au-subir:focus-visible .au-subir-txt {
  max-width: 90px;
  margin-right: 8px;
  opacity: 1;
}
.au-subir:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- movimiento reducido (además del bloque general de base.css) ---------- */
@media (prefers-reduced-motion: reduce) {
  .au-pista,
  .au-senal-brillo,
  .au-senal-cursor,
  .au-entra,
  .au-naipe {
    animation: none;
  }
  .au-subir-txt,
  .au-senal,
  .au-red { transition: none; }
}
html[data-motion="off"] :is(.au-pista, .au-senal-brillo, .au-senal-cursor, .au-entra),
html[data-rm="1"] :is(.au-pista, .au-senal-brillo, .au-senal-cursor, .au-entra) {
  animation: none !important;
}

/* ---------- alto contraste ---------- */
html[data-contraste="1"] .au-bloque {
  --au-texto-suave: #fff;
  --au-texto-pie: #fff;
  --au-linea: #fff;
}
html[data-contraste="1"] .au-senal-brillo {
  background: none;
  color: #fff;
  animation: none;
}
html[data-contraste="1"] .au-tarjeta,
html[data-contraste="1"] .au-subir {
  box-shadow: 0 0 0 2px #fff;
}
html[data-contraste="1"] .au-subir-txt {
  max-width: 90px;
  margin-right: 8px;
  opacity: 1;
}
html[data-contraste="1"] .au-cinta-mascara {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (forced-colors: active) {
  .au-tarjeta,
  .au-naipe {
    forced-color-adjust: none;
    border: 2px solid CanvasText;
  }
  .au-subir {
    border: 2px solid ButtonText;
  }
  .au-red {
    border: 1px solid LinkText;
  }
  .au-senal-brillo {
    background: none;
    color: CanvasText;
  }
}