/* Escuela de Poker NL2 — estilos de Inicio y Lecciones (misma paleta que la mesa) */
:root{
  --bg:#EEF1EE; --surface:#FFFFFF; --surface2:#F6F8F6; --ink:#15201B; --muted:#5A6862; --line:#D6DDD8;
  --accent:#1E6B4F; --accent-ink:#FFFFFF; --red:#BF3A30; --amber:#E0A93B; --amber-ink:#2A1E05;
  --good:#1E6B4F; --bad:#BF3A30;
  --felt-a:#23785A; --felt-b:#12432F; --felt-ink:#E9F3EE; --felt-muted:#A9C9BA;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0D1411; --surface:#151E1A; --surface2:#1A2520; --ink:#E5ECE8; --muted:#94A39B; --line:#28362F;
    --accent:#3FA57C; --accent-ink:#07130D; --red:#E0645A; --amber:#E7B653; --amber-ink:#1F1603;
    --good:#4FB88C; --bad:#E0645A; --felt-a:#1C6149; --felt-b:#0C2E21;
  }
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
[hidden]{display:none!important}

/* ---- Inicio ---- */
.hero{background:radial-gradient(120% 140% at 20% 0%,var(--felt-a),var(--felt-b));color:var(--felt-ink);padding:48px 0 56px}
.hero h1{font-size:clamp(30px,5.5vw,50px);margin:0 0 12px;letter-spacing:-.02em}
.hero p{max-width:640px;color:var(--felt-muted);font-size:18px;margin:0 0 24px}
.hero-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.hero-text{flex:1 1 380px}
.ring{--p:0;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--amber) calc(var(--p)*1%),rgba(255,255,255,.12) 0)}
.ring>div{width:118px;height:118px;border-radius:50%;background:var(--felt-b);display:grid;place-items:center;text-align:center}
.ring b{font-family:var(--display);font-size:32px;display:block;line-height:1}
.ring span{font-size:12px;color:var(--felt-muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font:600 15px var(--body);cursor:pointer;text-decoration:none;background:var(--surface);color:var(--ink)}
.btn.primary{background:var(--amber);color:var(--amber-ink)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.btns{display:flex;gap:10px;flex-wrap:wrap}

.cards3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:-28px 0 34px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;color:var(--ink);text-decoration:none;display:block}
a.card:hover{border-color:var(--accent);transform:translateY(-2px);transition:.15s}
.card .ico{font-size:30px}
.card h2{font-size:20px;margin:6px 0 6px}
.card p{margin:0;color:var(--muted);font-size:15px}
.sec-title{font-size:24px;margin:8px 0 14px}
.lista{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:28px}
.item{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.item:hover{border-color:var(--accent)}
.item .num{width:38px;height:38px;border-radius:10px;background:var(--surface2);display:grid;place-items:center;font-size:20px;flex:none}
.item b{display:block;font-size:15px;line-height:1.3}
.item small{color:var(--muted)}
.estado{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.estado.ok{color:var(--good)}
.aviso-resp{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:14px;margin:0 0 36px}

/* ---- Lecciones ---- */
.lec-layout{display:grid;gap:22px;grid-template-columns:270px 1fr;padding:24px 0 40px}
@media (max-width:860px){.lec-layout{grid-template-columns:1fr}}
.lec-side{position:sticky;top:64px;align-self:start;display:grid;gap:6px}
@media (max-width:860px){.lec-side{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:6px}}
.lec-side a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;border:1px solid transparent}
.lec-side a:hover{background:var(--surface)}
.lec-side a[aria-current="true"]{background:var(--surface);border-color:var(--accent)}
.lec-side .tick{margin-left:auto;color:var(--good);font-weight:700}
.lec{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,4vw,34px);min-width:0}
.lec .eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lec h2{font-size:clamp(26px,4vw,36px);margin:4px 0 6px}
.lec .meta{color:var(--muted);margin:0 0 18px}
.lec h3{font-size:19px;margin:26px 0 8px}
.lec ul,.lec ol{padding-left:22px}
.lec li{margin:4px 0}
.tabla{overflow-x:auto;margin:10px 0}
.tabla table{border-collapse:collapse;width:100%;font-size:14.5px}
.tabla th,.tabla td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.tabla th{background:var(--surface2);font-weight:600;white-space:nowrap}
.formula{font-family:var(--mono);font-size:14px;background:var(--surface2);border-left:3px solid var(--accent);padding:10px 12px;border-radius:6px}
.destacado{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:10px;padding:10px 14px}
.aviso{background:color-mix(in srgb,var(--amber) 18%,transparent);border-radius:10px;padding:10px 14px}
.nota{color:var(--muted);font-size:14px}
.pill-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.pill{background:var(--felt-b);color:var(--felt-ink);font:700 13px var(--mono);padding:4px 9px;border-radius:999px}
.mano{list-style:none;padding-left:0!important;font-family:var(--mono);font-size:14px}
.check{list-style:none;padding-left:0!important}
.check li::before{content:"☐ ";color:var(--accent)}

.quiz{margin-top:30px;border-top:2px dashed var(--line);padding-top:20px}
.quiz h3{margin-top:0}
.preg{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0}
.preg p{margin:0 0 10px;font-weight:600}
.ops{display:grid;gap:8px}
.op{text-align:left;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 12px;font:500 15px var(--body);cursor:pointer}
.op:hover:not(:disabled){border-color:var(--accent)}
.op:disabled{cursor:default}
.op.bien{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface))}
.op.mal{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
.por{margin:10px 0 0;font-size:14.5px}
.por b.bien{color:var(--good)} .por b.mal{color:var(--bad)}
.resultado{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--felt-b);color:var(--felt-ink)}
.resultado .btn{background:var(--amber);color:var(--amber-ink)}
.lec-nav{display:flex;justify-content:space-between;gap:10px;margin-top:26px;flex-wrap:wrap}
.reglas h3{margin-top:22px}
.reglas li{margin:6px 0}