/* SUBIRA · estilos */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070B16;--surface:#111829;--surface2:#1A2338;--line:#26314A;
  --text:#EEF2FB;--muted:#8C9BB8;--dim:#5C6B88;
  --accent:#5B8CFF;--good:#34D99A;--good-d:#14402F;--bad:#FF6B6B;--bad-d:#43222A;
  --gold:#FFB84D;--tech:#C77DFF;--rev:#FF9F45;--orange:#FF8B5E;
}
html,body{height:100%;height:100dvh}
body{background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;
  overflow:hidden}          /* solo se desliza el contenido, nunca la página */
#app{width:100%;max-width:420px;height:100vh;height:100dvh;max-height:880px;background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
/* ---------- pantallas grandes ---------- */
#brand{display:none}

@media(min-width:460px){
  body{background:#04060D;padding:24px}
  /* la altura se acomoda a la ventana: antes se cortaba la barra de pestañas */
  #app{border:1px solid var(--line);border-radius:28px;
       height:min(860px, calc(100dvh - 48px)); max-height:none;
       box-shadow:0 24px 70px rgba(0,0,0,.55)}
}

/* de aquí para arriba cabe el panel de marca al lado */
@media(min-width:900px){
  body{gap:56px;padding:40px}
  #brand{display:flex;flex-direction:column;max-width:380px;animation:fade .5s ease}
  #brand .logo{display:flex;align-items:center}
  #brand .logo .lockup{width:248px;height:auto;color:var(--text)}
  #brand .tag{color:var(--accent);font-weight:700;font-size:15px;margin-top:14px}
  #brand .pitch{color:var(--muted);font-size:15px;line-height:1.65;margin-top:18px}
  #brand .nums{display:flex;gap:10px;margin-top:26px}
  #brand .nums div{flex:1;background:var(--surface);border:1px solid var(--line);
                   border-radius:14px;padding:13px 10px;text-align:center}
  #brand .nums b{display:block;font-size:20px;font-weight:800}
  #brand .nums span{display:block;font-size:10.5px;color:var(--dim);
                    text-transform:uppercase;letter-spacing:1.2px;margin-top:3px}
  #brand .inst{margin-top:26px;background:var(--surface);border:1px solid var(--line);
               border-left:3px solid var(--good);border-radius:0 14px 14px 0;padding:14px 16px}
  #brand .inst b{display:block;font-size:12.5px;margin-bottom:5px}
  #brand .inst p{font-size:13px;line-height:1.55}
}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen{flex:1;display:none;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.screen.on{display:flex}
.pad{padding:20px}
.pad.col{display:flex;flex-direction:column;gap:9px}
.pad.row{display:flex;gap:9px}
h1{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.18}
h2{font-size:19px;font-weight:700;letter-spacing:-.3px}
p{color:var(--muted);font-size:14.5px;line-height:1.58}
.center{text-align:center}
.mono{font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}
.mono.tech{color:var(--tech)}
.mono.orange{color:var(--rev)}
.gold{color:var(--gold)}.orange{color:var(--orange)}.dim{color:var(--dim)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent);text-decoration:none}
.btn{width:100%;padding:16px;border-radius:14px;background:var(--accent);color:#061024;
  font-weight:800;font-size:15.5px;transition:transform .08s,opacity .2s;display:block;text-align:center}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.3;cursor:default}
.btn.ghost{background:var(--surface2);color:var(--text)}
.btn.good{background:var(--good);color:#04180F}
.btn.wa{background:#25D366;color:#04180F;margin-top:14px}
.btn.sm{padding:13px;font-size:14px}
.back{color:var(--dim);font-size:14px;font-weight:700;margin-bottom:16px}
.x{font-size:22px;color:var(--dim);line-height:1;padding:0 4px}
.fade{animation:f .3s ease}
@keyframes f{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.burst{font-size:56px;text-align:center}
.foot{text-align:center;font-size:12px;color:var(--dim);padding:10px 0 0}

/* marca */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 2px}
.brand{display:flex;align-items:center;gap:10px}
.wordmark{font-size:15px;font-weight:800;letter-spacing:3.5px}
.wordmark.dim{font-size:13px}
.mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,var(--accent),#38E0A6);
  display:grid;place-items:center;font-weight:800;color:#061024;font-size:15px}
.tagline{font-size:11.5px;color:var(--dim);letter-spacing:.3px}
.chips{display:flex;gap:7px}
.chip{display:flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--line);
  padding:7px 11px;border-radius:999px;font-size:13px;font-weight:700}
.chip.gold{color:var(--gold)}
.credit{text-align:center;margin-top:24px}
.credit p{font-size:12px;margin-top:6px}
.credit b{color:var(--text)}

/* nav */
.nav{display:flex;border-top:1px solid var(--line);background:var(--surface);flex-shrink:0;position:sticky;bottom:0;z-index:5;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;padding:12px 4px 13px;text-align:center;color:var(--dim);font-size:10.5px;font-weight:700}
.nav button .i{display:block;font-size:19px;margin-bottom:3px;opacity:.6}
.nav button.on{color:var(--accent)}
.nav button.on .i{opacity:1}

/* inicio */
.hero{margin-top:16px;padding:20px;border-radius:22px;background:linear-gradient(155deg,#1B2A52,#111829);
  border:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,140,255,.2),transparent 70%);top:-70px;right:-50px}
.hero-row{display:flex;align-items:center;gap:15px;margin:12px 0 16px}
.hero-row p{font-size:13px;margin-top:3px}
.ring{width:60px;height:60px;flex-shrink:0}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s}
.mod{display:flex;align-items:center;gap:13px;width:100%;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;margin-bottom:9px;text-align:left}
.mod .n{width:32px;height:32px;border-radius:10px;background:var(--surface2);display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--muted);flex-shrink:0}
.mod.done .n{background:var(--good-d);color:var(--good)}
.mod.now{border-color:var(--accent);background:#131E3A}
.mod.now .n{background:var(--accent);color:#061024}
.mod.lock{opacity:.42}
.mod b{font-size:14.5px;font-weight:700;display:block}
.mod span{font-size:12px;color:var(--dim);display:block;margin-top:2px}

/* técnico */
.folder{display:flex;align-items:center;gap:13px;width:100%;padding:15px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;margin-bottom:9px;text-align:left}
.folder .ic{width:40px;height:40px;border-radius:11px;background:var(--surface2);display:grid;
  place-items:center;font-size:19px;flex-shrink:0}
.folder b{font-size:14.5px;font-weight:700;display:block}
.folder span{font-size:12px;color:var(--dim);display:block;margin-top:3px}
.folder .st{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--tech);
  background:#2A1A3D;padding:4px 8px;border-radius:999px;white-space:nowrap}
.banner{background:linear-gradient(150deg,#2A1A3D,#141829);border:1px solid #3D2A52;
  border-radius:18px;padding:18px;margin-bottom:18px}
.banner b{color:var(--tech);font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.banner p{margin-top:7px;font-size:13.5px}

/* tarjetas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px}
.card .mono{margin-bottom:9px}
.card p{font-size:13.5px}
.card p b{color:var(--text)}
.stats{display:flex;gap:9px}
.stat{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 10px;text-align:center}
.stat b{display:block;font-size:23px;font-weight:800;letter-spacing:-.6px}
.stat>span{font-size:9.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}

/* lección */
.sh{display:flex;align-items:center;gap:12px;padding:16px 20px}
.bar{flex:1;height:7px;background:var(--surface2);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;
  transition:width .35s cubic-bezier(.4,0,.2,1)}
.count{font-size:13px;font-weight:800;color:var(--muted)}
.dots{display:flex;gap:6px;justify-content:center;padding:14px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--surface2)}
.dots i.on{background:var(--accent);width:20px;border-radius:999px}
.row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px 13px;margin-bottom:8px}
.row .en{font-size:15.5px;font-weight:700}
.row .es{font-size:12.5px;color:var(--muted);margin-top:3px}
.row .main{flex:1}
.sp{background:var(--surface2);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700;
  color:var(--muted);flex-shrink:0}
table.g{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
table.g td{padding:10px 9px;border-bottom:1px solid var(--line)}
table.g tr:last-child td{border:none}
table.g td:first-child{color:var(--muted);width:46%}
table.g b{color:var(--accent);font-weight:800}
.warn{background:#201A0C;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:13px 14px;margin-top:14px}
.warn>b:first-child{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  display:block;margin-bottom:6px}
.warn p{font-size:13.5px}
.warn p b{font-weight:800;letter-spacing:0;text-transform:none;display:inline;font-size:inherit}
.warn p s{opacity:.65}
.grid7{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin-top:14px}
.cap{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center}
.cap:active{background:var(--accent);color:#061024}
.cap b{display:block;font-size:13.5px;font-weight:800}
.cap span{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.abc{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px;margin-top:14px}
.ltr{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 4px;text-align:center}
.ltr:active{background:var(--accent);color:#061024}
.ltr b{display:block;font-size:17px;font-weight:800}
.ltr span{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.ltr.trap{border-color:#6B5324;background:#201A0C}
.ltr.trap span{color:var(--gold)}
.pairs{margin-top:14px}
.pair{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px 13px;margin-bottom:8px}
.pair .vs{flex:1;display:flex;align-items:center;gap:9px}
.pair .big{font-size:21px;font-weight:800;width:26px;text-align:center}
.pair .ph{font-size:12.5px;color:var(--muted)}
.chips2,.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips .chip{border-radius:999px}
.sw{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}
.card3d{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 20px;text-align:center;margin-bottom:16px}
.card3d .en{font-size:25px;font-weight:800;letter-spacing:-.5px}
.card3d .ipa{font-size:13px;color:var(--dim);margin-top:5px}
.card3d .es{font-size:17px;color:var(--good);font-weight:700;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.spk{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 15px;background:var(--surface2);
  border-radius:999px;font-size:13px;font-weight:700;color:var(--muted)}

/* reactivos */
.qb{flex:1;padding:6px 20px 20px;display:flex;flex-direction:column}
.revtag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--rev);background:#2E1C08;padding:4px 9px;border-radius:999px;margin-bottom:10px}
.revtag.exam{color:var(--accent);background:#152040}
.prompt{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.3px;margin:4px 0 18px}
.ctx{background:var(--surface);border-left:3px solid var(--accent);padding:13px 14px;border-radius:0 12px 12px 0;
  font-size:16px;margin-bottom:18px;font-weight:600;letter-spacing:.2px}
.swatch{height:92px;border-radius:16px;margin-bottom:18px;border:1px solid var(--line)}
.opt{width:100%;padding:15px;margin-bottom:9px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:13px;text-align:left;font-size:15px;font-weight:600;transition:all .15s}
.opt.ok{border-color:var(--good);background:var(--good-d)}
.opt.no{border-color:var(--bad);background:var(--bad-d)}
.opt.mute{opacity:.4}
input.typ{width:100%;padding:15px;background:var(--surface);border:1.5px solid var(--line);border-radius:13px;
  color:var(--text);font-size:17px;font-family:inherit;font-weight:700;outline:none;text-align:center;letter-spacing:1px}
input.typ:focus{border-color:var(--accent)}
.words{display:flex;flex-wrap:wrap;gap:8px}
.w{padding:11px 14px;background:var(--surface2);border:1.5px solid var(--line);border-radius:11px;
  font-size:14.5px;font-weight:600}
.w.used{opacity:.25}
.tray{min-height:56px;border:1.5px dashed var(--line);border-radius:13px;padding:9px;display:flex;
  flex-wrap:wrap;gap:8px;margin-bottom:16px;align-content:flex-start}
.play{width:100%;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:11px;font-size:16px;font-weight:700;margin-bottom:16px}
.play:active{background:var(--surface2)}
.mic{width:100%;padding:26px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  text-align:center;margin-bottom:14px}
.mic .ico{font-size:34px;display:block;margin-bottom:9px}
.mic b{font-size:15px;font-weight:700;display:block}
.mic span{font-size:12.5px;color:var(--dim);display:block;margin-top:5px;line-height:1.5}
.mic.live{border-color:var(--bad);background:var(--bad-d)}
.fb{padding:16px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  background:var(--surface);margin:-20px -20px 0;border-radius:18px 18px 0 0}
.fb.ok{background:var(--good-d);border-color:#1E6049}
.fb.no{background:var(--bad-d);border-color:#6B2B35}
.fb h3{font-size:16px;font-weight:800;margin-bottom:4px}
.fb p{font-size:13.5px;color:#C8D4EA}

/* ---------- código QR para compartir ---------- */
.qr{background:#fff;border-radius:10px;padding:6px;line-height:0;flex-shrink:0;width:max-content}
.qr svg{display:block;border-radius:4px}
.qr.big{width:max-content}
.qlink{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.2px;
  margin-top:8px;word-break:break-all}
.qlink.center{text-align:center}
@media(min-width:900px){
  #brand .qrow{display:flex;gap:14px;align-items:flex-start}
  #brand .inst p{margin-top:5px}
}

/* ---- Complete the Words · C-test del TOEFL ---- */
.ctest{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 15px;font-size:15.5px;line-height:2.35;letter-spacing:.1px}
.ctw{white-space:nowrap}
input.ct{display:inline-block;width:auto;min-width:26px;padding:1px 3px 2px;margin:0 1px;
  background:transparent;border:0;border-bottom:1.5px solid var(--accent);border-radius:0;
  color:var(--text);font:inherit;font-weight:700;text-align:left;outline:none}
input.ct:focus{background:var(--surface2);border-bottom-color:var(--text)}
input.ct.bien{border-bottom-color:var(--good);color:var(--good)}
input.ct.mal{border-bottom-color:var(--bad);color:var(--bad)}
input.ct:disabled{opacity:1}

/* ---- texto de lectura sobre la pregunta ---- */
.psg{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:15px 15px 16px;margin-bottom:16px;font-size:14.5px;line-height:1.72;
  font-weight:500;max-height:34dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.psg[data-t]::before{content:attr(data-t);display:block;font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.psg p{margin:0 0 9px}
.psg p:last-child{margin-bottom:0}
.psg b{color:var(--text);font-weight:800}

/* ---- planes ---- */
ul.plan{list-style:none;margin-top:14px}
ul.plan li{position:relative;padding-left:22px;margin-bottom:10px;font-size:13.8px;line-height:1.55}
ul.plan li::before{content:'✓';position:absolute;left:0;top:0;color:var(--good);font-weight:800;font-size:13px}
ul.plan li b{color:var(--text);font-weight:800}
.card.pro{border-color:rgba(255,184,77,.45);background:linear-gradient(170deg,#1D1708,#111829)}
.card.pro ul.plan li::before{color:var(--gold)}
.pronto{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:2px 7px;margin-left:5px;vertical-align:1px}
.plan-pie{margin-top:13px;font-size:12px;color:var(--dim);line-height:1.5}
.btn.wa{display:block;text-align:center;text-decoration:none}
.lock-pro{background:#1D1708;border:1px solid rgba(255,184,77,.35);border-radius:14px;padding:14px 15px;margin-top:14px}
.lock-pro b{display:block;color:var(--gold);font-size:13.5px;margin-bottom:5px}
.lock-pro p{font-size:13px;line-height:1.55}

/* ---- panel del maestro ---- */
.alumno{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.alumno .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.alumno b{font-size:14.5px;display:block}
.alumno .mail{font-size:11.5px;color:var(--dim);margin-top:2px;word-break:break-all}
.alumno .datos{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.alumno .sello{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:4px 9px;border:1px solid var(--line);color:var(--dim)}
.alumno.pro{border-color:rgba(255,184,77,.45)}
.alumno.pro .sello{color:var(--gold);border-color:rgba(255,184,77,.5)}
.alumno .btn{margin-top:11px;padding:9px}

/* ---- el logo dentro de la app ---- */
.mark-img{width:32px;height:32px;border-radius:9px;display:block}
.nombre{height:17px;width:auto;display:block;color:var(--text)}
.nombre.dim{height:14px;opacity:.55}
.lockup-xl{width:208px;height:auto;display:block;color:var(--text)}

/* --- rúbrica de autoevaluación (reactivos de escribir y de hablar) --- */
.rub{display:flex;flex-direction:column;gap:9px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;
     color:#C8D4EA;cursor:pointer}
.chk input{margin-top:2px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--good)}
.chk:has(input:checked){color:var(--text)}