/* ============================================================
   MOVE! — INTERFAZ
   Colección EL TÍO IA · eltioia.cl
   ------------------------------------------------------------
   La idea visual: una app deportiva, no un juego infantil.
   Fondo oscuro de pista nocturna, verde lima de cronómetro,
   naranjo de esfuerzo, tipografía condensada y en mayúsculas.

   El spec pide explícitamente que no se sienta infantil y que
   funcione para estudiantes de 10 a 14 años. A esa edad una
   estética demasiado tierna es lo primero que hace cerrar la
   pestaña.
   ============================================================ */

:root{
  --fondo:#12151b;
  --fondo-2:#1a1f28;
  --panel:#1e242f;
  --panel-alto:#252d3a;
  --linea:rgba(255,255,255,.1);
  --texto:#eef2f7;
  --texto-suave:#9aa6b6;
  --lima:#c8ff3d;
  --lima-oscuro:#9fd118;
  --naranjo:#ff8c1a;
  --rojo:#ff4d4d;
  --verde:#3ddc84;
  --azul:#3da5ff;
  --sombra:0 16px 38px rgba(0,0,0,.45);
  --radio:16px;
  --fuente:"Archivo Black","Haettenschweiler","Arial Narrow Bold",
           "Impact","Franklin Gothic Bold",system-ui,sans-serif;
  --fuente-ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}

/* El atributo hidden debe ganar siempre.
   Sin esto, cualquier regla con `display` lo anula en silencio. */
[hidden]{ display:none !important; }

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--fuente-ui);
  color:var(--texto);
  background:var(--fondo);
  /* Carriles de pista, muy tenues, en diagonal */
  background-image:
    linear-gradient(115deg, rgba(200,255,61,.05) 0 2px, transparent 2px 92px),
    radial-gradient(circle at 12% 0%, rgba(255,140,26,.12), transparent 45%),
    radial-gradient(circle at 88% 100%, rgba(200,255,61,.09), transparent 45%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.55;
}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px clamp(12px,3vw,28px);
  background:rgba(18,21,27,.92);
  border-bottom:2px solid var(--lima);
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(8px);
}
.marca{
  font-family:var(--fuente); font-size:clamp(19px,3.8vw,25px);
  letter-spacing:1.5px; text-transform:uppercase;
}
.marca-icon{ margin-right:4px; }
.marca-ex, .h1-ex{ color:var(--lima); }
.topbar-acciones{ display:flex; gap:8px; flex-wrap:wrap; }

.btn-chico{
  font-family:var(--fuente-ui); font-size:12.5px; font-weight:700;
  color:var(--texto); text-decoration:none;
  background:rgba(255,255,255,.07); border:1.5px solid var(--linea);
  border-radius:99px; padding:7px 13px; cursor:pointer;
  transition:background .2s, border-color .2s, transform .12s;
}
.btn-chico:hover{ background:rgba(255,255,255,.14); border-color:var(--lima); transform:translateY(-1px); }
.btn-chico.activo{ background:var(--lima); border-color:var(--lima); color:#12151b; }

/* ---------- Pantallas ---------- */
#app{ padding:clamp(16px,3.5vw,34px) clamp(12px,3vw,28px) 60px; }
.screen{ display:none; max-width:1060px; margin:0 auto; }
.screen.is-active{ display:block; animation:entra .3s ease both; }
@keyframes entra{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.titulo-pantalla{
  font-family:var(--fuente); font-size:clamp(24px,5.4vw,38px);
  text-transform:uppercase; letter-spacing:1px;
  text-align:center; margin:6px 0 24px;
}

.panel{
  background:linear-gradient(180deg, var(--panel-alto), var(--panel));
  border:1.5px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:clamp(16px,3.2vw,28px);
}

/* ---------- Inicio ---------- */
.intro{ max-width:660px; margin:clamp(10px,4vw,48px) auto; text-align:center; }
.pista{ display:flex; flex-direction:column; gap:7px; margin:0 auto 26px; width:min(320px,80%); }
.carril{
  height:5px; border-radius:99px;
  background:linear-gradient(90deg, transparent, var(--lima), transparent);
  opacity:.75; animation:corre 2.2s ease-in-out infinite;
}
.carril:nth-child(2){ animation-delay:.25s; opacity:.5; }
.carril:nth-child(3){ animation-delay:.5s; opacity:.32; }
@keyframes corre{ 0%,100%{ transform:translateX(-14%); } 50%{ transform:translateX(14%); } }

.intro h1{
  font-family:var(--fuente); font-size:clamp(48px,13vw,92px);
  text-transform:uppercase; letter-spacing:3px;
  margin:0 0 2px; line-height:1;
}
.lema{
  font-size:clamp(15px,3.4vw,20px); color:var(--lima);
  font-weight:700; letter-spacing:.5px; margin:0 0 22px;
}
.intro-txt{ font-size:clamp(14px,3vw,16.5px); color:var(--texto-suave); max-width:54ch; margin:0 auto 28px; }
.pie-nota{
  font-size:12.5px; color:var(--texto-suave); max-width:52ch;
  margin:28px auto 0; line-height:1.6;
  border-top:1px solid var(--linea); padding-top:16px;
}

.btn-grande{
  font-family:var(--fuente); font-size:clamp(15px,3.2vw,19px);
  text-transform:uppercase; letter-spacing:1.5px;
  color:#12151b; background:linear-gradient(180deg,var(--lima),var(--lima-oscuro));
  border:none; border-radius:99px;
  padding:14px 34px; cursor:pointer;
  box-shadow:0 5px 0 #7ea511, 0 12px 26px rgba(200,255,61,.22);
  transition:transform .12s, box-shadow .12s;
}
.btn-grande:hover{ transform:translateY(-2px); box-shadow:0 7px 0 #7ea511, 0 14px 30px rgba(200,255,61,.3); }
.btn-grande:active{ transform:translateY(3px); box-shadow:0 2px 0 #7ea511; }

.btn-secundario{
  font-family:var(--fuente-ui); font-weight:700; font-size:14px;
  color:var(--texto); text-decoration:none;
  background:rgba(255,255,255,.08); border:1.5px solid var(--linea);
  border-radius:99px; padding:12px 22px; cursor:pointer;
  display:inline-block; transition:background .2s, border-color .2s;
}
.btn-secundario:hover{ background:rgba(255,255,255,.15); border-color:var(--lima); }

/* ---------- Tarjetas de desafío ---------- */
.modes{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .modes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:920px){ .modes{ grid-template-columns:repeat(4,1fr); } }

.mode-card{
  display:flex; flex-direction:column; gap:5px; text-align:left;
  font-family:var(--fuente-ui); color:var(--texto);
  background:linear-gradient(180deg, var(--panel-alto), var(--panel));
  border:1.5px solid var(--linea); border-radius:var(--radio);
  padding:17px 16px; cursor:pointer; box-shadow:var(--sombra);
  position:relative; overflow:hidden;
  transition:transform .14s, border-color .2s;
}
.mode-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--lima); opacity:.55; transition:opacity .2s;
}
.mode-card:hover{ transform:translateY(-3px); border-color:var(--lima); }
.mode-card:hover::after{ opacity:1; }
.mode-card.es-reto::after{ background:var(--naranjo); }
.mode-card.es-reto:hover{ border-color:var(--naranjo); }
.mode-icon{ font-size:29px; line-height:1; }
.mode-name{
  font-family:var(--fuente); font-size:17px;
  text-transform:uppercase; letter-spacing:.6px;
}
.mode-desc{ font-size:12.5px; color:var(--texto-suave); }
.mode-count{ font-size:11px; color:var(--lima); font-weight:800; letter-spacing:.6px; text-transform:uppercase; margin-top:3px; }
.mode-card.es-reto .mode-count{ color:var(--naranjo); }

/* ---------- HUD ---------- */
.hud{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.05); border:1.5px solid var(--linea);
  border-radius:99px; padding:8px 14px; margin-bottom:10px;
}
.btn-salir{
  font-family:var(--fuente-ui); font-size:12.5px; font-weight:700; color:var(--texto);
  background:rgba(255,255,255,.07); border:1.5px solid var(--linea);
  border-radius:99px; padding:5px 12px; cursor:pointer;
}
.btn-salir:hover{ background:rgba(255,255,255,.14); }
.hud-modo{ font-family:var(--fuente); font-size:14px; text-transform:uppercase; letter-spacing:.7px; }
.hud-datos{ display:flex; gap:18px; margin-left:auto; }
.hud-datos span{ display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.hud-datos b{ font-family:var(--fuente); font-size:19px; color:var(--lima); }
.hud-datos small{ font-size:9px; letter-spacing:.7px; color:var(--texto-suave); text-transform:uppercase; }

/* ---------- Reloj del reto ---------- */
.reloj-caja{
  background:rgba(255,140,26,.1); border:1.5px solid rgba(255,140,26,.42);
  border-radius:12px; padding:9px 13px; margin-bottom:10px;
}
.reloj-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.reloj-top span{ font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--naranjo); font-weight:800; }
.reloj-top b{ font-family:var(--fuente); font-size:27px; color:var(--naranjo); }
.reloj-fondo{ height:6px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.reloj-barra{ height:100%; width:100%; background:var(--naranjo); transition:width 1s linear; }
.reloj-caja.urgente{ border-color:var(--rojo); background:rgba(255,77,77,.14); animation:latido .8s ease-in-out infinite; }
.reloj-caja.urgente .reloj-top span, .reloj-caja.urgente .reloj-top b{ color:var(--rojo); }
.reloj-caja.urgente .reloj-barra{ background:var(--rojo); }
@keyframes latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.015); } }

.barra-fondo{ height:6px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden; margin-bottom:16px; }
.barra{ height:100%; width:0; background:linear-gradient(90deg,var(--lima),var(--naranjo)); transition:width .35s ease; }

/* ---------- Pregunta ---------- */
.q-nivel{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--texto-suave);
  background:rgba(255,255,255,.06); border-radius:99px; padding:4px 12px; margin-bottom:14px;
}
.q-texto{
  font-family:var(--fuente); font-size:clamp(18px,4vw,26px); line-height:1.3;
  text-align:center; margin:0 0 20px;
}
.q-figura{ display:grid; justify-items:center; margin-bottom:14px; }
.q-figura .figura-svg{ width:min(160px,44vw); height:auto; }
.fig-nota{ font-size:12px; color:var(--texto-suave); margin:6px 0 0; font-style:italic; }

.opciones{ display:grid; gap:10px; }
@media (min-width:700px){ .opciones{ grid-template-columns:repeat(2,1fr); } }

.opcion{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  font-family:var(--fuente-ui); font-weight:600; font-size:clamp(14px,3vw,16px);
  color:var(--texto); background:rgba(255,255,255,.055);
  border:1.5px solid var(--linea); border-radius:12px;
  padding:14px 15px; cursor:pointer;
  transition:transform .12s, border-color .2s, background .2s;
}
.opcion:hover:not(:disabled){ transform:translateX(3px); border-color:var(--lima); background:rgba(200,255,61,.09); }
.opcion:disabled{ cursor:default; }
.op-letra{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  font-family:var(--fuente); font-size:13px;
  background:rgba(255,255,255,.09); border-radius:8px; color:var(--texto-suave);
}
.opcion.es-correcta{ background:rgba(61,220,132,.16); border-color:var(--verde); }
.opcion.es-correcta .op-letra{ background:var(--verde); color:#12151b; }
.opcion.es-incorrecta{ background:rgba(255,77,77,.13); border-color:var(--rojo); }
.opcion.es-incorrecta .op-letra{ background:var(--rojo); color:#fff; }

/* ---------- Alternativas con figuras ---------- */
.opciones-figuras{ grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:700px){ .opciones-figuras{ grid-template-columns:repeat(4,1fr); } }
.opcion-figura{
  flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:12px 8px;
}
.opcion-figura .figura-svg{ width:100%; max-width:130px; height:auto; }
.op-fig-nombre{ font-size:11.5px; color:var(--texto-suave); line-height:1.35; }
.opcion-figura.es-correcta .op-fig-nombre{ color:var(--verde); }
.opcion-figura.es-incorrecta .op-fig-nombre{ color:var(--rojo); }

/* ---------- Las figuras de postura ---------- */
.figura-svg{ display:block; }
.fig-linea{ stroke:var(--lima); stroke-width:5; stroke-linecap:round; fill:none; }
.fig-cabeza{ fill:none; stroke:var(--lima); stroke-width:5; }
.fig-pie{ stroke:var(--lima); stroke-width:6; stroke-linecap:round; }
.fig-suelo{ stroke:rgba(255,255,255,.28); stroke-width:2; }
.fig-base{ fill:rgba(255,140,26,.55); }
.fig-base-medida{ stroke:var(--naranjo); stroke-width:2; }
.fig-plomada{ stroke:var(--naranjo); stroke-width:1.5; stroke-dasharray:4 3; }
.fig-cg{ fill:none; stroke:var(--naranjo); stroke-width:2.5; }
.fig-cg-punto{ fill:var(--naranjo); }
.fig-texto{ fill:var(--naranjo); font-size:10px; text-anchor:middle; font-family:var(--fuente-ui); font-weight:700; }

/* ---------- Secuencia de coordinación ---------- */
.sec-titulo{
  font-family:var(--fuente); font-size:clamp(17px,3.6vw,22px);
  text-transform:uppercase; letter-spacing:1px; text-align:center; margin:0 0 4px;
}
.sec-instruccion{ text-align:center; color:var(--lima); font-weight:700; margin:0 0 20px; font-size:15px; }

.sec-progreso{ display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin-bottom:24px; }
.sec-casilla{
  width:52px; height:52px; display:grid; place-items:center;
  font-size:26px; line-height:1;
  background:rgba(255,255,255,.05); border:2px dashed var(--linea);
  border-radius:12px; transition:transform .12s, border-color .2s, background .2s;
}
.sec-casilla.mostrando{
  background:rgba(200,255,61,.18); border-color:var(--lima); border-style:solid;
  transform:scale(1.14);
}
.sec-casilla.bien{ border-style:solid; border-color:var(--verde); background:rgba(61,220,132,.16); }
.sec-casilla.mal{ border-style:solid; border-color:var(--rojo); background:rgba(255,77,77,.16); }
.sec-casilla.revelada{ border-style:solid; border-color:var(--naranjo); background:rgba(255,140,26,.13); opacity:.85; }

.sec-botones{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; max-width:430px; margin:0 auto; }
@media (min-width:560px){ .sec-botones{ grid-template-columns:repeat(4,1fr); } }
.sec-botones.esperando{ opacity:.4; }
.sec-boton{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:rgba(255,255,255,.06); border:2px solid var(--linea);
  border-radius:14px; padding:16px 8px; cursor:pointer; color:var(--texto);
  font-family:var(--fuente-ui);
  transition:transform .1s, border-color .2s, background .2s;
}
.sec-boton:disabled{ cursor:default; }
.sec-boton:hover:not(:disabled){ border-color:var(--lima); background:rgba(200,255,61,.1); }
.sec-icon{ font-size:31px; line-height:1; }
.sec-label{ font-size:11px; color:var(--texto-suave); letter-spacing:.4px; }
.sec-boton.destacado{
  border-color:var(--lima); background:rgba(200,255,61,.28);
  transform:scale(1.07); box-shadow:0 0 22px rgba(200,255,61,.35);
}
.sec-boton.pulsado{ transform:scale(.94); border-color:var(--azul); }

/* ---------- Resultado del desafío ---------- */
.fb-titulo{
  font-family:var(--fuente); font-size:clamp(22px,5vw,30px);
  text-transform:uppercase; letter-spacing:1px; text-align:center; margin:0 0 8px;
}
.fb-titulo.bien{ color:var(--verde); }
.fb-titulo.mal{ color:var(--rojo); }
.fb-linea{ text-align:center; font-size:clamp(14px,3vw,16px); margin:0 0 10px; }
.fb-puntos{ text-align:center; font-family:var(--fuente); font-size:28px; color:var(--lima); margin:0; }
.fb-bonos{ text-align:center; font-size:12.5px; color:var(--texto-suave); margin:3px 0 16px; }
.fb-texto{
  background:rgba(255,255,255,.05); border-left:4px solid var(--lima);
  border-radius:0 10px 10px 0; padding:14px 16px;
  font-size:clamp(13.5px,2.9vw,15.5px); color:var(--texto-suave); margin:0 0 20px;
}
#stage-feedback .btn-grande{ display:block; margin:0 auto; }

/* ---------- Ficha del profesor ---------- */
.ficha{
  background:rgba(61,165,255,.09); border:1.5px dashed rgba(61,165,255,.45);
  border-radius:12px; padding:14px 16px; margin-top:20px; font-size:13.5px;
}
.ficha h3{ margin:0 0 8px; font-family:var(--fuente); font-size:15px; text-transform:uppercase; letter-spacing:.8px; color:var(--azul); }
.ficha p{ margin:5px 0; color:var(--texto-suave); }
.ficha b{ color:var(--texto); }

/* ---------- Resultado final ---------- */
.resultado{ text-align:center; max-width:740px; margin:0 auto; }
.res-icono{ font-size:clamp(46px,12vw,72px); line-height:1; }
.res-rango{
  font-family:var(--fuente); font-size:clamp(24px,5.6vw,38px);
  text-transform:uppercase; letter-spacing:1.2px; margin:4px 0 2px; color:var(--lima);
}
.res-frase{ color:var(--texto-suave); margin:0 0 10px; }
.res-aviso{
  background:rgba(255,140,26,.14); border:1.5px solid rgba(255,140,26,.4);
  border-radius:10px; padding:9px 14px; font-size:13.5px; margin:0 0 14px;
}
.res-modo-lbl{ font-size:13px; color:var(--texto-suave); margin:0 0 14px; }
.res-puntos{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:20px; }
.res-puntos b{ font-family:var(--fuente); font-size:clamp(40px,10vw,60px); color:var(--lima); }
.res-puntos span{ font-size:13px; color:var(--texto-suave); text-transform:uppercase; letter-spacing:1px; }

.res-detalle{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:24px; }
.dato{
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  border-radius:12px; padding:11px 6px; display:flex; flex-direction:column; align-items:center; gap:1px;
}
.dato-i{ font-size:16px; }
.dato-v{ font-family:var(--fuente); font-size:21px; color:var(--lima); }
.dato-k{ font-size:10px; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.5px; }

.res-sub{ font-family:var(--fuente); font-size:16px; text-transform:uppercase; letter-spacing:1px; margin:0 0 10px; }
.res-revision{ list-style:none; padding:0; margin:0 0 24px; text-align:left; }
.res-revision li{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px; margin-bottom:5px; font-size:13.5px;
  background:rgba(255,255,255,.04); border-left:4px solid var(--linea);
}
.res-revision li.bien{ border-left-color:var(--verde); }
.res-revision li.mal{ border-left-color:var(--rojo); }
.rev-n{
  flex:none; width:23px; height:23px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border-radius:7px; font-size:11.5px; font-weight:800;
}
.rev-q{ flex:1; color:var(--texto-suave); }
.rev-p{ font-family:var(--fuente); color:var(--lima); }

.res-botones{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }

/* ---------- Conversemos ---------- */
.conversemos{ max-width:720px; margin:0 auto; }
.conv-titulo{
  font-family:var(--fuente); font-size:clamp(24px,5.4vw,34px);
  text-transform:uppercase; letter-spacing:1.2px; text-align:center; margin:0 0 10px;
}
.conv-intro{ text-align:center; color:var(--texto-suave); font-size:14.5px; margin:0 0 24px; }
.conv-lista{ list-style:none; padding:0; margin:0 0 26px; counter-reset:c; }
.conv-lista li{
  counter-increment:c;
  background:rgba(255,255,255,.05); border:1.5px solid var(--linea);
  border-left:4px solid var(--naranjo);
  border-radius:0 12px 12px 0; padding:16px 18px; margin-bottom:12px;
  display:flex; flex-direction:column; gap:6px;
}
.conv-tema{ font-size:11.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--naranjo); }
.conv-p{ font-size:clamp(15px,3.2vw,18px); line-height:1.45; }

.firma{ text-align:center; font-size:12.5px; color:var(--texto-suave); margin-top:28px; letter-spacing:.4px; }

/* ---------- Pantallas chicas ---------- */
@media (max-width:520px){
  .hud{ border-radius:16px; }
  .hud-datos{ width:100%; margin-left:0; justify-content:space-around; }
  .res-detalle{ grid-template-columns:repeat(2,1fr); }
  .sec-casilla{ width:44px; height:44px; font-size:22px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}