/* Quién Manda — lo que solo usa /quienmanda, encima de stsc.css.

   La pieza propia es la DEMO del hero: una tele y la cruceta de la app. La
   cruceta mueve la selección por la tele, OK la abre y la cara del OK (la del
   icono) mira hacia donde mandas. Todo se anima con transform y opacity, que
   no recolocan nada: la demo no mueve un píxel del resto de la página.

   La tele va en tinta en claro y en surface-200 en oscuro: siempre apagada.
   Sin animaciones con prefers-reduced-motion, por la regla global de stsc.css. */

/* --- Hero: texto y demo ---------------------------------------------- */

.qm-hero {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .qm-hero { grid-template-columns: 1.15fr 1fr; }
}
.qm-hero .entrada { margin-bottom: var(--space-6); }

.qm-demo {
  display: grid;
  justify-items: center;
}
.qm-demo__titulo {
  margin: 0 0 var(--space-4);
  font-weight: 600;
  font-size: var(--text-caption);
  line-height: var(--text-caption-alto);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- La tele --------------------------------------------------------- */

/* En claro, tele en tinta. En oscuro la tinta es crema y la tele parecería
   encendida en blanco: ahí va en surface-200 con borde, que sigue siendo
   oscura. */
.qm-demo { --tele-fondo: var(--ink); --tele-texto: var(--surface-100); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qm-demo { --tele-fondo: var(--surface-200); --tele-texto: var(--ink); }
}
:root[data-theme="dark"] .qm-demo { --tele-fondo: var(--surface-200); --tele-texto: var(--ink); }

.tele {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-2);
  width: min(100%, 26rem);
  aspect-ratio: 16 / 9;
  padding: var(--space-4);
  background: var(--tele-fondo);
  border: var(--borde) solid color-mix(in srgb, var(--tele-texto) 20%, transparent);
  border-radius: var(--radius-md);
  color: var(--tele-texto);
}
.tele__pie {
  width: 30%;
  height: var(--space-2);
  background: color-mix(in srgb, var(--tele-texto) 20%, var(--tele-fondo));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.tele__rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tele__app {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tele-texto) 12%, var(--tele-fondo));
  border-radius: var(--radius-sm);
  font: 600 var(--text-caption)/var(--text-caption-alto) var(--font-sans);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.tele__app[aria-current] {
  background: var(--verde);
  color: var(--on-verde);
  transform: scale(1.06);
}

.tele__estado {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-alto);
  color: color-mix(in srgb, var(--tele-texto) 75%, var(--tele-fondo));
}

/* Lo que se abre con OK: tapa la tele y se va solo. */
.tele__abierta {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  background: var(--verde);
  border-radius: var(--radius-md);
  color: var(--on-verde);
  font: 800 var(--text-l)/var(--text-l-alto) var(--font-display);
  letter-spacing: -.02em;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.qm-demo.abierto .tele__abierta { opacity: 1; transform: none; }

/* --- La señal: tres arcos del mando a la tele -------------------------- */

.senal {
  width: 7.5rem;
  height: 2.5rem;
  margin: var(--space-4) 0 var(--space-2);
  fill: none;
  stroke: var(--verde);
  stroke-width: 3;
  stroke-linecap: round;
}
.senal path { opacity: .25; }
.qm-demo.emite .senal path { animation: onda .5s ease-out both; }
.qm-demo.emite .senal path:nth-child(2) { animation-delay: .08s; }
.qm-demo.emite .senal path:nth-child(3) { animation-delay: .16s; }
@keyframes onda {
  40% { opacity: 1; }
  100% { opacity: .25; }
}

/* --- La cruceta ------------------------------------------------------ */

.cruceta {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  width: 13.5rem;
  aspect-ratio: 1;
  background: var(--surface-200);
  border: var(--borde) solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 50%;
}
.cruceta__boton--arriba    { grid-area: 1 / 2; }
.cruceta__boton--izquierda { grid-area: 2 / 1; }
.cruceta__ok               { grid-area: 2 / 2; }
.cruceta__boton--derecha   { grid-area: 2 / 3; }
.cruceta__boton--abajo     { grid-area: 3 / 2; }

.cruceta button {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.cruceta button:disabled { cursor: default; }

.cruceta__boton {
  width: 3rem;
  height: 3rem;
  background: none;
  color: var(--ink);
}
.cruceta__boton:hover:enabled { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cruceta__boton svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cruceta__ok {
  width: 5.25rem;
  height: 5.25rem;
  background: var(--verde);
  color: var(--on-verde);
}
.cruceta__ok svg { width: 100%; height: 100%; }
.cruceta__ok circle { fill: currentColor; }
.cruceta__ok path { fill: none; stroke: currentColor; stroke-width: 14; stroke-linecap: round; }

/* La cara mira hacia donde mandas; las unidades son las del icono (1024). */
.cara__mirada, .cara__ceja { transition: transform .25s ease; }
.cruceta[data-mira="arriba"]    .cara__mirada { transform: translate(0, -18px); }
.cruceta[data-mira="abajo"]     .cara__mirada { transform: translate(0, 18px); }
.cruceta[data-mira="izquierda"] .cara__mirada { transform: translate(-22px, 0); }
.cruceta[data-mira="derecha"]   .cara__mirada { transform: translate(22px, 0); }
.cruceta[data-mira="ok"]        .cara__ceja   { transform: translate(0, -12px); }

/* Parpadea cada pocos segundos, y una vez más al pulsar OK. */
.cara__ojos {
  transform-box: fill-box;
  transform-origin: center;
  animation: parpadeo 6s infinite;
}
.cruceta[data-mira="ok"] .cara__ojos { animation: guino .35s ease; }
@keyframes parpadeo {
  0%, 94%, 100% { transform: none; }
  96% { transform: scaleY(.1); }
}
@keyframes guino {
  50% { transform: scaleY(.1); }
}

/* El aro que deja cada pulsación. */
.cruceta .pulso::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--borde-grueso) solid var(--verde);
  border-radius: 50%;
  animation: aro .4s ease-out both;
  pointer-events: none;
}
@keyframes aro {
  from { opacity: 1; transform: scale(.7); }
  to   { opacity: 0; transform: scale(1.5); }
}

/* --- Capturas -------------------------------------------------------- */

.capturas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 56rem;
  margin-top: var(--space-8);
}
@media (min-width: 640px) {
  .capturas { gap: var(--space-8); }
}
.capturas figure { margin: 0; }
.capturas img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--borde) solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: var(--radius-lg);
}
.capturas figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--text-caption-alto);
  color: var(--ink-muted);
}

/* --- Resto ----------------------------------------------------------- */

.qm-cifras { max-width: 28rem; margin-top: var(--space-8); }
.qm-donde { margin-top: var(--space-12); }