/* ══════════ Starlink · Señal Oculta ══════════ */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --negro: #0a0c10;
  --blanco: #f4f6f8;
  --cian: #4de3ff;
  --cian-suave: rgba(77, 227, 255, .25);
  --rojo: #ff5d5d;
  --verde: #46e6a0;
  --glass: rgba(8, 10, 14, .72);
  --borde: rgba(255, 255, 255, .14);
  --fuente: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--fuente);
  background: #0a0c10;
  color: var(--blanco);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Cielo animado por JS (día → noche) */
#cielo {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--cielo-top, #7fc4ea) 0%, var(--cielo-mid, #b8dcec) 55%, var(--cielo-bot, #f3e2bd) 100%);
  transition: none;
}

#stage { position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; }
#confeti { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

.pantalla { position: fixed; inset: 0; z-index: 10; }
.oculta { display: none !important; }

/* ══════════ Botones ══════════ */
.btn-principal {
  font-family: var(--fuente);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: .18em;
  padding: clamp(16px, 1.8vw, 26px) clamp(34px, 4vw, 64px);
  color: var(--negro);
  background: var(--blanco);
  border: none; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 14px 50px rgba(0,0,0,.45);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn-principal:active { transform: scale(.95); }
.btn-sec {
  font-family: var(--fuente);
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 500; letter-spacing: .14em;
  padding: 14px 30px;
  color: var(--blanco); background: transparent;
  border: 1.5px solid var(--borde); border-radius: 999px;
  cursor: pointer;
}
.btn-sec:active { background: rgba(255,255,255,.1); }
.btn-sec.peligro { color: var(--rojo); border-color: rgba(255,93,93,.4); }

.chip {
  display: inline-block;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 700; letter-spacing: .34em;
  color: var(--cian);
  border: 1px solid var(--cian-suave);
  background: rgba(77, 227, 255, .08);
  padding: 8px 18px 7px; border-radius: 999px;
}

/* ══════════ Atracción ══════════ */
#attract {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 110%, rgba(10,12,16,0) 0%, rgba(10,12,16,.55) 75%);
}
.attract-inner { text-align: center; animation: subir 1s ease both; }
.attract-brand {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-weight: 700; letter-spacing: .5em; font-size: clamp(16px, 1.8vw, 26px);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.logo-x { width: clamp(22px, 2.2vw, 34px); height: auto; color: var(--blanco); filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.logo-x.grande { width: clamp(30px, 3vw, 46px); }
.attract-titulo {
  font-size: clamp(64px, 12vw, 190px);
  font-weight: 700; line-height: .92; letter-spacing: .02em;
  margin: 2.5vh 0 2.5vh;
  text-shadow: 0 6px 60px rgba(0,0,0,.55);
}
.attract-titulo em {
  display: block; font-style: normal;
  font-size: .3em; font-weight: 500; letter-spacing: .3em;
  color: var(--cian);
  margin-bottom: .28em;
  text-shadow: 0 2px 22px rgba(0,0,0,.7);
}
.attract-sub {
  font-size: clamp(17px, 2vw, 30px);
  font-weight: 400; line-height: 1.5; opacity: .92;
  margin-bottom: 5vh;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
#btnJugar { animation: latido 1.8s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 14px 50px rgba(0,0,0,.45); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255,255,255,.12), 0 18px 70px rgba(0,0,0,.5); }
}
@keyframes subir { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
#adminZona { position: absolute; top: 0; left: 0; width: 130px; height: 130px; }

/* ══════════ HUD ══════════ */
#hud { pointer-events: none; z-index: 12; }
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: stretch; justify-content: space-between; gap: 14px;
  padding: clamp(12px, 1.4vw, 24px);
}
.hud-brand, .hud-timer, .hud-right > div {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--borde);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
/* Línea de acento cian en el borde superior de cada tarjeta del HUD */
.hud-brand::after, .hud-timer::after, .hud-right > div::after {
  content: '';
  position: absolute; top: 0; left: 18%; right: 18%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--cian), transparent);
  opacity: .65;
}
.hud-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 clamp(16px, 1.6vw, 28px);
  font-size: clamp(13px, 1.2vw, 19px); font-weight: 700; letter-spacing: .3em;
}
.hud-brand .logo-x { width: clamp(16px, 1.4vw, 22px); }
.hud-brand em { font-style: normal; color: var(--cian); font-weight: 500; letter-spacing: .22em; font-size: .82em; }
.hud-timer {
  flex: 0 1 460px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 26px;
}
.timer-num {
  font-size: clamp(26px, 2.8vw, 44px); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .06em; line-height: 1;
}
.timer-num.critico { color: var(--rojo); animation: parpadeo .5s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: .35; } }
.timer-bar { width: 100%; height: 7px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
#timerFill { height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cian), #9df); transition: width .3s linear; }
#timerFill.critico { background: linear-gradient(90deg, #ff5d5d, #ff9d5d); }
.hud-right { display: flex; gap: 14px; }
.hud-senal {
  display: flex; align-items: center; gap: clamp(10px, 1vw, 16px);
  padding: 0 clamp(14px, 1.4vw, 24px);
  background: var(--glass); border: 1px solid var(--borde); border-radius: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.senal-barras { display: flex; align-items: flex-end; gap: 5px; height: clamp(24px, 2.4vw, 38px); }
.senal-barras span {
  width: clamp(7px, .7vw, 11px);
  border-radius: 3px;
  background: rgba(255,255,255,.14);
  transition: all .35s ease;
}
.senal-barras span.on {
  background: var(--cian);
  box-shadow: 0 0 10px var(--cian);
  animation: barraPulso .6s ease;
}
@keyframes barraPulso { 0% { transform: scaleY(.4); } 55% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }
.senal-pct {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(17px, 1.7vw, 28px);
}
.senal-pct em { font-style: normal; font-size: .42em; letter-spacing: .28em; opacity: .6; }
.senal-pct.llena { color: var(--cian); text-shadow: 0 0 14px rgba(77,227,255,.6); }

/* Botones de rotación de la ciudad */
.btn-rotar {
  position: absolute; bottom: clamp(14px, 1.6vw, 26px);
  width: clamp(58px, 5.4vw, 86px); height: clamp(58px, 5.4vw, 86px);
  border-radius: 50%;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1;
  color: var(--blanco);
  background: var(--glass); border: 1px solid var(--borde);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; pointer-events: auto;
  transition: transform .12s ease, background .15s ease;
  font-family: var(--fuente);
}
.btn-rotar:active { transform: scale(.9); background: rgba(77,227,255,.25); }
.btn-rotar.izq { left: clamp(14px, 1.6vw, 26px); }
.btn-rotar.der { right: clamp(14px, 1.6vw, 26px); }

/* Fila de marca en tarjetas */
.marca-fila {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; letter-spacing: .42em; font-size: clamp(12px, 1.1vw, 16px);
  margin-bottom: 14px; opacity: .95;
}
.marca-fila .logo-x { width: clamp(16px, 1.5vw, 24px); }
.cian { color: var(--cian); }
.hud-score {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 clamp(16px, 1.6vw, 28px);
  font-size: clamp(24px, 2.4vw, 40px); font-weight: 700; font-variant-numeric: tabular-nums;
}
.hud-score em { font-style: normal; font-size: .45em; letter-spacing: .3em; opacity: .6; }
.hud-hint {
  position: absolute; bottom: clamp(14px, 1.6vw, 26px); left: 50%; transform: translateX(-50%);
  transition: opacity .8s ease;
  font-size: clamp(11px, 1vw, 15px); letter-spacing: .26em; font-weight: 500;
  color: rgba(255,255,255,.75);
  background: var(--glass); border: 1px solid var(--borde); border-radius: 999px;
  padding: 10px 24px 9px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.hud-hint.desvanecer { opacity: 0; }
#toast {
  position: absolute; top: 16vh; left: 50%; transform: translateX(-50%);
  font-size: clamp(16px, 1.8vw, 26px); font-weight: 700; letter-spacing: .1em;
  background: rgba(200, 40, 40, .88); border-radius: 14px;
  padding: 14px 30px;
  animation: toastAnim 1.6s ease both;
  white-space: nowrap;
}
#toast.bien { background: rgba(20, 160, 120, .9); }
@keyframes toastAnim {
  0% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.9); }
  12%, 80% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.95); }
}
.popup-pts {
  position: absolute; z-index: 14;
  font-size: clamp(26px, 3vw, 48px); font-weight: 700;
  color: var(--cian);
  text-shadow: 0 0 20px rgba(77,227,255,.9), 0 2px 6px rgba(0,0,0,.6);
  pointer-events: none;
  animation: puntosAnim 1.5s ease-out both;
}
@keyframes puntosAnim {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.5); }
  18% { opacity: 1; transform: translate(-50%, -20px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -110px) scale(1); }
}

/* ══════════ Registro ══════════ */
#registro {
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 14, .8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 20;
}
.reg-card {
  width: min(94vw, 900px); max-height: 96vh;
  display: flex; flex-direction: column; gap: clamp(10px, 1.4vh, 18px);
  background: rgba(16, 19, 26, .92);
  border: 1px solid var(--borde); border-radius: 28px;
  padding: clamp(20px, 3vh, 38px) clamp(24px, 3vw, 48px);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.reg-head { text-align: center; }
.reg-head h2 { font-size: clamp(22px, 2.6vw, 38px); font-weight: 700; margin-top: 12px; letter-spacing: .02em; }
.campos { display: flex; flex-direction: column; gap: 10px; }
.campo-row { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.campo-label {
  flex: 0 0 200px; text-align: right;
  font-size: clamp(12px, 1.2vw, 17px); font-weight: 500; letter-spacing: .12em;
  color: rgba(255,255,255,.7);
}
.campo-label em { display: block; font-size: .78em; font-style: normal; opacity: .55; letter-spacing: .06em; }
.campo-input {
  flex: 1;
  font-size: clamp(18px, 2vw, 28px); font-weight: 500;
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--borde); border-radius: 14px;
  padding: clamp(10px, 1.4vh, 16px) 20px;
  min-height: 1.4em;
  white-space: nowrap; overflow: hidden;
}
.campo-input.foco { border-color: var(--cian); background: rgba(77,227,255,.07); box-shadow: 0 0 0 3px rgba(77,227,255,.12); }
.campo-input.con-error { border-color: var(--rojo); }
.campo-input .caret { display: inline-block; width: 2px; height: 1em; background: var(--cian); vertical-align: text-bottom; animation: parpadeo 1s steps(2) infinite; }
.campo-input .placeholder { opacity: .3; }
.reg-error { text-align: center; color: var(--rojo); font-weight: 700; font-size: clamp(14px, 1.4vw, 19px); letter-spacing: .04em; }
.habeas {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  font-size: clamp(11px, 1.05vw, 15px); color: rgba(255,255,255,.65);
  cursor: pointer; line-height: 1.35;
}
.habeas input { width: 22px; height: 22px; accent-color: var(--cian); flex: none; cursor: pointer; }

#teclado { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tec-fila { display: flex; gap: 8px; justify-content: center; width: 100%; }
.tecla {
  font-family: var(--fuente);
  flex: 1; max-width: 84px;
  font-size: clamp(17px, 1.9vw, 26px); font-weight: 500;
  padding: clamp(10px, 1.5vh, 18px) 0;
  color: var(--blanco);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  cursor: pointer;
  transition: background .08s;
}
.tecla:active { background: var(--cian); color: var(--negro); }
.tecla.ancha { max-width: 200px; flex: 2.4; font-size: clamp(13px, 1.3vw, 18px); letter-spacing: .1em; }
.reg-botones { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 4px; }
.reg-botones .btn-principal { font-size: clamp(16px, 1.8vw, 24px); padding: 16px 44px; }

/* ══════════ Briefing ══════════ */
#briefing {
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 14, .68);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 20;
}
.brief-card {
  width: min(92vw, 980px); max-width: 92vw; text-align: center; overflow: hidden;
  background: rgba(16, 19, 26, .92);
  border: 1px solid var(--borde); border-radius: 28px;
  padding: clamp(28px, 4vh, 50px) clamp(24px, 4vw, 60px);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  animation: subir .5s ease both;
}
.brief-card h2 { font-size: clamp(24px, 3vw, 44px); font-weight: 500; line-height: 1.25; margin: 18px 0 26px; }
.brief-card h2 b { color: var(--cian); font-weight: 700; }
.brief-iconos { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(16px, 4vw, 60px); margin-bottom: 26px; max-width: 100%; }
.brief-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: clamp(10px, 1vw, 14px); letter-spacing: .14em; line-height: 1.5;
  opacity: .9;
}
.brief-item b { font-size: 1.15em; }
.brief-item.si b { color: var(--verde); }
.brief-item.no b { color: var(--rojo); }
.mini-dish, .mini-tv, .mini-ac { width: clamp(60px, 7vw, 100px); height: clamp(60px, 7vw, 100px); border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid var(--borde); position: relative; }
.mini-dish::before { content: ''; position: absolute; left: 50%; top: 26%; width: 62%; height: 40%; transform: translateX(-50%) perspective(60px) rotateX(40deg); background: #eceef0; border-radius: 10px; }
.mini-dish::after { content: ''; position: absolute; left: 50%; top: 58%; width: 7%; height: 26%; transform: translateX(-50%); background: #737a82; border-radius: 3px; }
.mini-tv::before { content: ''; position: absolute; left: 50%; top: 28%; width: 55%; height: 55%; transform: translateX(-50%); background: #cfd4d9; border-radius: 50%; }
.mini-tv::after { content: ''; position: absolute; left: 62%; top: 48%; width: 5%; height: 30%; background: #737a82; }
.mini-ac::before { content: ''; position: absolute; left: 50%; top: 34%; width: 64%; height: 38%; transform: translateX(-50%); background: #dfe3e7; border-radius: 8px; }
.mini-ac::after { content: ''; position: absolute; left: 50%; top: 44%; width: 34%; height: 34%; transform: translateX(-50%); border: 3px solid #9aa2aa; border-radius: 50%; box-sizing: border-box; }
.brief-nota { font-size: clamp(13px, 1.3vw, 19px); color: rgba(255,255,255,.7); line-height: 1.6; }
.brief-nota b { color: var(--rojo); }
.brief-nota .cian { color: var(--cian); }

/* ══════════ Instructivo animado por pasos ══════════ */
.pasos { position: relative; width: 100%; min-width: 0; }
.paso {
  display: none; flex-direction: column; align-items: center;
  gap: clamp(12px, 1.8vh, 22px);
  width: 100%; min-width: 0;      /* el texto envuelve en vez de ensanchar la tarjeta */
}
.paso > * { max-width: 100%; }
.paso.activo { display: flex; animation: pasoEntra .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes pasoEntra { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
.paso-num {
  font-size: clamp(10px, 1vw, 15px); font-weight: 700; letter-spacing: .42em;
  color: var(--cian); opacity: .85;
}
.paso h2 { font-size: clamp(22px, 2.8vw, 44px); font-weight: 500; line-height: 1.25; margin: 0; }
.paso h2 b { color: var(--cian); font-weight: 700; }
.paso p {
  font-size: clamp(13px, 1.35vw, 20px); line-height: 1.6;
  color: rgba(255,255,255,.72);
}
.paso p b { color: var(--blanco); }
.paso p b.cian { color: var(--cian); }
.demo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(16px, 3.5vw, 60px); max-width: 100%; }

/* Paso 1 · la lupa recorre una mini ciudad y se detiene en la antena */
.demo-buscar { position: relative; }
.ciudad-mini {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid var(--borde);
  position: relative;
}
.ciudad-mini .edif {
  width: clamp(24px, 2.6vw, 40px); height: clamp(24px, 2.6vw, 40px);
  border-radius: 5px; background: rgba(255,255,255,.16);
}
.ciudad-mini .edif:nth-child(2) { background: rgba(232,134,46,.5); }
.ciudad-mini .edif:nth-child(4) { background: rgba(42,157,143,.5); }
.ciudad-mini .edif:nth-child(5) { background: rgba(67,170,99,.5); }
.antena-mini {
  width: clamp(24px, 2.6vw, 40px); height: clamp(24px, 2.6vw, 40px);
  border-radius: 5px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
}
.antena-mini i {
  width: 62%; height: 34%; border-radius: 3px;
  background: #eef1f4; transform: perspective(30px) rotateX(32deg);
  box-shadow: 0 0 12px rgba(255,255,255,.55);
  animation: antenaBrilla 1.8s ease-in-out infinite;
}
@keyframes antenaBrilla { 0%, 100% { box-shadow: 0 0 8px rgba(255,255,255,.4); } 50% { box-shadow: 0 0 22px var(--cian); } }
.lupa {
  position: absolute; top: 8px; left: 8px;
  width: clamp(42px, 4.4vw, 66px); height: clamp(42px, 4.4vw, 66px);
  border: 3px solid var(--cian); border-radius: 50%;
  box-shadow: 0 0 18px rgba(77,227,255,.5), inset 0 0 18px rgba(77,227,255,.2);
  animation: lupaBusca 4s ease-in-out infinite;
}
.lupa::after {
  content: ''; position: absolute; right: -32%; bottom: -32%;
  width: 46%; height: 4px; border-radius: 3px; background: var(--cian);
  transform: rotate(45deg); transform-origin: left center;
}
@keyframes lupaBusca {
  0% { transform: translate(0, 0); }
  20% { transform: translate(120%, 4%); }
  40% { transform: translate(190%, 6%); }
  60% { transform: translate(30%, 74%); }
  78%, 100% { transform: translate(148%, 77%); }   /* se detiene sobre la antena */
}

/* Paso 2 · manos que arrastran y pellizcan */
.gesto { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gesto-txt {
  font-size: clamp(10px, 1vw, 14px); letter-spacing: .16em; line-height: 1.6;
  color: rgba(255,255,255,.65); text-align: center;
}
.gesto-txt b { color: var(--blanco); font-weight: 700; }
.mano {
  position: relative;
  width: clamp(52px, 5.4vw, 82px); height: clamp(52px, 5.4vw, 82px);
  border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.mano .dedo {
  width: clamp(13px, 1.4vw, 20px); height: clamp(13px, 1.4vw, 20px);
  border-radius: 50%; background: var(--cian);
  box-shadow: 0 0 12px var(--cian);
  animation: dedoArrastra 2.2s ease-in-out infinite;
}
@keyframes dedoArrastra { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
.mano.dos .dedo { animation: dedoPellizcaA 2.2s ease-in-out infinite; }
.mano.dos .dedo:last-child { animation-name: dedoPellizcaB; }
@keyframes dedoPellizcaA { 0%, 100% { transform: translateX(-45%); } 50% { transform: translateX(15%); } }
@keyframes dedoPellizcaB { 0%, 100% { transform: translateX(45%); } 50% { transform: translateX(-15%); } }
.botones-demo { display: flex; gap: 10px; }
.botones-demo span {
  width: clamp(38px, 3.8vw, 56px); height: clamp(38px, 3.8vw, 56px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--borde);
  background: rgba(255,255,255,.06);
  font-size: clamp(19px, 1.9vw, 28px);
  animation: botonDemo 2.2s ease-in-out infinite;
}
.botones-demo span:last-child { animation-delay: 1.1s; }
@keyframes botonDemo {
  0%, 100% { background: rgba(255,255,255,.06); color: var(--blanco); transform: scale(1); }
  25% { background: var(--cian); color: var(--negro); transform: scale(1.12); }
  50% { background: rgba(255,255,255,.06); color: var(--blanco); transform: scale(1); }
}

/* Paso 3 · marcas de correcto/incorrecto sobre los iconos */
.brief-item { position: relative; }
.marca-ok, .marca-no {
  position: absolute; top: -8px; right: -6px;
  width: clamp(24px, 2.4vw, 34px); height: clamp(24px, 2.4vw, 34px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: clamp(13px, 1.3vw, 19px); font-weight: 700;
  color: var(--negro);
  animation: marcaPop 2.4s ease-in-out infinite;
}
.marca-ok { background: var(--verde); box-shadow: 0 0 16px rgba(70,230,160,.6); }
.marca-no { background: var(--rojo); box-shadow: 0 0 16px rgba(255,93,93,.55); }
.brief-item.no:last-child .marca-no { animation-delay: .35s; }
@keyframes marcaPop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.22); } 60% { transform: scale(1); } }

/* Paso 4 · barras de señal que se llenan solas */
.demo-senal { gap: clamp(12px, 1.6vw, 22px); }
.senal-demo { display: flex; align-items: flex-end; gap: 7px; height: clamp(46px, 5vw, 76px); }
.senal-demo span {
  width: clamp(12px, 1.2vw, 19px); border-radius: 4px;
  background: rgba(255,255,255,.14);
  animation: senalLlena 4s ease-in-out infinite;
}
.senal-demo span:nth-child(1) { height: 34%; animation-delay: 0s; }
.senal-demo span:nth-child(2) { height: 50%; animation-delay: .35s; }
.senal-demo span:nth-child(3) { height: 66%; animation-delay: .7s; }
.senal-demo span:nth-child(4) { height: 83%; animation-delay: 1.05s; }
.senal-demo span:nth-child(5) { height: 100%; animation-delay: 1.4s; }
@keyframes senalLlena {
  0%, 8% { background: rgba(255,255,255,.14); box-shadow: none; }
  18%, 88% { background: var(--cian); box-shadow: 0 0 12px var(--cian); }
  100% { background: rgba(255,255,255,.14); box-shadow: none; }
}
.senal-demo-pct {
  font-size: clamp(24px, 2.6vw, 42px); font-weight: 700; color: var(--cian);
  font-variant-numeric: tabular-nums;
  animation: senalPct 4s ease-in-out infinite;
}
@keyframes senalPct { 0%, 30% { opacity: .25; } 55%, 88% { opacity: 1; text-shadow: 0 0 20px rgba(77,227,255,.6); } 100% { opacity: .25; } }

/* Paso 5 · reloj que corre */
.demo-reloj { gap: clamp(14px, 2vw, 28px); }
.reloj-demo {
  position: relative;
  width: clamp(52px, 5.2vw, 78px); height: clamp(52px, 5.2vw, 78px);
  border: 3px solid var(--cian); border-radius: 50%;
  box-shadow: 0 0 18px rgba(77,227,255,.35);
}
.reloj-aguja {
  position: absolute; left: 50%; bottom: 50%;
  width: 3px; height: 38%; border-radius: 2px;
  background: var(--cian); transform-origin: bottom center;
  animation: relojGira 2.6s linear infinite;
}
@keyframes relojGira { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
.reloj-txt {
  font-size: clamp(28px, 3.2vw, 52px); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  animation: parpadeoSuave 1.3s ease-in-out infinite;
}
@keyframes parpadeoSuave { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Barra de progreso de los pasos */
.pasos-barra { display: flex; gap: 9px; justify-content: center; margin-top: 4px; }
.pasos-barra span {
  width: clamp(26px, 3vw, 46px); height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.16);
  overflow: hidden; position: relative;
}
.pasos-barra span.hecho { background: var(--cian); }
.pasos-barra span.activo::after {
  content: ''; position: absolute; inset: 0;
  background: var(--cian); transform-origin: left;
  animation: barraPaso var(--dur, 4.6s) linear both;
}
@keyframes barraPaso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pasos-pie {
  font-size: clamp(9px, .95vw, 13px); letter-spacing: .3em;
  color: rgba(255,255,255,.35); margin-top: 2px;
}
#cuenta {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(140px, 26vw, 420px); font-weight: 700;
  text-shadow: 0 0 80px rgba(77,227,255,.55);
}
#cuenta.anim { animation: cuentaPop .92s ease both; }
@keyframes cuentaPop {
  0% { opacity: 0; transform: scale(1.9); }
  22% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: scale(.82); }
}

/* ══════════ Resultado ══════════ */
#resultado {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 120%, rgba(10,12,16,.1), rgba(10,12,16,.72) 80%);
  z-index: 20;
}
.res-layout { display: flex; gap: clamp(20px, 3vw, 50px); align-items: stretch; width: min(96vw, 1500px); }
.res-card {
  flex: 1.25; text-align: center;
  background: rgba(16, 19, 26, .93);
  border: 1px solid var(--borde); border-radius: 28px;
  padding: clamp(28px, 4vh, 54px) clamp(20px, 3vw, 50px);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  animation: subir .5s ease both;
}
.res-card h2 { font-size: clamp(30px, 3.6vw, 56px); font-weight: 700; letter-spacing: .02em; }
.res-score { display: flex; align-items: baseline; gap: 12px; }
.res-score span {
  font-size: clamp(70px, 9vw, 150px); font-weight: 700; line-height: 1;
  color: var(--cian); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 50px rgba(77,227,255,.4);
}
.res-score em { font-style: normal; letter-spacing: .3em; font-size: clamp(13px, 1.3vw, 19px); opacity: .6; }
.res-detalle {
  display: flex; gap: clamp(14px, 2vw, 34px); justify-content: center; flex-wrap: wrap;
  font-size: clamp(12px, 1.2vw, 17px); color: rgba(255,255,255,.75); letter-spacing: .06em;
}
.res-detalle b { color: var(--blanco); }
.res-auto { font-size: clamp(11px, 1vw, 14px); letter-spacing: .2em; opacity: .45; }
.res-ranking {
  flex: 1;
  background: rgba(16, 19, 26, .93);
  border: 1px solid var(--borde); border-radius: 28px;
  padding: clamp(22px, 3vh, 40px) clamp(20px, 2.4vw, 40px);
  animation: subir .6s ease both;
}
.res-ranking h3 { letter-spacing: .3em; font-size: clamp(13px, 1.3vw, 19px); color: var(--cian); margin-bottom: 18px; text-align: center; }
#rankingLista { list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: rk; }
#rankingLista li {
  counter-increment: rk;
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(14px, 1.5vw, 22px);
  background: rgba(255,255,255,.045);
  border-radius: 12px; padding: 10px 18px;
}
#rankingLista li::before {
  content: counter(rk);
  font-weight: 700; opacity: .5; width: 1.6em; text-align: center;
  font-variant-numeric: tabular-nums;
}
#rankingLista li .rk-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#rankingLista li .rk-pts { font-weight: 700; font-variant-numeric: tabular-nums; }
#rankingLista li.yo { background: rgba(77,227,255,.14); box-shadow: inset 0 0 0 1.5px var(--cian); }
#rankingLista li:nth-child(1)::before { content: '🥇'; opacity: 1; }
#rankingLista li:nth-child(2)::before { content: '🥈'; opacity: 1; }
#rankingLista li:nth-child(3)::before { content: '🥉'; opacity: 1; }

/* ══════════ Admin ══════════ */
#admin { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.82); z-index: 30; }
.adm-card {
  width: min(94vw, 760px); max-height: 94vh; overflow: auto;
  background: #12151b; border: 1px solid var(--borde); border-radius: 24px;
  padding: 34px 38px; text-align: center;
}
.adm-card h3 { letter-spacing: .3em; margin-bottom: 22px; font-size: 18px; }
.pin-dots { display: flex; gap: 16px; justify-content: center; margin-bottom: 22px; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borde); }
.pin-dots span.lleno { background: var(--cian); border-color: var(--cian); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 90px); gap: 10px; justify-content: center; margin-bottom: 22px; }
.pin-pad .tecla { max-width: none; }
.adm-stats { display: flex; gap: 20px; justify-content: center; margin-bottom: 18px; font-size: 15px; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.adm-stats b { color: var(--cian); font-size: 1.3em; }
.adm-lista { text-align: left; max-height: 34vh; overflow: auto; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 20px; font-size: 14px; }
.adm-lista table { width: 100%; border-collapse: collapse; }
.adm-lista th, .adm-lista td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.adm-lista th { position: sticky; top: 0; background: #1a1e26; letter-spacing: .1em; font-size: 11px; color: rgba(255,255,255,.6); }
.adm-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ══════════ Decoración de tarjetas (estética panel satelital) ══════════ */
/* Marco de esquinas + barrido de luz que recorre el borde superior */
.deco { position: relative; overflow: hidden; }
.deco::before {
  content: '';
  position: absolute; inset: clamp(8px, .9vw, 14px);
  pointer-events: none; z-index: 2;
  --c: var(--cian);
  --l: clamp(16px, 1.8vw, 28px);
  background:
    linear-gradient(90deg, var(--c) 0 100%) 0 0 / var(--l) 2px no-repeat,
    linear-gradient(180deg, var(--c) 0 100%) 0 0 / 2px var(--l) no-repeat,
    linear-gradient(90deg, var(--c) 0 100%) 100% 0 / var(--l) 2px no-repeat,
    linear-gradient(180deg, var(--c) 0 100%) 100% 0 / 2px var(--l) no-repeat,
    linear-gradient(90deg, var(--c) 0 100%) 0 100% / var(--l) 2px no-repeat,
    linear-gradient(180deg, var(--c) 0 100%) 0 100% / 2px var(--l) no-repeat,
    linear-gradient(90deg, var(--c) 0 100%) 100% 100% / var(--l) 2px no-repeat,
    linear-gradient(180deg, var(--c) 0 100%) 100% 100% / 2px var(--l) no-repeat;
  opacity: .45;
  animation: decoRespira 3.6s ease-in-out infinite;
}
@keyframes decoRespira { 0%, 100% { opacity: .28; } 50% { opacity: .6; } }
/* Línea de energía que barre el borde superior */
.deco::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, var(--cian) 45%, #fff 50%, var(--cian) 55%, transparent 100%);
  opacity: .85;
  animation: decoBarrido 4.5s ease-in-out infinite;
}
@keyframes decoBarrido {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
/* Las tarjetas con .deco recortan en X (para el barrido) pero dejan scroll en Y */
.reg-card, .brief-card, .res-card, .res-ranking { overflow: hidden auto; overscroll-behavior: contain; }

/* Títulos con líneas laterales: <h3><i></i>TEXTO<i></i></h3> */
.res-ranking h3 { display: flex; align-items: center; justify-content: center; gap: 14px; }
.res-ranking h3 i {
  flex: 1; height: 1px; max-width: 70px;
  background: linear-gradient(90deg, transparent, var(--cian));
}
.res-ranking h3 i:last-child { background: linear-gradient(90deg, var(--cian), transparent); }

/* ══════════ Anillos de invitación bajo el botón de jugar ══════════ */
.jugar-zona { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.pulso-anillo {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: anilloSale 2.6s ease-out infinite;
}
.pulso-anillo:nth-child(2) { animation-delay: .85s; }
.pulso-anillo:nth-child(3) { animation-delay: 1.7s; }
@keyframes anilloSale {
  0% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}

/* ══════════ Tarjeta de puntaje del resultado ══════════ */
.res-score { position: relative; }
.score-halo {
  position: absolute; left: 50%; top: 50%;
  width: 130%; aspect-ratio: 1.7; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(77,227,255,.3) 0%, transparent 68%);
  pointer-events: none;
  animation: haloLatido 3s ease-in-out infinite;
}
@keyframes haloLatido { 0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
#resScore { position: relative; }
.res-score.rebote #resScore { animation: scoreRebote .55s cubic-bezier(.2,1.7,.4,1); }
@keyframes scoreRebote { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* Entrada escalonada del contenido del resultado */
.res-card > * { animation: subirCorto .55s ease both; }
.res-card > *:nth-child(1) { animation-delay: .05s; }
.res-card > *:nth-child(2) { animation-delay: .12s; }
.res-card > *:nth-child(3) { animation-delay: .19s; }
.res-card > *:nth-child(4) { animation-delay: .26s; }
.res-card > *:nth-child(5) { animation-delay: .34s; }
.res-card > *:nth-child(6) { animation-delay: .42s; }
.res-card > *:nth-child(7) { animation-delay: .5s; }
@keyframes subirCorto { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ══════════ PODIO del top 3 ══════════ */
.podio {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  margin-bottom: clamp(18px, 2.4vh, 28px);
  min-height: clamp(180px, 22vh, 260px);
}
/* Línea de suelo bajo el podio */
.podio::after {
  content: '';
  position: absolute; left: 4%; right: 4%; bottom: -1px; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(77,227,255,.7) 25%, rgba(77,227,255,.7) 75%, transparent);
  box-shadow: 0 0 14px rgba(77,227,255,.5);
}
.pod {
  position: relative;
  flex: 1; max-width: 150px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: clamp(14px, 1.6vh, 22px);
  animation: podSube .7s cubic-bezier(.2,1.3,.4,1) both;
}
.pod-2 { animation-delay: .15s; }
.pod-3 { animation-delay: .3s; }
.pod-1 { animation-delay: .5s; }
@keyframes podSube { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

.pod-avatar {
  position: relative;
  width: clamp(44px, 4.4vw, 64px); height: clamp(44px, 4.4vw, 64px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700; font-size: clamp(15px, 1.5vw, 22px); letter-spacing: .02em;
  color: var(--negro);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.pod-corona { position: absolute; top: -62%; font-size: clamp(18px, 1.8vw, 27px); filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); animation: coronaFlota 2.4s ease-in-out infinite; }
@keyframes coronaFlota { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
.pod-nombre {
  font-size: clamp(11px, 1.1vw, 15px); font-weight: 500;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.pod-pts {
  font-size: clamp(15px, 1.6vw, 24px); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cian);
  text-shadow: 0 0 14px rgba(77,227,255,.5);
}
.pod-base {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px;
  border-radius: 10px 10px 0 0;
  font-size: clamp(20px, 2.4vw, 36px); font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.9);
  transform-origin: bottom;
  animation: baseCrece .55s cubic-bezier(.2,1.4,.4,1) both;
  position: relative; overflow: hidden;
}
.pod-base::after {   /* brillo diagonal sobre la base */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.22) 0%, transparent 55%);
}
@keyframes baseCrece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.pod-1 .pod-base { height: clamp(78px, 9vh, 112px); animation-delay: .5s; background: linear-gradient(180deg, #f0c14b, #b8862a); }
.pod-2 .pod-base { height: clamp(56px, 6.4vh, 80px); animation-delay: .15s; background: linear-gradient(180deg, #cdd3d9, #8b939b); }
.pod-3 .pod-base { height: clamp(42px, 4.8vh, 62px); animation-delay: .3s; background: linear-gradient(180deg, #d08b52, #8d5a2f); }
.pod-1 .pod-avatar {
  background: linear-gradient(150deg, #ffe08a, #e0a92e);
  box-shadow: 0 0 26px rgba(240,193,75,.55), 0 6px 22px rgba(0,0,0,.45);
  animation: campeonBrilla 2.8s ease-in-out infinite;
}
@keyframes campeonBrilla {
  0%, 100% { box-shadow: 0 0 22px rgba(240,193,75,.45), 0 6px 22px rgba(0,0,0,.45); }
  50% { box-shadow: 0 0 40px rgba(240,193,75,.85), 0 6px 22px rgba(0,0,0,.45); }
}
.pod-2 .pod-avatar { background: linear-gradient(150deg, #eef1f4, #a8b0b8); }
.pod-3 .pod-avatar { background: linear-gradient(150deg, #f0b98a, #b57742); }
.pod-1 .pod-nombre { font-weight: 700; font-size: clamp(12px, 1.25vw, 17px); }
/* Haz de luz dorado sobre el campeón */
.pod-1::before {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 190%; height: 108%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 8%, rgba(240,193,75,.09) 55%, rgba(240,193,75,.2) 100%);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
  filter: blur(7px);              /* borra el borde duro del clip-path */
  pointer-events: none; z-index: -1;
  animation: hazCampeon 3.4s ease-in-out infinite;
}
@keyframes hazCampeon { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* Resaltar al jugador que acaba de jugar */
.pod.yo .pod-nombre { color: var(--cian); }
.pod.yo .pod-base { box-shadow: inset 0 0 0 2px var(--cian), 0 0 22px rgba(77,227,255,.4); }

/* La lista pasa a ser solo del 4º en adelante, más compacta */
#rankingLista { font-size: .92em; }
#rankingLista li { padding: 8px 16px; }
#rankingLista li::before { content: counter(rk) !important; opacity: .5 !important; }
#rankingLista.desde4 { counter-reset: rk 3; }
#rankingLista li.rk-vacio::before { content: none !important; }

/* ══════════ HUD: pulso de la tarjeta de puntos ══════════ */
.hud-score { position: relative; transition: box-shadow .3s ease; }
.hud-score.suma { animation: scorePulso .6s ease; }
@keyframes scorePulso {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(77,227,255,.55); }
  35% { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(77,227,255,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(77,227,255,0); }
}
.hud-score #scoreNum { transition: color .3s ease; }
.hud-score.suma #scoreNum { color: var(--cian); text-shadow: 0 0 16px rgba(77,227,255,.7); }

/* ══════════ Indicador del recorrido final (sin recuadro pesado) ══════════ */
.tour-antena {
  position: fixed; z-index: 36; pointer-events: none;
  left: 50%; bottom: 12vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; white-space: nowrap;
  text-shadow: 0 2px 20px rgba(0,0,0,.9), 0 0 40px rgba(0,0,0,.7);
}
.tour-antena.cambio { animation: tourEntra .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes tourEntra { 0% { opacity: 0; transform: translateX(-50%) translateY(14px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
.tour-num {
  font-size: clamp(13px, 1.4vw, 22px); font-weight: 700; letter-spacing: .34em;
  color: rgba(255,255,255,.85);
}
.tour-estado {
  font-size: clamp(20px, 2.4vw, 40px); font-weight: 700; letter-spacing: .08em;
}
.tour-estado.si { color: var(--cian); text-shadow: 0 0 26px rgba(77,227,255,.75), 0 2px 16px rgba(0,0,0,.8); }
.tour-estado.no { color: #ff9d4d; text-shadow: 0 0 26px rgba(255,157,77,.7), 0 2px 16px rgba(0,0,0,.8); }

/* ══════════ Cartel de la revelación de antenas ══════════ */
.cartel-revelar {
  position: fixed; z-index: 36; pointer-events: none;
  left: 50%; top: 7vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: clamp(18px, 2.4vh, 30px) clamp(26px, 4vw, 60px);
  background: none; border: none; box-shadow: none;
  text-align: center;
  text-shadow: 0 2px 22px rgba(0,0,0,.9), 0 0 46px rgba(0,0,0,.75);
  animation: cfEntra .6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes cfEntra { from { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(.95); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.cartel-revelar h3 { font-size: clamp(18px, 2.4vw, 40px); font-weight: 500; letter-spacing: .04em; }
.cartel-revelar h3 b { color: var(--cian); font-weight: 700; }
.rev-leyenda {
  display: flex; gap: clamp(16px, 3vw, 46px); flex-wrap: wrap; justify-content: center;
  font-size: clamp(11px, 1.2vw, 18px); letter-spacing: .14em; font-weight: 500;
  color: rgba(255,255,255,.8);
}
.rev-leyenda span { display: flex; align-items: center; gap: 9px; }
.rev-leyenda b { font-size: 1.35em; font-weight: 700; }
.rev-leyenda i {
  width: clamp(11px, 1.1vw, 17px); height: clamp(11px, 1.1vw, 17px);
  border-radius: 50%;
  animation: revPulso 1.6s ease-in-out infinite;
}
.rev-ok i { background: var(--cian); box-shadow: 0 0 12px var(--cian); }
.rev-ok b { color: var(--cian); }
.rev-no i { background: #ff9d4d; box-shadow: 0 0 12px #ff9d4d; }
.rev-no b { color: #ff9d4d; }
@keyframes revPulso { 0%, 100% { opacity: .55; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.1); } }

/* Destello de pantalla al conectar */
#flash {
  position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95) 0%, rgba(77,227,255,.45) 38%, transparent 72%);
}
#flash.anim { animation: flashAnim .55s ease-out; }
@keyframes flashAnim { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* Tarjeta con QR del ranking */
.qr-card {
  position: absolute; right: clamp(16px, 2vw, 40px); bottom: clamp(16px, 2vw, 40px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--borde); border-radius: 20px;
  padding: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-align: center;
  font-size: clamp(10px, .9vw, 13px); letter-spacing: .2em; font-weight: 700;
  line-height: 1.5; color: rgba(255,255,255,.85);
}
.qr-card .qr-cuadro {
  width: clamp(110px, 10vw, 170px); height: clamp(110px, 10vw, 170px);
  background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box;
}
.qr-card .qr-cuadro svg { width: 100%; height: 100%; display: block; }
.qr-card.mini { position: static; margin-top: 16px; flex-direction: row; padding: 12px; text-align: left; }
.qr-card.mini .qr-cuadro { width: 92px; height: 92px; }

/* ══════════════════════════════════════════════════════════════════
   TÓTEM VERTICAL GRANDE (55" · 1080×1920 o más)
   Todo crece para leerse de pie a 1,5–3 metros de distancia.
   ══════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 850px) {
  /* HUD */
  .hud-brand { font-size: clamp(19px, 2vw, 34px); letter-spacing: .26em; }
  .hud-brand .logo-x { width: clamp(22px, 2.3vw, 40px); }
  .timer-num { font-size: clamp(40px, 5vw, 86px); }
  .timer-bar { height: clamp(9px, .9vw, 15px); }
  .senal-barras { height: clamp(34px, 3.6vw, 60px); }
  .senal-barras span { width: clamp(10px, 1.1vw, 18px); }
  .senal-pct { font-size: clamp(26px, 3.2vw, 55px); }
  .hud-score { font-size: clamp(34px, 4.3vw, 74px); }
  .hud-top { gap: clamp(14px, 1.6vw, 26px); padding: clamp(16px, 1.8vw, 30px); }
  .hud-brand, .hud-timer, .hud-right > div, .hud-senal { border-radius: clamp(20px, 2.2vw, 34px); }
  .btn-rotar {
    width: clamp(84px, 9.5vw, 150px); height: clamp(84px, 9.5vw, 150px);
    font-size: clamp(38px, 4.4vw, 68px);
  }
  .hud-hint { font-size: clamp(16px, 1.9vw, 30px); padding: 14px 32px 13px; }
  #toast { font-size: clamp(26px, 3.2vw, 52px); padding: 18px 42px; }
  .popup-pts { font-size: clamp(44px, 5.6vw, 92px); }

  /* Atracción */
  .attract-brand { font-size: clamp(24px, 2.6vw, 44px); }
  .attract-titulo { font-size: clamp(120px, 15vw, 250px); }
  .attract-sub { font-size: clamp(28px, 3.4vw, 56px); }
  .btn-principal { font-size: clamp(30px, 3.7vw, 60px); padding: clamp(24px, 2.8vw, 44px) clamp(52px, 6vw, 96px); }
  .btn-sec { font-size: clamp(20px, 2.3vw, 36px); padding: 18px 40px; }
  .chip { font-size: clamp(16px, 1.8vw, 28px); padding: 12px 26px 11px; }
  .marca-fila { font-size: clamp(17px, 1.9vw, 30px); }
  .marca-fila .logo-x { width: clamp(22px, 2.4vw, 38px); }

  /* Instructivo */
  .paso-num { font-size: clamp(16px, 1.8vw, 28px); }
  .paso h2 { font-size: clamp(38px, 4.8vw, 78px); }
  .paso p { font-size: clamp(21px, 2.4vw, 40px); }
  .brief-item { font-size: clamp(14px, 1.6vw, 26px); }
  .mini-dish, .mini-tv, .mini-ac { width: clamp(96px, 11vw, 175px); height: clamp(96px, 11vw, 175px); }
  .marca-ok, .marca-no { width: clamp(38px, 4vw, 62px); height: clamp(38px, 4vw, 62px); font-size: clamp(20px, 2.2vw, 34px); }
  .gesto-txt { font-size: clamp(15px, 1.7vw, 27px); }
  .mano { width: clamp(84px, 9vw, 145px); height: clamp(84px, 9vw, 145px); }
  .mano .dedo { width: clamp(21px, 2.3vw, 36px); height: clamp(21px, 2.3vw, 36px); }
  .botones-demo span { width: clamp(62px, 6.6vw, 105px); height: clamp(62px, 6.6vw, 105px); font-size: clamp(30px, 3.2vw, 50px); }
  .ciudad-mini .edif, .antena-mini { width: clamp(40px, 4.4vw, 70px); height: clamp(40px, 4.4vw, 70px); }
  .lupa { width: clamp(70px, 7.6vw, 120px); height: clamp(70px, 7.6vw, 120px); }
  .senal-demo { height: clamp(76px, 8.4vw, 135px); }
  .senal-demo span { width: clamp(19px, 2.1vw, 33px); }
  .senal-demo-pct { font-size: clamp(40px, 4.6vw, 74px); }
  .reloj-demo { width: clamp(84px, 9vw, 140px); height: clamp(84px, 9vw, 140px); }
  .reloj-txt { font-size: clamp(46px, 5.4vw, 88px); }
  .pasos-barra span { width: clamp(44px, 5vw, 80px); height: 6px; }
  .pasos-pie { font-size: clamp(14px, 1.6vw, 24px); }

  /* Carteles del final */
  .cf-marca { font-size: clamp(17px, 1.9vw, 30px); }
  .cf-titulo { font-size: clamp(36px, 4.6vw, 76px); }
  .cf-puntos i { width: clamp(13px, 1.4vw, 22px); height: clamp(13px, 1.4vw, 22px); }
  .cartel-revelar h3 { font-size: clamp(32px, 4vw, 66px); }
  .rev-leyenda { font-size: clamp(18px, 2vw, 32px); }
  .rev-leyenda i { width: clamp(17px, 1.9vw, 30px); height: clamp(17px, 1.9vw, 30px); }

  /* Resultado y podio */
  .res-card h2 { font-size: clamp(48px, 5.7vw, 92px); }
  .res-score span { font-size: clamp(110px, 14vw, 230px); }
  .res-score em { font-size: clamp(18px, 2vw, 32px); }
  .res-detalle { font-size: clamp(18px, 2vw, 32px); gap: clamp(20px, 2.6vw, 44px); }
  .res-auto { font-size: clamp(15px, 1.7vw, 26px); }
  .res-ranking h3 { font-size: clamp(22px, 2.5vw, 40px); }
  .res-ranking h3 i { max-width: 120px; }
  .podio { min-height: clamp(200px, 18vh, 340px); }
  .pod { max-width: 240px; }
  .pod-avatar { width: clamp(72px, 7.6vw, 122px); height: clamp(72px, 7.6vw, 122px); font-size: clamp(26px, 2.8vw, 44px); }
  .pod-corona { font-size: clamp(32px, 3.4vw, 54px); }
  .pod-nombre { font-size: clamp(19px, 2.1vw, 34px); }
  .pod-1 .pod-nombre { font-size: clamp(22px, 2.4vw, 38px); }
  .pod-pts { font-size: clamp(28px, 3.1vw, 50px); }
  .pod-base { font-size: clamp(38px, 4.4vw, 70px); }
  .pod-1 .pod-base { height: clamp(90px, 8vh, 150px); }
  .pod-2 .pod-base { height: clamp(66px, 6vh, 112px); }
  .pod-3 .pod-base { height: clamp(50px, 4.5vh, 84px); }
  #rankingLista { gap: 6px; }
  #rankingLista li { font-size: clamp(21px, 2.3vw, 36px); padding: 10px 24px; }
  #rankingLista { font-size: 1em; }
  #qrAttract .qr-cuadro, #qrResultado .qr-cuadro { width: clamp(150px, 16vw, 250px); height: clamp(150px, 16vw, 250px); }
  .qr-card { font-size: clamp(15px, 1.6vw, 25px); }

  /* Registro (si se activa con ?registro=1) */
  .reg-head h2 { font-size: clamp(34px, 4vw, 64px); }
  .campo-label { flex-basis: 260px; font-size: clamp(17px, 1.9vw, 30px); }
  .campo-input { font-size: clamp(28px, 3.2vw, 52px); }
  .tecla { font-size: clamp(26px, 3vw, 48px); max-width: 130px; }
  .tecla.ancha { max-width: 300px; font-size: clamp(19px, 2.1vw, 34px); }
  .habeas { font-size: clamp(15px, 1.7vw, 27px); }
  .habeas input { width: 34px; height: 34px; }
}

/* ══════════ Celular y tablet ══════════ */
@media (max-width: 900px) {
  .res-layout { flex-direction: column; }
  .campo-label { flex-basis: 110px; font-size: 11px; }
  .hud-brand em { display: none; }
  .hud-timer { flex-basis: 200px; }
  /* El instructivo se apila en vez de desbordarse */
  .demo { flex-wrap: wrap; gap: 16px 20px; }
  .brief-iconos { flex-wrap: wrap; gap: 14px 18px; }
  .brief-card { max-height: 94vh; overflow-y: auto; padding: 22px 18px; }
  .paso { gap: 12px; }
  .podio { min-height: 150px; gap: 6px; }
  .pod { max-width: none; padding-top: 10px; }
  .pod-avatar { width: 38px; height: 38px; font-size: 13px; }
  .pod-nombre { font-size: 10px; }
  .pod-pts { font-size: 13px; }
  .pod-base { font-size: 18px; }
  .pod-1 .pod-base { height: 62px; }
  .pod-2 .pod-base { height: 46px; }
  .pod-3 .pod-base { height: 34px; }
  .cartel-final, .cartel-revelar { width: 92vw; padding: 14px 18px; top: 5vh; }
  .rev-leyenda { gap: 10px; flex-direction: column; }
  .qr-card.mini { flex-direction: column; text-align: center; }
}

/* Pantalla muy baja (celular en horizontal): el instructivo cabe con scroll */
@media (orientation: landscape) and (max-height: 560px) {
  .brief-card { max-height: 92vh; overflow-y: auto; padding: 16px 20px; }
  .reg-card { max-height: 96vh; overflow-y: auto; }
  .res-card, .res-ranking { max-height: 92vh; overflow-y: auto; }
  .podio { min-height: 130px; }
  .demo { gap: 14px; }
}

/* ══════════ Tótem / pantalla VERTICAL ══════════ */
@media (orientation: portrait) {
  .hud-top { flex-wrap: wrap; row-gap: 10px; }
  .hud-brand { order: 1; }
  .hud-right { order: 2; margin-left: auto; }
  .hud-timer { order: 3; flex-basis: 100%; padding: 8px 22px; }
  .attract-titulo { font-size: clamp(64px, 17vw, 230px); }
  .attract-sub { font-size: clamp(17px, 3.4vw, 34px); }
  .res-layout { flex-direction: column; width: min(92vw, 780px); max-height: 94vh; }
  .res-ranking { overflow: auto; }
  .brief-iconos { gap: clamp(12px, 3vw, 30px); }
  .brief-card h2 { font-size: clamp(22px, 4.6vw, 44px); }
  /* En vertical el QR va centrado al pie y el contenido sube: nunca tapa el botón */
  .attract-inner { transform: translateY(-7vh); }
  #qrAttract {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: clamp(20px, 3vh, 50px);
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 18px 12px 12px; text-align: left;
  }
  #qrAttract .qr-cuadro { width: clamp(88px, 11vw, 128px); height: clamp(88px, 11vw, 128px); }
  .hud-hint { max-width: 92vw; white-space: normal; text-align: center; }
}