/* Cubic · componentes compartidos del concepto «Transmisión»: la noche como una señal en vivo.
   Negro puro, el rojo de su letrero, una cinta roja que corre, fondos que se mueven como video (sus fotos en duotono
   con líneas de barrido), letra muy condensada en mayúsculas y botones de bloque color papel. Tokens en tokens.css. */
@import url("/core/tokens.css");
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: #333 transparent; caret-color: var(--primary); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 var(--fs-16)/var(--lh-texto) var(--f-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overscroll-behavior-y: none; }
img, svg { display: block; max-width: 100%; }
svg.ico { display: inline-block; vertical-align: -0.2em; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--text); text-decoration-color: var(--primary); text-underline-offset: 3px; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 3px solid var(--papel); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Banner de la demo ── */
.banner-demo { position: relative; z-index: var(--z-banner); display: block; height: 26px; padding: 0 12px; font: 600 12px/26px var(--f-body); text-align: center; letter-spacing: .01em; background: var(--papel); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-demo b { font-weight: 700; }

/* ── Fondo: negro puro; cada temporada solo tiñe la parte de arriba con su color ── */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: background .8s; }
[data-skin] body::before { background: radial-gradient(70% 34% at 50% -6%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%); }
[data-skin="purge"] body::before { background: radial-gradient(70% 45% at 50% -5%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%), repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, .02) 22px 23px); }
[data-skin="confetti"] body::before { background: radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%), radial-gradient(circle at 20% 30%, var(--primary) 0 1.5px, transparent 2px) 0 0/90px 90px; }
[data-skin="hunt"] body::before { background: radial-gradient(50% 35% at 50% 0%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%), repeating-radial-gradient(circle at 110% 110%, transparent 0 26px, color-mix(in srgb, var(--secondary) 6%, transparent) 26px 30px); }
[data-skin="uv"] body::before { background: radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(182, 255, 0, .025) 3px 4px); }

/* ── Tipografía: títulos de cartel muy condensados; rótulos en mayúsculas condensadas; texto en Familjen ── */
h1, h2, h3, .display { font-family: var(--f-display); font-weight: 800; font-stretch: 50%; letter-spacing: .005em; margin: 0; line-height: .9; text-transform: uppercase; }
h1 { font-size: clamp(44px, 13vw, 64px); line-height: .86; }
h2 { font-size: 34px; }
h3 { font-size: 24px; font-stretch: 58%; line-height: 1; }
p { margin: 0; }
.cartel { font-family: var(--f-display); font-weight: 800; font-stretch: 50%; text-transform: uppercase; line-height: .86; letter-spacing: .005em; margin: 0; }
.caps { font-family: var(--f-display); font-weight: 600; font-stretch: 68%; text-transform: uppercase; letter-spacing: .06em; }
.relato { font: 500 21px/1.32 var(--f-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .03em; color: var(--primary); }
.eyebrow { font: 600 var(--fs-14)/1.3 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mono { font-family: var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.num { font-family: var(--f-display); font-stretch: 52%; font-weight: 800; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-14); }
.tiny { font-size: var(--fs-12); }
.neon { color: var(--text); text-shadow: 2px 0 0 var(--primary), 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
.neon-2 { color: var(--secondary); }
.neon-3 { color: var(--accent); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .danger { color: var(--danger); }
.estrellas::before { content: "■ ■ ■"; letter-spacing: .3em; color: var(--primary); font-size: var(--fs-12); margin-right: 6px; }

/* Texto «en señal»: blanco condensado con un corrimiento rojo (frases con emoción, nunca texto de lectura) */
.neon-texto { font-family: var(--f-display); font-weight: 800; font-stretch: 50%; text-transform: uppercase; letter-spacing: .01em; line-height: .88; color: #fff;
  text-shadow: 3px 0 0 var(--c, var(--primary)), -2px 0 0 color-mix(in srgb, var(--c, var(--accent)) 45%, transparent), 0 0 34px color-mix(in srgb, var(--c, var(--primary)) 45%, transparent); }
.neon-texto.rojo { color: var(--primary); text-shadow: 0 0 30px color-mix(in srgb, var(--primary) 40%, transparent); }
.parpadeo { animation: parpadeo 7s steps(1, end) infinite; }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 61% { opacity: 1; } 62% { opacity: .55; } 63% { opacity: 1; } 65% { opacity: .75; } 66% { opacity: 1; } }
.tubo { box-shadow: inset 0 0 0 1px var(--c, var(--primary)); }
.tubo-linea { height: 3px; background: var(--c, var(--primary)); }

/* ── Logo (vectorial, core/marca.js) ── */
.logo, .cb-logo { display: inline-flex; align-items: flex-end; gap: .4em; color: var(--text); line-height: 1; }
.logo .cb-palabra, .cb-logo .cb-palabra { margin-bottom: .04em; }
.cubo-iso { flex: none; }

/* ── Layout ── */
.fila { display: flex; align-items: center; gap: 10px; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid2 > *, .grid3 > *, .fila > input, .fila > .grow { min-width: 0; }
.hoja, .app { overflow-x: hidden; }
.centro { text-align: center; }
.sep { height: 1px; background: var(--line); border: 0; margin: 14px 0; }

/* ── Tarjetas: bloque negro con filo; .br = tarjeta «en vivo» con una franja roja arriba ── */
.card { position: relative; background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 0; padding: 16px; }
.card.br::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--primary); pointer-events: none; }
.card.br.br-2::before { background: var(--secondary); }
.card.br.br-3::before { background: var(--accent); }
.card.glow { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary) 4%, transparent)), var(--surface); box-shadow: inset 0 0 0 1px var(--primary); }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.papel { background: var(--papel); color: var(--tinta); }

/* ── Botones de bloque: mayúsculas condensadas, sin esquinas, con respuesta al tocar ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--toque); padding: 0 20px; border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 45%, transparent); background: transparent; color: var(--text); font: 700 17px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; border-radius: 0; cursor: pointer; transition: transform var(--t-rapida) var(--curva), background var(--t-rapida), box-shadow var(--t-media) var(--curva), color var(--t-rapida), opacity var(--t-rapida); text-decoration: none; white-space: nowrap; user-select: none; }
.btn:hover { box-shadow: inset 0 0 0 1px var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn.off { opacity: .42; pointer-events: none; }
.btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; border-color: #fff #fff transparent transparent; animation: girar2 .7s linear infinite; }
.btn-primary { background: var(--primary); box-shadow: none; color: var(--on-primary); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 82%, #ff6a40); box-shadow: 0 12px 34px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn-sec { background: var(--papel); box-shadow: none; color: var(--primary); }
.btn-sec:hover { background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--papel) 16%, transparent); }
.btn-acc { background: var(--papel); box-shadow: none; color: var(--tinta); }
.btn-acc:hover { background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--papel) 16%, transparent); }
.btn-danger { background: var(--danger); box-shadow: none; color: #1a0004; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-lg { min-height: 56px; font-size: 19px; padding: 0 26px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: var(--toque); padding: 0; }
.btn-icon.btn-sm { width: 40px; }
.btn .ico { flex: none; }
.link { background: none; border: 0; color: var(--text); padding: 8px 0; cursor: pointer; font: 700 16px/1.2 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ── Chips, badges, segmentados ── */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 42px; padding: 0 15px; border-radius: 0; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: transparent; color: color-mix(in srgb, var(--text) 82%, var(--bg)); font: 600 15px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; white-space: nowrap; transition: background var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--text); color: var(--text); }
.chip[aria-pressed="true"], .chip.on { background: var(--papel); color: var(--primary); box-shadow: none; }
.chip.on .ico { color: var(--primary); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 0; font: 700 12px/1.1 var(--f-display); font-stretch: 70%; text-transform: uppercase; letter-spacing: .05em; border: 1px solid currentColor; white-space: nowrap; }
.badge.solido { border-color: transparent; background: currentColor; }
.badge.solido > span { color: var(--bg); }
.b-pago { color: var(--warn); } .b-nuevo { color: var(--info); } .b-prep { color: var(--warn); } .b-listo { color: var(--ok); } .b-ent { color: var(--muted); } .b-err { color: var(--danger); } .b-pri { color: var(--accent); } .b-acc { color: var(--secondary); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.punto.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.punto.vivo { background: var(--accent); animation: pulso 1.4s infinite; }
.vivo-dot { width: 9px; height: 9px; background: var(--accent); flex: none; animation: pulso 1.4s infinite; box-shadow: 0 0 10px var(--accent); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 0; border: 0; }
.seg button { min-height: 40px; border: 0; background: transparent; border-radius: 0; font: 700 15px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--papel); color: var(--primary); }

/* ── Formularios ── */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span, .lbl { font: 600 var(--fs-14)/1.3 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time], input[type=search], input[type=datetime-local], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 0; color: var(--text); outline: none; transition: box-shadow var(--t-rapida);
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--primary); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input.grande { font: 800 var(--fs-24)/1 var(--f-display); font-stretch: 70%; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 0; cursor: pointer; background: var(--surface); }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); flex: none; }
.switch { position: relative; display: inline-block; vertical-align: middle; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t-media); }
.switch i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; background: var(--muted); transition: transform var(--t-media) var(--curva), background var(--t-media); }
.switch input:checked + i { background: var(--primary); box-shadow: none; }
.switch input:checked + i::after { transform: translateX(22px); background: #fff; }
.switch input:focus-visible + i { outline: 3px solid var(--papel); outline-offset: 3px; }

/* ── Listas ── */
.lista { display: flex; flex-direction: column; }
.lista > .item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lista > .item:last-child { border-bottom: 0; }
.ico-caja { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 0; background: color-mix(in srgb, var(--c, var(--primary)) 18%, var(--surface-2)); color: color-mix(in srgb, var(--c, var(--accent)) 80%, #fff); }

/* ── Medidor ── */
.medidor { height: 5px; background: var(--surface-2); border-radius: 0; overflow: hidden; }
.medidor > i { display: block; height: 100%; width: var(--v, 0%); background: var(--primary); transition: width .8s var(--curva); }

/* ── Hojas inferiores (con asa: se cierran arrastrando) ── */
.velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-velo); animation: aparecer .2s; }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-top: 3px solid var(--primary); border-radius: 0; z-index: var(--z-hoja); padding: 6px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .95); animation: subir var(--t-entrada) var(--curva); }
.hoja::before { content: ""; display: block; width: 44px; height: 4px; background: var(--line-2); margin: 8px auto 16px; }
.hoja-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hoja-cab h2 { font-size: 46px; line-height: .86; }
.hoja-pie { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); margin: 16px -18px calc(-22px - env(safe-area-inset-bottom)); padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--surface) 22%); }

/* ── Avisos (toasts) ── */
.toasts { position: fixed; top: calc(36px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 20px)); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 0; background: #111; box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -12px rgba(0, 0, 0, .9); animation: bajar .3s var(--curva); }
.toast::before { content: ""; flex: none; width: 4px; align-self: stretch; background: var(--info); }
.toast > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-14); }
.toast strong { font: 700 17px/1.1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .04em; }
.toast-ok::before { background: var(--ok); } .toast-error::before { background: var(--danger); } .toast-promo::before { background: var(--primary); } .toast-alerta { background: color-mix(in srgb, var(--danger) 20%, #111); } .toast-alerta::before { background: var(--danger); }
.toast-ico { color: var(--accent); flex: none; margin-top: 1px; }
.toast.fuera { opacity: 0; transform: translateY(-8px); transition: .35s; }

/* ── Superposición a pantalla completa ── */
.overlay { position: fixed; inset: 0; z-index: var(--z-sobre); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 50px 24px 24px; text-align: center; background: radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--primary) 30%, #000), #000 75%); animation: aparecer .25s; overflow-y: auto; }
.qr-caja { background: #fff; padding: 10px; border-radius: 0; width: min(220px, 60vw); box-shadow: 0 0 0 3px var(--papel); }
.qr-caja svg { width: 100%; height: auto; }

/* ── Cinta roja que corre (separador: el corchete de Cubic) ── */
.marquesina { position: relative; z-index: var(--z-cinta); min-width: 0; max-width: 100%; height: 40px; display: flex; align-items: center; overflow: hidden; background: var(--primary); color: var(--on-primary); }
.marquesina .cinta-pista { flex: none; display: flex; align-items: center; gap: 26px; padding-left: 26px; white-space: nowrap; animation: correr var(--dur, 30s) linear calc(0s - var(--off, 0s)) infinite; will-change: transform; }
.marquesina span { font: 700 16px/1 var(--f-display); font-stretch: 64%; text-transform: uppercase; letter-spacing: .05em; }
.marquesina .sep-c { display: inline-flex; color: #000; }
.marquesina.fina { height: 32px; }
.marquesina.fina span { font-size: 14px; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ── Señal: sus fotos pasan como un video en duotono, con líneas de barrido, grano y un parpadeo ── */
.senal { position: absolute; inset: 0; overflow: hidden; background: #000; pointer-events: none; }
.senal .cuadros { position: absolute; inset: 0; animation: interferencia 7s steps(1) infinite; }
.senal img { position: absolute; inset: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.35) brightness(.92); animation: cuadro var(--d) linear infinite both; animation-delay: calc(var(--i) * var(--paso) - var(--off, 0s)); }
.senal .cuadros::after { content: ""; position: absolute; inset: 0; background: var(--primary); mix-blend-mode: multiply; }
.senal .barrido { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .42) 0 2px, transparent 2px 4px); }
.senal .barrido::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; top: -22%; background: linear-gradient(180deg, transparent, rgba(255, 90, 60, .10), transparent); animation: banda 6s linear infinite; }
.senal .vineta { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, .78) 100%), linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 62%, rgba(0, 0, 0, .9)); }
.senal .grano-s { position: absolute; inset: -50%; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); animation: grano .9s steps(3) infinite; }
.senal.tenue { opacity: .3; }
@keyframes cuadro { 0% { opacity: 0; transform: scale(1.02); } 3% { opacity: 1; } 19% { opacity: 1; } 23% { opacity: 0; transform: scale(1.12) translate(-1.5%, 1%); } 100% { opacity: 0; } }
@keyframes banda { to { top: 110%; } }
@keyframes grano { 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -5%); } }
@keyframes interferencia { 0%, 100% { opacity: 1; } 61% { opacity: .82; } 62% { opacity: 1; } 63% { opacity: .9; } 64% { opacity: 1; } }
/* ── Señal viva (core/senal-viva.js): el efecto propio de Cubic, dibujado con WebGL encima de la señal CSS ──
   Cuando el lienzo está listo, la señal CSS de debajo se apaga (queda de respaldo si no hay WebGL). */
.senal-viva { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 500ms ease; pointer-events: none; }
.senal-viva.lista { opacity: 1; }
.sv-lugar { position: absolute; inset: 0; overflow: hidden; }
.sv-caja { position: absolute; inset: 0; }
.sv-lugar:has(.senal-viva.lista) > .senal, #senal-hero:has(> .senal-viva.lista) > .senal { visibility: hidden; }
/* Un número o un nombre dibujado con la señal: el texto real queda para lectores de pantalla */
.sv-marco { position: relative; }
.sv-marco:has(.senal-viva.lista) .sv-texto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Fondo fijo de la app y los paneles: solo líneas de barrido muy tenues sobre el negro */
.fondo-senal { position: fixed; inset: 0; z-index: var(--z-ambiente); pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px); }

/* ── La marca en señal: «cubic.» rojo partido en líneas, con un corte de interferencia cada tanto ── */
.marca-senal { position: relative; display: inline-block; color: var(--primary); line-height: 0; }
.marca-senal svg { display: block; width: 100%; height: auto; }
.marca-senal .capa-m { -webkit-mask: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px); mask: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--primary) 55%, transparent)); }
.marca-senal.fina .capa-m { -webkit-mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 5px); mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 5px); }
.marca-senal .corte { position: absolute; inset: 0; opacity: 0; }
.marca-senal .corte.a { color: var(--accent); clip-path: inset(18% 0 58% 0); animation: corte-a 7s steps(1) infinite; }
.marca-senal .corte.b { color: #fff; clip-path: inset(62% 0 14% 0); animation: corte-b 7s steps(1) infinite; }
@keyframes corte-a { 0%, 88%, 100% { opacity: 0; transform: none; } 89% { opacity: 1; transform: translateX(-2.2%); } 91% { opacity: 1; transform: translateX(1.6%); } 93% { opacity: 0; } }
@keyframes corte-b { 0%, 89%, 100% { opacity: 0; transform: none; } 90% { opacity: .9; transform: translateX(2%); } 92% { opacity: 0; } }

/* ── Dibujo de línea gigante: el corchete de Cubic y su cubo, trazados en rojo ── */
.linea-arte { color: var(--primary); }
.linea-arte path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 55%, transparent)); }
.linea-arte.dibuja path { stroke-dasharray: var(--l, 2000); stroke-dashoffset: var(--l, 2000); transition: stroke-dashoffset 2.6s var(--curva); }
.linea-arte.dibuja.visto path { stroke-dashoffset: 0; }

/* ── Papel de cartel con grano (avisos, carteles) ── */
.poster { position: relative; background: #0d0d0d; overflow: hidden; }
.poster::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); pointer-events: none; }
.poster > * { position: relative; }

/* «En vivo»: cuadrito rojo que late */
.en-vivo { display: inline-flex; align-items: center; gap: 8px; }
.en-vivo::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulso 1.4s ease-in-out infinite; }

/* ── Cubo 3D (pistas de Revela el cubo, sorteos) ── */
.escena3d { width: var(--s); height: var(--s); perspective: calc(var(--s) * 5); margin: 0 auto; }
.cubo3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: girar 16s linear infinite; }
.cubo3d.quieto { animation: none; transform: rotateX(-24deg) rotateY(-38deg); }
.cubo3d .cara { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; text-align: center; border: 2px solid var(--primary); background: color-mix(in srgb, #0d0d0d 96%, transparent); box-shadow: inset 0 0 24px -6px color-mix(in srgb, var(--primary) 70%, transparent); font-size: calc(var(--s) * .1); line-height: 1.2; }
.cubo3d .cara:nth-child(2n) { border-color: var(--papel); box-shadow: inset 0 0 24px -8px color-mix(in srgb, var(--papel) 40%, transparent); }
.cubo3d .f1 { transform: translateZ(calc(var(--s) / 2)); }
.cubo3d .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cubo3d .f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cubo3d .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cubo3d .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cubo3d .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cubo3d.rapido { animation-duration: 1.2s; }
/* Caras con un solo signo (?, ★, números): el signo grande */
.cubo3d.signos .cara { font: 800 calc(var(--s) * .46)/1 var(--f-display); font-stretch: 55%; color: #fff; text-shadow: 3px 0 0 var(--primary); }

/* Cubo de fotos: sus noches en las seis caras */
.escena-fotos { perspective: 1600px; flex: none; }
.cubo-fotos { position: relative; transform-style: preserve-3d; animation: girarFotos 26s linear infinite; }
.cubo-fotos .cara { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; outline: 2px solid rgba(246, 246, 246, .9); outline-offset: -2px; background: #000; }
.cubo-fotos .cara img { width: 100%; height: 100%; object-fit: cover; }
.cubo-fotos .cara::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 40%, rgba(0, 0, 0, .35)); }
@keyframes girarFotos { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(-360deg); } }
.reflejo { -webkit-box-reflect: below 10px linear-gradient(transparent 58%, rgba(255, 255, 255, .2)); }

/* El letrero de neón (su logo en tubo rojo), se conserva para la pantalla de temporadas */
.letrero { position: relative; }
.letrero svg { width: 100%; height: auto; overflow: visible; }
.letrero .tubo-encendido { animation: encender 2.6s steps(1, end) .2s both; }
@keyframes encender { 0% { opacity: .15; } 8% { opacity: 1; } 11% { opacity: .2; } 15% { opacity: 1; } 34% { opacity: .55; } 37% { opacity: 1; } 100% { opacity: 1; } }
.letrero-luz { position: absolute; inset: -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--letrero-luz) 40%, transparent), color-mix(in srgb, var(--letrero-luz) 10%, transparent) 55%, transparent 75%); pointer-events: none; }

/* Ambiente heredado (humo y haces): queda disponible, pero el concepto usa la señal */
.ambiente { position: fixed; inset: 0; z-index: var(--z-ambiente); overflow: hidden; pointer-events: none; }
.ambiente.local { position: absolute; }
.humo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.humo i { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; animation: deriva 22s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translate(60px, -30px) scale(1.12); } }
.haces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.haz { position: absolute; top: -8%; width: 220px; height: 125%; filter: blur(12px); transform-origin: 50% 0; animation: barrer var(--dur, 14s) ease-in-out infinite alternate; opacity: var(--op, .3); }
.haz::before { content: ""; position: absolute; inset: 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--c, var(--primary)) 0%, transparent 78%); }
@keyframes barrer { from { transform: rotate(var(--a1, -18deg)); } to { transform: rotate(var(--a2, 14deg)); } }
.espejos, .bokeh { display: none; }
.grano { position: relative; isolation: isolate; }
.grano::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* Ecualizador en vivo */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; flex: none; }
.eq i { width: 3px; height: 100%; background: var(--c, var(--accent)); transform-origin: bottom; animation: eq 1s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-duration: .7s; } .eq i:nth-child(3) { animation-duration: 1.2s; } .eq i:nth-child(4) { animation-duration: .85s; } .eq i:nth-child(5) { animation-duration: 1.05s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Fotos */
.foto { position: relative; display: block; overflow: hidden; background: var(--surface-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--curva); }
a.foto:hover img, .foto.zoom:hover img { transform: scale(1.03); }

/* ── Animaciones ── */
@keyframes girar { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes girar2 { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes bajar { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes entrar { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.entrar { animation: entrar .35s var(--curva) both; }
.latido { animation: latido 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .cubo3d { transform: rotateX(-24deg) rotateY(-38deg); }
  .cubo-fotos { transform: rotateX(-18deg) rotateY(-36deg); }
  /* Sin movimiento: la cinta queda quieta, la señal muestra su primera foto y el dibujo aparece completo */
  .marquesina .cinta-pista, .senal .cuadros, .senal .grano-s, .senal .barrido::after, .marca-senal .corte { animation: none !important; }
  .senal img { animation: none !important; }
  .senal img:first-child { opacity: 1; }
  .linea-arte.dibuja path { stroke-dashoffset: 0; }
}

/* ── Asistente de Cubic (core/asistente.js): chat de reservas y preguntas ── */
.asis-fab { position: fixed; z-index: 70; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 0; background: #000; color: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px rgba(0, 0, 0, .55); font: 700 15px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: box-shadow 160ms, transform 160ms; }
.asis-fab:hover { box-shadow: inset 0 0 0 1px var(--primary), 0 10px 30px rgba(0, 0, 0, .55); }
.asis-fab:active { transform: scale(.97); }
.asis-fab svg { color: var(--primary); }
.asis.abierto .asis-fab { opacity: 0; pointer-events: none; }
.asis-panel { position: fixed; z-index: 71; left: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; background: #0b0b0b; box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, .7); animation: asis-entra 220ms var(--curva) both; }
@keyframes asis-entra { from { opacity: 0; transform: translateY(14px); } }
.asis-panel header { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--primary); color: #fff; }
.asis-panel header .av { display: grid; place-items: center; width: 36px; height: 36px; background: #000; }
.asis-panel header b { display: block; font: 800 20px/1 var(--f-display); font-stretch: 58%; text-transform: uppercase; }
.asis-panel header span span { font-size: 12px; opacity: .9; }
.asis-x { width: 40px; height: 40px; border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; }
.asis-msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px); }
.asis-msg { max-width: 86%; } .asis-msg p { margin: 0; padding: 10px 12px; font-size: 14.5px; line-height: 1.42; }
.asis-msg.bot { align-self: flex-start; } .asis-msg.bot p { background: #1b1b1b; color: #f2f2f2; }
.asis-msg.yo { align-self: flex-end; } .asis-msg.yo p { background: var(--papel); color: var(--tinta); }
.asis-bts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.asis-bts a, .asis-bts button, .asis-sug button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); font: 700 13px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; cursor: pointer; }
.asis-bts a:hover, .asis-bts button:hover, .asis-sug button:hover { background: var(--primary); color: #fff; }
.asis-msg.escribiendo p { display: flex; gap: 4px; } .asis-msg.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #888; animation: asis-p 900ms infinite; } .asis-msg.escribiendo i:nth-child(2) { animation-delay: 150ms; } .asis-msg.escribiendo i:nth-child(3) { animation-delay: 300ms; }
@keyframes asis-p { 50% { opacity: .25; transform: translateY(-2px); } }
.asis-sug { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; } .asis-sug button { flex: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.asis-form { display: flex; gap: 6px; padding: 10px 12px 12px; } .asis-form input { flex: 1; min-height: 44px; } .asis-form button { width: 48px; border: 0; background: var(--primary); color: #fff; font-size: 18px; cursor: pointer; }
@media (max-width: 560px) { .asis-fab span { display: none; } .asis-fab { padding: 0 15px; } .asis-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: calc(100dvh - 90px); } }
@media (prefers-reduced-motion: reduce) { .asis-panel, .asis-msg.escribiendo i { animation: none; } }