/* Hilacha. Paleta propia: el sótano es casi negro y lo único que brilla es lo
   que importa —el cuerpo en verde, las arandelas en naranja y las placas
   apretadas en celeste—, así que el tablero se lee de un vistazo. */
.hi-intro { background: linear-gradient(170deg, #0c0f14 0%, #141922 100%); color: #eef1f7;
  padding: 54px 0 34px; }
.hi-intro h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 6px 0 14px; letter-spacing: -.02em; }
.hi-intro .lead { color: #a2abbd; max-width: 70ch; line-height: 1.65; }
.hi-intro .lead b { color: #8fffca; font-weight: 600; }
.hi-intro .eyebrow a { color: #8fffca; }

.hi-seccion { padding: 26px 0 60px; background: #0a0c11; }
.lc { display: grid; gap: 14px; }

/* el marcador de arriba */
.hi-marcador { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 10px 14px; min-height: 42px; }
.hi-marcador span { font-size: .8rem; color: #8a93a6; }
.hi-marcador b { color: #eef1f7; font-weight: 700; }
.hi-marcador span:first-child { color: #8fffca; font-size: .86rem; }
.hi-marcador span:first-child b { color: #8fffca; }

.hi-pantalla { position: relative; border-radius: 14px; overflow: hidden; background: #0c0f14;
  border: 1px solid #222736; }
.hi-pantalla > canvas { display: block; width: 100%; height: auto; outline: none; }

.hi-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(8,10,14,.94); overflow: auto; }
.hi-panel[hidden] { display: none; }
.hi-caja { width: min(560px, 100%); background: #141824; border: 1px solid #262c3c;
  border-radius: 14px; padding: 20px 22px; color: #eef1f7; }
.hi-caja.hi-ancha { width: min(820px, 100%); }
.hi-caja h2 { font-size: 1.5rem; margin: 2px 0 10px; letter-spacing: -.015em; }
.hi-caja p { margin: 0 0 10px; font-size: .94rem; line-height: 1.55; color: #c3cbd9; }
.hi-caja p b { color: #eef1f7; }
.hi-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  color: #8a93a6; font-weight: 700; margin: 0 0 4px !important; }
.hi-tenue { color: #8a93a6 !important; font-size: .86rem !important; }
.hi-bien { color: #8fffca !important; }
.hi-alerta { color: #ff9aa4 !important; }

.hi-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hi-cta, .hi-cta-2 { font: inherit; font-size: .9rem; font-weight: 600; padding: 10px 16px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.hi-cta { background: #8fffca; color: #0b2018; }
.hi-cta:hover { background: #adffd9; }
.hi-cta-2 { background: rgba(255,255,255,.07); color: #eef1f7; border-color: rgba(255,255,255,.14); }
.hi-cta-2:hover { background: rgba(255,255,255,.13); }
.hi-cta[disabled], .hi-cta-2[disabled] { opacity: .4; cursor: not-allowed; }

/* la lista de piezas */
.hi-piezas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px; margin: 10px 0 4px; }
.hi-pieza { text-align: left; font: inherit; cursor: pointer; display: grid; gap: 4px;
  align-content: start; min-width: 0;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 12px; color: #eef1f7; }
.hi-pieza b { font-size: .88rem; font-weight: 600; }
.hi-pieza span { font-size: .77rem; color: #9ba4b6; line-height: 1.45; }
.hi-pieza .hi-marca { color: #8fffca; font-size: .73rem; }
.hi-pieza:hover:not([disabled]) { background: rgba(255,255,255,.07); }
.hi-pieza[disabled] { opacity: .42; cursor: not-allowed; }
.hi-pieza.hi-hecha { border-color: rgba(143,255,202,.35); background: rgba(143,255,202,.06); }
.hi-pieza.hi-toca { border-color: rgba(143,255,202,.75); }

.hi-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin: 12px 0; }
.hi-datos > div { background: rgba(255,255,255,.04); border-radius: 9px; padding: 9px 11px;
  min-width: 0; }
.hi-datos b { display: block; font-size: 1.2rem; color: #8fffca; }
.hi-datos span { font-size: .72rem; color: #8a93a6; }

/* el mando: una cruz y tres botones largos */
.hi-mando { display: grid; gap: 10px; grid-template-columns: auto 1fr; align-items: center; }
.hi-cruz { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px);
  gap: 5px; }
.hi-arriba { grid-area: 1 / 2; } .hi-izq { grid-area: 2 / 1; }
.hi-der { grid-area: 2 / 3; } .hi-abajo { grid-area: 3 / 2; }
.hi-fila { display: flex; flex-wrap: wrap; gap: 7px; }
.hi-bt { font: inherit; font-size: .92rem; font-weight: 700; border-radius: 10px;
  cursor: pointer; color: #eef1f7; user-select: none; touch-action: manipulation;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.hi-bt.hi-largo { font-size: .84rem; font-weight: 600; padding: 11px 14px; }
.hi-bt i { font-style: normal; font-size: .64rem; font-weight: 700; color: #a2abbd;
  background: rgba(0,0,0,.35); border-radius: 4px; padding: 2px 5px; }
.hi-bt:hover { background: rgba(255,255,255,.13); }
.hi-bt:active { background: rgba(143,255,202,.22); border-color: rgba(143,255,202,.5); }

.hi-ayuda { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.hi-ayuda > div { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 14px 16px; }
.hi-ayuda h3 { margin: 0 0 6px; font-size: .92rem; color: #8fffca; }
.hi-ayuda p { margin: 0; font-size: .86rem; line-height: 1.55; color: #a2abbd; }
.hi-ayuda p b { color: #eef1f7; font-weight: 600; }
.hi-pie { font-size: .84rem; color: #8a93a6; line-height: 1.6; max-width: 74ch; margin: 0; }

@media (max-width: 560px) {
  .hi-mando { grid-template-columns: 1fr; justify-items: center; }
  .hi-fila { justify-content: center; }
}

/* lo propio de Hilacha */
.hi-marcador .hi-falta { color: #ff9aa4; }
.hi-marcador .hi-ok { color: #8fffca; }
.hi-tramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px; margin: 10px 0 4px; }
.hi-tramo { text-align: left; font: inherit; cursor: pointer; display: grid; gap: 4px;
  align-content: start; min-width: 0;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 12px; color: #eef1f7; }
.hi-tramo b { font-size: .88rem; font-weight: 600; }
.hi-tramo span { font-size: .77rem; color: #9ba4b6; line-height: 1.45; }
.hi-tramo .hi-pide { color: #ffc46b; font-size: .73rem; }
.hi-tramo .hi-marca { color: #8fffca; font-size: .73rem; }
.hi-tramo:hover:not([disabled]) { background: rgba(255,255,255,.07); }
.hi-tramo[disabled] { opacity: .42; cursor: not-allowed; }
.hi-tramo.hi-hecho { border-color: rgba(143,255,202,.35); background: rgba(143,255,202,.06); }
.hi-tramo.hi-toca { border-color: rgba(143,255,202,.75); }
.hi-mando { display: grid; gap: 10px; grid-template-columns: 1fr; }
.hi-salta { flex: 1; min-width: 150px; }
.hi-bt { padding: 13px 18px; }
.hi-bt.hi-chico { font-size: .84rem; font-weight: 600; padding: 10px 14px; }