:root{
  --bg: #0b1220;
  --bg-card:#0f1729;
  --text:#e6eefc;
  --muted:#97a3b6;
  --primary:#5b8cff;
  --primary-600:#4a78e0;
  --accent:#00d4ff;
  --border:#18223a;
  --success:#2ecc71;
  --danger:#ff6b6b;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}
html.light {
  --bg:#f7f9fc;
  --bg-card:#ffffff;
  --text:#0b1220;
  --muted:#5b6474;
  --primary:#315eff;
  --primary-600:#2348cf;
  --accent:#0bb3d6;
  --border:#e7ecf5;
  --shadow: 0 8px 24px rgba(13,28,61,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:linear-gradient(160deg, var(--bg) 0%, #0a0f1c 100%);color:var(--text)}
.container{width:min(1100px, 92%); margin-inline:auto}
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(8px); background:color-mix(in srgb, var(--bg-card) 75%, transparent); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:36px; height:36px; border-radius:10px; display:grid; place-content:center; font-weight:800; background:linear-gradient(135deg, var(--primary), var(--accent)); color:white; box-shadow: var(--shadow)}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{font-size:15px}
.brand-text span{font-size:12px; color:var(--muted)}
.btn{appearance:none; border:none; cursor:pointer; padding:12px 16px; border-radius:12px; background:var(--bg-card); color:var(--text); border:1px solid var(--border); transition:.2s ease; font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color:#fff; border:none}
.btn.ghost{background:transparent}
.card{background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:22px; margin:20px 0; box-shadow:var(--shadow)}
.hero{display:grid; gap:16px}
.hero h1{margin:6px 0 8px}
.bullets{display:grid; gap:6px; margin:8px 0 12px 18px}
.inline-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.inline-form input{padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--text); outline:none; min-width:220px}
.test-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.progress-wrap{flex:1; min-width:260px}
.progress-info{display:flex; justify-content:space-between; color:var(--muted); font-size:14px; margin-bottom:8px}
.progress-bar{width:100%; height:12px; background:#0b1220; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--primary), var(--accent)); width:0%}
.q-card{display:grid; gap:18px}
.q-meta{display:flex; justify-content:space-between; align-items:center; color:var(--muted)}
.tag{background:#14213d; color:#bdd1ff; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px}
.likert{display:grid; gap:10px}
.likert .labels{display:flex; justify-content:space-between; color:var(--muted); font-size:13px}
.likert .options{display:flex; justify-content:space-between; gap:6px}
.likert label{display:grid; place-items:center; width:48px; height:48px; border-radius:12px; border:1px solid var(--border); cursor:pointer; user-select:none; font-weight:700; background:color-mix(in srgb, var(--bg-card) 90%, transparent); position:relative; transition:transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease}
.likert label:active{ transform:scale(0.98) }
.likert label.selected,
.likert label:has(input:checked){border-color: var(--primary); background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, transparent), color-mix(in srgb, var(--accent) 25%, transparent)); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent); color:#fff}
.likert label input:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:10px}
.likert input{display:none}
.nav{display:flex; justify-content:space-between; gap:10px}
.hidden{display:none!important}
.result-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
@media (max-width: 900px){ .result-grid{ grid-template-columns:1fr } }
.result-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.scores{width:100%; border-collapse:collapse; margin-top:10px}
.scores th, .scores td{border-bottom:1px solid var(--border); padding:10px; text-align:left}
.type-summaries{display:grid; gap:12px}
.type-card{border:1px solid var(--border); border-radius:16px; padding:12px; background:color-mix(in srgb, var(--bg-card) 92%, transparent)}
.type-card h5{margin:6px 0}
.again{display:flex; gap:10px; margin-top:10px}
.small{font-size:12px}
.muted{color:var(--muted)}
.site-footer{padding:30px 0; color:var(--muted)}
/* Sobre – figura */
.about-figure{ margin:14px 0 8px; display:grid; justify-items:center; gap:8px }
.about-figure img{ max-width:100%; height:auto; border-radius:12px; border:1px solid var(--border); background:color-mix(in srgb, var(--bg-card) 92%, transparent); padding:8px }
.about-figure figcaption{ font-size:12px; color:var(--muted) }