/* =====================================================================
   PASTILLA DEL HIMNO DE LA LANDING GRACIAS (7-nov). Ver himno/pastilla.js.
   Las reglas de la pastilla, la huincha, la hoja y "Escúchalo en Spotify" son COPIA de la portada en vivo
   (produccion-envivo/fuente/v3/src/base.css, sección 6.4, y v3/prod/prod.css); lo propio de la gracias va al final
   ("ADAPTACIÓN A LA GRACIAS"). Las variables --tg-* que la gracias no tenía se declaran en .tgc-himno (no salen de él);
   --tg-font, --tg-rojo y --tg-rojo-a11y ya las da auspiciadores.css en :root, y --a11y-fs, header/base.js.
   ===================================================================== */
.tgc-himno {
  --tg-noche: #160307;
  --tg-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --tg-ease-material: cubic-bezier(0.4, 0, 0.2, 1);
  --tg-z-himno: 70; /* sobre la cápsula del header (60) y bajo su menú (100) */
  --tg-foco-claro: #fff;
}
.tgc-himno .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.tgc-himno [hidden] { display: none !important; }
.tgc-himno :where(button) { font: inherit; }
.tgc-himno .tg-icon { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
.tgc-himno .tg-icon--relleno { fill: currentColor; }
.tgc-himno .tg-foco:focus-visible { outline: 3px solid var(--tg-foco-claro); outline-offset: 2px; }
.tgc-himno { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; }

@keyframes tile-heart-beat {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.32); }
  20% { transform: scale(1); }
  30% { transform: scale(1.24); }
}
@keyframes himno-ribbon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes himno-marq {
  to { transform: translateX(-50%); }
}
@keyframes himno-eq {
  0%, 100% { transform: scaleY(0.32); }
  50% { transform: scaleY(1); }
}
@keyframes tg-sube {
  from { transform: translateY(100%); }
}

/* ---- 6.4 Pastilla del himno (index.css:1330-1446) ---- */
.tgc-himno {
  position: fixed;
  inset: 0;
  z-index: var(--tg-z-himno);
  pointer-events: none;
  font-family: var(--tg-font);
}
.tgc-pill {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  max-width: calc(100vw - 32px);
  pointer-events: auto;
  transition: bottom 0.35s var(--tg-ease-material), opacity 0.2s ease, transform 0.2s ease;
}
.tgc-pill-anillo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.tgc-pill-anillo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  background: conic-gradient(#000, var(--tg-rojo), #fff, var(--tg-rojo), #000, var(--tg-rojo), #fff, var(--tg-rojo), #000);
  will-change: transform;
  animation: himno-ribbon 4.2s linear infinite;
}
/* Play de la pastilla: círculo rojo de 36 (la landing) en un botón de 44 × 44 (área táctil).
   El círculo lo dibuja ::before 4 px adentro; el margen negativo conserva el alto de 52 de la
   pastilla y su ancho. El foco se acerca 2 px para quedar a 2 px del círculo visible. */
.tgc-pill-play {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tgc-pill-play::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
}
.tgc-pill-play:focus-visible { outline-offset: -2px; }
.tgc-pill-play .tg-icon { width: 15px; height: 15px; }
.tgc-pill-corazon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--tg-rojo);
}
.tgc-late { animation: tile-heart-beat 1.9s ease-in-out infinite; transform-origin: center; }
.tgc-eq {
  display: inline-flex;
  flex: none;
  align-items: flex-end;
  gap: 2.5px;
  height: 15px;
}
.tgc-eq i {
  width: 3px;
  height: 35%;
  border-radius: 2px;
  background: var(--tg-rojo);
  transform-origin: bottom;
}
.tgc-eq.is-on i { animation: himno-eq 0.9s ease-in-out infinite; }
.tgc-eq i:nth-child(1) { animation-delay: 0s; }
.tgc-eq i:nth-child(2) { animation-delay: 0.18s; }
.tgc-eq i:nth-child(3) { animation-delay: 0.36s; }
.tgc-eq i:nth-child(4) { animation-delay: 0.09s; }
.tgc-pill-marq {
  flex: 0 1 auto;
  min-width: 0;
  width: clamp(118px, 40vw, 168px);
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tgc-pill-pista {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: himno-marq 13s linear infinite;
}
.tgc-pill-unidad { display: inline-flex; align-items: center; padding-right: 30px; }
/* 29-oct: 14 px como mínimo en la portada (antes 13 y 12; el alto de la pastilla no cambia: lo dan sus botones de 44) */
.tgc-pill-cancion { font-weight: 800; font-size: calc(14px * var(--a11y-fs)); color: #fff; }
.tgc-pill-x { margin: 0 8px; font-weight: 800; font-size: calc(14px * var(--a11y-fs)); color: rgba(255, 255, 255, 0.55); }
.tgc-pill-artistas { font-weight: 600; font-size: calc(14px * var(--a11y-fs)); color: rgba(255, 255, 255, 0.82); }
.tgc-pill-cerrar {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
/* ▼ de la pastilla: círculo de 26 (la landing) en un botón de 44 × 44. Cabe sin tocar a nadie:
   9 px a la izquierda es la separación con la marquesina (decorativa) y a la derecha y arriba
   y abajo cae en el relleno de la pastilla. El foco queda a 2 px del círculo visible. */
.tgc-pill-mas {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tgc-pill-mas::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.tgc-pill-mas:focus-visible { outline-offset: -7px; }
.tgc-pill-mas .tg-icon { width: 15px; height: 15px; }
.tgc-pill-cerrar .tg-icon { width: 13px; height: 13px; }
.tgc-pill-cerrar:hover,
.tgc-pill-cerrar:focus-visible { background: rgba(255, 255, 255, 0.22); }
@media not all and (min-width: 48rem) {
  .tgc-pill {
    border-color: rgba(255, 255, 255, 0.68);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.45);
    max-width: calc(100vw - 88px);
  }
}
/* pantallas muy angostas (<23rem): corazón y ecualizador ceden su espacio a la marquesina */
@media not all and (min-width: 23rem) {
  .tgc-pill-corazon,
  .tgc-pill .tgc-eq { display: none; }
}
@media (min-width: 48rem) {
  .tgc-pill { left: 48px; bottom: 64px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 29-oct (F19): en el iPhone apaisado la pastilla no entra en la zona de la isla ni en la del indicador de
     inicio (env() vale 0 fuera del iPhone: ahí sigue en 16 y 12). base.js suma el mismo inset a las reservas.
     F14 (cerrar): de lado, el riel de 16 más el área segura, el del header y el del flotante que va con ella */
  .tgc-pill {
    left: calc(16px + env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}
/* tapada por El Timón: oculta e inerte (el audio sigue) */
.tgc-himno[data-cubierto] .tgc-pill,
.tgc-himno[data-cubierto] .tgc-barra {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(14px);
}
.tgc-himno[data-cubierto] .tgc-pill-anillo::before,
.tgc-himno[data-cubierto] .tgc-eq i,
.tgc-himno[data-cubierto] .tgc-late,
.tgc-himno[data-cubierto] .tgc-pill-pista {
  animation-play-state: paused;
}

/* huincha de escritorio (≥48rem) */
.tgc-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 28px;
  background: #000;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.tgc-barra-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
  color: #fff;
  cursor: pointer;
}
.tgc-barra-play .tg-icon { width: 18px; height: 18px; }
.tgc-barra-corazon { flex: none; width: 24px; height: 24px; color: var(--tg-rojo); }
.tgc-barra-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(16px * var(--a11y-fs));
}
.tgc-barra-titulo b { font-weight: 800; }
.tgc-barra-sub { color: rgba(255, 255, 255, 0.6); font-weight: 600; }
/* ▲ de la huincha: círculo de 36 en un botón de 44 × 44 (la huincha también se usa en tablet táctil) */
.tgc-barra-cerrar {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tgc-barra-cerrar::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.tgc-barra-cerrar:focus-visible { outline-offset: -2px; }
/* 29-oct (F19): la huincha va de borde a borde; en el iPhone apaisado sus botones se apartan de la isla y del
   indicador de inicio por relleno (border-box: el alto de 72 no cambia, ni su reserva). Va DESPUÉS de la regla
   base de .tgc-barra (padding 0 28px): antes de ella, la cascada la pisaba. El ▲ tiene margin -4px: a la
   derecha se suman esos 4 px para que el botón entero quede fuera de la isla */
@media (orientation: landscape) and (max-height: 500px) {
  .tgc-barra {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, calc(env(safe-area-inset-right) + 4px));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* reproductor del himno a pantalla completa (celular) */
.tgc-hoja {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 72px 24px 32px;
  overflow-y: auto;
  background: #000;
  color: #fff;
  pointer-events: auto;
  text-align: center;
  animation: tg-sube 0.32s var(--tg-ease-expo);
}
.tgc-hoja-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-noche);
  font-weight: 800;
  font-size: calc(15px * var(--a11y-fs));
  cursor: pointer;
}
.tgc-hoja-portada {
  width: min(64vw, 260px);
  aspect-ratio: 1;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.tgc-hoja-titulo { margin: 8px 0 0; font-size: calc(24px * var(--a11y-fs)); font-weight: 800; line-height: 1.15; }
.tgc-hoja-artistas { margin: 0; font-size: calc(16px * var(--a11y-fs)); font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.tgc-hoja .tgc-eq { height: 22px; }
.tgc-hoja .tgc-eq i { width: 4px; }
.tgc-hoja-play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
  color: #fff;
  cursor: pointer;
}

/* ---- "Escúchalo en Spotify" del himno (base.js, PROD-P05): en la huincha (≥ 48rem) y en la hoja (celular).
   El verde de Spotify sobre noche (#1ed760 sobre #000: 11,9:1), como .himno-spotify de la landing; 44 de alto
   para el dedo; con A+ y A++ crece el texto, no el chrome ---- */
.tgc-spotify {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(30, 215, 96, 0.5);
  border-radius: 999px;
  background: rgba(30, 215, 96, 0.14);
  color: #1ed760;
  font-weight: 700;
  font-size: calc(13px * var(--a11y-fs));
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.tgc-spotify .tg-icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .tgc-spotify:hover { background: rgba(30, 215, 96, 0.24); }
}
/* en la hoja: bajo el botón de reproducir, un poco más grande */
.tgc-hoja .tgc-spotify {
  margin-top: 6px;
  font-size: calc(15px * var(--a11y-fs));
  padding: 0 18px;
}
/* en la huincha de una ventana angosta (48rem a ~60rem) el título cede su ancho: el enlace queda entero.
   4-nov (revisión uso-2): ahí el título usa hasta DOS líneas en vez de cortarse con "…" (en 768 px, y con A+ y A++ hasta
   unos 930 px, quedaba "Súmate a lo que nos une × Princesa …" y se perdían las intérpretes). Caben en la huincha de
   72 px (48 de alto con A++); medido en Chrome, WebKit y Firefox sin letras cortadas (trabajo/esceptico-uso-2) */
@media (max-width: 60rem) {
  .tgc-barra .tgc-spotify { padding: 0 12px; }
  .tgc-barra-titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.15;
  }
}

/* ---- 4-nov (revisión uso-1): la hoja del himno (celular) en pantallas bajas. Con el enlace de Spotify (50 px más 14
   de separación) la columna centrada no cabía: Chrome aplastaba el botón Reproducir (64 x 26 en 375 x 553) y WebKit
   subía la portada bajo Cerrar, fuera de alcance (un flex centrado no deja desplazar lo que se sale por arriba).
   "safe center" centra si cabe y, si no, parte arriba y se desplaza; las piezas no se encogen. Donde cabe, nada
   cambia (390 x 844: portada de 250). Achicar la portada para que Spotify quepa sin desplazar es otra decisión
   (de diseño): no va aquí ---- */
.tgc-hoja { justify-content: safe center; }
.tgc-hoja > * { flex-shrink: 0; }
/* un navegador que no entiende "safe" (Safari antes de 17.6): el mismo resultado con márgenes automáticos */
@supports not (justify-content: safe center) {
  .tgc-hoja { justify-content: flex-start; }
  .tgc-hoja-portada { margin-top: auto; }
  .tgc-hoja > :last-child { margin-bottom: auto; }
}
html[data-contraste="1"] .tgc-spotify {
  border: 2px solid #fff;
  background: #000;
  color: #fff;
}
@media (forced-colors: active) {
  .tgc-spotify {
    border: 2px solid LinkText;
    background: Canvas;
    color: LinkText;
  }
}

/* ---- el <noscript> de index.html: contenido real (h1, cuándo, Dona aquí, YouTube y la landing), no texto oculto.
   Sin JavaScript la página queda en el rojo del fondo: el bloque va sobre noche (blanco sobre el rojo #f5313e da
   3,9:1, bajo AA para el texto de 18 px; sobre noche, 21:1) ---- */
.vt-noscript {
  max-width: 40rem;
  margin: 96px 16px 0;
  padding: 28px 24px;
  border-radius: 18px;
  background: #000;
  color: #fff;
  line-height: 1.35;
}
.vt-noscript h1 {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.1;
}
.vt-noscript p { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.vt-noscript a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (forced-colors: active) {
  .vt-noscript a { color: LinkText; }
}

/* ---- Alto contraste y colores forzados (copia de base.css 6.6, solo lo de la pastilla) ---- */
html[data-contraste="1"] .tgc-pill,
html[data-contraste="1"] .tgc-barra,
html[data-contraste="1"] .tgc-hoja {
  background: #000 !important;
  border: 2px solid #fff !important;
}
html[data-contraste="1"] .tgc-pill-anillo { display: none; }
@media (forced-colors: active) {
  .tgc-pill-anillo { display: none; }
  .tgc-pill,
  .tgc-barra,
  .tgc-hoja { border: 2px solid CanvasText; }
  .tgc-pill-play::before,
  .tgc-pill-mas::before,
  .tgc-barra-cerrar::before { border: 2px solid ButtonText; }
  .tgc-barra-play,
  .tgc-hoja-play,
  .tgc-hoja-cerrar { border: 2px solid ButtonText; }
}

/* =====================================================================
   ADAPTACIÓN A LA GRACIAS
   ===================================================================== */
/* el menú del header abierto (header/base.js marca data-gh-menu): la pastilla no flota sobre él */
html[data-gh-menu] .tgc-himno { visibility: hidden; }
/* la hoja no arrastra el scroll de la página de atrás */
.tgc-hoja { overscroll-behavior: contain; }
/* "Pausar animaciones" del header (data-rm) y el movimiento reducido: todo quieto (la marquesina vuelve a su inicio,
   el ecualizador queda en barras fijas y el latido en reposo). La hoja aparece sin subir */
html[data-rm="1"] .tgc-pill-anillo::before,
html[data-rm="1"] .tgc-pill-pista,
html[data-rm="1"] .tgc-eq i,
html[data-rm="1"] .tgc-late,
html[data-rm="1"] .tgc-hoja {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .tgc-pill-anillo::before,
  .tgc-pill-pista,
  .tgc-eq i,
  .tgc-late,
  .tgc-hoja { animation: none !important; }
  .tgc-pill { transition: none; }
}
/* el pie de los auspiciadores deja abajo el alto de la pastilla (o de la huincha), para que no tape el último texto:
   la variable que ya usa auspiciadores-portada.css (--au-reserva), por encima de su data-reserva="0" */
#gracias-auspiciadores .au-bloque { --au-reserva: 76px; }
@media (min-width: 48rem) {
  #gracias-auspiciadores .au-bloque { --au-reserva: 124px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #gracias-auspiciadores .au-bloque { --au-reserva: 72px; }
}
html[data-himno-barra] #gracias-auspiciadores .au-bloque { --au-reserva: 80px; }
/* la pestaña "Gestiona tu privacidad" del banner de Complianz (abajo a la derecha): con la huincha abierta se apoya
   sobre ella, entera y quieta (si no, tapaba su ▲; en 768 px vale la pestaña lateral del celular del kit de Want), y
   con la hoja abierta (modal, celular) no se ve. Al contraer, vuelve a su lugar */
html[data-himno-barra] #cmplz-manage-consent .cmplz-manage-consent:not(.cmplz-hidden):not(.cmplz-dismissed) {
  bottom: 72px;
  animation: none;
}
@media (max-width: 768px) {
  html[data-himno-barra] #cmplz-manage-consent .cmplz-manage-consent:not(.cmplz-hidden):not(.cmplz-dismissed) { bottom: 84px; }
}
html[data-himno-hoja] #cmplz-manage-consent { display: none; }