:root{
  --ink:#0f3f86; --blue:#1f7a99; --blue2:#1a9bf0; --green:#a4c639; --red:#c0203f;
  --gray2:#e7eaee; --text:#23272e; --muted:#7a8189; --paper:#fff; --bg:#f4f6fb;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;}
a{color:var(--blue);}

/* ---- Nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 26px;background:#fff;border-bottom:1px solid var(--gray2);position:sticky;top:0;z-index:10;}
.nav .brand{font-size:1.3rem;font-weight:800;color:var(--ink);text-decoration:none;}
.nav .brand span{color:var(--blue2);}
.nav-links{display:flex;align-items:center;gap:14px;font-size:.92rem;}
.nav-links a{color:var(--text);text-decoration:none;}
.nav-links a:hover{color:var(--blue2);}
.nav .hi{color:var(--muted);font-size:.86rem;}
.btn{background:var(--blue2);color:#fff !important;border:none;cursor:pointer;font-weight:700;padding:9px 16px;border-radius:10px;text-decoration:none;display:inline-block;}
.btn:hover{background:#1580d6;}
.btn-ghost{border:1px solid var(--gray2);color:var(--text) !important;padding:8px 15px;border-radius:10px;text-decoration:none;}
.btn.big,.btn-ghost.big{padding:13px 24px;font-size:1.02rem;}
.btn.full{width:100%;}

.page{min-height:60vh;}
.foot{padding:26px;text-align:center;color:#9aa0a7;font-size:.85rem;border-top:1px solid var(--gray2);margin-top:40px;background:#fff;}

/* ---- Hero ---- */
.hero{background:linear-gradient(160deg,#0e2245,#14509f);color:#fff;padding:64px 22px;text-align:center;}
.hero-in{max-width:760px;margin:auto;}
.hero h1{font-size:2.4rem;margin:0 0 12px;line-height:1.15;}
.hero h1 span{color:var(--green);}
.hero .lead{font-size:1.1rem;color:#dfe8f5;margin:0 auto 26px;max-width:620px;}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta.center{margin-top:22px;}

/* ---- Features ---- */
.features{max-width:960px;margin:46px auto;padding:0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.feat{background:#fff;border:1px solid var(--gray2);border-radius:14px;padding:22px;text-align:center;}
.feat .ic{font-size:2rem;}
.feat h3{margin:8px 0 6px;color:var(--ink);}
.feat p{margin:0;color:var(--muted);font-size:.92rem;}

/* ---- Levels preview ---- */
.levels-preview{max-width:960px;margin:36px auto 60px;padding:0 22px;text-align:center;}
.levels-preview h2{color:var(--ink);}
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0;}
.track{border:1px solid var(--gray2);border-radius:14px;padding:22px;background:#fff;}
.track h3{margin:0 0 6px;}
.track.basic h3{color:var(--green);} .track.inter h3{color:var(--blue);} .track.adv h3{color:var(--red);}
.track p{margin:0;color:var(--muted);font-size:.9rem;}

/* ---- Forms (login/registro) ---- */
.form-wrap{max-width:430px;margin:6vh auto;padding:0 18px;}
.card{background:#fff;border:1px solid var(--gray2);border-radius:14px;padding:24px 22px;box-shadow:0 6px 24px rgba(0,0,0,.05);}
.card h1{font-size:1.3rem;margin:0 0 14px;color:var(--ink);}
label{display:block;font-size:.85rem;font-weight:600;color:#444;margin:12px 0 4px;}
input{width:100%;padding:11px 12px;border:1px solid var(--gray2);border-radius:9px;font-size:1rem;}
input:focus{outline:none;border-color:var(--blue2);}
.msg{padding:11px 14px;border-radius:9px;margin:0 0 14px;font-size:.92rem;}
.msg.err{background:#fdeef0;border:1px solid #f3c2cb;color:#c0203f;}
.msg.ok{background:#e7f7ea;border:1px solid #a9dcb6;color:#2a7a3a;}
.alt{text-align:center;margin-top:16px;font-size:.9rem;color:var(--muted);}
.alt a{color:var(--blue);font-weight:600;text-decoration:none;}

/* ---- Dashboard ---- */
.dash{max-width:900px;margin:34px auto;padding:0 22px;}
.dash h1{color:var(--ink);margin:0 0 4px;}
.dash .sub{color:var(--muted);margin:0 0 18px;}
.note-blue{background:#eef7ff;border:1px solid #cfe6f5;border-left:5px solid var(--blue);border-radius:10px;padding:12px 16px;font-size:.9rem;margin:0 0 22px;}
.track-title{margin:22px 0 8px;font-size:1.1rem;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.lvl{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--green);border-radius:12px;padding:20px 8px;font-weight:800;color:var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s;}
.lvl:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.08);}
.lvl.off{border-color:var(--gray2);color:var(--muted);opacity:.6;font-weight:600;}

@media(max-width:760px){
  .features,.tracks{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:1.9rem;}
  .nav{padding:12px 16px;}
}