/* ============================================================
   GK · Diagnóstico Institucional Gratis para tu Club
   Estilos propios de la página. Hereda tokens de main.css.
   ============================================================ */

/* ---------- Marco general del wizard ---------- */
.diag-wrap{max-width:720px;margin:0 auto;}
.diag-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(24px,5vw,44px);
}
.diag-screen{display:none;}
.diag-screen.is-active{display:block;animation:diagIn .28s ease;}
@keyframes diagIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- Progreso ---------- */
.diag-progress{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.diag-progress__bar{flex:1;height:5px;border-radius:3px;background:var(--mist2);overflow:hidden;}
.diag-progress__fill{height:100%;width:0;background:var(--champ-ink);border-radius:3px;transition:width .3s ease;}
.diag-progress__count{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---------- Pregunta ---------- */
.diag-dim{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--champ-ink);margin-bottom:12px;
}
.diag-q{
  font-family:var(--serif);font-size:clamp(21px,3.4vw,27px);line-height:1.25;
  font-weight:500;margin-bottom:24px;
}
.diag-opts{display:grid;gap:10px;}
.diag-opt{
  display:block;width:100%;text-align:left;padding:15px 18px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--paper);
  font-size:15.5px;line-height:1.4;color:var(--ink);
  transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
.diag-opt:hover{border-color:var(--champ-ink);background:var(--mist);}
.diag-opt:active{transform:scale(.99);}
.diag-opt.is-selected{border-color:var(--champ-ink);background:#faf6ea;font-weight:600;}
.diag-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;}
.diag-back{
  font-size:14px;font-weight:600;color:var(--muted);background:none;padding:6px 2px;
}
.diag-back:hover{color:var(--ink);}
.diag-back[hidden]{visibility:hidden;}

/* ---------- Datos de contacto ---------- */
.diag-form .form-group{margin-bottom:16px;}
.diag-privacy{font-size:12.5px;color:var(--muted-light);margin-top:10px;line-height:1.5;}

/* ---------- Resultado: semáforo ---------- */
.diag-result-head{margin-bottom:8px;}
.diag-disclaimer{
  font-size:14px;color:var(--muted);border-left:3px solid var(--champ);
  padding:10px 14px;background:var(--mist);border-radius:0 9px 9px 0;margin:14px 0 28px;
}
.semaforo{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:30px;}
.sem-item{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border:1px solid var(--line);border-radius:11px;background:var(--paper);
}
.sem-dot{width:14px;height:14px;border-radius:50%;flex:none;}
.sem-item--verde .sem-dot{background:#3d9b63;box-shadow:0 0 0 4px #3d9b6322;}
.sem-item--amarillo .sem-dot{background:#d9a921;box-shadow:0 0 0 4px #d9a92122;}
.sem-item--rojo .sem-dot{background:#c8503c;box-shadow:0 0 0 4px #c8503c22;}
.sem-name{font-size:14.5px;font-weight:600;line-height:1.3;}
.sem-state{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.sem-item--verde .sem-state{color:#2e7a4d;}
.sem-item--amarillo .sem-state{color:#a37f16;}
.sem-item--rojo .sem-state{color:#c8503c;}

/* ---------- Bloques: focos rojos ---------- */
.diag-blocks{display:grid;gap:14px;margin-bottom:8px;}
.diag-block{
  border:1px solid #e8d5d0;background:#fdf7f5;border-radius:12px;padding:18px 20px;
}
.diag-block h3{
  font-family:var(--serif);font-size:18.5px;font-weight:600;margin-bottom:7px;color:#8c3a2b;
}
.diag-block p{font-size:14.5px;line-height:1.6;color:var(--ink);}

/* ---------- Bloques: oportunidades (cruces) ---------- */
.diag-opps{display:grid;gap:14px;margin:26px 0 8px;}
.diag-opp{
  border:1px solid #e3d9bd;background:#fbf8ef;border-radius:12px;padding:18px 20px;
}
.diag-opp h3{
  font-family:var(--serif);font-size:18.5px;font-weight:600;margin-bottom:7px;color:var(--champ-ink);
}
.diag-opp p{font-size:14.5px;line-height:1.6;color:var(--ink);}
.diag-opp .opp-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--champ-ink);border:1px solid var(--champ-ink);border-radius:99px;
  padding:2px 10px;margin-bottom:10px;
}

/* ---------- Todo verde ---------- */
.diag-allgreen{
  border:1px solid #cfe3d6;background:#f2f9f4;border-radius:12px;padding:20px 22px;margin-bottom:8px;
}
.diag-allgreen h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:7px;color:#2e7a4d;}
.diag-allgreen p{font-size:14.5px;line-height:1.6;}

/* ---------- Cierre / CTA ---------- */
.diag-cta{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);}
.diag-cta p{font-size:15px;line-height:1.6;margin-bottom:16px;}
.diag-cta .btn{margin-bottom:10px;}
.diag-sign{
  display:flex;align-items:center;gap:12px;margin-top:20px;font-size:13.5px;color:var(--muted);line-height:1.5;
}
.diag-sign .brand__mark{font-size:20px;}
.diag-secondary{margin-top:18px;font-size:14px;}
.diag-secondary button{
  font-weight:600;color:var(--champ-ink);text-decoration:underline;text-underline-offset:3px;
  background:none;padding:2px;
}
.diag-secondary button:hover{color:var(--ink);}

/* ---------- Nivel 2 ---------- */
.diag-l2-intro{font-size:14.5px;color:var(--muted);margin-bottom:22px;line-height:1.6;}
.diag-l2 .form-group label{font-size:14px;}
.diag-links-note{font-size:13px;color:var(--muted);margin:4px 0 14px;}
.diag-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin:14px 0 18px;line-height:1.5;}
.diag-check input{margin-top:3px;accent-color:var(--champ-ink);}

/* ---------- Nota de estado (guardado / error) ---------- */
.diag-note{font-size:13.5px;margin-top:14px;min-height:1.3em;}
.diag-note.ok{color:#2e7a4d;}
.diag-note.err{color:#c8503c;}

/* ---------- Móvil ---------- */
@media (max-width:560px){
  .diag-card{padding:22px 16px;}
  .semaforo{grid-template-columns:1fr;}
  .diag-nav{margin-top:20px;}
}