:root{--indigo:#4F46E5;--indigo-d:#3730A3;--indigo-s:#EEF2FF;--emerald:#10B981;--emerald-s:#ECFDF5;--amber:#F59E0B;--amber-s:#FFFBEB;--coral:#F43F5E;--coral-s:#FFF1F2;--purple:#7C3AED;--purple-s:#F5F3FF;--pink:#EC4899;--pink-s:#FDF2F8;--teal:#14B8A6;--teal-s:#F0FDFA;--ink:#1E1B4B;--ink2:#6B7280;--bg:#FAFBFF;--surface:#fff;--line:#E5E7EB;--r:16px;--rs:10px;--shadow:0 1px 3px rgba(79,70,229,.06),0 12px 32px rgba(79,70,229,.08);--shadow-s:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(79,70,229,.06);--fd:'Plus Jakarta Sans',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;--fm:'Space Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--fb);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}.oculto{display:none!important}
.btn{font-family:var(--fd);font-weight:600;font-size:.95rem;border:none;border-radius:var(--rs);padding:.7rem 1.4rem;cursor:pointer;transition:transform .1s,box-shadow .2s,background .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.btn-primario{background:linear-gradient(135deg,var(--indigo),var(--indigo-d));color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.3)}.btn-primario:hover{box-shadow:0 4px 16px rgba(79,70,229,.4);transform:translateY(-1px)}
.btn-secundario{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}.btn-secundario:hover{border-color:var(--indigo);color:var(--indigo)}
.btn-ghost{background:transparent;color:var(--indigo);border:1.5px solid var(--indigo)}.btn-ghost:hover{background:var(--indigo-s)}
.btn-lg{padding:.9rem 2rem;font-size:1.05rem;border-radius:12px}.btn-full{width:100%}.btn-nav{padding:.55rem 1.2rem;font-size:.88rem}
.btn-big{padding:1rem;font-size:1.1rem;border-radius:14px;flex:1}
.btn-exito{background:var(--emerald);color:#fff;flex:1}.btn-exito:hover{background:#059669}
.btn-fallo{background:var(--surface);color:var(--coral);border:1.5px solid var(--coral);flex:1}.btn-fallo:hover{background:var(--coral-s)}
.btn-fallo-outline{background:transparent;color:var(--coral);border:1.5px solid var(--coral)}.btn-fallo-outline:hover{background:var(--coral-s)}
.btn-texto{background:none;border:none;color:var(--ink2);cursor:pointer;font-family:var(--fb);font-size:.9rem}.btn-texto:hover{color:var(--ink)}
.btn-cta-final{background:#fff;color:var(--indigo);box-shadow:0 4px 16px rgba(0,0,0,.15)}.btn-cta-final:hover{background:var(--indigo-s)}
.btn-tf-true{background:var(--emerald);color:#fff;flex:1;padding:.9rem;font-size:1.05rem;border-radius:12px;border:none;cursor:pointer;font-family:var(--fd);font-weight:600;transition:transform .1s}.btn-tf-true:active{transform:scale(.97)}
.btn-tf-false{background:var(--coral);color:#fff;flex:1;padding:.9rem;font-size:1.05rem;border-radius:12px;border:none;cursor:pointer;font-family:var(--fd);font-weight:600;transition:transform .1s}.btn-tf-false:active{transform:scale(.97)}
.btn-back{background:none;border:none;color:var(--indigo);font-family:var(--fd);font-weight:600;font-size:.95rem;cursor:pointer;padding:.5rem 0;margin-bottom:1rem;display:inline-block}.btn-back:hover{text-decoration:underline}
.nav{position:fixed;top:0;width:100%;z-index:50;background:rgba(250,251,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.5rem}
.nav-marca{font-family:var(--fd);font-weight:700;font-size:1.2rem;display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.nav-logo{background:linear-gradient(135deg,var(--indigo),#7C3AED);color:#fff;width:2rem;height:2rem;display:grid;place-items:center;border-radius:8px;font-size:1.1rem;font-weight:800}
.nav-links{display:flex;align-items:center;gap:1.6rem}.nav-links a{color:var(--ink2);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .15s}.nav-links a:hover{color:var(--indigo)}
.hamburguesa{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}
.grad-text{background:linear-gradient(135deg,var(--indigo),#7C3AED,var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-landing{max-width:1120px;margin:0 auto;padding:7rem 1.5rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero-badge{display:inline-block;background:var(--indigo-s);color:var(--indigo);font-size:.82rem;font-weight:600;padding:.4rem 1rem;border-radius:20px;margin-bottom:1rem}
.hero-landing h1{font-family:var(--fd);font-size:3.2rem;font-weight:800;line-height:1.12;letter-spacing:-.03em;margin-bottom:1.2rem}
.hero-desc{color:var(--ink2);font-size:1.12rem;line-height:1.65;margin-bottom:1.8rem;max-width:500px}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}
.hero-social{display:flex;align-items:center;gap:.7rem;font-size:.88rem;color:var(--ink2)}
.avatares{display:flex}.av{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.75rem;color:#fff;border:2px solid var(--bg);margin-right:-.5rem}.a1{background:var(--indigo)}.a2{background:var(--emerald)}.a3{background:var(--coral)}.a4{background:var(--amber)}
.hero-visual{position:relative;min-height:380px}
.burbuja{position:absolute;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:.7rem 1rem;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:.15rem;animation:flotar 6s ease-in-out infinite}
.b-en{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--indigo)}.b-es{font-size:.78rem;color:var(--ink2)}.b1{top:5%;left:0;animation-delay:0s}.b2{top:0;right:5%;animation-delay:1.2s}.b3{bottom:10%;left:10%;animation-delay:.6s}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.demo-card{background:var(--surface);border:2px solid var(--indigo);border-radius:var(--r);padding:1.8rem;width:280px;margin:2rem auto;box-shadow:var(--shadow);position:relative;z-index:2}
.demo-label{font-family:var(--fd);font-weight:700;font-size:.82rem;color:var(--indigo);margin-bottom:.5rem}.demo-word{font-family:var(--fd);font-size:2rem;font-weight:800;margin-bottom:1rem}
.demo-input{width:100%;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:var(--rs);font-family:var(--fb);font-size:1rem;margin-bottom:.6rem;background:var(--bg)}.demo-input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.demo-feedback{margin-top:.6rem;font-weight:600;font-size:.95rem;min-height:1.4em}
.seccion{padding:5rem 1.5rem}.seccion-inner{max-width:1120px;margin:0 auto}.badge{display:inline-block;font-size:.82rem;font-weight:600;padding:.35rem .9rem;border-radius:20px;background:var(--indigo-s);color:var(--indigo);margin-bottom:.8rem}
.seccion h2{font-family:var(--fd);font-size:2.2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.6rem}.seccion-desc{color:var(--ink2);font-size:1.05rem;max-width:560px;margin-bottom:2.4rem}
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-s);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-ico{width:3rem;height:3rem;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem}.ci-1{background:var(--indigo-s)}.ci-2{background:var(--amber-s)}.ci-3{background:var(--coral-s)}.ci-4{background:var(--emerald-s)}
.card h3{font-family:var(--fd);font-size:1.1rem;font-weight:700;margin-bottom:.4rem}.card p{color:var(--ink2);font-size:.92rem}
.s-pasos{background:var(--indigo-s)}.grid-pasos{display:flex;align-items:flex-start;justify-content:center;gap:0;padding:1rem 0}
.paso{flex:1;max-width:260px;text-align:center}.paso-num{width:3rem;height:3rem;border-radius:50%;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--indigo),#7C3AED);color:#fff;font-family:var(--fd);font-weight:800;font-size:1.2rem;margin-bottom:1rem}
.paso h3{font-family:var(--fd);font-size:1.05rem;font-weight:700;margin-bottom:.4rem}.paso p{color:var(--ink2);font-size:.9rem}.paso-line{flex:none;width:60px;height:2px;margin-top:1.5rem;background:linear-gradient(90deg,var(--indigo),transparent)}
.grid-preview{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}.prev-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:1.4rem;width:190px;display:flex;flex-direction:column;gap:.4rem;text-align:center;transition:transform .2s}.prev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.pc-active{border-color:var(--indigo);box-shadow:var(--shadow);transform:scale(1.04)}.pc-cat{font-size:.75rem;color:var(--ink2)}.pc-en{font-family:var(--fd);font-weight:700;font-size:1.3rem;color:var(--indigo)}.pc-es{font-size:1rem;color:var(--emerald);font-weight:600}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:left;margin-top:1.5rem}.test-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow-s)}.test-card p{font-size:.93rem;color:var(--ink2);line-height:1.6;margin-bottom:1rem;font-style:italic}.test-autor{display:flex;align-items:center;gap:.6rem}.test-autor strong{display:block;font-size:.88rem}.test-autor small{color:var(--ink2);font-size:.75rem}
.faq-wrap{max-width:720px}.faq-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);overflow:hidden}.faq[open]{box-shadow:var(--shadow-s)}.faq summary{padding:1rem 1.2rem;font-family:var(--fd);font-weight:600;font-size:.95rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';font-size:1.3rem;color:var(--indigo)}.faq[open] summary::after{content:'−'}.faq p{padding:0 1.2rem 1rem;color:var(--ink2);font-size:.9rem}
.s-cta-final{text-align:center;padding:5rem 1.5rem;background:linear-gradient(135deg,var(--indigo),#7C3AED);color:#fff}.s-cta-final h2{color:#fff;font-family:var(--fd);font-size:2.2rem;font-weight:800;margin-bottom:.6rem}.s-cta-final p{color:rgba(255,255,255,.8);font-size:1.05rem;margin-bottom:1.6rem}
.footer{border-top:1px solid var(--line);padding:1.4rem 1.5rem}.footer-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.footer p{color:var(--ink2);font-size:.82rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:none}.reveal-delay{transition-delay:.2s}
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(30,27,75,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:fadeIn .2s}.modal{background:var(--surface);border-radius:var(--r);padding:2rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(79,70,229,.2);position:relative;animation:slideUp .25s}.modal-x{position:absolute;top:.7rem;right:1rem;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink2)}
.auth-tabs{display:flex;margin:1rem 0;border:1.5px solid var(--line);border-radius:var(--rs);overflow:hidden}.auth-tab{flex:1;padding:.65rem;font-family:var(--fd);font-weight:600;font-size:.9rem;border:none;cursor:pointer;background:var(--bg);color:var(--ink2);transition:all .15s}.auth-tab.activo{background:var(--indigo);color:#fff}
.campo{margin-bottom:.9rem}.campo label{display:block;font-size:.78rem;font-weight:600;margin-bottom:.3rem;color:var(--ink2)}.campo-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
input{width:100%;font-family:var(--fb);font-size:1rem;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:var(--rs);background:var(--bg);color:var(--ink)}input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.msg{margin-top:.8rem;font-size:.85rem;text-align:center;min-height:1.2em}.msg.error{color:var(--coral)}.msg.ok{color:var(--emerald)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#vista-onboarding{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--bg)}.onb-container{max-width:520px;width:100%;text-align:center}
.onb-paso h2{font-family:var(--fd);font-size:1.8rem;font-weight:800;margin-bottom:.5rem}.onb-paso p{color:var(--ink2)}.onb-opciones{display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem}
.onb-opcion{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:1.2rem;text-align:left;cursor:pointer;transition:all .15s;display:flex;gap:1rem;align-items:center}.onb-opcion:hover{border-color:var(--indigo);box-shadow:var(--shadow-s);transform:translateY(-2px)}
.onb-opcion strong{display:block;font-family:var(--fd);font-size:1rem}.onb-opcion small{color:var(--ink2);font-size:.85rem}.onb-ico{font-size:1.8rem;flex:none}.onb-emoji{font-size:3.5rem;display:block;margin-bottom:.8rem}.onb-sub{color:var(--ink2);margin-bottom:1.2rem}
.test-progress{height:6px;background:var(--line);border-radius:3px;margin:1rem 0 .5rem;overflow:hidden}.test-bar{height:100%;background:linear-gradient(90deg,var(--indigo),#7C3AED);border-radius:3px;transition:width .3s;width:0}
.test-counter{font-family:var(--fm);font-size:.82rem;color:var(--ink2);margin-bottom:1rem}.test-q{font-family:var(--fd);font-size:1.2rem;font-weight:700;margin-bottom:1.2rem;min-height:2em}
.test-opts{display:flex;flex-direction:column;gap:.5rem}.test-opt{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--rs);padding:.85rem 1rem;text-align:left;font-size:1rem;cursor:pointer;transition:all .12s;font-family:var(--fb)}.test-opt:hover{border-color:var(--indigo);background:var(--indigo-s)}.test-opt.correct{border-color:var(--emerald);background:var(--emerald-s)}.test-opt.wrong{border-color:var(--coral);background:var(--coral-s)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--line);background:rgba(250,251,255,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.app-header-r{display:flex;align-items:center;gap:.5rem}
.xp-badge{font-family:var(--fm);font-size:.78rem;color:var(--indigo);background:var(--indigo-s);padding:.25rem .6rem;border-radius:8px}
.racha{font-family:var(--fm);font-size:.78rem;color:var(--amber);background:var(--amber-s);padding:.25rem .6rem;border-radius:8px}
.avatar-btn{width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--indigo);background:linear-gradient(135deg,var(--indigo),#7C3AED);color:#fff;font-family:var(--fd);font-weight:800;font-size:.95rem;cursor:pointer;display:grid;place-items:center;transition:transform .15s,box-shadow .15s}
.avatar-btn:hover{transform:scale(1.1);box-shadow:0 0 0 4px rgba(79,70,229,.2)}
.hide-mobile{display:inline}
.app-main{max-width:640px;margin:0 auto;padding:1.2rem 1rem 3rem}
.eyebrow{font-family:var(--fd);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--indigo)}
.dash-hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.dash-hero h2{font-family:var(--fd);font-size:1.8rem;font-weight:800;letter-spacing:-.02em;margin:.2rem 0}.dash-sub{color:var(--ink2);font-size:.92rem}
.dash-nivel{font-family:var(--fd);font-weight:800;font-size:1.6rem;color:var(--indigo);background:var(--indigo-s);width:3.5rem;height:3.5rem;display:grid;place-items:center;border-radius:12px}
.progress-overview{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;padding:.7rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--rs)}
.po-bar{flex:1;height:10px;background:var(--line);border-radius:5px;overflow:hidden}.po-fill{height:100%;background:linear-gradient(90deg,var(--emerald),var(--teal));border-radius:5px;transition:width .5s;width:0}
.po-text{font-family:var(--fm);font-size:.75rem;color:var(--ink2);white-space:nowrap}
.lesson-map{display:flex;flex-direction:column;gap:1rem}
.unit-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s}.unit-card:hover{box-shadow:var(--shadow-s)}
.unit-header{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem}
.unit-ico{font-size:1.8rem}.unit-info{flex:1}.unit-name{font-family:var(--fd);font-weight:700;font-size:1.05rem}.unit-sub{font-size:.78rem;color:var(--ink2)}.unit-progress{font-family:var(--fm);font-size:.75rem;color:var(--emerald);background:var(--emerald-s);padding:.2rem .6rem;border-radius:6px}
.unit-lessons{padding:0 .8rem .8rem;display:flex;flex-direction:column;gap:.4rem}
.lesson-node{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:all .15s;background:var(--bg)}
.lesson-node:hover:not(.ln-locked){border-color:var(--indigo);box-shadow:var(--shadow-s);transform:translateX(4px)}
.ln-current{border-color:var(--indigo);background:var(--indigo-s);animation:pulse 2s infinite}
.ln-completed{border-color:var(--emerald);background:var(--emerald-s)}
.ln-locked{opacity:.5;cursor:not-allowed}
.ln-desafio{border-style:dashed}
.ln-icon{font-size:1.2rem;width:1.8rem;text-align:center}
.ln-info{flex:1;min-width:0}.ln-name{font-family:var(--fd);font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ln-meta{font-size:.7rem;color:var(--ink2)}
.ln-stars{font-size:.85rem;letter-spacing:1px;flex:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.3)}50%{box-shadow:0 0 0 8px rgba(79,70,229,0)}}
.leccion-intro-card{background:var(--surface);border:2px solid var(--indigo);border-radius:20px;padding:2rem 1.5rem;text-align:center;box-shadow:var(--shadow)}
.leccion-ico{font-size:3rem;display:block;margin-bottom:.5rem}
.leccion-intro-card h2{font-family:var(--fd);font-size:1.5rem;font-weight:800;margin-bottom:.4rem}
.leccion-intro-card>p{color:var(--ink2);margin-bottom:1rem}
.leccion-meta{display:flex;justify-content:center;gap:1.2rem;font-size:.85rem;color:var(--ink2);margin-bottom:1rem}
.leccion-palabras-preview{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:1.2rem}
.lpp-word{background:var(--indigo-s);color:var(--indigo);padding:.25rem .7rem;border-radius:8px;font-family:var(--fd);font-weight:600;font-size:.82rem}
.perfil-header{text-align:center;padding:1.5rem 0;margin-bottom:1rem}
.perfil-avatar{width:5rem;height:5rem;border-radius:50%;background:linear-gradient(135deg,var(--indigo),#7C3AED);color:#fff;font-family:var(--fd);font-weight:800;font-size:2.2rem;display:inline-grid;place-items:center;margin-bottom:.8rem;box-shadow:0 4px 16px rgba(79,70,229,.3)}
.perfil-header h2{font-family:var(--fd);font-size:1.5rem;font-weight:800;margin-bottom:.2rem}
.perfil-email{color:var(--ink2);font-size:.85rem;margin-bottom:.8rem}
.perfil-badges{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.perfil-badge{font-family:var(--fm);font-size:.75rem;padding:.3rem .7rem;border-radius:8px;font-weight:600}
.pb-nivel{background:var(--indigo-s);color:var(--indigo)}.pb-xp{background:var(--amber-s);color:var(--amber)}.pb-racha{background:var(--coral-s);color:var(--coral)}
.perfil-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.2rem}
.ps-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:.7rem .4rem;text-align:center}
.ps-n{display:block;font-family:var(--fm);font-size:1.3rem;font-weight:700;color:var(--ink)}.ps-l{font-size:.65rem;color:var(--ink2)}
.perfil-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;margin-bottom:1rem}
.perfil-section h3{font-family:var(--fd);font-size:.95rem;font-weight:700;margin-bottom:.8rem}
.chart-box{position:relative;height:200px}.chart-box canvas{max-height:200px}
.perfil-plan{font-size:.9rem;line-height:1.8;color:var(--ink2)}
.perfil-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem;padding-bottom:2rem}
.est-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.est-progress{font-family:var(--fm);color:var(--ink2);font-size:.8rem}.est-stars{font-size:1rem;letter-spacing:2px}
.est-xp-bar{height:5px;background:var(--line);border-radius:3px;margin-bottom:.8rem;overflow:hidden}.est-xp-fill{height:100%;background:linear-gradient(90deg,var(--indigo),var(--purple));border-radius:3px;transition:width .4s;width:0}
.mascota{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:.6rem .9rem;margin-bottom:1rem;animation:slideUp .3s}
.mascota-emoji{font-size:1.8rem}.mascota-msg{font-family:var(--fd);font-weight:600;font-size:.88rem;color:var(--ink)}
.ejercicio{animation:slideUp .3s ease}
.ej-badge{display:inline-block;font-family:var(--fd);font-weight:700;font-size:.75rem;padding:.25rem .7rem;border-radius:20px;margin-bottom:.6rem}
.ej-theme-blue .ej-badge{background:var(--indigo-s);color:var(--indigo)}.ej-theme-purple .ej-badge{background:var(--purple-s);color:var(--purple)}.ej-theme-green .ej-badge{background:var(--emerald-s);color:var(--emerald)}.ej-theme-orange .ej-badge{background:var(--amber-s);color:var(--amber)}.ej-theme-pink .ej-badge{background:var(--pink-s);color:var(--pink)}.ej-theme-teal .ej-badge{background:var(--teal-s);color:var(--teal)}.ej-theme-amber .ej-badge{background:var(--amber-s);color:var(--amber)}
.ej-card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:1.8rem 1.2rem;text-align:center;box-shadow:var(--shadow);min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;transition:border-color .3s}
.ej-theme-blue .ej-card{border-color:#C7D2FE}.ej-theme-purple .ej-card{border-color:#DDD6FE}.ej-theme-green .ej-card{border-color:#A7F3D0}.ej-theme-orange .ej-card{border-color:#FDE68A}.ej-theme-pink .ej-card{border-color:#FBCFE8}.ej-theme-teal .ej-card{border-color:#99F6E4}.ej-theme-amber .ej-card{border-color:#FDE68A}
.ej-label{font-family:var(--fd);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2)}
.ej-word{font-family:var(--fd);font-size:2rem;font-weight:800;color:var(--ink)}.ej-answer{font-size:1.6rem;color:var(--emerald)}.ej-example{color:var(--ink2);font-style:italic;font-size:.85rem}
.ej-back{width:100%;border-top:2px dashed var(--line);padding-top:.8rem;margin-top:.2rem;display:flex;flex-direction:column;gap:.3rem;align-items:center;animation:slideUp .2s}
.ej-btns{display:flex;gap:.6rem;margin-top:.8rem}
.mult-opts{display:flex;flex-direction:column;gap:.4rem;width:100%;margin-top:.4rem}
.mult-opt{background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:.8rem .9rem;text-align:left;font-size:1rem;cursor:pointer;transition:all .15s;font-family:var(--fb);font-weight:500}.mult-opt:hover{border-color:var(--purple);background:var(--purple-s)}.mult-opt.correct{border-color:var(--emerald);background:var(--emerald-s)}.mult-opt.wrong{border-color:var(--coral);background:var(--coral-s)}
.escr-input{width:100%;padding:.8rem .9rem;border:2px solid var(--line);border-radius:12px;font-size:1.1rem;font-family:var(--fb);text-align:center;background:var(--bg)}.escr-input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.escr-fb{margin-top:.5rem;font-weight:700;font-size:1rem;padding:.6rem;border-radius:12px}.escr-fb.ok{background:var(--emerald-s);color:#065F46}.escr-fb.mal{background:var(--coral-s);color:#9F1239}
.fin-content{text-align:center;padding-top:1rem}.fin-emoji{font-size:3rem;margin-bottom:.3rem}.fin-content h2{font-family:var(--fd);font-size:1.6rem;font-weight:800;margin-bottom:.4rem}
.fin-stars-big{font-size:2.2rem;letter-spacing:5px;margin-bottom:.7rem}
.fin-stats{display:flex;justify-content:center;gap:1.2rem;margin-bottom:.8rem}.fin-s{text-align:center}.fin-n{display:block;font-family:var(--fm);font-size:1.8rem;font-weight:700}.fin-s span:last-child{font-size:.7rem;color:var(--ink2)}.fin-xp .fin-n{color:var(--indigo)}#fin-msg{color:var(--ink2);margin-bottom:1rem;font-size:.9rem}
#vista-math{position:fixed;inset:0;z-index:200;background:rgba(30,27,75,.5);backdrop-filter:blur(8px);overflow-y:auto;padding:1rem;animation:fadeIn .3s}
.math-panel{max-width:900px;margin:0 auto;background:var(--surface);border-radius:var(--r);padding:1.5rem;box-shadow:0 20px 60px rgba(79,70,229,.25);position:relative;animation:slideUp .3s}
.math-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:2px solid var(--indigo-s)}.math-header h2{font-family:var(--fd);font-size:1.2rem;font-weight:800}.math-sub{font-size:.8rem;color:var(--ink2)}
.math-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.math-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--rs);padding:1rem}.math-card h3{font-family:var(--fd);font-size:.9rem;font-weight:700;margin-bottom:.3rem}
.math-formula{font-family:var(--fm);font-size:1rem;color:var(--indigo);font-weight:700;margin-bottom:.3rem;background:var(--indigo-s);display:inline-block;padding:.2rem .6rem;border-radius:6px}
.math-svg{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:.4rem}
.math-datos,.math-plan-datos,.math-phi-datos,.math-stats-datos{font-size:.8rem;line-height:1.6}.math-datos strong,.math-plan-datos strong,.math-phi-datos strong,.math-stats-datos strong{color:var(--indigo)}
.math-tabla-wrap{overflow-x:auto}.math-tabla{width:100%;border-collapse:collapse;font-size:.78rem}.math-tabla th{background:var(--ink);color:#fff;padding:.4rem .5rem;text-align:left;font-family:var(--fd)}.math-tabla td{padding:.4rem .5rem;border-bottom:1px solid var(--line)}.math-tabla tr:nth-child(even){background:var(--indigo-s)}
.math-indicador{text-align:center;padding:.5rem 0}.math-barra-wrap{background:var(--line);height:18px;border-radius:9px;overflow:hidden;position:relative;margin:.5rem 0}.math-barra-fill{height:100%;border-radius:9px;transition:width .5s}.math-barra-mark{position:absolute;top:-16px;font-size:.65rem;font-weight:700;color:var(--ink)}.math-pct-num{font-family:var(--fm);font-size:1.8rem;font-weight:700}.math-pct-label{font-size:.75rem;color:var(--ink2)}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}.shake{animation:shake .4s ease}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@media(max-width:800px){.hero-landing{grid-template-columns:1fr;padding-top:6rem}.hero-visual{min-height:320px}.hero-landing h1{font-size:2.4rem}.grid-4{grid-template-columns:1fr}.grid-pasos{flex-direction:column;align-items:center}.paso-line{width:2px;height:30px;background:linear-gradient(180deg,var(--indigo),transparent)}.grid-3{grid-template-columns:1fr}.nav-links{display:none}.hamburguesa{display:block}.nav-links.abierto{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:1rem 1.5rem;gap:.8rem}.math-grid{grid-template-columns:1fr}}
@media(max-width:520px){.hero-landing h1{font-size:1.8rem}.hero-desc{font-size:1rem}.seccion h2{font-size:1.5rem}.hide-mobile{display:none}.app-header{padding:.5rem .8rem}.xp-badge,.racha{font-size:.7rem;padding:.2rem .5rem}.app-main{padding:1rem .8rem 3rem}.dash-hero h2{font-size:1.4rem}.dash-nivel{width:2.8rem;height:2.8rem;font-size:1.3rem;border-radius:10px}.ej-word{font-size:1.7rem}.ej-card{padding:1.4rem 1rem;min-height:160px}.grid-preview{flex-direction:column;align-items:center}.perfil-stats{grid-template-columns:repeat(2,1fr)}.fin-n{font-size:1.5rem}.fin-stars-big{font-size:1.8rem}.leccion-intro-card{padding:1.5rem 1rem}.leccion-intro-card h2{font-size:1.3rem}.mascota-emoji{font-size:1.5rem}.mascota-msg{font-size:.82rem}.unit-header{padding:.8rem}.unit-lessons{padding:0 .6rem .6rem}.lesson-node{padding:.55rem .7rem}.ln-name{font-size:.82rem}}
@media(max-width:380px){.hero-landing h1{font-size:1.6rem}.ej-word{font-size:1.5rem}.perfil-stats{grid-template-columns:repeat(2,1fr);gap:.4rem}.ps-n{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.reveal{opacity:1;transform:none}}
.fab-lectura{position:fixed;bottom:1.5rem;right:1.5rem;z-index:15;background:linear-gradient(135deg,#7C3AED,var(--indigo));color:#fff;border:none;border-radius:50px;padding:.8rem 1.2rem;font-size:1rem;font-family:var(--fd);font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(124,58,237,.4);display:flex;align-items:center;gap:.4rem;transition:transform .15s,box-shadow .15s;animation:fabPulse 3s infinite}
.fab-lectura:hover{transform:scale(1.05);box-shadow:0 6px 28px rgba(124,58,237,.5)}
.fab-text{font-size:.88rem}
@keyframes fabPulse{0%,100%{box-shadow:0 4px 20px rgba(124,58,237,.4)}50%{box-shadow:0 4px 20px rgba(124,58,237,.2),0 0 0 8px rgba(124,58,237,.1)}}
.lectura-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.lectura-ico{font-size:2.5rem}.lectura-header h2{font-family:var(--fd);font-size:1.4rem;font-weight:800}.lectura-sub{font-size:.85rem;color:var(--ink2)}
.lectura-filtros{display:flex;gap:.4rem;margin-bottom:1.2rem;overflow-x:auto;padding-bottom:.3rem}
.filtro-btn{font-family:var(--fd);font-weight:600;font-size:.82rem;padding:.4rem .9rem;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;white-space:nowrap;transition:all .15s}
.filtro-btn:hover{border-color:var(--indigo)}.filtro-activo{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.lectura-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.historia-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:1.2rem;cursor:pointer;transition:all .15s}
.historia-card:hover{border-color:var(--purple);box-shadow:var(--shadow);transform:translateY(-2px)}
.hc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.hc-emoji{font-size:1.8rem}
.hc-nivel{font-family:var(--fm);font-size:.7rem;padding:.2rem .5rem;border-radius:6px;font-weight:600}
.hn-a1{background:var(--emerald-s);color:var(--emerald)}.hn-a2{background:var(--indigo-s);color:var(--indigo)}.hn-b1{background:var(--amber-s);color:var(--amber)}
.historia-card h3{font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:.3rem}.historia-card p{font-size:.82rem;color:var(--ink2);margin-bottom:.5rem}
.hc-words{font-family:var(--fm);font-size:.7rem;color:var(--ink2)}
.lector-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow-s)}
.lector-nivel{display:inline-block;font-family:var(--fm);font-size:.72rem;padding:.2rem .6rem;border-radius:6px;font-weight:600;margin-bottom:.6rem}
.lector-card h2{font-family:var(--fd);font-size:1.4rem;font-weight:800;margin-bottom:1rem}
.lector-sentence{font-size:1.1rem;line-height:2;margin-bottom:.6rem;color:var(--ink)}
.lector-word{cursor:default;transition:background .1s;border-radius:3px;padding:1px 2px}
.lw-has-trad{cursor:pointer;border-bottom:2px dotted var(--indigo);color:var(--ink)}.lw-has-trad:hover{background:var(--indigo-s)}
.lector-tooltip{position:absolute;z-index:20;background:var(--ink);color:#fff;border-radius:10px;padding:.6rem 1rem;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:slideUp .15s;min-width:120px;text-align:center}
#tooltip-word{display:block;font-family:var(--fd);font-weight:700;font-size:1rem;margin-bottom:.2rem}
#tooltip-trad{display:block;font-size:.88rem;color:rgba(255,255,255,.8)}
@media(max-width:520px){.fab-lectura{bottom:1rem;right:1rem;padding:.7rem 1rem;font-size:.9rem}.fab-text{display:none}.lectura-grid{grid-template-columns:1fr}.lector-sentence{font-size:1rem;line-height:1.9}.lector-card{padding:1.2rem}}
.audio-replay{background:var(--indigo-s);border:1.5px solid var(--indigo);color:var(--indigo);width:3rem;height:3rem;border-radius:50%;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;transition:transform .15s,background .15s}
.audio-replay:hover{background:var(--indigo);color:#fff;transform:scale(1.1)}
.audio-replay:active{transform:scale(.95)}
.lpp-word{cursor:pointer;transition:all .15s}.lpp-word:hover{background:var(--indigo);color:#fff;transform:scale(1.05)}
.lpp-word:active{transform:scale(.95)}

/* ========== LESSON PHASES INDICATOR ========== */
.leccion-fases{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1.2rem 0;flex-wrap:wrap}
.fase{display:flex;align-items:center;gap:.3rem;font-family:var(--fd);font-size:.8rem;font-weight:600;color:var(--ink2)}
.fase-num{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--indigo-s);color:var(--indigo);display:inline-grid;place-items:center;font-size:.75rem;font-weight:800}
.fase-arrow{color:var(--line);font-size:1rem}

/* ========== THEORY VIEWER ========== */
.teoria-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.teoria-fase{font-family:var(--fd);font-weight:700;font-size:.82rem;color:var(--indigo);background:var(--indigo-s);padding:.3rem .8rem;border-radius:20px}
.teoria-progress{font-family:var(--fm);font-size:.78rem;color:var(--ink2)}
.teoria-bar{height:5px;background:var(--line);border-radius:3px;margin-bottom:1.2rem;overflow:hidden}
.teoria-bar-fill{height:100%;background:linear-gradient(90deg,var(--indigo),var(--purple));border-radius:3px;transition:width .4s;width:0}
.teoria-slide{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow-s);min-height:200px;animation:slideUp .3s}
.teoria-slide h3{font-family:var(--fd);font-size:1.2rem;font-weight:800;margin-bottom:.8rem;color:var(--ink)}
.teoria-slide p{font-size:.95rem;line-height:1.7;color:var(--ink2);margin-bottom:.6rem}
.teoria-nav{display:flex;gap:.6rem;margin-top:1rem;justify-content:space-between}

/* Theory: tabla */
.teoria-tabla{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.88rem}
.teoria-tabla th{background:var(--indigo);color:#fff;padding:.6rem .8rem;text-align:left;font-family:var(--fd);font-weight:600;font-size:.82rem}
.teoria-tabla td{padding:.55rem .8rem;border-bottom:1px solid var(--line);font-size:.88rem}
.teoria-tabla tr:nth-child(even){background:var(--indigo-s)}
.teoria-tabla tr:hover{background:rgba(79,70,229,.08)}

/* Theory: ejemplos */
.teoria-ejemplos{display:flex;flex-direction:column;gap:.6rem;margin:.6rem 0}
.teoria-ejemplo{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;border-left:4px solid var(--indigo)}
.te-en{font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--indigo);display:block;margin-bottom:.2rem;cursor:pointer}
.te-en:hover{text-decoration:underline}
.te-es{font-size:.88rem;color:var(--ink2);display:block}
.te-nota{font-size:.78rem;color:var(--amber);font-weight:600;margin-top:.2rem;display:block}

/* Theory: dialogo */
.teoria-dialogo{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0}
.dialogo-linea{display:flex;gap:.6rem;align-items:flex-start}
.dl-persona{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:.82rem;color:#fff;flex:none}
.dl-persona-a{background:var(--indigo)}.dl-persona-b{background:var(--emerald)}
.dl-burbuja{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;flex:1}
.dl-texto{font-family:var(--fd);font-weight:600;font-size:.95rem;color:var(--ink);display:block;cursor:pointer}
.dl-texto:hover{color:var(--indigo)}
.dl-trad{font-size:.8rem;color:var(--ink2);display:block;margin-top:.15rem}

/* ========== NEW EXERCISE STYLES ========== */
/* Fill: sentence completion */
.ej-oracion{font-family:var(--fd);font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:.8rem;line-height:1.5}
.fill-opts{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.fill-opt{font-family:var(--fd);font-weight:600;font-size:1rem;padding:.6rem 1.2rem;border:2px solid var(--indigo);border-radius:12px;cursor:pointer;background:var(--indigo-s);color:var(--indigo);transition:all .15s}
.fill-opt:hover{background:var(--indigo);color:#fff;transform:scale(1.05)}
.fill-opt.correct{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.fill-opt.wrong{background:var(--coral);color:#fff;border-color:var(--coral)}

/* Choose: pregunta */
.ej-pregunta{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:.6rem;line-height:1.5}

/* Translate: español */
.ej-español{font-family:var(--fd);font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:.6rem;line-height:1.5}

/* Order: word arrangement */
.order-answer{min-height:3.2rem;border:2px dashed var(--line);border-radius:12px;padding:.5rem;display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem;justify-content:center;align-items:center}
.order-words{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.order-word{font-family:var(--fd);font-weight:600;font-size:1rem;padding:.5rem 1rem;border:2px solid var(--amber);border-radius:10px;cursor:pointer;background:var(--amber-s);color:var(--amber);transition:all .15s;user-select:none}
.order-word:hover{background:var(--amber);color:#fff;transform:scale(1.05)}
.order-placed{background:var(--indigo);color:#fff;border-color:var(--indigo);cursor:pointer}
.order-placed:hover{opacity:.8}

/* Listen: audio big button */
.audio-big{background:linear-gradient(135deg,var(--indigo),var(--purple));color:#fff;border:none;border-radius:16px;padding:1.2rem 2rem;font-size:1.3rem;font-family:var(--fd);font-weight:700;cursor:pointer;margin-bottom:1rem;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(79,70,229,.3)}
.audio-big:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(79,70,229,.4)}
.audio-big:active{transform:scale(.97)}

/* Exercise result */
.ej-result{margin-top:.6rem;font-weight:700;font-size:1rem;padding:.6rem;border-radius:12px;text-align:center}
.ej-result.ok{background:var(--emerald-s);color:#065F46}
.ej-result.mal{background:var(--coral-s);color:#9F1239}

/* ========== MOBILE for new elements ========== */
@media(max-width:520px){
  .teoria-slide{padding:1.2rem}
  .teoria-slide h3{font-size:1.05rem}
  .teoria-tabla{font-size:.78rem}
  .teoria-tabla th,.teoria-tabla td{padding:.4rem .5rem}
  .ej-oracion,.ej-español{font-size:1.1rem}
  .ej-pregunta{font-size:1rem}
  .fill-opt{font-size:.9rem;padding:.5rem .9rem}
  .order-word,.order-placed{font-size:.9rem;padding:.4rem .8rem}
  .audio-big{padding:1rem 1.5rem;font-size:1.1rem}
  .leccion-fases{gap:.3rem}.fase{font-size:.72rem}.fase-num{width:1.4rem;height:1.4rem;font-size:.65rem}
  .dl-burbuja{padding:.5rem .7rem}.dl-texto{font-size:.88rem}
}