/* ══════════════════════════════════════════════════════════════════════════
   sitio.css — la portada de DJ Onda y el espacio de cada organizador.

   Va DESPUES de dj.css y usa sus tokens: la portada muestra el telefono y el
   televisor, y tienen que verse como el telefono y el televisor de verdad.

   Lo que se toma del manual de ONDA, y es regla y no gusto:

     · Movimiento: todo entra por DESPLAZAMIENTO Y OPACIDAD, de 6 a 12 px.
       Nada entra por escala, nada gira, nada rebota. Una sola curva,
       cubic-bezier(.16,1,.3,1); tiempos de 160, 320 y 640 ms; cascada de
       60 ms por elemento. La unica excepcion es la señal en bucle, lineal.
     · El acento aparece cuando algo OCURRE: una accion, un dato que llega,
       lo que esta en vivo. No en fondos, no en titulos enteros.
     · Voseo, frases cortas, promesas que se pueden comprobar.

   Las clases son propias y no las de dj.css (`.boton`, `.chip`, `.panel`...):
   dj.css las define con animaciones de escala que el manual no admite, y
   pisarlas aca rompería el telefono y la pantalla, que las siguen usando.

   Sin un solo `style=` en el HTML: la CSP del host es `style-src 'self'` y
   los descarta EN SILENCIO. Lo que tiene que variar se pasa por el CSSOM
   (`el.style.setProperty`), que la CSP no gobierna.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --curva: cubic-bezier(.16,1,.3,1);
  --micro: 160ms;
  --medio: 320ms;
  --largo: 640ms;
  --ancho: 74rem;
  --alto-encabezado: 64px;
}

html { scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-encabezado) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body.sitio {
  height:auto; min-height:100%;
  font-size:16px; line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.sitio a { color:inherit; }
.sitio img { max-width:100%; display:block; }
.sitio h1, .sitio h2, .sitio h3 { font-family:var(--font-display); margin:0; }

.contenedor { width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }

.solo-lector {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ═══════════════════════════ entrar en pantalla ═══════════════════════════
   Solo con JavaScript: sin `js` en <html> todo se ve de una, que es mejor que
   una pagina en blanco esperando un script que no llego. */

.js [data-revelar] {
  opacity:0; transform:translateY(10px);
  transition:opacity var(--largo) var(--curva), transform var(--largo) var(--curva);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.js [data-revelar].visible { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-revelar] { opacity:1; transform:none; transition:none; }
}

/* ═══════════════════════════════ botones ═══════════════════════════════ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:0 1.35rem;
  border-radius:var(--pill); border:1px solid transparent;
  font:600 15px/1 var(--font-body); letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform var(--micro) var(--curva), box-shadow var(--micro) var(--curva),
             background-color var(--micro) var(--curva), border-color var(--micro) var(--curva),
             color var(--micro) var(--curva), opacity var(--micro) var(--curva);
  -webkit-user-select:none; user-select:none;
}
.btn svg { width:18px; height:18px; flex:none; }
.btn:active { transform:translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; transform:none; }

.btn-primario {
  background:var(--blue-orb); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 28px -12px rgba(21,86,199,.75);
}
@media (hover:hover) {
  .btn-primario:not([disabled]):hover {
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 22px 36px -14px rgba(21,86,199,.85);
  }
}
.btn-primario:not([disabled]):active {
  transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 12px -6px rgba(21,86,199,.7);
}

.btn-fantasma {
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  color:var(--ink); border-color:var(--line);
}
@media (hover:hover) {
  .btn-fantasma:not([disabled]):hover {
    background:var(--surface-2); border-color:var(--borde-superficie-fuerte);
    transform:translateY(-1px);
  }
}

.btn-texto {
  background:none; color:var(--muted); min-height:40px; padding:0 .6rem;
}
@media (hover:hover) { .btn-texto:hover { color:var(--ink); } }

.btn-peligro { background:transparent; color:#ff9aa0; border-color:rgba(229,72,77,.38); }
@media (hover:hover) { .btn-peligro:not([disabled]):hover { background:rgba(229,72,77,.12); } }

.btn-chico { min-height:38px; padding:0 .95rem; font-size:13.5px; }
.btn-grande { min-height:56px; padding:0 1.75rem; font-size:16.5px; }

/* El que esta trabajando: el texto se queda, aparece la señal. */
.btn .girando { display:none; }
.btn.trabajando .girando { display:inline-flex; }
.btn.trabajando { pointer-events:none; }

.senal-carga { display:inline-flex; align-items:flex-end; gap:3px; height:14px; }
.senal-carga i {
  width:3px; border-radius:2px; background:currentColor;
  animation:senalCarga 900ms linear infinite;
}
.senal-carga i:nth-child(1) { height:45%; }
.senal-carga i:nth-child(2) { height:90%; animation-delay:-300ms; }
.senal-carga i:nth-child(3) { height:65%; animation-delay:-600ms; }
@keyframes senalCarga { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .senal-carga i { animation:none; opacity:.8; } }

/* ═══════════════════════════════ la marca ═══════════════════════════════ */

.marca-sitio {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em;
  text-decoration:none; color:var(--ink);
}
.marca-sitio .orbe {
  width:28px; height:28px; border-radius:50%; flex:none; position:relative;
  background:var(--blue-orb);
  box-shadow:0 8px 18px -6px rgba(21,86,199,.8), inset 0 1.5px 1px rgba(255,255,255,.45);
}
.marca-sitio .orbe::before, .marca-sitio .orbe::after {
  content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.22);
}
.marca-sitio .orbe::before { inset:18%; }
.marca-sitio .orbe::after  { inset:34%; }
.marca-sitio b { font-weight:800; color:var(--accent-2); }

/* ═══════════════════════════════ encabezado ═══════════════════════════════ */

.encabezado {
  position:sticky; top:0; z-index:30;
  height:var(--alto-encabezado);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--medio) var(--curva), background-color var(--medio) var(--curva);
}
.encabezado.con-borde { border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 86%, transparent); }
.encabezado .contenedor { height:100%; display:flex; align-items:center; gap:1.5rem; }

.nav-sitio { display:flex; gap:.25rem; margin-left:1rem; }
.nav-sitio a {
  color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:.5rem .7rem; border-radius:10px;
  transition:color var(--micro) var(--curva), background-color var(--micro) var(--curva);
}
@media (hover:hover) { .nav-sitio a:hover { color:var(--ink); background:var(--surface); } }

.acciones-encabezado { margin-left:auto; display:flex; align-items:center; gap:.5rem; }

.cuenta-mini {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:4px 12px 4px 4px; border-radius:var(--pill);
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:14px; font-weight:500;
  max-width:14rem;
}
.cuenta-mini span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar {
  width:30px; height:30px; border-radius:50%; flex:none; object-fit:cover;
  background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:600; font-size:13px;
}

@media (max-width: 860px) {
  .nav-sitio { display:none; }
  .acciones-encabezado .solo-ancho { display:none; }
}

/* ═══════════════════════════════ avisos ═══════════════════════════════ */

.aviso-sitio {
  display:flex; align-items:flex-start; gap:.75rem;
  margin:1rem auto 0; width:min(100% - 2.5rem, 44rem);
  padding:.9rem 1rem .9rem 1.1rem;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); font-size:14.5px;
  animation:entraArriba var(--medio) var(--curva) both;
}
.aviso-sitio p { margin:0; flex:1; }
.aviso-sitio .cerrar { flex:none; }
@keyframes entraArriba { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.tostada {
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:60;
  transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:.9rem;
  max-width:min(92vw, 30rem);
  padding:.75rem .9rem .75rem 1.1rem; border-radius:var(--pill);
  background:#EAF1FF; color:#0E1A33; font-size:14.5px; font-weight:500;
  box-shadow:0 22px 44px -16px rgba(0,0,0,.6);
  transition:opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.tostada.visible { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.tostada.error { background:#FFE8E9; color:#4A0D12; }
.tostada button {
  border:none; background:none; font:600 14px var(--font-body); color:var(--accent-ink, #0E3F97);
  cursor:pointer; padding:.35rem .5rem; border-radius:8px;
}
html[data-oscuro="1"] .tostada button { color:#1556C7; }

/* ═══════════════════════════════ secciones ═══════════════════════════════ */

.seccion { padding:clamp(4rem, 8vw, 7rem) 0; position:relative; }
.seccion + .seccion { padding-top:0; }

.etiqueta {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.etiqueta b { color:var(--accent-2); font-weight:600; }

.titulo-seccion {
  font-size:clamp(2rem, 4.2vw, 3.35rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.04;
  margin:.9rem 0 1.1rem; max-width:20ch;
  text-wrap:balance;
}
/* En las secciones de dos columnas el titulo comparte el ancho: mas chico,
   para que no se parta en cuatro renglones. */
.escucha .titulo-seccion, .preguntas-grid .titulo-seccion { font-size:clamp(1.9rem, 3.3vw, 2.75rem); }
.bajada {
  color:var(--muted); font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.6;
  max-width:40rem; margin:0; text-wrap:pretty;
}

/* ═══════════════════════════════ heroe ═══════════════════════════════ */

.heroe { padding:clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 5vw, 4rem); overflow:hidden; }
.heroe .contenedor {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  align-items:center; gap:clamp(2rem, 5vw, 4.5rem);
}

.heroe-copia { max-width:36rem; }
.heroe h1 {
  font-size:clamp(2.7rem, 4.9vw, 4.3rem); font-weight:800;
  letter-spacing:-.032em; line-height:.98;
  margin:1.1rem 0 1.4rem;
}
.heroe h1 em { font-style:normal; color:var(--accent-2); }
.heroe .bajada { font-size:clamp(1.08rem, 1.6vw, 1.26rem); }
.heroe-botones { display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0 1.1rem; }
.heroe-pie { color:var(--faint); font-size:14px; margin:0; max-width:30rem; }

.pastilla-en-vivo {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .8rem .4rem .6rem; border-radius:var(--pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:13px; color:var(--muted); font-weight:500;
}
.pulso-vivo {
  width:8px; height:8px; border-radius:50%; background:#3ED9C4; position:relative; flex:none;
}
.pulso-vivo::after {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid #3ED9C4; opacity:0;
  animation:pulsoVivo 2.4s linear infinite;
}
@keyframes pulsoVivo { 0% { opacity:.7; } 70%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .pulso-vivo::after { animation:none; } }

@media (max-width: 960px) {
  .heroe .contenedor { grid-template-columns:1fr; }
  .heroe-copia { max-width:none; }
}

/* ── el escenario: el televisor y el telefono ─────────────────────────────
   Los dos aparatos miden su letra en `cqw` --porcentaje de SU PROPIO ANCHO--
   y no en `vw`: asi la maqueta escala pareja en cualquier columna, y un
   televisor mas angosto no termina con la quinta fila cortada.

   En pantallas anchas el escenario se sale del contenedor hacia la derecha:
   una maqueta que no se lee no muestra nada. */

/* El escenario TAMBIEN es contenedor: el marco de cada aparato se mide contra
   el escenario, y lo de adentro contra el aparato. Sin esto, `cqw` en el
   propio marco cae al ancho de la ventana y el telefono sale con forma de
   pastilla. */
.escenario { position:relative; aspect-ratio:1.5; container-type:inline-size; }
@media (min-width: 1100px) {
  .escenario { margin-right:calc(-1 * min(9rem, (100vw - var(--ancho)) / 2 - 1.5rem)); }
}

.tv {
  position:absolute; top:7%; left:0; width:71%; aspect-ratio:16 / 10;
  container-type:inline-size;
  border-radius:2.6cqw; padding:1.85cqw;
  background:linear-gradient(180deg, #151A23, #0C1017);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(0,0,0,.85),
             0 0 0 1px rgba(0,0,0,.4);
}
.tv-pantalla {
  height:100%; border-radius:2cqw; overflow:hidden; position:relative;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(74,141,240,.2), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(21,86,199,.22), transparent 60%),
    #0D1119;
  display:grid; grid-template-columns:30% 1fr; gap:3.4cqw; padding:3.6cqw 3.8cqw;
}
.tv-qr { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2cqw; min-width:0; }
.tv-marca { display:flex; align-items:center; gap:1cqw; font:800 2.5cqw/1 var(--font-display); color:#E8EDF7; white-space:nowrap; }
.tv-marca i { width:1.3em; height:1.3em; border-radius:50%; background:var(--blue-orb); }
.tv-qr .qr-caja {
  width:100%; aspect-ratio:1; border-radius:1.8cqw; background:#fff; padding:2.4cqw;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.7);
}
.tv-qr .qr-caja img { width:100%; height:100%; }
.tv-qr p { margin:0; text-align:center; color:#A3AEC2; font-size:1.9cqw; line-height:1.35; }
.tv-qr p b { display:block; color:#7DB6FF; font-weight:600; }

.tv-tablero { min-width:0; display:flex; flex-direction:column; gap:2cqw; }
.tv-titulo { display:flex; align-items:center; justify-content:space-between; gap:1.5cqw; }
.tv-titulo h3 { font:800 4cqw/1.05 var(--font-display); letter-spacing:-.02em; color:#E8EDF7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-vivo {
  display:inline-flex; align-items:center; gap:.9cqw; flex:none;
  font:600 1.55cqw/1 var(--font-body); letter-spacing:.14em; color:#A3AEC2;
}
.tv-vivo .pulso-vivo { width:1.2cqw; height:1.2cqw; }
/* Fuera de la maqueta del televisor no hay contenedor que medir: el indicador
   vuelve a tamaño fijo. */
.perfil-demo .tv-vivo, .caja-titulo .tv-vivo { font-size:11px; gap:6px; }
.perfil-demo .tv-vivo .pulso-vivo, .caja-titulo .tv-vivo .pulso-vivo { width:7px; height:7px; }

.tv-cifras { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4cqw; }
.tv-cifras div {
  border-radius:1.4cqw; padding:1.3cqw 0 1.1cqw; text-align:center;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06);
}
.tv-cifras b { display:block; font:800 3.7cqw/1 var(--font-display); color:#E8EDF7; font-variant-numeric:tabular-nums; }
.tv-cifras span { display:block; margin-top:.7cqw; font-size:1.25cqw; letter-spacing:.14em; text-transform:uppercase; color:#8892A6; }

.tv-ranking { list-style:none; margin:0; padding:0; position:relative; display:grid; gap:1.05cqw; align-content:start; }
.tv-ranking li {
  position:relative; display:grid; grid-template-columns:1.2em 1.9em minmax(0, 1fr) auto; align-items:center; gap:.6em;
  padding:.36em .75em; border-radius:1.2cqw; overflow:hidden;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06);
  font-size:2.15cqw; color:#E8EDF7;
  transition:transform 520ms var(--curva), background-color var(--medio) var(--curva), border-color var(--medio) var(--curva);
}
.tv-ranking li.sube { background:rgba(74,141,240,.16); border-color:rgba(125,182,255,.35); }
.tv-ranking .puesto { color:#7DB6FF; font-weight:700; font-variant-numeric:tabular-nums; }
.tv-ranking .que { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tv-ranking .que small { color:#8892A6; font-size:.86em; }
.tv-ranking .votos { font-weight:700; font-variant-numeric:tabular-nums; }
.mini-disco {
  width:1.9em; height:1.9em; border-radius:50%; display:grid; place-items:center;
  font:800 .8em/1 var(--font-display); color:#fff;
  background:radial-gradient(circle at 34% 26%, hsl(var(--tono,214) 85% 66%), hsl(var(--tono,214) 78% 46%) 52%, hsl(var(--tono,214) 82% 30%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
}

/* ── la tele nueva de la maqueta: el video grande y el QR al costado ──
   El mismo reparto que la pantalla de verdad (tele.css). El «video» es una
   escena dibujada: dos haces de luz que laten en bucle, lineales, y el salon a
   contraluz. Nada gira ni cambia de escala. */
.tv-pantalla.tvn { display:flex; flex-direction:column; gap:2.2cqw; padding:3cqw 3.2cqw; }
.tvn-cabecera { display:flex; align-items:baseline; justify-content:space-between; gap:2cqw; min-width:0; }
.tvn-titulo { margin:0; min-width:0; font:500 3.3cqw/1.1 var(--font-display); letter-spacing:-.02em; color:#A3AEC2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvn-titulo b { color:#E8EDF7; font-weight:800; }
.tvn-cifras { margin:0; flex:none; font-size:1.55cqw; color:#8892A6; white-space:nowrap; }
.tvn-cifras b { color:#E8EDF7; font-variant-numeric:tabular-nums; }
.tvn-cuerpo { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 29%; gap:2.4cqw; }
.tvn-principal { display:flex; flex-direction:column; gap:1.5cqw; min-height:0; min-width:0; }
.tvn-video {
  flex:1; min-height:0; position:relative; overflow:hidden; border-radius:1.6cqw;
  background:
    radial-gradient(60% 70% at 30% 30%, rgba(74,141,240,.35), transparent 70%),
    radial-gradient(50% 60% at 80% 20%, rgba(192,132,252,.28), transparent 70%),
    linear-gradient(165deg, #1B2A48 0%, #0B1222 70%);
  border:1px solid rgba(255,255,255,.07);
}
.tvn-escena { position:absolute; inset:0; width:100%; height:100%; }
.tvn-escena .haz { animation:hazLatido 3.2s linear infinite; }
.tvn-escena .haz-b { animation-delay:-1.6s; }
@keyframes hazLatido { 0%, 100% { opacity:.35; } 50% { opacity:1; } }
.tvn-suena {
  position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:1.2cqw;
  padding:1cqw 1.4cqw 1.6cqw; border-radius:1.3cqw;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  font-size:1.9cqw; color:#E8EDF7;
}
.tvn-disco { font-size:1.2em; }
.tvn-suena .que { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; }
.tvn-suena .que small { color:#8892A6; font-weight:500; font-size:.86em; }
.tvn-porque { color:#7DB6FF; font-weight:700; font-size:.82em; white-space:nowrap; }
.tvn-progreso { position:absolute; left:1.4cqw; right:1.4cqw; bottom:.6cqw; height:.35cqw; border-radius:99px; background:rgba(125,182,255,.16); overflow:hidden; }
.tvn-progreso::after { content:""; position:absolute; inset:0 auto 0 0; width:0; border-radius:99px; background:linear-gradient(90deg, #4A8DF0, #7DB6FF); animation:avanza 24s linear infinite; }
@keyframes avanza { from { width:6%; } to { width:96%; } }
.tvn-lado { display:flex; flex-direction:column; gap:1.4cqw; min-width:0; }
.tvn-qr { display:grid; grid-template-columns:40% minmax(0, 1fr); align-items:center; gap:1.1cqw; padding:1cqw; border-radius:1.3cqw; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.tvn-qr .qr-caja { width:100%; aspect-ratio:1; border-radius:1cqw; background:#fff; padding:.8cqw; }
.tvn-qr .qr-caja img { width:100%; height:100%; display:block; }
.tvn-qr p { margin:0; font:700 1.65cqw/1.2 var(--font-display); color:#E8EDF7; }
.tvn-lado .tv-ranking { gap:.8cqw; }
.tvn-lado .tv-ranking li { font-size:1.7cqw; grid-template-columns:1em 1.7em minmax(0, 1fr) auto; gap:.5em; padding:.34em .6em; }
.tvn-lado .tv-ranking li:nth-child(n+5) { display:none; }
.tvn-lado .tv-ranking .que small { display:none; }
@media (prefers-reduced-motion: reduce) { .tvn-escena .haz, .tvn-progreso::after { animation:none; } .tvn-progreso::after { width:40%; } }

.fono {
  position:absolute; right:0; bottom:0; width:31%;
  container-type:inline-size;
  aspect-ratio:9 / 19; border-radius:4.6cqw;
  padding:.95cqw; background:#05070B;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 70px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5);
}
.fono-pantalla {
  height:100%; border-radius:12.5cqw; overflow:hidden; position:relative;
  background:radial-gradient(120% 60% at 0% 0%, rgba(74,141,240,.18), transparent 60%), #0E1219;
  padding:15cqw 6.5cqw 6cqw;
  display:flex; flex-direction:column; gap:3.4cqw;
}
.fono-pantalla::before {
  content:""; position:absolute; top:3.2cqw; left:50%; width:30%; height:6.5cqw;
  transform:translateX(-50%); border-radius:99px; background:#000;
}
.fono-cabecera { display:flex; align-items:center; gap:2.5cqw; font:800 6.4cqw/1 var(--font-display); color:#E8EDF7; white-space:nowrap; }
.fono-cabecera i { width:1.35em; height:1.35em; border-radius:50%; background:var(--blue-orb); }
.fono-cabecera span { margin-left:auto; font:500 .8em/1 var(--font-body); color:#8892A6; letter-spacing:.08em; }
.fono-puntos { display:flex; gap:2cqw; }
.fono-puntos i { width:3.2cqw; height:3.2cqw; border-radius:50%; background:#242C39; transition:background-color var(--medio) var(--curva); }
.fono-puntos i.hecho { background:#4A8DF0; }
.fono-pregunta { font:700 8.6cqw/1.15 var(--font-display); color:#E8EDF7; margin:1cqw 0 1.5cqw; letter-spacing:-.01em; }
.fono-cartas { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:2.8cqw; }
.carta {
  min-width:0;
  display:flex; align-items:center; gap:3.4cqw;
  padding:3.2cqw 3.4cqw; border-radius:5.5cqw;
  background:linear-gradient(180deg,#1A2029,#151A22);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.7);
  font-size:5.6cqw; color:#E8EDF7;
  transition:transform var(--medio) var(--curva), opacity var(--medio) var(--curva),
             border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.carta .mini-disco { width:2.5em; height:2.5em; font-size:.95em; flex:none; }
.carta .que { min-width:0; flex:1; line-height:1.25; }
.carta .que b { display:block; font-family:var(--font-display); font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.carta .que small { display:block; color:#8892A6; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.carta .elegir-mini {
  flex:none; font:600 .7em/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  color:#4A8DF0; background:#16233A; border-radius:99px; padding:.6em .75em;
  transition:background-color var(--medio) var(--curva), color var(--medio) var(--curva);
}
.carta.elegida { border-color:#4A8DF0; box-shadow:0 0 0 1.5px rgba(74,141,240,.55), 0 10px 18px -10px rgba(21,86,199,.8); }
.carta.elegida .elegir-mini { background:#4A8DF0; color:#fff; }
.carta.sale { opacity:0; transform:translateY(8px); }
.carta.entra { opacity:0; transform:translateY(-8px); }

/* La barra de abajo del juego: «Otras cinco» y «Ninguna», como en el telefono
   de verdad. */
.fono-barra {
  position:absolute; left:6.5cqw; right:6.5cqw; bottom:6cqw;
  display:grid; grid-template-columns:1.55fr 1fr; gap:2.6cqw;
}
.fono-barra span {
  display:grid; place-items:center; height:13cqw; border-radius:99px; white-space:nowrap;
  font:600 5.2cqw/1 var(--font-body); color:#E8EDF7;
  background:#1B212C; border:1px solid rgba(255,255,255,.08);
}
.fono-barra span:first-child { background:var(--blue-orb); border-color:transparent; }

.dedo {
  position:absolute; top:0; left:0; width:12cqw; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.6);
  opacity:0; pointer-events:none;
  transition:opacity 220ms var(--curva), transform 420ms var(--curva);
}
.dedo.toca { opacity:1; }

/* En el telefono del visitante se muestra solo el telefono del juego: es lo
   que va a tener en la mano, y un televisor de doscientos pixeles no se lee. */
@media (max-width: 960px) {
  .escenario { aspect-ratio:auto; max-width:17.5rem; width:70%; margin:.5rem auto 0; }
  .tv { display:none; }
  .fono { position:relative; width:100%; right:auto; bottom:auto; border-radius:15cqw; padding:3cqw; }
}

/* ═══════════════════════════════ los pasos ═══════════════════════════════ */

.pasos { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; margin:3.2rem 0 0; }
.paso {
  position:relative; padding:1.6rem 1.6rem 1.8rem;
  border-radius:var(--radius); background:var(--d3-grad);
  border:1px solid var(--borde-superficie); box-shadow:var(--d3-sm);
  display:flex; flex-direction:column; gap:.8rem;
}
.paso .numero {
  font:600 13px/1 var(--font-body); letter-spacing:.14em; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.paso h3 { font-size:1.4rem; font-weight:700; letter-spacing:-.02em; }
.paso p { margin:0; color:var(--muted); line-height:1.6; }
.paso .dibujo {
  height:132px; margin:-.2rem 0 .4rem; border-radius:14px;
  background:
    radial-gradient(80% 90% at 20% 10%, rgba(74,141,240,.14), transparent 70%),
    var(--surface-2);
  border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.paso .dibujo svg { width:100%; height:100%; }

@media (max-width: 900px) { .pasos { grid-template-columns:1fr; } }

/* ═══════════════════════════ el dj que escucha ═══════════════════════════ */

.escucha { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .92fr); gap:clamp(2rem, 6vw, 5rem); align-items:center; }
.principios { list-style:none; margin:2.2rem 0 0; padding:0; display:grid; gap:1.4rem; }
.principios li { display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; align-items:start; }
.principios .icono {
  width:2.6rem; height:2.6rem; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-2);
}
.principios .icono svg { width:20px; height:20px; }
.principios h3 { font-size:1.12rem; font-weight:700; letter-spacing:-.01em; margin:.1rem 0 .3rem; }
.principios p { margin:0; color:var(--muted); line-height:1.6; }

.perfil-demo {
  border-radius:var(--radius-lg); padding:clamp(1.4rem, 3vw, 2.2rem);
  background:var(--d3-grad); border:1px solid var(--borde-superficie); box-shadow:var(--d3-lg);
}
.perfil-demo header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.perfil-demo h3 { font-size:13px; font-family:var(--font-body); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.barras { list-style:none; margin:0; padding:0; display:grid; gap:1.05rem; }
.barras li { display:grid; grid-template-columns:7.5rem 1fr 3rem; align-items:center; gap:1rem; }
.barras .nombre { font:600 1.05rem/1.1 var(--font-display); }
.barras .pista { height:12px; border-radius:99px; background:var(--line); overflow:hidden; position:relative; }
/* La barra CRECE por desplazamiento, no por escala: el relleno entra desde la
   izquierda con translateX dentro de una pista que lo recorta. */
.barras .relleno {
  position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(90deg, #1556C7, #4A8DF0);
  transform:translateX(-100%);
  transition:transform 900ms var(--curva);
}
.barras .cifra-barra { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; font-size:14px; }
.perfil-demo .frase {
  margin:1.8rem 0 0; font:700 clamp(1.2rem, 2vw, 1.5rem)/1.25 var(--font-display); letter-spacing:-.015em;
  min-height:2.5em;
}
.perfil-demo .frase span { color:var(--accent-2); }
.cartas-reparto { display:flex; gap:.45rem; margin-top:1.5rem; align-items:center; flex-wrap:wrap; }
.cartas-reparto i {
  width:2.1rem; height:2.8rem; border-radius:8px; display:block;
  background:var(--surface-2); border:1px solid var(--line);
}
.cartas-reparto i.sigue { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.cartas-reparto span { color:var(--muted); font-size:13.5px; margin-left:.5rem; }

@media (max-width: 960px) { .escucha { grid-template-columns:1fr; } }
@media (max-width: 480px) { .barras li { grid-template-columns:5.6rem 1fr 2.6rem; gap:.7rem; } }

/* ═══════════════════════════════ rasgos ═══════════════════════════════ */

.rasgos { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; margin-top:3rem;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.rasgo { background:var(--bg); padding:1.8rem 1.6rem 2rem; display:flex; flex-direction:column; gap:.7rem; }
.rasgo .icono { width:2.4rem; height:2.4rem; color:var(--accent-2); }
.rasgo .icono svg { width:26px; height:26px; }
.rasgo h3 { font-size:1.12rem; font-weight:700; letter-spacing:-.01em; }
.rasgo p { margin:0; color:var(--muted); line-height:1.6; font-size:15px; }
@media (max-width: 900px) { .rasgos { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rasgos { grid-template-columns:1fr; } }

/* ═══════════════════════════════ preguntas ═══════════════════════════════ */

.preguntas-grid { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(2rem, 6vw, 5rem); align-items:start; }
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; font:600 1.1rem/1.35 var(--font-display); letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary .mas { width:22px; height:22px; flex:none; color:var(--muted); }
/* El «+» se vuelve «−» apagando su trazo vertical. No gira: el manual no deja
   que nada gire. */
.faq summary .mas .v { transition:opacity var(--medio) var(--curva); }
.faq details[open] summary .mas .v { opacity:0; }
.faq .respuesta { color:var(--muted); line-height:1.65; padding:0 2.5rem 1.4rem 0; margin:0; }
.faq details[open] .respuesta { animation:entraAbajo var(--medio) var(--curva) both; }
@keyframes entraAbajo { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (max-width: 900px) { .preguntas-grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════ el llamado ═══════════════════════════════ */

.llamado {
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(3rem, 7vw, 5.5rem) 1.5rem;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(74,141,240,.28), transparent 70%),
    var(--surface);
  border:1px solid var(--borde-superficie-fuerte);
  box-shadow:var(--d3-lg);
}
.llamado h2 { font-size:clamp(2rem, 4.6vw, 3.6rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin:0 auto 1rem; max-width:16ch; }
.llamado p { color:var(--muted); margin:0 auto 2rem; max-width:34rem; font-size:1.08rem; }

/* ═══════════════════════════════ pie ═══════════════════════════════ */

.pie-sitio { padding:3rem 0 3.5rem; border-top:1px solid var(--line); margin-top:clamp(4rem, 9vw, 7rem); color:var(--faint); font-size:14px; }
.pie-sitio .contenedor { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; }
.pie-sitio .de-onda { display:inline-flex; align-items:center; gap:.6rem; }
.pie-sitio .de-onda img { width:22px; height:22px; }
.pie-sitio nav { margin-left:auto; display:flex; gap:1.25rem; }
.pie-sitio a { text-decoration:none; color:var(--muted); }
@media (hover:hover) { .pie-sitio a:hover { color:var(--ink); } }

/* ══════════════════════════════════════════════════════════════════════════
   EL ESPACIO DEL ORGANIZADOR
   ══════════════════════════════════════════════════════════════════════════ */

.app-principal { padding:clamp(1.5rem, 4vw, 3rem) 0 5rem; }

.miga { display:flex; align-items:center; gap:.5rem; color:var(--faint); font-size:14px; margin:0 0 1rem; flex-wrap:wrap; }
.miga a { color:var(--muted); text-decoration:none; }
@media (hover:hover) { .miga a:hover { color:var(--ink); } }

.cabeza-pagina { display:flex; align-items:flex-end; justify-content:space-between; gap:1.25rem 2rem; flex-wrap:wrap; margin-bottom:2rem; }
.cabeza-pagina h1 { font-size:clamp(2rem, 4.4vw, 3.2rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
.cabeza-pagina .detalle { color:var(--muted); margin:.6rem 0 0; display:flex; gap:.4rem 1rem; flex-wrap:wrap; align-items:center; }

.pildora {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .75rem; border-radius:var(--pill);
  font:600 12.5px/1 var(--font-body); letter-spacing:.02em; white-space:nowrap;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.pildora::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.9; }
.pildora.previo { color:#F5C26B; background:rgba(245,194,107,.08); border-color:rgba(245,194,107,.22); }
.pildora.en_vivo { color:#3ED9C4; background:rgba(62,217,196,.08); border-color:rgba(62,217,196,.25); }
.pildora.cerrado { color:var(--muted); }

.tablero-app { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:1.25rem; }
.caja {
  grid-column:span 12; min-width:0;
  border-radius:var(--radius); background:var(--d3-grad);
  border:1px solid var(--borde-superficie); box-shadow:var(--d3-sm);
  padding:clamp(1.2rem, 2.4vw, 1.75rem);
}
.caja-4 { grid-column:span 4; } .caja-5 { grid-column:span 5; } .caja-7 { grid-column:span 7; } .caja-8 { grid-column:span 8; }
@media (max-width: 980px) { .caja-4, .caja-5, .caja-7, .caja-8 { grid-column:span 12; } }

.caja-titulo { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.2rem; }
.caja-titulo h2 { font-size:1.2rem; font-weight:700; letter-spacing:-.015em; }
.caja-titulo p { margin:.2rem 0 0; color:var(--muted); font-size:14px; }
.caja .ayuda { color:var(--muted); font-size:14px; line-height:1.55; margin:.2rem 0 1rem; }

/* ── el QR ── */
.qr-grande {
  width:min(100%, 17rem); aspect-ratio:1; margin:0 auto 1.1rem; border-radius:22px;
  background:#fff; padding:1.1rem; box-shadow:0 18px 40px -20px rgba(0,0,0,.8);
}
.qr-grande img { width:100%; height:100%; }
.direccion-copiable {
  display:flex; align-items:center; gap:.5rem; width:100%;
  padding:.45rem .45rem .45rem .95rem; border-radius:var(--pill);
  background:var(--surface-2); border:1px solid var(--line); margin-bottom:1rem;
}
.direccion-copiable code {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 14px/1.2 var(--font-body); color:var(--accent-2);
}
.fila-botones { display:flex; flex-wrap:wrap; gap:.6rem; }
.fila-botones .btn { flex:1 1 auto; }

/* ── las cifras ── */
.cifras-app { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; margin-bottom:1.25rem; }
.cifras-app div { padding:1rem .9rem; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line); }
.cifras-app b { display:block; font:800 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cifras-app b.llega { animation:llegaDato 520ms var(--curva); color:#3ED9C4; }
.cifras-app span { display:block; margin-top:.45rem; color:var(--muted); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }
@keyframes llegaDato { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.ranking-app { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.ranking-app li {
  display:grid; grid-template-columns:1.6rem 2.4rem minmax(0, 1fr) auto; align-items:center; gap:.75rem;
  padding:.5rem .75rem; border-radius:12px; background:var(--surface-2); border:1px solid var(--line);
  animation:entraAbajo var(--medio) var(--curva) both; animation-delay:calc(var(--i, 0) * 60ms);
}
.ranking-app .puesto { color:var(--accent-2); font-weight:700; font-variant-numeric:tabular-nums; text-align:center; }
.ranking-app .que { min-width:0; }
.ranking-app .que b { display:block; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ranking-app .que small { display:block; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ranking-app .votos { font-weight:700; font-variant-numeric:tabular-nums; }

/* El disco del espacio: la caratula si hay, el orbe con la inicial si no. */
.disco-app {
  width:2.4rem; height:2.4rem; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center; font:800 .95rem/1 var(--font-display); color:#fff;
  background:radial-gradient(circle at 34% 26%, hsl(var(--tono,214) 85% 66%), hsl(var(--tono,214) 78% 46%) 52%, hsl(var(--tono,214) 82% 30%));
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.35);
}
.disco-app img { width:100%; height:100%; object-fit:cover; }

/* ── la lista ── */
.medidor { margin:.2rem 0 1.2rem; }
.medidor-texto { display:flex; justify-content:space-between; gap:1rem; font-size:14px; color:var(--muted); margin-bottom:.55rem; }
.medidor-texto b { color:var(--ink); font-variant-numeric:tabular-nums; }
.medidor-pista { height:8px; border-radius:99px; background:var(--line); overflow:hidden; position:relative; }
.medidor-relleno { position:absolute; inset:0; border-radius:99px; background:linear-gradient(90deg,#1556C7,#4A8DF0); transform:translateX(-100%); transition:transform var(--largo) var(--curva); }
.medidor.alcanza .medidor-relleno { background:linear-gradient(90deg,#1556C7,#3ED9C4); }

.buscador {
  display:flex; align-items:center; gap:.6rem; padding:0 .9rem; min-height:44px;
  border-radius:12px; background:var(--surface-2); border:1px solid var(--line); margin-bottom:.8rem;
  transition:border-color var(--micro) var(--curva);
}
.buscador:focus-within { border-color:color-mix(in srgb, var(--accent) 65%, transparent); }
.buscador svg { width:18px; height:18px; color:var(--faint); flex:none; }
.buscador input { flex:1; min-width:0; border:none; outline:none; background:none; color:var(--ink); font:inherit; font-size:15px; }

.lista-canciones {
  list-style:none; margin:0; padding:0; display:grid; gap:.35rem;
  max-height:32rem; overflow:auto; padding-right:.25rem; overscroll-behavior:contain;
}
.lista-canciones li {
  display:grid; align-items:center; gap:.75rem;
  padding:.45rem .5rem .45rem .5rem; border-radius:12px;
  transition:background-color var(--micro) var(--curva), opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
@media (hover:hover) { .lista-canciones li:hover { background:var(--surface-2); } }
.lista-canciones li.se-va { opacity:0; transform:translateX(10px); }
.lista-canciones .que { min-width:0; }
.lista-canciones .que b { display:block; font-weight:600; font-size:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lista-canciones .que small { display:block; color:var(--muted); font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.genero-mini { font-size:12px; color:var(--muted); padding:.2rem .55rem; border-radius:99px; border:1px solid var(--line); white-space:nowrap; }
.quitar {
  width:34px; height:34px; border-radius:10px; border:none; background:none; color:var(--faint);
  display:grid; place-items:center; cursor:pointer;
  transition:color var(--micro) var(--curva), background-color var(--micro) var(--curva);
}
.quitar svg { width:16px; height:16px; }
@media (hover:hover) { .quitar:hover { color:#ff9aa0; background:rgba(229,72,77,.12); } }
@media (max-width: 560px) { .genero-mini { display:none; } }

/* ── la música ── */
.pildora.suena { color:var(--accent-2); background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
.pildora.callada { color:#F5C26B; background:rgba(245,194,107,.08); border-color:rgba(245,194,107,.22); }
.aviso-musica {
  margin:0 0 1rem; padding:.7rem .9rem; border-radius:12px; font-size:14px; line-height:1.5;
  background:rgba(245,194,107,.06); border:1px solid rgba(245,194,107,.22); color:#F5C26B;
  animation:entraAbajo var(--medio) var(--curva) both;
}
.suena-app {
  position:relative; display:grid; grid-template-columns:4.2rem minmax(0, 1fr) auto; align-items:center;
  gap:.35rem 1rem; padding:.9rem 1rem 1.25rem; margin:0 0 1.4rem;
  border-radius:16px; background:var(--surface-2); border:1px solid var(--line);
  animation:entraAbajo var(--medio) var(--curva) both;
}
.suena-disco .disco-app { width:4.2rem; height:4.2rem; font-size:1.4rem; }
.suena-app .que { min-width:0; }
.suena-app .que b { display:block; font:700 1.15rem/1.25 var(--font-display); letter-spacing:-.01em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.suena-app .que small { display:block; color:var(--muted); font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.suena-app .que .rotulo-suena { color:var(--faint); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.15rem; }
.controles-musica { display:flex; gap:.45rem; }
.suena-app .por-que { grid-column:2 / -1; margin:0; color:var(--accent-2); font-size:13.5px; font-weight:600; }
.progreso-app { position:absolute; left:1rem; right:1rem; bottom:.6rem; height:3px; border-radius:99px; background:var(--line); overflow:hidden; }
.progreso-app i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width 1s linear; }
.progreso-app.sin-dato { visibility:hidden; }
@media (max-width: 560px) {
  .suena-app { grid-template-columns:3.4rem minmax(0, 1fr); }
  .suena-disco .disco-app { width:3.4rem; height:3.4rem; }
  .controles-musica { grid-column:1 / -1; }
  .controles-musica .btn { flex:1; }
}
.subtitulo-viene { margin-top:.2rem; }
.ranking-app.viene li { grid-template-columns:1.6rem 2.4rem minmax(0, 1fr) auto; }
.ayuda-continuacion { margin:1rem 0 0 !important; font-size:13.5px !important; }
.poner {
  min-height:34px; padding:0 .7rem; border-radius:10px; border:1px solid var(--line); background:none; color:var(--muted);
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; white-space:nowrap;
  font:600 12.5px/1 var(--font-body);
  transition:color var(--micro) var(--curva), background-color var(--micro) var(--curva), border-color var(--micro) var(--curva);
}
.poner svg { width:14px; height:14px; }
@media (hover:hover) { .poner:hover { color:var(--ink); background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); } }
.lista-canciones li { grid-template-columns:2.4rem minmax(0, 1fr) auto auto auto; }
@media (max-width: 560px) { .poner span { display:none; } .lista-canciones li { grid-template-columns:2.4rem minmax(0, 1fr) auto auto; } }
.caja-cierre .enlace-noche { margin:0 0 1.2rem; }

.pestanas { display:flex; gap:.35rem; padding:.3rem; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); margin:0 0 1rem; overflow-x:auto; }
.pestanas button {
  flex:1 0 auto; min-height:38px; padding:0 .9rem; border-radius:10px; border:none; cursor:pointer;
  background:none; color:var(--muted); font:600 14px var(--font-body);
  transition:background-color var(--micro) var(--curva), color var(--micro) var(--curva);
}
.pestanas button[aria-selected="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--d3-sm); }
.panel-pestana { animation:entraAbajo var(--medio) var(--curva) both; }

.subtitulo-caja {
  font:600 12px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .8rem;
}
.sin-resolver { list-style:none; margin:1rem 0 0; padding:.8rem 1rem; border-radius:12px; background:rgba(245,194,107,.06); border:1px solid rgba(245,194,107,.2); font-size:13.5px; color:var(--muted); display:grid; gap:.3rem; }
.sin-resolver .sin-resolver-titulo { color:#F5C26B; font-weight:600; margin-bottom:.2rem; }
.campo-s.campo-en-linea { display:flex; align-items:center; gap:.6rem; margin:0; }
.campo-en-linea select { min-height:38px; width:auto; padding:.3rem 2rem .3rem .8rem; font-size:14px; }
.mas-opciones { margin:0 0 1rem; }
.mas-opciones summary { cursor:pointer; color:var(--muted); font-size:14.5px; font-weight:500; margin-bottom:1rem; width:max-content; }
@media (hover:hover) { .mas-opciones summary:hover { color:var(--ink); } }

/* ── formularios ── */
.campo-s { display:grid; gap:.45rem; margin:0 0 1.2rem; }
.campo-s > span, .campo-s legend { font-size:14px; font-weight:600; color:var(--ink); }
.campo-s small { color:var(--faint); font-size:13px; }
.campo-s input, .campo-s textarea, .campo-s select {
  width:100%; min-height:48px; padding:.75rem .95rem;
  border-radius:12px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); font:inherit; font-size:16px; outline:none;
  transition:border-color var(--micro) var(--curva), box-shadow var(--micro) var(--curva);
}
.campo-s textarea { min-height:9rem; line-height:1.55; resize:vertical; font-size:15px; }
.campo-s input:focus, .campo-s textarea:focus, .campo-s select:focus {
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.campo-s input::placeholder, .campo-s textarea::placeholder { color:var(--faint); }
.campo-s input[aria-invalid="true"] { border-color:#e5484d; }
.campo-s .error-campo { color:#ff9aa0; font-size:13px; }
fieldset.campo-s { border:none; padding:0; min-width:0; }
fieldset.campo-s legend { padding:0; margin-bottom:.45rem; }

.primeros-pasos { color:var(--muted); font-size:14.5px; }
.primeros-pasos p { margin:0 0 .9rem; }
.primeros-pasos ol { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; counter-reset:paso; }
.primeros-pasos li { counter-increment:paso; display:grid; grid-template-columns:1.9rem 1fr; gap:.75rem; align-items:start; line-height:1.5; }
.primeros-pasos li::before {
  content:counter(paso); width:1.9rem; height:1.9rem; border-radius:50%;
  display:grid; place-items:center; font:600 13px/1 var(--font-body); font-variant-numeric:tabular-nums;
  color:var(--accent-2); background:var(--accent-soft);
}
.primeros-pasos b { color:var(--ink); font-weight:600; }
.dos-campos { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width: 560px) { .dos-campos { grid-template-columns:1fr; } }

.opciones { display:flex; flex-wrap:wrap; gap:.5rem; }
.opcion {
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:42px; padding:0 1rem; border-radius:var(--pill);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  font:500 14.5px var(--font-body); cursor:pointer;
  transition:background-color var(--micro) var(--curva), border-color var(--micro) var(--curva),
             color var(--micro) var(--curva), transform var(--micro) var(--curva);
}
@media (hover:hover) { .opcion:hover { border-color:var(--borde-superficie-fuerte); transform:translateY(-1px); } }
.opcion:active { transform:translateY(1px); }
.opcion[aria-pressed="true"], .opcion[aria-checked="true"] {
  background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 60%, transparent);
}
.opcion .tilde { width:15px; height:15px; display:none; }
.opcion[aria-pressed="true"] .tilde, .opcion[aria-checked="true"] .tilde { display:block; }

/* ── la vista previa de la pantalla, en /crear ──
   Un televisor en miniatura con el mismo reparto que la pantalla de verdad
   (tele.css): el nombre arriba, el video, y al costado el QR. Todo en cqw para
   que escale con el ancho de la hoja. */
.vista-previa { margin:.4rem 0 1.2rem; padding:1.1rem; border-radius:18px; background:var(--surface-2); border:1px solid var(--line); }
.vista-tele { container-type:inline-size; margin:0 0 1.2rem; }
.vt-pantalla {
  aspect-ratio:16 / 9; border-radius:2.2cqw; overflow:hidden; padding:3cqw 3.4cqw;
  background:radial-gradient(70% 90% at 15% 0%, rgba(74,141,240,.2), transparent 70%), linear-gradient(180deg,#111722,#0B0F16);
  border:1px solid var(--borde-superficie); box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
  display:flex; flex-direction:column; gap:2.2cqw;
}
.vt-titulo {
  margin:0; font:500 4.1cqw/1.08 var(--font-display); letter-spacing:-.02em; color:#A3AEC2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vt-titulo b { color:#E8EDF7; font-weight:800; }
.vt-titulo span, .vt-bajada { transition:opacity var(--micro) var(--curva); }
.vt-bajada { margin:.8cqw 0 0; font-size:2.2cqw; color:#8892A6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-cuerpo { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 24cqw; gap:2.2cqw; }
.vt-video {
  border-radius:1.6cqw; display:grid; place-items:center;
  background:linear-gradient(135deg, #1B2A48 0%, #0E1626 55%, #13203A 100%);
  border:1px solid rgba(255,255,255,.06);
}
.vt-play { width:0; height:0; border-style:solid; border-width:2.2cqw 0 2.2cqw 3.6cqw; border-color:transparent transparent transparent rgba(232,237,247,.85); margin-left:.8cqw; }
.vt-lado { display:flex; flex-direction:column; gap:1.2cqw; }
.vt-qr { background:#fff; border-radius:1.4cqw; padding:1cqw; aspect-ratio:1; }
.vt-qr img { width:100%; height:100%; display:block; }
.vt-lado i { display:block; height:3.4cqw; border-radius:1cqw; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.05); }
.vista-previa .campo-s:last-child { margin-bottom:0; }
#titulo-sugerido, #frase-sugerida { color:var(--accent-2); }

.vista-direccion { margin:.1rem 0 0; font-size:14px; color:var(--faint); overflow-wrap:anywhere; }
.vista-direccion b { color:var(--accent-2); font-weight:600; }

/* ── crear: la hoja ── */
.hoja { width:min(100% - 2.5rem, 42rem); margin-inline:auto; }
.hoja .caja { padding:clamp(1.4rem, 3.5vw, 2.4rem); }
.hoja h1 { font-size:clamp(2.1rem, 5vw, 3.1rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin:.6rem 0 .6rem; }
.hoja .bajada { margin-bottom:2rem; font-size:1.05rem; }
.acciones-hoja { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }

.armando { text-align:center; padding:2.5rem .5rem 1.5rem; }
.armando h2 { font-size:clamp(1.5rem, 3.4vw, 2rem); font-weight:800; letter-spacing:-.025em; margin:1.6rem 0 .5rem; }
.armando p { color:var(--muted); margin:0; }
.pasos-armado { list-style:none; margin:2rem auto 0; padding:0; display:grid; gap:.6rem; max-width:22rem; text-align:left; }
.pasos-armado li { display:flex; align-items:center; gap:.75rem; color:var(--faint); transition:color var(--medio) var(--curva); }
.pasos-armado li i { width:10px; height:10px; border-radius:50%; background:var(--line); flex:none; transition:background-color var(--medio) var(--curva); }
.pasos-armado li.hecho { color:var(--muted); }
.pasos-armado li.hecho i { background:var(--accent); }
.pasos-armado li.ahora { color:var(--ink); }
.pasos-armado li.ahora i { background:#3ED9C4; }

.onda-carga { width:120px; height:48px; margin:0 auto; display:block; color:#3ED9C4; overflow:hidden; }
.onda-carga path { animation:ondaCorre 2.6s linear infinite; }
@keyframes ondaCorre { from { transform:translateX(0); } to { transform:translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .onda-carga path { animation:none; } }

/* ── mis eventos ── */
.grilla-eventos { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap:1.1rem; }
.evento-tarjeta {
  display:flex; flex-direction:column; gap:1rem; text-decoration:none; color:inherit;
  border-radius:var(--radius); background:var(--d3-grad); border:1px solid var(--borde-superficie); box-shadow:var(--d3-sm);
  padding:1.35rem 1.35rem 1.2rem;
  transition:transform var(--micro) var(--curva), box-shadow var(--micro) var(--curva), border-color var(--micro) var(--curva);
  animation:entraAbajo var(--medio) var(--curva) both; animation-delay:calc(var(--i, 0) * 60ms);
}
@media (hover:hover) { .evento-tarjeta:hover { transform:translateY(-3px); box-shadow:var(--d3-md); border-color:var(--borde-superficie-fuerte); } }
.evento-tarjeta header { display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; }
.evento-tarjeta h2 { font-size:1.25rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; overflow-wrap:anywhere; }
.evento-tarjeta .cuando { color:var(--muted); font-size:14px; margin:.3rem 0 0; }
.evento-tarjeta .numeros { display:flex; gap:1.25rem; color:var(--muted); font-size:13.5px; margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line); }
.evento-tarjeta .numeros b { color:var(--ink); font-variant-numeric:tabular-nums; margin-right:.25rem; }

.vacio { text-align:center; padding:clamp(3rem, 8vw, 5rem) 1.5rem; border-radius:var(--radius-lg); border:1px dashed var(--line); }
.vacio h2 { font-size:clamp(1.5rem, 3.4vw, 2.1rem); font-weight:800; letter-spacing:-.025em; margin:1.2rem 0 .5rem; }
.vacio p { color:var(--muted); margin:0 auto 1.6rem; max-width:28rem; }

.esqueleto-app { border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); min-height:10rem; animation:respiraApp 1.6s ease-in-out infinite; }
@keyframes respiraApp { 0%,100% { opacity:.5; } 50% { opacity:.85; } }
@media (prefers-reduced-motion: reduce) { .esqueleto-app { animation:none; } }

.zona-peligro { margin-top:3rem; }
.zona-peligro summary { cursor:pointer; color:var(--faint); font-size:14px; list-style:none; display:inline-flex; align-items:center; gap:.4rem; }
.zona-peligro summary::-webkit-details-marker { display:none; }
.zona-peligro .caja { margin-top:1rem; border-color:rgba(229,72,77,.25); }

/* ── dialogo de confirmacion ── */
dialog.dialogo {
  width:min(92vw, 28rem); padding:0; border:1px solid var(--borde-superficie-fuerte);
  border-radius:var(--radius); background:var(--surface); color:var(--ink);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
}
dialog.dialogo[open] { animation:entraAbajo var(--medio) var(--curva) both; }
dialog.dialogo::backdrop { background:rgba(5,7,14,.62); backdrop-filter:blur(3px); }
.dialogo-cuerpo { padding:1.5rem 1.5rem 1.25rem; }
.dialogo-cuerpo h2 { font-size:1.3rem; font-weight:700; letter-spacing:-.015em; margin:0 0 .5rem; }
.dialogo-cuerpo p { color:var(--muted); margin:0; line-height:1.55; }
.dialogo-pie { display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.5rem 1.4rem; }

/* ══════════════════════════════ el cartel ══════════════════════════════ */

body.cartel { background:#F4F6FB; color:#0E1219; min-height:100%; }
body.cartel::before, body.cartel::after { display:none; }
.barra-cartel { display:flex; justify-content:center; gap:.6rem; padding:1.2rem; }
.barra-cartel .btn-fantasma { color:#0E1219; border-color:#D5DBE7; background:#fff; }
.hoja-cartel {
  width:min(100% - 2rem, 210mm); aspect-ratio:210 / 297; margin:0 auto 3rem;
  background:#fff; border-radius:18px; box-shadow:0 30px 60px -30px rgba(14,18,25,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:9% 9% 7%; text-align:center; overflow:hidden; position:relative;
}
.hoja-cartel .arriba { display:flex; flex-direction:column; align-items:center; gap:3cqh; width:100%; }
.hoja-cartel { container-type:size; }
.hoja-cartel .marca-cartel { display:inline-flex; align-items:center; gap:.6em; font:800 3.2cqw/1 var(--font-display); letter-spacing:-.02em; }
.hoja-cartel .marca-cartel i { width:1.3em; height:1.3em; border-radius:50%; background:var(--blue-orb); }
.hoja-cartel h1 { font:800 7.6cqw/1.02 var(--font-display); letter-spacing:-.04em; margin:0; color:#0E1219; text-wrap:balance; }
.hoja-cartel .nombre-evento { font:600 3.6cqw/1.25 var(--font-body); color:#5F6779; margin:0; overflow-wrap:anywhere; }
.hoja-cartel .qr-cartel { width:64%; aspect-ratio:1; }
.hoja-cartel .qr-cartel img { width:100%; height:100%; }
.hoja-cartel .pasos-cartel { display:flex; justify-content:center; gap:4cqw; font:500 2.5cqw/1.3 var(--font-body); color:#3C4455; }
.hoja-cartel .pasos-cartel b { color:#1556C7; margin-right:.35em; }
.hoja-cartel .direccion-cartel { font:600 2.6cqw/1 var(--font-body); color:#1556C7; margin:0; overflow-wrap:anywhere; }
.hoja-cartel .firma-cartel { font:500 2cqw/1 var(--font-body); color:#8892A6; margin:2.2cqh 0 0; }

@media print {
  @page { size:A4 portrait; margin:0; }
  body.cartel { background:#fff; }
  .barra-cartel { display:none; }
  .hoja-cartel { width:210mm; height:297mm; margin:0; border-radius:0; box-shadow:none; }
}

/* ══════════════════════════════ lo legal ══════════════════════════════ */

.legal { width:min(100% - 2.5rem, 46rem); margin:0 auto; padding:clamp(2rem, 6vw, 4rem) 0 2rem; }
.legal h1 { font-size:clamp(2rem, 5vw, 3rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; margin:.4rem 0 .4rem; }
.legal .fecha { color:var(--faint); margin:0 0 2rem; font-size:14px; }
.legal h2 { font-size:1.3rem; font-weight:700; letter-spacing:-.015em; margin:2.6rem 0 .8rem; }
.legal p, .legal li { color:var(--muted); line-height:1.7; }
.legal li { margin:.35rem 0; }
.legal strong { color:var(--ink); font-weight:600; }
.legal a { color:var(--accent-2); }
.legal .quien { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:0 0 1.5rem; }
.legal .quien p { margin:.15rem 0; }
.legal table { width:100%; border-collapse:collapse; margin:.6rem 0 1rem; font-size:15px; }
.legal th, .legal td { text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted); }
.legal th { color:var(--ink); font-weight:600; white-space:nowrap; }
.tabla-scroll { overflow-x:auto; }