/* =====================================================================
   PRODUCCIÓN (4-nov): estilos que solo suman piezas nuevas; no cambia reglas existentes. Va al final.
   ===================================================================== */

/* ---- "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; }
}