* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100vw; height: 100vh; height: 100dvh;
  background: #000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  color: #fff;
  cursor: none;
}

.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}

/* Media (video o imagen) ocupa todo */
.stage img, .stage video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

/* Modo Artista: forzar fondo NEGRO solo en el stage y en el video/img de fondo
   (NO afectar el logo overlay que necesita transparencia). */
.stage.stage-artist { background: #000 !important; }
.stage.stage-artist > video,
.stage.stage-artist > img { background: #000 !important; }
/* El logo del overlay debe ser transparente, sin fondo */
.stage.stage-artist .overlay-logo,
.stage.stage-artist .overlay-logo img { background: transparent !important; }

/* Cuando el contenido es vertical, fondo blur del mismo */
.stage.has-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg-blur) center/cover;
  filter: blur(40px) brightness(0.4);
  z-index: 0;
}
.stage.has-bg > img,
.stage.has-bg > video {
  position: relative; z-index: 1;
}

/* === OVERLAY DEL LOCAL — solo logo grande, sin texto === */
.overlay-logo {
  position: fixed; top: 28px; left: 28px;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.overlay-logo.logo-only {
  padding: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.overlay-logo img {
  width: clamp(80px, 9vw, 140px);
  height: auto;
  max-height: clamp(60px, 7vh, 120px);
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}
.overlay-logo .name { display: none; }

.overlay-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: 30px 32px 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.65) 60%, transparent);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
}
.overlay-cta .cta-text {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.overlay-cta .cta-num {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent, #FF3B82);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 20px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.overlay-cta .cta-num svg {
  width: 24px; height: 24px;
}

.overlay-counter {
  position: fixed; top: 28px; right: 28px;
  z-index: 10;
  padding: 8px 14px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  font-family: 'SF Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
}

#yt-player {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* === SLOT PROPIO premium "Anúnciate aquí" con QR + animaciones + fotos rotando === */
.stage-house {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(232,197,71,0.22) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 85% 80%, rgba(212,175,55,0.18) 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(139,105,20,0.12) 0%, transparent 70%),
    linear-gradient(135deg, #14110a 0%, #0A0A0C 65%, #050505 100%);
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden;
  box-sizing: border-box;
}
.stage-house > .bg-rotator,
.stage-house > .bg-overlay { 
  position: absolute !important; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
}
.stage-house > .house-body { 
  position: relative; 
  z-index: 10; 
  padding: clamp(20px, 4vh, 60px) clamp(20px, 4vw, 60px);
}

/* Capa de 4 fotos rotando como fondo (baja opacidad para no competir con el contenido) */
.bg-rotator {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
}
.bg-rotator .bg-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: bg-fade 28s infinite;
  transform: scale(1.05) translateZ(0);
  will-change: opacity;
  backface-visibility: hidden;
}
.bg-rotator .bg-slide:nth-child(1) { animation-delay: 0s;  }
.bg-rotator .bg-slide:nth-child(2) { animation-delay: 7s;  }
.bg-rotator .bg-slide:nth-child(3) { animation-delay: 14s; }
.bg-rotator .bg-slide:nth-child(4) { animation-delay: 21s; }
@keyframes bg-fade {
  0%   { opacity: 0; }
  4%   { opacity: 0.45; }
  25%  { opacity: 0.45; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Velo oscuro encima para que el contenido se lea siempre */
.stage-house > .bg-overlay {
  position: absolute !important;
  inset: 0;
  z-index: 1 !important;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 100%);
}
/* Capa de luz volumétrica estática (la versión animada con conic-gradient
   rotando consume mucho GPU en TVs Android; ahora sin animar) */
.stage-house::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(232,197,71,0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 60%, rgba(212,175,55,0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.stage-house > * { position: relative; z-index: 2; }

/* Badge "Premium Spot" — ahora dentro del bloque de texto, arriba del título */
.house-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: clamp(6px, 1vh, 10px) clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(12px, 2.2vh, 24px);
  background: linear-gradient(135deg, rgba(232,197,71,0.20), rgba(212,175,55,0.06));
  border: 1px solid rgba(232,197,71,0.55);
  border-radius: 999px;
  font-size: clamp(11px, 1.4vh, 16px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 700;
  color: #E8C547;
  text-shadow: 0 0 10px rgba(232,197,71,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-self: flex-start;
}
.house-badge::before, .house-badge::after {
  content: '✦';
  font-size: 14px;
  color: #E8C547;
  animation: twinkle 2.4s ease-in-out infinite;
}
.house-badge::after { animation-delay: 1.2s; }
@keyframes twinkle {
  0%,100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.house-logo {
  max-width: min(28vw, 360px);
  max-height: min(22vh, 220px);
  width: auto;
  height: auto;
  align-self: center;
  margin-bottom: clamp(14px, 2.5vh, 28px);
}
.house-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 90px);
  width: 100%;
  max-width: min(1700px, 96vw);
}
.house-text {
  flex: 1;
  min-width: 0;
  max-width: min(720px, 50vw);
}
.house-text h1 {
  font-size: clamp(32px, 6.5vw, 84px);
  font-weight: 800;
  letter-spacing: -0.030em;
  line-height: 1.02;
  margin-bottom: clamp(10px, 2vh, 22px);
  background: linear-gradient(135deg, #FFF3D1 0%, #F4D77A 30%, var(--accent, #D4AF37) 55%, #8B6914 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 24px rgba(232,197,71,0.30));
  text-transform: uppercase;
}
.house-text p {
  font-size: clamp(14px, 1.8vw, 26px);
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  margin-bottom: clamp(14px, 2.6vh, 28px);
  font-weight: 300;
  letter-spacing: 0.01em;
}
.house-text p b {
  color: #E8C547;
  font-weight: 600;
}
.house-scan {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(12px, 1.3vw, 18px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0A0C;
  background: linear-gradient(135deg, #F4D77A, var(--accent, #D4AF37));
  padding: clamp(8px, 1.2vh, 14px) clamp(16px, 2vw, 26px);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(232,197,71,0.45);
  animation: scan-pulse 2.2s ease-in-out infinite;
}
.house-scan::after {
  content: '→';
  font-size: clamp(14px, 1.6vw, 22px);
  animation: arrow-bounce 1.4s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%,100% { box-shadow: 0 8px 28px rgba(232,197,71,0.45); }
  50% { box-shadow: 0 12px 48px rgba(232,197,71,0.80); }
}
@keyframes arrow-bounce {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.house-qr {
  width: clamp(220px, 32vw, 480px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 2.2vw, 30px);
  background: #fff;
  border-radius: clamp(20px, 2.6vw, 32px);
  box-shadow:
    0 0 0 4px rgba(232,197,71,0.50),
    0 0 100px rgba(232,197,71,0.55),
    0 24px 72px rgba(0,0,0,0.55);
  animation: qr-glow 3.6s ease-in-out infinite;
}
@keyframes qr-glow {
  0%,100% {
    box-shadow:
      0 0 0 4px rgba(232,197,71,0.50),
      0 0 100px rgba(232,197,71,0.55),
      0 24px 72px rgba(0,0,0,0.55);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(232,197,71,0.75),
      0 0 160px rgba(232,197,71,0.85),
      0 28px 90px rgba(0,0,0,0.60);
  }
}
.house-qr canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}
.house-qr-label { display: none; }
/* .house-wa removido — solo QR como único CTA */

.house-qr-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.4vh, 16px);
  flex-shrink: 0;
}
.house-qr-caption {
  font-size: clamp(11px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(232,197,71,0.85);
  text-shadow: 0 0 12px rgba(232,197,71,0.30);
  text-align: center;
}

/* Mobile/portrait safety: si la pantalla del TV es 9:16 vertical o pequeña */
@media (max-aspect-ratio: 4/3) {
  .house-body { flex-direction: column; gap: clamp(16px, 3vh, 30px); }
  .house-text { max-width: 92vw; text-align: center; }
  .house-badge { align-self: center; }
  .house-qr { width: clamp(200px, 50vw, 320px); }
}
/* TVs muy bajos (pantallas chiquitas o vista escala 720p) */
@media (max-height: 720px) {
  .house-logo { max-height: 18vh; }
  .stage-house { padding: clamp(12px, 2vh, 30px) clamp(20px, 3vw, 50px); }
}

/* === LOADING / ERROR === */
.stage-loading { background: #000; }
.loading { display: flex; gap: 14px; }
.loading-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  animation: pulse 1.2s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.error-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px;
}
.error-overlay[hidden] { display: none !important; }
.error-overlay h1 { font-size: 48px; margin-bottom: 12px; }
.error-overlay p { font-size: 20px; color: rgba(255,255,255,0.65); }

/* === Transición cinemática entre ads (zoom-fade + blur clear) === */
.stage-fade {
  animation: stageEnter 700ms cubic-bezier(.22,.9,.30,1.05) forwards;
  will-change: opacity, transform, filter;
}
.stage-fade > img, .stage-fade > video {
  animation: stageEnter 700ms cubic-bezier(.22,.9,.30,1.05) forwards;
  will-change: opacity, transform, filter;
}
@keyframes stageEnter {
  from { opacity: 0; transform: scale(1.06); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === MENSAJES ESPECIALES (cumple, brindis, despedida, VIP, anuncio) === */
.stage-message {
  background: #000;
  position: fixed; inset: 0;
  overflow: hidden;
  padding: 0;
}
.msg-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, #1a0a2e 0%, #06030c 70%, #000 100%);
}
/* Background premium (foto Higgsfield) — opacity 55% para que el texto se lea claro encima */
.msg-bg-photo {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
/* Overlay oscuro denso en el centro (donde va el texto) para legibilidad máxima */
.msg-bg-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0.20) 70%, rgba(0,0,0,0.65) 100%);
}
.msg-bg-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--c1) 28%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--c2) 25%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--c1) 22%, transparent) 0%, transparent 55%);
  animation: msg-bg-pulse 4s ease-in-out infinite;
}
@keyframes msg-bg-pulse {
  0%,100% { opacity: 0.85; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.06); }
}
.msg-neon-lines {
  position: absolute; inset: 0;
  pointer-events: none;
}
.msg-neon-lines i {
  position: absolute;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--c1), transparent);
  box-shadow: 0 0 24px var(--c1), 0 0 48px var(--c1);
  opacity: 0.65;
}
.msg-neon-lines i:nth-child(1) { top: 14%; animation: neon-slide 7s linear infinite; }
.msg-neon-lines i:nth-child(2) { top: 50%; animation: neon-slide 9s linear infinite reverse; opacity: 0.4; }
.msg-neon-lines i:nth-child(3) { top: 86%; animation: neon-slide 6s linear infinite; }
@keyframes neon-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.msg-content {
  position: relative; z-index: 5;
  text-align: center;
  padding: 0 clamp(20px, 4vw, 60px);
  max-width: 94vw;
  width: 100%;
  box-sizing: border-box;
  animation: msg-enter 0.8s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes msg-enter {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.msg-kicker {
  font-size: clamp(14px, 2vw, 28px);
  letter-spacing: 0.42em;
  color: var(--c1);
  font-weight: 600;
  margin-bottom: clamp(12px, 2vh, 24px);
  text-shadow: 0 0 18px var(--c1), 0 0 36px color-mix(in srgb, var(--c1) 50%, transparent);
  animation: msg-glow 2.4s ease-in-out infinite;
}
.msg-mid {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 6.5vw, 88px);
  color: #fff;
  margin-bottom: clamp(6px, 1vh, 12px);
  text-shadow: 0 4px 32px rgba(255,255,255,0.40), 0 0 80px rgba(255,255,255,0.20);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.msg-big {
  /* Start point conservador. El JS auto-shrink reduce más si no cabe.
     white-space: nowrap fuerza una sola línea → scrollWidth siempre confiable */
  font-size: clamp(32px, 7vw, 110px);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #FFF3D1 0%, var(--c1) 45%, color-mix(in srgb, var(--c1) 60%, #000) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 6px 32px color-mix(in srgb, var(--c1) 70%, transparent));
  line-height: 1.0;
  margin: 8px 0 18px;
  animation: msg-bigpulse 2.6s ease-in-out infinite;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
  transform-origin: center center;
}
@keyframes msg-bigpulse {
  0%,100% { transform: scale(1);     filter: drop-shadow(0 6px 32px color-mix(in srgb, var(--c1) 60%, transparent)); }
  50%     { transform: scale(1.035); filter: drop-shadow(0 10px 64px color-mix(in srgb, var(--c1) 90%, transparent)); }
}
.msg-sub {
  font-size: clamp(14px, 2.4vw, 32px);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.24em;
  margin-top: clamp(8px, 1.4vh, 14px);
  font-weight: 300;
}
.msg-emojis {
  font-size: clamp(36px, 6.5vw, 88px);
  margin-top: clamp(16px, 2.6vh, 30px);
  letter-spacing: clamp(10px, 2vw, 28px);
  animation: msg-bounce 1.8s ease-in-out infinite;
}
@keyframes msg-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
@keyframes msg-glow {
  0%,100% { text-shadow: 0 0 18px var(--c1), 0 0 36px color-mix(in srgb, var(--c1) 50%, transparent); }
  50%     { text-shadow: 0 0 32px var(--c1), 0 0 72px var(--c1); }
}
.msg-confetti, .msg-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.msg-particles { z-index: 2; }
.msg-confetti  { z-index: 6; }

/* Tipografía secundaria si Playfair no carga */
@media (max-aspect-ratio: 4/3) {
  .msg-big { font-size: 120px; }
  .msg-mid { font-size: 64px; }
}

/* === COVER MUSICAL (split-screen: cover + QR + plataforma) === */
.stage-cover {
  position: fixed; inset: 0;
  background: #000;
  overflow: hidden;
  animation: stageEnter 700ms cubic-bezier(.22,.9,.30,1.05) forwards;
}
.stage-cover .cover-bg {
  position: absolute; inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(48px) saturate(1.3) brightness(0.55);
  transform: scale(1.15);
  z-index: 0;
}
.stage-cover .cover-bg-gradient {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0.78;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.stage-cover .cover-bg-tint {
  position: absolute; inset: 0; z-index: 2;
  mix-blend-mode: screen;
  opacity: 0.65;
  pointer-events: none;
}
.stage-cover .cover-grid {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: 100%; height: 100%;
  padding: clamp(20px, 4vh, 60px) clamp(20px, 5vw, 80px);
  gap: clamp(20px, 4vw, 80px);
  box-sizing: border-box;
}
.cover-art-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.cover-art {
  width: 100%; max-width: min(85vh, 45vw);
  height: auto; max-height: 88vh;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: clamp(8px, 1.2vw, 18px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.08);
  animation: cover-art-in 900ms cubic-bezier(.22,.9,.30,1.05);
}
@keyframes cover-art-in {
  from { opacity: 0; transform: scale(0.92) translateX(-40px); }
  to   { opacity: 1; transform: scale(1) translateX(0); }
}
.cover-qr-side {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(14px, 2.2vh, 28px);
  animation: cover-qr-in 1000ms cubic-bezier(.22,.9,.30,1.05);
}
@keyframes cover-qr-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cover-platform {
  display: inline-flex; align-items: center;
  gap: clamp(8px, 1vw, 16px);
  padding: clamp(10px, 1.4vh, 18px) clamp(18px, 2.2vw, 30px);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 24px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0A0A0C !important;
  background: linear-gradient(135deg, #F4D77A 0%, #E8C547 45%, #D4AF37 100%) !important;
  border: 1px solid rgba(232,197,71,0.85);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 10px 30px rgba(232,197,71,0.45),
    0 4px 12px rgba(0,0,0,0.40);
  animation: cover-platform-glow 2.6s ease-in-out infinite;
}
@keyframes cover-platform-glow {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 10px 30px rgba(232,197,71,0.45), 0 4px 12px rgba(0,0,0,0.40); }
  50%     { box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset, 0 14px 50px rgba(232,197,71,0.75), 0 6px 18px rgba(0,0,0,0.45); }
}
.cover-platform-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(22px, 2.4vw, 36px);
  height: clamp(22px, 2.4vw, 36px);
}
.cover-platform-logo svg {
  width: 100%; height: 100%;
}
.cover-platform-name { letter-spacing: 0.02em; }
.cover-qr-card {
  background: #fff;
  padding: clamp(14px, 1.8vw, 26px);
  border-radius: clamp(14px, 1.6vw, 22px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    0 0 0 4px rgba(255,255,255,0.12);
}
.cover-qr-card canvas {
  display: block;
  width: clamp(180px, 24vw, 360px) !important;
  height: clamp(180px, 24vw, 360px) !important;
}
.cover-qr-cta {
  font-size: clamp(12px, 1.3vw, 18px);
  color: rgba(255,255,255,0.90);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
/* Greeting: pill gold con peso bold + texto del mensaje debajo */
.cover-platform-greeting {
  padding: clamp(12px, 1.8vh, 22px) clamp(22px, 2.6vw, 34px) !important;
}
.cover-greeting-msg {
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 38px);
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
  padding: 0 clamp(20px, 3vw, 40px);
  max-width: 90%;
  font-weight: 400;
  margin: clamp(4px, 0.8vh, 12px) 0;
  animation: cover-greeting-in 1100ms cubic-bezier(.22,.9,.30,1.05);
}
@keyframes cover-greeting-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* TVs verticales / portrait: apilar cover arriba, QR abajo */
@media (max-aspect-ratio: 4/3) {
  .stage-cover .cover-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding: 28px;
    gap: 24px;
  }
  .cover-art { max-width: 72vw; max-height: 60vh; }
}

/* === MODO ARTISTA EN TARIMA — takeover total === */
/* Reutiliza .overlay-logo.logo-only (arriba izquierda, sin fondo) — definido más arriba */
.stage-artist {
  background: #000;
  position: fixed; inset: 0;
}
.stage-artist > img,
.stage-artist > video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}