/* ============================================================
   Academia Espacios Sagrados · academy.css
   Auto-contenida (tokens propios) — funciona al subir, sin deps.
   Marca Tierra Sagrada: cobre + void, Cormorant/Cinzel/Jost.
   ============================================================ */
:root{
  --void:oklch(0.15 0.012 58); --deep-earth:oklch(0.20 0.018 60); --umber:oklch(0.26 0.022 56);
  --clay:oklch(0.33 0.030 50); --copper-deep:oklch(0.45 0.110 44); --copper:oklch(0.55 0.130 47);
  --copper-mid:oklch(0.64 0.130 52); --candle:oklch(0.76 0.110 60); --parchment:oklch(0.88 0.055 72);
  --plum-deep:oklch(0.30 0.048 348); --mauve:oklch(0.57 0.068 350); --rose:oklch(0.78 0.052 352);
  --forest:oklch(0.60 0.085 150);
  --t1:oklch(0.95 0.018 82); --t2:oklch(0.82 0.028 72); --t3:oklch(0.68 0.030 62); --t4:oklch(0.56 0.028 56);
  --line:oklch(0.40 0.030 52 / 0.45); --line-soft:oklch(0.40 0.030 52 / 0.22);
  --ff-d:'Cormorant Garamond',Georgia,serif; --ff-l:'Cinzel',serif; --ff-b:'Jost',system-ui,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --sb:336px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--t2);font-family:var(--ff-b);font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased}
a{color:var(--copper-mid);text-decoration:none}
::selection{background:oklch(0.55 0.130 47 / .3);color:var(--t1)}
.cz{font-family:var(--ff-l);letter-spacing:.16em;text-transform:uppercase}

/* ---------- TOPBAR ---------- */
.ac-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.1rem;
  padding:.7rem 1.3rem;background:oklch(0.15 0.012 58 / .9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft)}
.ac-top .logo{display:flex;align-items:center;gap:.5rem;font-family:var(--ff-d);font-size:1.15rem;color:var(--t1)}
.ac-top .logo em{font-style:italic;color:var(--copper-mid)}
.ac-top .logo img{width:26px;height:26px}
.ac-burger{display:none;background:none;border:1px solid var(--line);color:var(--t2);border-radius:8px;
  width:40px;height:40px;font-size:1.2rem;cursor:pointer}
.ac-rank{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--t3)}
.ac-rank b{font-family:var(--ff-l);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--candle);border:1px solid var(--copper-deep);border-radius:999px;padding:4px 11px;
  background:oklch(0.45 0.110 44 / .14)}
.ac-prog{display:flex;align-items:center;gap:.55rem;min-width:140px}
.ac-prog .bar{flex:1;height:7px;background:var(--umber);border-radius:99px;overflow:hidden}
.ac-prog .fill{height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--candle));transition:width .5s var(--ease)}
.ac-prog .pct{font-family:var(--ff-l);font-size:.7rem;color:var(--copper-mid);min-width:3ch;text-align:right}
.ac-exit{font-size:.8rem;color:var(--t3)}.ac-exit:hover{color:var(--copper-mid)}

/* ---------- LAYOUT ---------- */
.ac-shell{display:grid;grid-template-columns:var(--sb) 1fr;min-height:calc(100vh - 56px)}
.ac-side{border-right:1px solid var(--line-soft);background:oklch(0.17 0.014 58);
  padding:1.4rem 0;overflow-y:auto;max-height:calc(100vh - 56px);position:sticky;top:56px}
.ac-side h2{font-family:var(--ff-d);font-style:italic;font-size:1.35rem;color:var(--t1);padding:0 1.4rem;line-height:1.2}
.ac-side .promise{padding:.5rem 1.4rem 1.1rem;font-size:.84rem;color:var(--t3);border-bottom:1px solid var(--line-soft);margin-bottom:.6rem}

.mod{border-bottom:1px solid var(--line-soft)}
.mod-h{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:none;border:none;
  color:var(--t2);font-family:var(--ff-b);font-size:.92rem;cursor:pointer;padding:.85rem 1.4rem;transition:.2s}
.mod-h:hover{background:oklch(0.20 0.018 60)}
.mod-h .ix{font-family:var(--ff-l);font-size:.7rem;color:var(--copper-mid);border:1px solid var(--copper-deep);
  border-radius:6px;width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto}
.mod-h .nm{flex:1;line-height:1.3}
.mod-h .lk{font-size:.85rem;color:var(--t4)}
.mod-h .cv{font-size:.7rem;color:var(--t4);transition:transform .25s}
.mod.open .cv{transform:rotate(180deg)}
.mod-lessons{display:none;padding:.3rem 0 .7rem}
.mod.open .mod-lessons{display:block}
.les{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;border:none;
  color:var(--t3);font-size:.85rem;cursor:pointer;padding:.5rem 1.4rem .5rem 3rem;transition:.15s;line-height:1.35}
.les:hover{color:var(--t1);background:oklch(0.20 0.018 60)}
.les.active{color:var(--candle);background:oklch(0.45 0.110 44 / .12);box-shadow:inset 3px 0 0 var(--copper)}
.les .chk{flex:0 0 auto;width:17px;height:17px;border:1.5px solid var(--clay);border-radius:50%;
  display:grid;place-items:center;font-size:.6rem;color:var(--void)}
.les.done .chk{background:var(--forest);border-color:var(--forest)}
.les.locked{opacity:.5;cursor:not-allowed}

/* ---------- CONTENT ---------- */
.ac-main{padding:2.6rem clamp(1.3rem,5vw,4rem) 6rem;max-width:920px}
.crumb{font-family:var(--ff-l);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:.8rem}
.crumb b{color:var(--copper-mid)}
.lesson{animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lesson h1{font-family:var(--ff-d);font-weight:400;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;
  color:var(--t1);letter-spacing:-.01em;margin:.2rem 0 1.3rem;text-wrap:balance}
.lesson h3{font-family:var(--ff-d);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--candle);
  margin:2.4rem 0 .5rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);scroll-margin-top:80px}
.lesson h3:first-of-type{border-top:none;padding-top:0}
.lesson p{margin:.9rem 0;color:var(--t2)}
.lesson strong{color:var(--t1);font-weight:500}
.lesson em{font-style:italic;color:var(--parchment)}
.lesson blockquote{border-left:2px solid var(--copper);padding:.4rem 0 .4rem 1.3rem;margin:1.4rem 0;
  font-family:var(--ff-d);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--candle)}
.lesson ul{margin:.9rem 0 .9rem 1.3rem}.lesson li{margin:.4rem 0;color:var(--t2)}
.lesson hr{display:none}
.inter{background:linear-gradient(150deg,oklch(0.22 0.020 58),var(--void));border:1px solid var(--line);
  border-left:3px solid var(--copper-mid);border-radius:4px;padding:.5rem 1rem;margin:.3rem 0 .4rem;
  font-family:var(--ff-l);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-mid)}
.unlock{background:linear-gradient(150deg,var(--plum-deep),oklch(0.18 0.020 350));border:1px solid var(--mauve);
  border-radius:6px;padding:1.4rem 1.6rem;margin:2.4rem 0 0}
.unlock h3{border:none;padding:0;margin:0 0 .6rem;color:var(--rose);font-size:1.3rem}

/* ---------- QUIZ ---------- */
.quiz{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.quiz .qk{font-family:var(--ff-l);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-mid);margin-bottom:1.2rem}
.q{margin-bottom:1.7rem}
.q .qq{font-family:var(--ff-d);font-size:1.25rem;color:var(--t1);margin-bottom:.8rem;line-height:1.35}
.opt{display:block;width:100%;text-align:left;background:oklch(0.20 0.018 60);border:1px solid var(--line);
  color:var(--t2);font-family:var(--ff-b);font-size:.92rem;border-radius:8px;padding:.75rem 1rem;
  margin:.5rem 0;cursor:pointer;transition:.18s}
.opt:hover{border-color:var(--copper);background:oklch(0.24 0.022 56)}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--forest);background:oklch(0.30 0.050 150 / .25);color:var(--t1)}
.opt.wrong{border-color:var(--copper-deep);background:oklch(0.35 0.060 30 / .18);opacity:.85}
.fb{font-size:.86rem;color:var(--t3);margin:.3rem 0 .9rem;padding-left:1rem;border-left:2px solid var(--line);display:none}
.fb.show{display:block;animation:fade .3s var(--ease)}
.fb.ok{color:var(--forest);border-color:var(--forest)}

/* ---------- LESSON FOOTER NAV ---------- */
.les-nav{display:flex;align-items:center;gap:1rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.btn{font-family:var(--ff-b);font-weight:400;font-size:.92rem;border-radius:10px;padding:.8rem 1.5rem;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--t2);transition:.2s;display:inline-flex;align-items:center;gap:.5rem}
.btn:hover{border-color:var(--copper-mid);color:var(--t1)}
.btn.cu{background:linear-gradient(120deg,var(--copper-deep),var(--copper));border:none;color:oklch(0.97 0.01 80)}
.btn.cu:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.les-nav .done-flag{margin-left:auto;font-size:.82rem;color:var(--forest)}

/* ---------- GATE / locked overlay ---------- */
.gate{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.5rem;
  background:oklch(0.12 0.012 58 / .92);backdrop-filter:blur(8px)}
.gate.show{display:flex;animation:fade .3s var(--ease)}
.gate-card{max-width:460px;width:100%;text-align:center;background:linear-gradient(160deg,var(--deep-earth),var(--void));
  border:1px solid var(--copper-deep);border-radius:14px;padding:2.4rem 2rem}
.gate-card .seal{width:54px;height:54px;margin:0 auto 1.2rem;border:1px solid var(--copper);transform:rotate(45deg);
  display:grid;place-items:center;color:var(--copper-mid)}
.gate-card .seal span{transform:rotate(-45deg);font-size:1.3rem}
.gate-card h2{font-family:var(--ff-d);font-weight:400;font-size:1.7rem;color:var(--t1);margin-bottom:.6rem}
.gate-card p{font-size:.92rem;color:var(--t3);margin-bottom:1.3rem}
.gate-card input{width:100%;background:var(--void);border:1px solid var(--line);color:var(--t1);
  font-family:var(--ff-l);letter-spacing:.1em;text-align:center;text-transform:uppercase;border-radius:9px;padding:.8rem;margin-bottom:.8rem}
.gate-card .err{color:var(--rose);font-size:.8rem;min-height:1.1em;margin-bottom:.5rem;display:block}
.gate-card .alt{margin-top:1.1rem;font-size:.82rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .ac-shell{grid-template-columns:1fr}
  .ac-side{position:fixed;top:56px;left:0;bottom:0;width:min(86vw,340px);z-index:60;transform:translateX(-103%);
    transition:transform .3s var(--ease);max-height:none}
  .ac-side.open{transform:none;box-shadow:0 0 60px oklch(0 0 0 / .5)}
  .ac-burger{display:block}
  .ac-prog{min-width:90px}.ac-rank b{display:none}
  .ac-scrim{position:fixed;inset:56px 0 0;background:oklch(0 0 0 /.5);z-index:55;display:none}
  .ac-scrim.show{display:block}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}