/* ===== Hero mix — header de video con grilla =====
   Sistema de header tomado de lamalama.com y traducido a la identidad de Escena Global:
   la píldora, la barra inferior y el reveal por líneas son los mismos mecanismos, pero
   el mono en mayúsculas se reemplaza por Jost con tracking y el H1 va en Cormorant.
   Los tokens salen de styles.css; este archivo no define colores nuevos. */

.hero-mix {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: end;
  /* Sin esto, en una sola columna las filas se estiran y el titular queda flotando al medio. */
  align-content: end;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(5.5rem, 12vh, 7.5rem);
  overflow: hidden;
  background: var(--negro-escena);
  isolation: isolate;
}

.hero-mix__media { position: absolute; inset: 0; z-index: -2; }

.hero-mix__video,
.hero-mix__grilla {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mientras la grilla de píxeles dibuja el video, el <video> queda detrás sin pintar. */
.hero-mix__grilla { opacity: 0; transition: opacity 0.4s ease; }
.hero-mix[data-grilla="activa"] .hero-mix__grilla { opacity: 1; }
.hero-mix[data-grilla="activa"] .hero-mix__video { visibility: hidden; }

.hero-mix__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0) 22%),
    linear-gradient(to top, rgba(13, 13, 13, 0.94) 0%, rgba(13, 13, 13, 0.62) 22%, rgba(13, 13, 13, 0.18) 48%, rgba(13, 13, 13, 0) 68%);
}

/* ---- Titular y bajada, pegados al borde inferior ---- */

.hero-mix__titular {
  /* Única excepción tipográfica del sistema (DESIGN.md, confirmada con Axel): Playfair Display
     solo acá, por más contraste dramático en el titular más importante de la página. */
  font-family: "Playfair Display", "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 24px var(--legibility-shadow-soft);
}
.hero-mix__titular em { font-style: italic; color: var(--dorado); }

/* La bajada cae sobre las partes claras del video (los arcos), así que lleva su propia
   sombra larga además del scrim: sin eso desaparece justo en el cuadro más lindo. */
.hero-mix__bajada {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(250, 247, 240, 0.9);
  max-width: 34ch;
  padding-bottom: 0.65rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 22px rgba(0, 0, 0, 0.85);
}

/* Cada línea del reveal viaja dentro de su propia ventana. */
.linea-mascara { overflow: hidden; display: block; }

/* ---- Píldora flotante ---- */

.pildora {
  position: fixed;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(438px, calc(100% - 1.8rem));
  border-radius: 1.4rem;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(13, 13, 13, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
}

.pildora__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 0.45rem 0 0.8rem;
}

.pildora__marca { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.pildora__marca img { width: 20px; height: 20px; }

.pildora__mensaje {
  position: relative;
  text-align: center;
  font-family: var(--font-support);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plateado);
  white-space: nowrap;
  overflow: hidden;
}
/* La copia invisible reserva el ancho: sin ella la píldora late mientras se tipea. */
.pildora__mensaje-fantasma { visibility: hidden; }
.pildora__mensaje-vivo { position: absolute; inset: 0; display: block; }
.pildora__mensaje-vivo span { opacity: 0; }

.pildora__burger {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.pildora__burger span {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--blanco-calido);
  transition: transform 0.28s var(--ease-out-expo), opacity 0.2s linear;
}
.pildora[data-abierta="true"] .pildora__burger span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.pildora[data-abierta="true"] .pildora__burger span:nth-child(2) { opacity: 0; }
.pildora[data-abierta="true"] .pildora__burger span:nth-child(3) { transform: translateY(-2.5px) rotate(-45deg); }

.pildora__menu { height: 0; overflow: hidden; }
.pildora__menu-inner { padding: 0.25rem 0.85rem 0.9rem; display: grid; gap: 0.15rem; }
.pildora__menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--blanco-calido);
  border-bottom: 1px solid var(--hairline-on-dark);
}
.pildora__menu a::after { content: "( + )"; font-size: 0.6rem; letter-spacing: 0.12em; color: var(--dorado-soft); }
.pildora__menu a:hover { color: var(--dorado); }
/* El link de idioma no es una sección del sitio: sin el "( + )" de arriba. */
.pildora__menu a.pildora__lang::after { content: none; }

/* ---- Barra inferior ---- */

.barra {
  position: fixed;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-support);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(200, 200, 200, 0.78);
}

.barra__linea {
  flex: 1 1 auto;
  height: 1px;
  min-width: 2rem;
  background: linear-gradient(to right, var(--dorado-soft), rgba(212, 175, 55, 0.08));
  transform: scaleX(0);
  transform-origin: left center;
}

.barra__dato { white-space: nowrap; text-shadow: 0 1px 3px var(--legibility-shadow-tight), 0 2px 12px var(--legibility-shadow-soft); }
.barra__reloj { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.barra__punto {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: var(--dorado);
  vertical-align: middle;
}

.barra__acciones { display: flex; align-items: center; gap: 0.45rem; }

.barra__btn {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--blanco-calido);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.barra__btn:hover { border-color: var(--dorado-soft); color: var(--dorado); }
.barra__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.barra__btn svg[hidden] { display: none; }   /* el grid del botón ignora el atributo hidden solo */
.barra__btn svg.relleno { fill: currentColor; stroke: none; }

/* El botón de sonido es el único control del hero: va más grande que un ícono de barra
   y con el dorado de la marca, para que se vea que ahí se apaga la música. */
.barra__btn--sonido {
  width: 2.75rem;
  height: 2.75rem;
  border-color: var(--dorado-soft);
  color: var(--dorado);
}
.barra__btn--sonido:hover { background: rgba(212, 175, 55, 0.14); }

/* Ecualizador del botón de sonido: cuatro barras que se mueven con el tema. */
.eq { display: flex; align-items: center; gap: 3px; height: 17px; }
.eq span {
  display: block;
  width: 2.5px;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  transform: scaleY(0.18);
  transform-origin: center;
}
.barra__btn[aria-pressed="true"] { border-color: var(--dorado-soft); color: var(--dorado); }

.barra__cta {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--dorado);
  color: var(--negro-escena);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease;
}
.barra__cta:hover { background: var(--dorado-hover); }

@media (max-width: 1180px) {
  .hero-mix {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    padding-bottom: clamp(6.5rem, 16vh, 9rem);
  }
  .hero-mix__titular { max-width: 14ch; }
  .hero-mix__bajada { max-width: 40ch; padding-bottom: 0; }
  .barra { gap: 0.55rem; flex-wrap: wrap; }
  .barra__oculta-movil { display: none; }
  .barra__linea { min-width: 1.5rem; }
}

/* ---- Relevo con la nav del sitio ----
   Dos headers a la vez se ven como un error. Sobre el hero manda la píldora; apenas
   el hero se va, la píldora y la barra se retiran y vuelve la nav de siempre. */

/* La nav era `position: sticky` y reservaba su altura arriba de todo: con el hero a 100dvh
   eso empujaba el titular fuera de la pantalla. Pasa a fija (nunca vuelve al flujo, así no
   hay salto al aparecer) y sobre el hero se retira. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.4s ease, transform 0.45s var(--ease-out-expo);
}
body[data-en-hero="true"] .nav { opacity: 0; pointer-events: none; transform: translateY(-100%); }

.pildora, .barra { transition: opacity 0.35s ease, transform 0.45s var(--ease-out-expo); }
body[data-en-hero="false"] .pildora { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-120%); }
body[data-en-hero="false"] .barra { opacity: 0; pointer-events: none; transform: translateY(150%); }

/* Sin movimiento: el video queda en el poster y todo se muestra ya resuelto. */
html[data-motion="estatico"] .barra__linea { transform: scaleX(1); }
html[data-motion="estatico"] .pildora__mensaje-vivo span { opacity: 1; }
html[data-motion="estatico"] .barra__punto { opacity: 1; }
/* ---- Botón de música: flotante, en todo el sitio (Axel, 17/09) ----
   Apagado invita: círculo dorado con un ecualizador quieto, "Activá la música" y una onda que late.
   Prendido se achica al círculo con el ecualizador moviéndose con el tema, para no molestar. */
.musica {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.4rem 1.05rem 0.4rem 0.4rem; border-radius: 999px;
  /* sin backdrop-filter: el botón está siempre encima de videos y el desenfoque se recalcula cada cuadro */
  border: 1px solid rgba(212, 175, 55, 0.55); background: rgba(13, 13, 13, 0.86);
  color: var(--blanco-calido); cursor: pointer;
  font-family: var(--font-support); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: bottom 0.45s var(--ease-out-expo), padding 0.35s var(--ease-out-expo), border-color 0.3s ease, opacity 0.3s ease;
}
.musica:hover { border-color: var(--dorado); }
.musica:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }
.musica__icono {
  position: relative; width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--dorado); color: var(--negro-escena);
  transition: background 0.3s ease, color 0.3s ease;
}
.musica__icono::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--dorado);
  animation: musica-onda 2.3s ease-out infinite; pointer-events: none; will-change: transform, opacity;
}
@keyframes musica-onda { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.75); opacity: 0; } }
/* ecualizador quieto con forma de sonido mientras está apagado (el JS pone scaleY en línea al moverse) */
html:not(.con-musica) .musica .eq span:nth-child(1) { transform: scaleY(0.45) !important; }
html:not(.con-musica) .musica .eq span:nth-child(2) { transform: scaleY(0.85) !important; }
html:not(.con-musica) .musica .eq span:nth-child(3) { transform: scaleY(0.6) !important; }
html:not(.con-musica) .musica .eq span:nth-child(4) { transform: scaleY(0.95) !important; }
html.con-musica .musica { padding-right: 0.4rem; gap: 0; }
html.con-musica .musica__texto { max-width: 0; opacity: 0; }
.musica__texto { max-width: 12rem; overflow: hidden; white-space: nowrap; transition: max-width 0.35s var(--ease-out-expo), opacity 0.25s ease; }
html.con-musica .musica__icono { background: rgba(212, 175, 55, 0.12); color: var(--dorado); }
html.con-musica .musica__icono::after { animation: none; opacity: 0; }
/* sobre la barra del hero, para no taparle el "Cotizá tu evento" */
body[data-en-hero="true"]:not([data-en-puerta]) .musica { bottom: 4.3rem; }
@media (max-width: 720px) {
  /* En celular el texto solo se ve en la pantalla de entrada; en el resto queda el círculo con la onda,
     que tapaba la bajada del hero, el botón de WhatsApp y el pie. En el hero sube arriba a la derecha. */
  .musica { right: 0.75rem; bottom: 0.75rem; font-size: 0.7rem; }
  body:not([data-en-puerta]) .musica { padding-right: 0.4rem; gap: 0; }
  body:not([data-en-puerta]) .musica__texto { max-width: 0; opacity: 0; }
  body[data-en-hero="true"]:not([data-en-puerta]) .musica { bottom: auto; top: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) { .musica__icono::after { animation: none; opacity: 0.6; } }

/* El botón es fijo en la esquina: en pantallas chicas puede terminar justo sobre el CTA de una
   tarjeta de paquete o el caption de un show. hero-header.js mide la geometría real (mismo
   criterio que el relevo de la nav) y pone esta clase mientras se superponen; no se saca del
   documento (sigue anunciándose a lectores de pantalla), solo se aparta visualmente y deja de
   competir por el tap. */
.musica--aparte { opacity: 0.32; pointer-events: none; }