/* ===== EL TEST DE LA CANCHA ===== */
:root{
  --bg:#080e1a;--bg2:#0d1626;--card:#141f36;--card2:#1b2942;--linea:#26374f;
  --txt:#eef3fb;--t2:#a7b7d4;--t3:#6d80a3;
  --verde:#2ecc71;--pasto:#1f7a4d;--ambar:#f5c542;--rojo:#e5484d;--azul:#4f8ef7;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:radial-gradient(1000px 600px at 50% -10%,#16305a 0%,var(--bg) 62%);
  color:var(--txt);line-height:1.6;min-height:100dvh;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none}

.pantalla{display:none;min-height:100dvh;padding:24px 18px 48px}
.pantalla.activa{display:flex;flex-direction:column;justify-content:center;align-items:center}
.caja{width:100%;max-width:560px;margin:0 auto}
.caja.ancha{max-width:640px}

.logo{color:var(--verde);font-size:12.5px;font-weight:800;letter-spacing:2.2px;margin-bottom:20px;text-align:center}
h1{font-size:clamp(24px,5.6vw,38px);font-weight:900;line-height:1.2;letter-spacing:-.6px;
  text-align:center;margin-bottom:20px}
.bajada{font-size:16px;color:var(--t2);text-align:center;margin-bottom:16px}
.bajada b{color:var(--txt)}
.bajada.dim{font-size:13.5px;color:var(--t3)}
.pie-intro{text-align:center;font-size:12.5px;color:var(--t3);margin-top:16px}

.btn{display:block;width:100%;padding:16px;margin-top:12px;border-radius:14px;font-weight:800;
  font-size:16.5px;background:linear-gradient(145deg,var(--verde),var(--pasto));color:#052616;
  box-shadow:0 12px 32px rgba(46,204,113,.28);transition:transform .15s;text-align:center;text-decoration:none}
.btn:active{transform:scale(.985)}
.btn.linea{background:transparent;border:1px solid var(--linea);color:var(--txt);box-shadow:none}
.btn.verde{margin-bottom:10px}

/* preguntas */
.barra-top{width:100%;max-width:560px;margin:0 auto 26px;display:flex;align-items:center;gap:12px}
.bar{flex:1;height:7px;background:var(--card);border-radius:99px;overflow:hidden}
.bar div{height:100%;width:14%;background:linear-gradient(90deg,var(--pasto),var(--verde));
  border-radius:99px;transition:width .35s}
.paso{font-size:12.5px;color:var(--t3);font-weight:700;flex:none}
.cond{color:var(--ambar);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:10px;text-align:center}
h2{font-size:clamp(20px,4.4vw,27px);font-weight:800;line-height:1.3;text-align:center;margin-bottom:10px}
.ayuda{font-size:14px;color:var(--t3);text-align:center;margin-bottom:26px}
.ops{display:flex;flex-direction:column;gap:10px}
.op{background:var(--card);border:1px solid var(--linea);border-radius:14px;padding:15px 17px;
  text-align:left;color:var(--txt);font-size:15.2px;font-weight:600;transition:.15s;
  display:flex;align-items:center;gap:13px}
.op:hover{border-color:var(--verde);transform:translateX(3px)}
.op i{font-style:normal;font-size:20px;flex:none}
.volver{background:none;color:var(--t3);font-size:13.5px;margin-top:22px;padding:8px}
.volver.centro{display:block;margin:26px auto 0}

/* resultado */
.marcador-res{display:flex;align-items:center;gap:20px;background:var(--card);
  border:1px solid var(--linea);border-radius:20px;padding:22px;margin-bottom:18px}
.anillo{width:104px;height:104px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--verde) var(--pct,0%),#1d2b45 0);position:relative}
.anillo::after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--card)}
.anillo span{position:relative;z-index:1;font-size:34px;font-weight:900;line-height:1}
.anillo small{position:relative;z-index:1;font-size:11px;color:var(--t3);display:block;text-align:center}
.res-txt{flex:1;min-width:0}
.nivel{font-size:20px;font-weight:900;margin-bottom:5px}
.res-txt p{font-size:14.2px;color:var(--t2)}

.bloque{background:var(--card);border:1px solid var(--linea);border-radius:18px;
  padding:18px;margin-bottom:14px}
.bloque h3,.detalle h3,.cta-final h3,.captura h3{font-size:15.5px;font-weight:800;margin-bottom:12px}
.item{border-left:3px solid var(--rojo);padding:2px 0 2px 13px;margin-bottom:14px}
.item:last-child{margin-bottom:0}
.item b{display:block;font-size:14.8px;margin-bottom:3px}
.item p{font-size:13.6px;color:var(--t2)}
.item.ok{border-color:var(--verde)}

.detalle{background:var(--card);border:1px solid var(--linea);border-radius:18px;
  padding:18px;margin-bottom:18px}
.fila{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.fila:last-child{border:none}
.fila-n{flex:1;font-size:14px}
.pts{display:flex;gap:4px;flex:none}
.pt{width:11px;height:11px;border-radius:3px;background:#22314a}
.pt.on{background:var(--verde)}
.pt.med{background:var(--ambar)}

.cta-final{background:linear-gradient(160deg,rgba(46,204,113,.13),var(--card));
  border:1px solid rgba(46,204,113,.4);border-radius:20px;padding:22px;margin-bottom:16px;text-align:center}
.cta-final p{font-size:14.2px;color:var(--t2);margin-bottom:16px}

.captura{background:var(--card);border:1px solid var(--linea);border-radius:20px;padding:22px}
.captura p{font-size:14px;color:var(--t2);margin-bottom:14px}
.ff{margin-bottom:10px}
.ff input{width:100%;padding:13px 15px;background:var(--bg2);border:1px solid var(--linea);
  border-radius:12px;color:var(--txt);font-family:inherit;font-size:15px;outline:none}
.ff input:focus{border-color:var(--verde)}
.mini{font-size:12.5px;color:var(--t3);text-align:center;margin-top:10px}
.mini.ok{color:var(--verde)}

@media(max-width:520px){
  .marcador-res{flex-direction:column;text-align:center;gap:14px}
}