/* Student area restyle (29 Oct 2026) — the public site's look (css/site.css tokens), light CSS only.
   Loaded after styles.css + student.css. Never touches the reader iframe, the lesson player (.lp) or Mis palabras.
   Remove this file's <link> in view.php (or delete the file) to go back to the previous look. */
:root{
  --pub-violet:#7b4fab;--pub-violet-deep:#4a2d7a;--pub-violet-soft:#e8dff5;--pub-violet-mist:#f4f1fa;
  --pub-blue:#1e5bd4;--pub-blue-sky:#6fa8dc;--pub-gold:#a87a2c;--pub-gold-ink:#8a6420;--pub-gold-bright:#c9a24a;
  --pub-gold-light:#f2d98d;--pub-rose-soft:#f1c8d4;--pub-cream:#faf7f2;--pub-line:#e6e0f0;--pub-ink:#3a2a60;--pub-body:#463c63;
  --pub-shadow:0 18px 40px -26px rgba(74,45,122,.45);--pub-shadow-up:0 26px 44px -26px rgba(74,45,122,.5);
  --rule:var(--pub-line);--radius:18px;--shadow:var(--pub-shadow);--shadow-up:var(--pub-shadow-up)
}
html{background:var(--pub-cream)}
body{color:var(--pub-body);background:var(--pub-cream) linear-gradient(180deg,#fff8e4 0,#fdfbf7 320px,var(--pub-cream) 900px) no-repeat;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--pub-ink);text-wrap:balance}
.hero h1,.hero h2,.hero h3{color:#fff}
a{color:var(--pub-violet-deep)}a:hover{color:var(--pub-blue)}
:focus-visible{outline:3px solid var(--pub-blue-sky);outline-offset:3px;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* header: glass bar like the public site, deeper once scrolled */
header.site{background:rgba(255,250,242,.78);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(230,224,240,.7);transition:background .35s,box-shadow .35s}
header.site.scrolled{background:rgba(255,250,242,.92);box-shadow:0 10px 30px -24px rgba(168,122,44,.45)}
.nav .links a{font-weight:600;border-radius:999px;padding:.2rem .45rem;transition:color .2s,background .2s}
.nav .links a:hover{background:var(--pub-violet-mist);color:var(--pub-violet-deep)}
.brand .mark{box-shadow:0 0 0 3px #fff,0 0 18px 2px rgba(242,217,141,.75)}

/* heroes: violet gradient + gold glow */
.hero{background:radial-gradient(120% 140% at 0% 100%,rgba(111,168,220,.45),transparent 55%),linear-gradient(135deg,var(--pub-violet-deep) 0%,var(--pub-violet) 52%,#8f6fc4 78%,var(--pub-blue-sky) 120%);border-radius:24px;padding:clamp(1.6rem,4vw,2.6rem) clamp(1.2rem,4vw,2.4rem);box-shadow:0 30px 60px -36px rgba(74,45,122,.75);isolation:isolate}
.hero:after{right:-70px;top:-90px;width:320px;height:320px;background:radial-gradient(circle,rgba(242,217,141,.75) 0,rgba(242,217,141,.25) 38%,transparent 70%);z-index:-1;animation:heroGlow 9s ease-in-out infinite alternate}
.hero:before{content:"";position:absolute;left:-80px;bottom:-120px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(241,200,212,.35),transparent 68%);z-index:-1;pointer-events:none}
.hero h1{text-shadow:0 2px 18px rgba(42,22,80,.35);letter-spacing:.005em}
.hero p{font-size:1.04rem}
.hero .progress{background:rgba(255,255,255,.25)}
.hero .progress span{background:linear-gradient(90deg,var(--pub-gold-light),#fff)}
@keyframes heroGlow{from{transform:translate(0,0) scale(1);opacity:.85}to{transform:translate(-24px,18px) scale(1.08);opacity:1}}

/* cards: cream / white, soft deep shadow, rounded */
.card{border-radius:var(--radius);border:1px solid var(--pub-line);box-shadow:var(--pub-shadow);background:#fff}
.card.cream,.cream{background:linear-gradient(180deg,rgba(255,248,228,.95),rgba(253,238,244,.55))}
.card.mist,.mist{background:linear-gradient(180deg,rgba(231,243,252,.9),rgba(243,234,252,.7))}
.step,.week-card,.card.lift,.index-list a.card,.cita{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.step:not(.locked):hover,.week-card:hover,.card.lift:hover,.index-list a.card:hover{transform:translateY(-5px);box-shadow:var(--pub-shadow-up)}
.step .num{color:var(--pub-gold);font-weight:600}
.step.violet{border-top:4px solid var(--pub-violet)}
.step:not(.locked){background:linear-gradient(180deg,#fff,#fffdf8)}
.eyebrow{color:var(--pub-gold-ink);letter-spacing:.2em;font-weight:800}
.hero .eyebrow{color:var(--pub-gold-light)}
main>h2{position:relative;padding-bottom:.35rem;margin-top:1.8rem}
main>h2:after{content:"";display:block;width:56px;height:3px;border-radius:3px;margin-top:.45rem;background:linear-gradient(90deg,var(--pub-gold-bright),var(--pub-violet))}
.note{border-radius:0 14px 14px 0}

/* buttons: public pill buttons (gold = light gold with violet text for contrast) */
.btn{background:var(--pub-violet-deep);box-shadow:0 10px 24px -12px rgba(74,45,122,.7);letter-spacing:.06em;transition:background .2s,color .2s,box-shadow .25s,transform .2s}
.btn:hover{background:var(--pub-violet);color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(74,45,122,.75)}
.btn.gold{background:var(--pub-gold-light);color:var(--pub-violet-deep);box-shadow:0 10px 24px -14px rgba(168,122,44,.8)}
.btn.gold:hover{background:#f7e6ab;color:var(--pub-violet-deep);box-shadow:0 0 0 4px rgba(242,217,141,.35),0 14px 28px -12px rgba(168,122,44,.7)}
.btn.blue{background:var(--pub-blue)}.btn.blue:hover{background:#2f6ce0}
.btn.ghost{background:rgba(255,255,255,.85);color:var(--pub-violet-deep);border:1.5px solid var(--pub-violet-deep);box-shadow:none}
.btn.ghost:hover{background:var(--pub-violet-deep);color:#fff}
.btn:focus-visible{outline:3px solid var(--pub-blue-sky);outline-offset:3px}
.btn[disabled]:hover{background:var(--pub-violet-deep);transform:none;box-shadow:none}
.progress span{background:linear-gradient(90deg,var(--pub-gold-bright),var(--pub-violet))}
input[type=text],input[type=email],input[type=password],select,textarea{border-color:var(--pub-line);border-radius:12px}
input:focus,select:focus,textarea:focus{border-color:var(--pub-violet);box-shadow:0 0 0 4px var(--pub-violet-soft)}
table th{color:var(--pub-ink)}
footer.site{background:linear-gradient(160deg,#4a2d7a,#5a3b90);color:#e6dcf5;border-top:0}
footer.site a{color:var(--pub-gold-light)}

/* scroll reveal (only when restyle.js runs; content is visible without JS) */
html.rv .rv-item{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.rv .rv-item.rv-in{opacity:1;transform:none}

@media (max-width:640px){
  .hero{border-radius:18px}.hero:after{width:220px;height:220px;right:-60px;top:-70px}
  main>h2{margin-top:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  html.rv .rv-item{opacity:1;transform:none;transition:none}
  .hero:after{animation:none}
  .step:hover,.week-card:hover,.card.lift:hover,.index-list a.card:hover,.btn:hover{transform:none}
}
.crumbs{margin-top:.9rem}.crumbs a{color:var(--pub-violet)}
@media (max-width:640px){.nav .links{gap:.3rem}.nav .links a{padding:.2rem .3rem;font-size:.86rem}}
@media (max-width:400px){.nav .links{gap:.1rem}.nav .links a{padding:.15rem .22rem;font-size:.8rem}.nav .links .linklike{font-size:.8rem}}

/* ===== FIX2 (30 Oct 2026) ===== */
/* Logo: the public site's own mark (/img/mark-iam.png), same size as the public header (54px, 42px on phones). */
.brand{gap:12px}
.brand .mark,.brand img.mark{width:54px;height:54px;flex-shrink:0;object-fit:contain;border-radius:0;background:none;box-shadow:none}
@media (max-width:640px){.brand{gap:9px}.brand .mark,.brand img.mark{width:42px;height:42px}}

/* Pastel lights + sparks: the same layers as the public pages (css/site.css #lights / #sparks), built by restyle.js. */
#lights{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#lights i{position:absolute;left:0;top:0;border-radius:50%;opacity:0;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
  background:radial-gradient(circle,var(--c) 0,color-mix(in srgb,var(--c) 35%,transparent) 28%,transparent 62%);
  animation:var(--path) var(--dur) linear infinite;animation-delay:var(--delay)}
#lights .pink{--c:#ffb0cc;--s:46vw;--path:pass-a;--dur:32s;--delay:-4s}
#lights .blue{--c:#8ec8ff;--s:42vw;--path:pass-b;--dur:36s;--delay:-18s}
#lights .purple{--c:#c8a8ff;--s:44vw;--path:pass-c;--dur:30s;--delay:-9s}
#lights .yellow{--c:#ffe58a;--s:40vw;--path:pass-d;--dur:34s;--delay:-22s}
#lights .green{--c:#a8e4b4;--s:38vw;--path:pass-e;--dur:38s;--delay:-12s}
#lights .gold{--c:#ffd060;--s:48vw;--path:pass-f;--dur:33s;--delay:-27s}
@keyframes pass-a{0%{transform:translate3d(-18vw,12vh,0);opacity:0}14%{opacity:.9}86%{opacity:.75}100%{transform:translate3d(112vw,38vh,0);opacity:0}}
@keyframes pass-b{0%{transform:translate3d(112vw,8vh,0);opacity:0}14%{opacity:.85}86%{opacity:.7}100%{transform:translate3d(-16vw,46vh,0);opacity:0}}
@keyframes pass-c{0%{transform:translate3d(18vw,-20vh,0);opacity:0}14%{opacity:.85}86%{opacity:.7}100%{transform:translate3d(62vw,112vh,0);opacity:0}}
@keyframes pass-d{0%{transform:translate3d(70vw,112vh,0);opacity:0}14%{opacity:.9}86%{opacity:.7}100%{transform:translate3d(8vw,-18vh,0);opacity:0}}
@keyframes pass-e{0%{transform:translate3d(-18vw,78vh,0);opacity:0}14%{opacity:.8}86%{opacity:.65}100%{transform:translate3d(110vw,18vh,0);opacity:0}}
@keyframes pass-f{0%{transform:translate3d(108vw,70vh,0);opacity:0}14%{opacity:.9}86%{opacity:.75}100%{transform:translate3d(-14vw,16vh,0);opacity:0}}
#sparks{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#sparks i{position:absolute;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 8px 3px #fff,0 0 18px 8px rgba(255,255,255,.95),0 0 32px 14px rgba(255,214,110,.75);animation:spark-glow 4.5s ease-in-out forwards}
@keyframes spark-glow{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
html.has-lights body{background:#fffcf8 linear-gradient(180deg,#fff8e4 0,#fffcf8 320px) no-repeat}
html.has-lights main,html.has-lights footer.site{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  #sparks{display:none}
  #lights i{animation:none;opacity:.5}
  #lights .pink{transform:translate3d(18vw,16vh,0)}#lights .blue{transform:translate3d(68vw,12vh,0)}#lights .purple{transform:translate3d(40vw,48vh,0)}
  #lights .yellow{transform:translate3d(72vw,70vh,0)}#lights .green{transform:translate3d(12vw,74vh,0)}#lights .gold{transform:translate3d(46vw,28vh,0)}
}
@media print{#lights,#sparks{display:none}}

/* Top bar: a soft pastel pill per link (public menu colours), stronger tint + gold underline on the current page. */
.cap{--w:#fff6d4;--w2:#ffeab0;--d:#8a6420}
.cap-gold{--w:#fff6d4;--w2:#ffeab0;--d:#8a6420}
.cap-lilac{--w:#f3eafc;--w2:#e6d6fa;--d:#6a3f9a}
.cap-blue{--w:#e7f3fc;--w2:#cfe6f8;--d:#2a5f9e}
.cap-pink{--w:#fdeef4;--w2:#f9d9e6;--d:#a24d72}
.nav .links{gap:6px}
.nav .links a.cap,.nav .links .linklike.cap{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 13px;border-radius:16px;
  background:var(--w);color:#3a2a60;font-weight:700;font-size:.9rem;line-height:1.15;text-decoration:none;border:1px solid rgba(201,162,74,.18);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.nav .links a.cap:hover,.nav .links a.cap:focus-visible,.nav .links .linklike.cap:hover,.nav .links .linklike.cap:focus-visible{background:var(--w2);color:#3a2a60;transform:translateY(-1px);text-decoration:none}
.nav .links a.cap[aria-current="page"]{background:var(--w2);color:#2a1d4a;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--d) 45%,transparent)}
.nav .links a.cap[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1.5px;background:#c9a24a;border-radius:2px}
.nav .links form.inline{display:inline-flex}
@media (max-width:640px){.nav .links{gap:5px}.nav .links a.cap,.nav .links .linklike.cap{padding:5px 10px;min-height:32px;font-size:.84rem;border-radius:14px}}
@media (max-width:400px){.nav .links{gap:4px}.nav .links a.cap,.nav .links .linklike.cap{padding:4px 8px;font-size:.78rem}}
@media (prefers-reduced-motion:reduce){.nav .links a.cap,.nav .links .linklike.cap{transition:none;transform:none!important}}
@media (forced-colors:active){.nav .links a.cap[aria-current="page"]{outline:2px solid LinkText}}
/* Same header box as the public .hdr, so the logo sits in the same place (FIX2). */
header.site .nav{max-width:1320px;padding:12px clamp(16px,4vw,40px)}
@media (max-width:440px){.nav .links{gap:4px;row-gap:6px}.nav .links a.cap,.nav .links .linklike.cap{padding:4px 7px;min-height:30px;font-size:.75rem;border-radius:13px}}
@media (max-width:360px){.nav .links a.cap,.nav .links .linklike.cap{padding:3px 6px;font-size:.74rem}}