/* ==========================================================================
   CrowdScreen — escenario 16:9
   Las medidas van en cqw (ancho del contenedor): la vista previa del móvil y la
   TV de 75" son exactamente la misma composición, solo cambia la escala.
   ========================================================================== */

.stage {
  container-type: inline-size;
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  overflow: hidden; background: var(--onyx); isolation: isolate;
  border-radius: inherit;
}

/* ── Fondo por tema ─────────────────────────────────────────────────────── */
.slide { position: absolute; inset: 0; display: grid; }
.slide-bg { position: absolute; inset: -10%; z-index: -1; }
.slide-bg::before, .slide-bg::after { content: ""; position: absolute; inset: 0; }

.t-neon .slide-bg { background: radial-gradient(60% 80% at 15% 20%, rgba(0,229,255,.35), transparent 60%), radial-gradient(60% 80% at 85% 85%, rgba(177,0,255,.38), transparent 60%), #07080C; }
.t-neon .slide-bg::before {
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 20%, rgba(0,229,255,.22) 25%, transparent 32% 68%, rgba(177,0,255,.24) 75%, transparent 82%);
  filter: blur(40px); animation: spin 18s linear infinite;
}
.t-bday .slide-bg { background: radial-gradient(70% 90% at 80% 10%, rgba(255,190,60,.38), transparent 60%), radial-gradient(70% 90% at 10% 90%, rgba(255,60,170,.35), transparent 60%), #0D0710; }
.t-love .slide-bg { background: radial-gradient(80% 100% at 30% 30%, rgba(255,70,140,.38), transparent 60%), radial-gradient(70% 90% at 90% 80%, rgba(177,0,255,.35), transparent 60%), #0E0610; }
.t-cheers .slide-bg { background: radial-gradient(70% 90% at 20% 80%, rgba(255,170,40,.32), transparent 60%), radial-gradient(70% 90% at 85% 15%, rgba(0,229,255,.28), transparent 60%), #0A0B0D; }
.t-vip .slide-bg { background: linear-gradient(135deg, #050505 0%, #14110A 50%, #050505 100%); }
.t-vip .slide-bg::before {
  background: linear-gradient(110deg, transparent 35%, rgba(255,215,140,.22) 48%, rgba(255,240,200,.35) 50%, rgba(255,215,140,.22) 52%, transparent 65%);
  animation: sweep 5.5s var(--ease) infinite;
}
.t-promo .slide-bg { background: radial-gradient(90% 90% at 50% 120%, rgba(0,229,255,.18), transparent 60%), #0A0B10; }

/* bokeh / burbujas: partículas puramente CSS (en la TV, screen.js añade un canvas) */
.t-love .slide-bg::after, .t-cheers .slide-bg::after, .t-bday .slide-bg::after {
  background-image:
    radial-gradient(circle at 12% 70%, rgba(255,255,255,.18) 0 .5cqw, transparent .6cqw),
    radial-gradient(circle at 28% 40%, rgba(255,255,255,.12) 0 .9cqw, transparent 1cqw),
    radial-gradient(circle at 46% 85%, rgba(255,255,255,.14) 0 .4cqw, transparent .5cqw),
    radial-gradient(circle at 64% 30%, rgba(255,255,255,.1) 0 1.2cqw, transparent 1.3cqw),
    radial-gradient(circle at 82% 62%, rgba(255,255,255,.16) 0 .6cqw, transparent .7cqw),
    radial-gradient(circle at 92% 20%, rgba(255,255,255,.12) 0 .8cqw, transparent .9cqw);
  animation: drift 9s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes sweep { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
@keyframes drift { from { transform: translateY(6%); } to { transform: translateY(-6%); } }

/* ── Composición ────────────────────────────────────────────────────────── */
.slide-body {
  position: relative; display: grid; align-content: center; gap: 2.2cqw;
  padding: 6cqw 7cqw 9cqw;
}
.slide.has-photo .slide-body { grid-template-columns: 42% 1fr; align-items: center; column-gap: 5cqw; }
.slide-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 2.2cqw; overflow: hidden;
  box-shadow: 0 0 0 .18cqw rgba(255,255,255,.18), 0 2cqw 6cqw rgba(0,0,0,.55), 0 0 6cqw rgba(0,229,255,.18);
  transform: rotate(-2.2deg);
}
.slide-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-copy { display: grid; gap: 1.8cqw; min-width: 0; }
.slide-from {
  font: 600 1.6cqw/1 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: 1.2cqw;
}
.slide-from::before { content: ""; width: 3.2cqw; height: .14cqw; background: var(--spectrum); box-shadow: 0 0 1.2cqw rgba(0,229,255,.6); }
.slide-sender { font: 600 3.4cqw/1.05 var(--font-display); letter-spacing: -.02em; }
/* :where() = especificidad cero: la tipografía elegida (.f-*) siempre gana a estos valores por defecto. */
:where(.slide) { --msg-font: var(--font-display); --msg-weight: 800; --msg-track: -.04em; --msg-scale: 1; --zk: 1; --t0: 0ms; }
.slide-text {
  --size: 6.4cqw;
  font-family: var(--msg-font); font-weight: var(--msg-weight); letter-spacing: var(--msg-track);
  font-size: calc(var(--size) * var(--msg-scale) * var(--zk)); line-height: 1.04;
  overflow-wrap: anywhere; text-wrap: balance;
  text-shadow: 0 .3cqw 2.4cqw rgba(0,0,0,.45);
}
.slide-text.is-long { --size: 4.6cqw; line-height: 1.1; }
.slide-text.is-xlong { --size: 3.6cqw; line-height: 1.14; }
.slide-text.is-placeholder { opacity: .42; }
.f-pacifico .slide-text { line-height: 1.3; }
.slide.has-photo .slide-text { --size: 4.8cqw; }
.slide.has-photo .slide-text.is-long { --size: 3.6cqw; }
.slide.has-photo .slide-text.is-xlong { --size: 2.9cqw; }

/* ── Escenas con video: fondo, hueco de foto y zona de texto ───────────── */
.slide.has-video .slide-bg { inset: 0; background: #000; }
.slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slide.has-video .slide-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 50%, rgba(5,6,9,.55), transparent 65%), linear-gradient(0deg, rgba(5,6,9,.6), transparent 30%);
}
.slide-copy.in-zone { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; z-index: 2; }
.slide-copy.in-zone.align-center { align-items: center; text-align: center; }
.slide-copy.in-zone.align-center .slide-from::before { display: none; }
.slide-photo.in-slot { position: absolute; margin: 0; aspect-ratio: auto; z-index: 1; transform: rotate(var(--rot, 0deg)); }
.slide-photo.mask-rounded { border-radius: 2.2cqw; }
.slide-photo.mask-circle { border-radius: 50%; box-shadow: 0 0 0 .5cqw rgba(255,255,255,.85), 0 0 6cqw rgba(255,70,140,.45); }
.slide-photo.mask-polaroid { border-radius: .4cqw; padding: 1.2cqw 1.2cqw 5cqw; background: #F7F4EE; }
.slide-photo.mask-polaroid img { border-radius: .2cqw; }
.slide-photo.mask-none { border-radius: 0; box-shadow: none; transform: none; }
.slide.is-promo .slide-photo.in-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,6,9,.9)); }

/* promo: imagen a sangre, texto en franja inferior */
.slide.is-promo .slide-body { padding: 0; align-content: end; }
.slide.is-promo .slide-photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; transform: none; box-shadow: none; }
.slide.is-promo .slide-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,6,9,.92)); }
.slide.is-promo .slide-copy { position: relative; padding: 0 7cqw 9cqw; }
.slide.is-promo .slide-text { font-size: 4.2cqw; }
.slide-tag {
  justify-self: start; font: 700 1.2cqw/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase;
  padding: .9cqw 1.4cqw; border-radius: 99px; color: #00161A; background: var(--cyan);
}

/* acento de tema en el texto */
.t-neon .slide-text em, .t-neon .slide-sender { color: #DFFBFF; text-shadow: 0 0 2cqw rgba(0,229,255,.6); }
.t-vip .slide-text { background: linear-gradient(180deg, #FFF3D6, #E4B964); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* ── Pie: marca del local + invitación ───────────────────────────────────── */
.slide-foot {
  position: absolute; left: 7cqw; right: 7cqw; bottom: 3.2cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  font: 500 1.3cqw/1 var(--font-ui); color: rgba(255,255,255,.62); letter-spacing: .02em;
}
.slide-foot b { color: #fff; font-weight: 600; }
.slide-progress { position: absolute; left: 0; bottom: 0; height: .32cqw; width: 100%; background: var(--spectrum); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 1.4cqw rgba(0,229,255,.7); }

/* ── Entradas ─────────────────────────────────────────────────────────────
   El video de la escena corre durante --t0 (intro) y después entra el texto.
   Las animaciones del texto son las que elige el cliente (.a-*). */
.slide.is-in .slide-from   { animation: rise .9s var(--ease-out) calc(var(--t0) + .1s) both; }
.slide.is-in .slide-sender { animation: rise .9s var(--ease-out) calc(var(--t0) + .25s) both; }
.slide.is-in .slide-tag    { animation: rise .7s var(--ease-out) calc(var(--t0) + .05s) both; }
.slide.is-in .slide-photo  { animation: photo 1.2s var(--ease-out) calc(var(--t0) * .5) both; }
.slide.is-in .slide-photo.in-slot { animation-name: photoSlot; }
.slide.is-out { animation: out .6s var(--ease) both; }

.slide.is-in.a-reveal .slide-text { animation: reveal 1.1s var(--ease-out) calc(var(--t0) + .4s) both; }
.slide.is-in.a-pop .slide-text    { animation: pop .9s cubic-bezier(.34,1.56,.64,1) calc(var(--t0) + .4s) both; }
.slide.is-in.a-slide .slide-text  { animation: slideIn 1s var(--ease-out) calc(var(--t0) + .4s) both; }
.slide.is-in.a-glow .slide-text   { animation: glowIn 1.6s linear calc(var(--t0) + .4s) both, glowPulse 3.2s ease-in-out calc(var(--t0) + 2s) infinite; }
.slide.is-in.a-words .slide-text .w { display: inline-block; animation: wordIn .55s var(--ease-out) calc(var(--t0) + .4s + var(--i) * 110ms) both; }
.slide.is-in.a-type .slide-text .c  { animation: charIn .01s linear calc(var(--t0) + .4s + var(--i) * 48ms) both; }
.slide.is-in.a-type .slide-text::after { content: ""; display: inline-block; width: .08em; height: .9em; margin-left: .06em; vertical-align: -.08em; background: currentColor; animation: caret .9s steps(1) calc(var(--t0) + .4s) infinite; }
.a-words .slide-text .w { display: inline-block; }

/* Vista previa estática (mientras el cliente escribe): estado final sin animar */
.slide.is-static *, .slide.is-static .slide-text::after { animation: none !important; }

@keyframes rise { from { opacity: 0; transform: translateY(2.4cqw); } }
@keyframes reveal { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(3cqw); } to { opacity: 1; clip-path: inset(0 0 -20% 0); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.55); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8cqw); filter: blur(1cqw); } }
@keyframes glowIn {
  0%, 18%, 22%, 52%, 56% { opacity: 0; text-shadow: none; }
  20%, 54%, 100% { opacity: 1; text-shadow: 0 0 1cqw rgba(255,255,255,.8), 0 0 3cqw rgba(0,229,255,.9), 0 0 7cqw rgba(177,0,255,.6); }
}
@keyframes glowPulse { 50% { text-shadow: 0 0 .6cqw rgba(255,255,255,.6), 0 0 2cqw rgba(0,229,255,.6), 0 0 5cqw rgba(177,0,255,.4); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(1.6cqw) scale(.94); filter: blur(.4cqw); } }
@keyframes charIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes photo { from { opacity: 0; transform: rotate(-8deg) scale(.86); } }
@keyframes photoSlot { from { opacity: 0; transform: rotate(calc(var(--rot, 0deg) - 6deg)) scale(.86); } to { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); } }
@keyframes out { to { opacity: 0; transform: scale(1.02); filter: blur(.6cqw); } }
.a-glow .slide-text { color: #fff; }

/* ── Comercial ──────────────────────────────────────────────────────────── */
.ad { position: absolute; inset: 0; background: #000; }
.ad img, .ad video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Anuncio en video (cliente o red de anunciantes) ────────────────────── */
.slide.is-videoad { background: #000; }
.slide.is-videoad .videoad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.slide.is-videoad .videoad-tag { position: absolute; left: 2.4cqw; top: 2.4cqw; z-index: 2; opacity: .92; font-size: 1cqw; padding: .7cqw 1.1cqw; }
.slide.is-videoad .videoad-qr {
  position: absolute; right: 2.4cqw; bottom: 2.4cqw; z-index: 2; display: grid; gap: .6cqw; justify-items: center;
  width: 12cqw; padding: .9cqw; border-radius: 1.2cqw; background: #fff; color: #0B0C10;
  font: 700 .95cqw/1.1 var(--font-ui); text-align: center; box-shadow: 0 0 0 .25cqw rgba(0,229,255,.55), 0 0 3cqw rgba(0,0,0,.6);
}
.slide.is-videoad .videoad-qr canvas, .slide.is-videoad .videoad-qr img { width: 100% !important; height: auto !important; display: block; image-rendering: pixelated; }
.slide.is-videoad.is-in .videoad-tag { animation: rise .7s var(--ease-out) .2s both; }

/* ==========================================================================
   Página de la TV (kiosko)
   ========================================================================== */
.tv { position: fixed; inset: 0; background: #000; overflow: hidden; cursor: none; user-select: none; }
.tv .stage { position: absolute; top: 50%; left: 50%; width: min(100vw, 177.78vh); transform: translate(-50%, -50%); border-radius: 0; }
.tv-idle .slide-body { justify-items: start; }
.tv-idle .slide-text { font-size: 7.2cqw; }
.tv-idle .slide-copy { max-width: 58cqw; }
.tv-idle .qr {
  position: absolute; right: 7cqw; top: 50%; transform: translateY(-50%);
  width: 22cqw; padding: 1.6cqw; border-radius: 2cqw; background: #fff;
  box-shadow: 0 0 0 .4cqw rgba(0,229,255,.5), 0 0 6cqw rgba(0,229,255,.35);
}
.tv-idle .qr canvas, .tv-idle .qr img { width: 100% !important; height: auto !important; display: block; image-rendering: pixelated; }
.tv-status {
  position: absolute; right: 1.2vw; top: 1.2vw; z-index: 9; display: flex; gap: .6vw; align-items: center;
  font: 500 max(11px, .8vw)/1 var(--font-ui); color: rgba(255,255,255,.55); opacity: 0; transition: opacity .4s;
}
.tv-status.is-on { opacity: 1; }
.tv-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* Emparejado */
.pair { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; padding: 4vw; }
.pair-card { display: grid; gap: 2.4vw; justify-items: center; }
.pair-code {
  font: 800 min(16vw, 22vh)/1 var(--font-display); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 3vw rgba(0,229,255,.35));
}
.pair p { font-size: max(16px, 1.6vw); color: var(--ink-2); max-width: 46ch; }
.pair .kicker { font-size: max(12px, .9vw); }
.pair-start { font-size: max(18px, 1.6vw); --h: max(56px, 4.2vw); padding: 0 3vw; }

/* ── Creatividad de imagen de la red: titular + llamada a la acción + QR ── */
.slide.is-creative .slide-copy { padding-right: 18cqw; }
.slide-cta {
  justify-self: start; margin-top: 1.4cqw; padding: 1cqw 2cqw; border-radius: 99px;
  font: 700 1.7cqw/1 var(--font-ui); letter-spacing: .02em; color: #00161A; background: var(--cyan);
  box-shadow: 0 0 2.4cqw rgba(0,229,255,.55);
}
.slide.is-in .slide-cta { animation: rise .8s var(--ease-out) calc(var(--t0) + .7s) both; }
.slide.is-creative .videoad-qr {
  position: absolute; right: 2.4cqw; bottom: 2.4cqw; z-index: 3; display: grid; gap: .6cqw; justify-items: center;
  width: 12cqw; padding: .9cqw; border-radius: 1.2cqw; background: #fff; color: #0B0C10;
  font: 700 .95cqw/1.1 var(--font-ui); text-align: center; box-shadow: 0 0 0 .25cqw rgba(0,229,255,.55), 0 0 3cqw rgba(0,0,0,.6);
}
.slide.is-creative .videoad-qr canvas, .slide.is-creative .videoad-qr img { width: 100% !important; height: auto !important; display: block; image-rendering: pixelated; }

/* ── Vista previa (/preview/{token}) ─────────────────────────────────────── */
.tv.is-preview { cursor: default; }
.tv-preview-bar {
  position: absolute; left: 50%; bottom: 1.4vw; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 99px;
  background: rgba(11,12,16,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(177,0,255,.45); box-shadow: 0 0 30px -6px rgba(177,0,255,.45);
  font: 500 13px/1.2 var(--font-ui); color: var(--ink-2); white-space: nowrap; transition: opacity .4s;
}
.tv-preview-bar .kicker { color: #fff; }
.tv.is-preview:not(:hover) .tv-preview-bar { opacity: .35; }
@media (max-width: 720px) { .tv-preview-bar .hint { display: none; } }

/* Emparejado por dirección: número de comprobación y alternativa */
.pair-lead { font: 600 max(20px, 2vw)/1.2 var(--font-display); color: #fff !important; }
.pair-alt { font-size: max(13px, 1.05vw) !important; color: var(--ink-3) !important; }
.pair-alt b { color: var(--ink-2); }
.pair-choices { display: flex; flex-wrap: wrap; gap: 1.2vw; justify-content: center; }