/* RMLingo · interfaz móvil
   Colores tomados del ícono: noche estrellada (azul marino), dorado de las órbitas, verde del globo. */
:root {
  --night: #0A1630;
  --hero: #0A1630;
  --bg: #F3F5F9;
  --surface: #FFFFFF;
  --surface-2: #E9EEF6;
  --ink: #0F1E3D;
  --muted: #5A6681;
  --line: #DCE2EC;
  --accent: #1D3B6E;
  --accent-ink: #FFFFFF;
  --gold: #B8861F;
  --gold-bright: #E3B04B;
  --gold-soft: #FBF1DA;
  --green: #2F7A55;
  --you: #1D3B6E;
  --you-ink: #FFFFFF;
  --warn: #9A5B12;
  --danger: #B3261E;
  --f-brand: "Cinzel", Georgia, serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --r: 14px;
  --tabbar: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A1630; --surface: #12234A; --surface-2: #1A2E5A; --ink: #E8EDF7; --muted: #A2AEC6; --line: #243A68;
    --accent: #E3B04B; --accent-ink: #0A1630; --gold: #E3B04B; --gold-soft: #2B2617; --green: #6CC596;
    --you: #E3B04B; --you-ink: #0A1630; --hero: #1A3266; --warn: #EDB86C; --danger: #FF8A80;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.45; overflow: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
h1, h2 { margin: 0; line-height: 1.15; text-wrap: balance; }
h2 { font-size: 1.3rem; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.mt { margin-top: 28px; }

/* Íconos */
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.sm { width: 18px; height: 18px; }

/* Pantallas: cada una ocupa toda la altura del celular */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
}

/* Botones */
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 12px 20px; font-weight: 700; min-height: 48px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.block { width: 100%; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; flex: none; }
.icon-btn.ghost { border-color: transparent; background: transparent; }
.icon-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.icon-btn.on { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--night); }
.icon-btn:disabled { opacity: .45; cursor: default; }
.link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--accent); font-weight: 700; padding: 6px 0; font-size: .92rem; }
.link:disabled { opacity: .45; }

/* Campos */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; min-height: 48px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; min-height: 40px; font-size: .92rem; }
.pill-row button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ============ Bienvenida ============ */
.onb { background: var(--bg); }
.onb-step { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hero { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px 20px 0; }
.hero img { width: 100%; max-width: 400px; aspect-ratio: 1; max-height: 100%; object-fit: cover; border-radius: 32px; box-shadow: 0 16px 40px rgba(10, 22, 48, .3); }
.onb-body { padding: 20px 24px 8px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; overflow-y: auto; }
.onb-body.left { align-items: stretch; text-align: left; flex: 1; }
.brand { font-family: var(--f-brand); font-size: clamp(2rem, 9vw, 2.6rem); letter-spacing: .02em; }
.kicker { margin: -4px 0 0; color: var(--gold); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
.lead { margin: 4px 0 0; color: var(--muted); max-width: 34ch; }
.onb-foot { padding: 12px 24px calc(20px + env(safe-area-inset-bottom, 0px)); }
.onb-top { display: flex; align-items: center; gap: 12px; padding: 8px 12px 0; }
.dots { display: flex; gap: 6px; margin-left: auto; margin-right: auto; padding-right: 44px; }
.dots span { width: 28px; height: 5px; border-radius: 3px; background: var(--line); }
.dots span.on { background: var(--gold-bright); }

.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.lang-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--surface); text-align: left; min-height: 72px; }
.lang-opt .hello { font-size: 1.15rem; font-weight: 700; }
.lang-opt .name { font-size: .85rem; color: var(--muted); }
.lang-opt[aria-pressed="true"] { border-color: var(--gold-bright); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-bright); }

.choice-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.choice { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--surface); text-align: left; }
.choice span { font-size: .88rem; color: var(--muted); }
.choice[aria-pressed="true"] { border-color: var(--gold-bright); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-bright); }

/* ============ App principal ============ */
.main .tab-page { flex: 1; overflow-y: auto; padding: 16px 20px calc(var(--tabbar) + 24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 18px; }
.main .tab-page > * { flex-shrink: 0; }
.home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 6px; }
.home-head p { margin: 0; }
.home-title { font-size: 1.9rem; }
.lang-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-weight: 700; min-height: 44px; }

.streak-card { background: var(--hero); color: #F2F4FA; border-radius: 22px; padding: 18px; display: flex; gap: 18px; align-items: center; position: relative; overflow: hidden; }
.streak-card::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(227, 176, 75, .35); transform: rotate(-20deg) scaleY(.45); }
.streak-num { display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.streak-num .flame { width: 28px; height: 28px; color: var(--gold-bright); }
.streak-num b { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.streak-num span { font-size: .75rem; opacity: .8; }
.goal { flex: 1; display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.goal-top { display: flex; justify-content: space-between; font-size: .9rem; }
.goal-top span:last-child { font-variant-numeric: tabular-nums; opacity: .85; }
.bar { height: 10px; background: rgba(255, 255, 255, .15); border-radius: 6px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--gold-bright); border-radius: 6px; transition: width .4s; }

.banner { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-soft); color: var(--warn); border-radius: 12px; padding: 10px 12px; font-size: .88rem; }
.banner .i { margin-top: 2px; }

.group-title { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 6px 0 10px; }
.scen-list { display: flex; flex-direction: column; gap: 10px; }
.scen-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); text-align: left; width: 100%; }
.scen-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.scen-card.after .scen-ico { color: var(--green); }
.scen-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scen-txt span { font-size: .86rem; color: var(--muted); }
.scen-card .chev { color: var(--muted); }

.page-head { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.page-head h1 { font-size: 1.7rem; }
.page-head p { margin: 0; }

.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 9px; font-weight: 700; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.words-list { display: flex; flex-direction: column; gap: 8px; }
.word-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.word-row .w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.word-row .w b { overflow-wrap: anywhere; }
.word-row .w span { color: var(--muted); font-size: .9rem; }
.tag { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty .i { width: 40px; height: 40px; color: var(--line); }

.review { display: flex; flex-direction: column; gap: 14px; }
.flash { min-height: 240px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.flash-word { font-size: 2rem; font-weight: 700; overflow-wrap: anywhere; }
.flash-mean { font-size: 1.2rem; color: var(--green); }
.flash-tip { font-size: .85rem; color: var(--muted); }
.flash-lang { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.profile-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.profile-card img { border-radius: 14px; }
.profile-card p { margin: 2px 0 0; }
.settings { display: flex; flex-direction: column; gap: 18px; }
.about { margin: 0; }
.confirm { background: var(--surface); border: 1px solid var(--danger); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.confirm p { margin: 0; }
.confirm .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar button { border: 0; background: none; height: var(--tabbar); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.tabbar button[aria-current="page"] { color: var(--accent); }
.tabbar button[aria-current="page"] .i { stroke-width: 2.4; }

/* ============ Conversación ============ */
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; }
.chat-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.scene-intro { align-self: center; text-align: center; max-width: 34ch; color: var(--muted); font-size: .9rem; display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 8px 0 4px; }
.scene-intro .scen-ico { margin-bottom: 4px; }
.msg { max-width: 86%; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.msg.you { align-self: flex-end; }
.msg.you .bubble { background: var(--you); color: var(--you-ink); border-radius: 20px 20px 6px 20px; }
.msg.ai .bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; font-size: 1.06rem; }
.bubble { padding: 11px 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.thinking .bubble { color: var(--muted); font-style: italic; }
.notes { display: flex; flex-direction: column; gap: 6px; padding-left: 4px; font-size: .9rem; }
.note-tools { display: flex; gap: 14px; }
.note { color: var(--muted); }
.note b { color: var(--ink); }
.note.fix { color: var(--warn); background: var(--gold-soft); padding: 8px 10px; border-radius: 10px; }
.note.fix b { color: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px dashed var(--accent); background: transparent; color: var(--accent); border-radius: 999px; padding: 5px 12px; font-size: .85rem; min-height: 32px; }
.chip.saved { border-style: solid; background: var(--surface-2); }

.composer { background: var(--surface); border-top: 1px solid var(--line); padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; }
.compose-row { display: flex; gap: 8px; align-items: flex-end; }
.compose-row textarea { flex: 1; min-width: 0; resize: none; border-radius: 22px; min-height: 44px; max-height: 140px; padding: 10px 16px; background: var(--bg); }
.hints { display: flex; flex-direction: column; gap: 6px; }
.hint { border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 9px 12px; text-align: left; }
.hint small { display: block; color: var(--muted); }
.status { font-size: .88rem; color: var(--warn); }

/* Hoja inferior */
.sheet { position: fixed; inset: 0; background: rgba(5, 10, 25, .5); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.sheet-card { background: var(--bg); width: 100%; max-width: 560px; border-radius: 24px 24px 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 80%; overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--night); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: .9rem; z-index: 30; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- Pantalla de bienvenida (inicio) ---- */
.onb-step.welcome { background: radial-gradient(120% 70% at 50% 30%, #1A3A6B 0%, #0E213E 55%, #081530 100%); color: #EEF2FA; }
.welcome-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 24px 0; }
.logo-wrap { position: relative; width: min(56vw, 220px); aspect-ratio: 1; display: grid; place-items: center; }
.logo-wrap .logo { width: 100%; height: 100%; border-radius: 26%; box-shadow: 0 0 0 1px rgba(227,176,75,.35), 0 18px 50px rgba(0,0,0,.45), 0 0 80px rgba(227,176,75,.18); }
.orbit { position: absolute; inset: -18%; border-radius: 50%; border: 1.5px solid rgba(227,176,75,.4); transform: rotate(-18deg) scaleY(.42); animation: orbit 14s linear infinite; }
.orbit::after { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 12px var(--gold-bright); }
@keyframes orbit { from { transform: rotate(-18deg) scaleY(.42) rotate(0deg); } to { transform: rotate(-18deg) scaleY(.42) rotate(360deg); } }
.hello-rotator { margin: 0; height: 1.6em; font-size: 1.25rem; font-weight: 700; color: var(--gold-bright); letter-spacing: .02em; }
.hello-rotator span { display: inline-block; transition: opacity .35s, transform .35s; }
.hello-rotator span.out { opacity: 0; transform: translateY(6px); }
.welcome .brand { color: #FFFFFF; font-family: var(--f-body); font-weight: 700; letter-spacing: -.01em; font-size: clamp(2.2rem, 10vw, 2.8rem); }
.welcome .kicker { color: var(--gold-bright); letter-spacing: .04em; text-transform: none; font-size: .95rem; }
.welcome .lead { color: #B9C4DA; }
.for-who { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 6px 0 0; }
.for-who li { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; font-size: .82rem; color: #D7DEEC; }
.btn.gold { background: var(--gold-bright); border-color: var(--gold-bright); color: #0E213E; }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }

/* ---- Crear cuenta ---- */
.onb-step.account { background: radial-gradient(120% 60% at 50% 0%, #1A3A6B 0%, #0E213E 55%, #081530 100%); color: #EEF2FA; }
.account .onb-top .icon-btn { color: #EEF2FA; }
.account-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.account-logo { border-radius: 22%; box-shadow: 0 0 0 1px rgba(227,176,75,.35), 0 10px 30px rgba(0,0,0,.4); margin-top: 8px; }
.account h2 { font-size: 1.6rem; color: #fff; margin-top: 8px; }
.account-sub { margin: 0 0 12px; color: #B9C4DA; max-width: 32ch; }
.account-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 380px; }
.btn.light { background: #FFFFFF; border-color: #FFFFFF; color: #0E213E; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn.outline-light { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn.ghost-light { background: transparent; border-color: transparent; color: var(--gold-bright); }
.fine { margin: 2px 0 0; text-align: center; font-size: .82rem; color: #93A1BD; }
.email-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.email-form .label { color: #A9B6CF; }
.email-form input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.email-form input::placeholder { color: #8090AE; }
.pass-wrap { position: relative; display: block; }
.pass-wrap input { padding-right: 84px; }
.pass-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gold-bright); }
.seg.dark { background: rgba(255,255,255,.08); }
.seg.dark button { color: #A9B6CF; }
.seg.dark button[aria-pressed="true"] { background: #fff; color: #0E213E; }
.form-msg { margin: 0; color: #FFB4A9; font-size: .9rem; }
.center-link { align-self: center; color: #B9C4DA; }
.soon { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: rgba(227,176,75,.14); border: 1px solid rgba(227,176,75,.35); color: #F3D9A0; border-radius: 12px; padding: 10px 12px; font-size: .88rem; max-width: 380px; }
.soon .i { margin-top: 2px; }
.account-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.account-row > div { flex: 1; min-width: 0; }
.account-row p { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.btn.small-btn { min-height: 40px; padding: 8px 14px; font-size: .9rem; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); flex: none; }

/* ---- Iniciar sesión / crear cuenta (v2) ---- */
.account .account-body { width: 100%; }
.account .email-form { margin: 4px auto 0; }
.forgot { align-self: flex-end; color: #B9C4DA; font-weight: 400; font-size: .88rem; margin-top: -6px; }
.or { display: flex; align-items: center; gap: 12px; color: #8090AE; font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.15); }
.switch { margin: 2px 0 6px; text-align: center; color: #B9C4DA; font-size: .92rem; }
.switch .link { color: var(--gold-bright); padding: 0 0 0 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: #C9D2E4; }
.check input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; accent-color: var(--gold-bright); flex: none; }
#acctFoot { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#acctFoot .soon { width: 100%; }


/* ---- Iniciar sesión: logo con órbita y campos con ícono ---- */
.btn.big { min-height: 54px; font-size: 1.05rem; }
.mini-logo { position: relative; width: 84px; height: 84px; margin: 6px auto 8px; display: grid; place-items: center; }
.mini-logo img { border-radius: 24%; box-shadow: 0 0 0 1px rgba(227,176,75,.35), 0 10px 30px rgba(0,0,0,.45); position: relative; }
.mini-logo .orbit { inset: -30%; }
.ifield { position: relative; display: flex; align-items: center; }
.ifield > .i { position: absolute; left: 14px; color: #8FA0C0; pointer-events: none; width: 20px; height: 20px; }
.ifield input { padding-left: 44px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 14px; min-height: 52px; transition: border-color .2s, background .2s; }
.ifield input::placeholder { color: #8090AE; }
.ifield input:focus { outline: none; border-color: var(--gold-bright); background: rgba(255,255,255,.12); }
.ifield:focus-within > .i { color: var(--gold-bright); }
.ifield .eye { position: absolute; right: 6px; width: 40px; height: 40px; border: 0; background: none; color: #8FA0C0; display: grid; place-items: center; border-radius: 50%; }
.ifield .eye.on { color: var(--gold-bright); }
.ifield:has(.eye) input { padding-right: 48px; }


/* ---- Sin destellos: cada paso es una capa con su propio fondo ---- */
.onb { padding-top: 0; overflow: hidden; }
.onb-step { position: absolute; inset: 0; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); }
.screen { overflow: hidden; }
html, body { background: #0E213E; }
.main, .chat-screen { background: var(--bg); }


/* ---- Botón de Google ---- */
.gbtn { position: relative; overflow: hidden; width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px;
  border-radius: 999px; border: 1px solid #DADCE0; background: #FFFFFF; color: #1F1F1F; font-weight: 700; font-size: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease; }
.gbtn-ico { width: 44px; height: 44px; border-radius: 50%; background: #F1F3F4; display: grid; place-items: center; flex: none; }
.gbtn-ico img { width: 22px; height: 22px; display: block; }
.gbtn-g { font-size: 1.25rem; font-weight: 800; color: #4285F4; font-family: Arial, sans-serif; }
.gbtn-txt { flex: 1; text-align: center; padding-right: 32px; }
.gbtn::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(227,176,75,.28), transparent); transform: skewX(-18deg); animation: gshine 1.6s ease .5s 1 both; }
@keyframes gshine { from { left: -60%; } to { left: 130%; } }
.gbtn:active:not(:disabled) { transform: scale(.98); border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(227,176,75,.45), 0 4px 14px rgba(0,0,0,.25); }
.gbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-bright), 0 8px 24px rgba(0,0,0,.28); }
.gbtn:disabled { cursor: default; }
.gbtn.loading .gbtn-ico { animation: gpulse 1s ease-in-out infinite; }
@keyframes gpulse { 50% { transform: scale(.88); opacity: .7; } }
.or { text-transform: none; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .gbtn::after, .gbtn.loading .gbtn-ico { animation: none; } }


/* ---- Órbitas del logo: más rápidas y una segunda invertida ---- */
.orbit { animation-duration: 6s; }
.orbit.rev { transform: rotate(18deg) scaleY(.42); animation: orbitRev 4.5s linear infinite; border-color: rgba(255,255,255,.22); }
.orbit.rev::after { left: auto; right: -4px; width: 8px; height: 8px; margin-top: -4px; background: #FFFFFF; box-shadow: 0 0 10px rgba(255,255,255,.9); }
@keyframes orbitRev { from { transform: rotate(18deg) scaleY(.42) rotate(0deg); } to { transform: rotate(18deg) scaleY(.42) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit.rev { animation: none; } }


/* ===== Bienvenida con Lingo ===== */
.onb-step.lingo-step { background: radial-gradient(120% 60% at 50% 0%, #1A3A6B 0%, #0E213E 55%, #081530 100%); color: #EEF2FA; }
.lingo-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.lingo-head img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(227,176,75,.4); }
.lingo-who { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.lingo-who > span { font-size: .8rem; color: #A9B6CF; display: inline-flex; align-items: center; gap: 6px; }
.online { width: 8px; height: 8px; border-radius: 50%; background: #6CC596; box-shadow: 0 0 8px #6CC596; display: inline-block; }
.lingo-manual { color: var(--gold-bright); font-size: .85rem; }
.lingo-chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.lmsg { max-width: 86%; display: flex; }
.lmsg .bubble { padding: 11px 15px; border-radius: 20px 20px 20px 6px; background: rgba(255,255,255,.1); color: #F2F5FB; line-height: 1.45; }
.lmsg.target .bubble { background: rgba(227,176,75,.16); border: 1px solid rgba(227,176,75,.4); font-size: 1.06rem; }
.lmsg.typing .bubble { display: flex; gap: 5px; align-items: center; min-height: 42px; }
.lmsg.typing .dot { background: #C9D2E4; }
.lmsg.you { align-self: flex-end; }
.lmsg.you .bubble { background: var(--gold-bright); color: #0E213E; font-weight: 700; border-radius: 20px 20px 6px 20px; }
.lingo-foot { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.lingo-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 40vh; overflow-y: auto; }
.lchip { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: 10px 14px; font-weight: 700; font-size: .92rem; min-height: 44px; text-align: left; }
.lchip:active { border-color: var(--gold-bright); background: rgba(227,176,75,.2); }
.lingo-compose { display: flex; gap: 8px; align-items: flex-end; }
.lingo-compose textarea { flex: 1; min-width: 0; resize: none; min-height: 48px; max-height: 120px; border-radius: 24px; padding: 12px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.lingo-compose textarea::placeholder { color: #8090AE; }
.lingo-compose textarea:focus { outline: none; border-color: var(--gold-bright); }
.lingo-compose .icon-btn.primary { width: 48px; height: 48px; background: var(--gold-bright); border-color: var(--gold-bright); color: #0E213E; }
.lingo-skip { align-self: center; color: #A9B6CF; font-weight: 400; font-size: .88rem; }
.lresult { align-self: stretch; margin-top: 6px; padding: 20px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(227,176,75,.45); display: flex; flex-direction: column; gap: 10px; text-align: center; box-shadow: 0 0 40px rgba(227,176,75,.12); }
.lresult .lbl { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #A9B6CF; font-weight: 700; }
.lresult .lv { font-size: 2rem; color: var(--gold-bright); line-height: 1.1; }
.lresult .lwhy { margin: 0; color: #D7DEEC; }
.ladjust { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; font-size: .85rem; color: #A9B6CF; }
.lpick { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 14px; }
.lpick button { border: 0; background: transparent; color: #C9D2E4; border-radius: 10px; padding: 9px 4px; font-weight: 700; font-size: .88rem; }
.lpick button[aria-pressed="true"] { background: #fff; color: #0E213E; }
.ldemo { margin: 4px 0 0; font-size: .8rem; color: #93A1BD; }


.lresult .lv { font-size: 2.6rem; letter-spacing: .02em; }
.lresult .lvname { margin-top: -6px; font-weight: 700; color: #fff; }
.lpick { grid-template-columns: repeat(6, minmax(0,1fr)); }


.lingo-links { display: flex; justify-content: center; gap: 18px; }
.ldetails { text-align: left; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.05); border-radius: 14px; padding: 12px 14px; }
.ldetails p { margin: 0; color: #D7DEEC; font-size: .92rem; }
.ldetails b { color: var(--gold-bright); }


/* ===== Compañeros animados ===== */
.av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.av svg { width: 100%; height: 100%; display: block; overflow: visible; }
.av-head-sm { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgba(227,176,75,.5); }
.av-msg { width: 30px; height: 30px; align-self: flex-end; margin-right: 8px; }
.av-big { width: 104px; height: 104px; }
.av-sm { width: 34px; height: 34px; }
.lmsg.ai { align-items: flex-end; }
.lmsg.ai.cont { padding-left: 38px; }
.av .av-eyes { transform-box: fill-box; transform-origin: center; animation: avBlink 4.2s infinite; }
.av .av-head, .av .av-head-back { animation: avBreath 3.4s ease-in-out infinite; }
.av .av-open { opacity: 0; }
.av.talking .av-smile { animation: avTalkA .32s steps(1) infinite; }
.av.talking .av-open { animation: avTalkB .32s steps(1) infinite; }
.buddy-card:hover .av .av-head, .buddy-card:focus-visible .av .av-head { animation-duration: 1.4s; }
@keyframes avBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes avBreath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes avTalkA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes avTalkB { 0% { opacity: 0; } 50% { opacity: 1; } }
.buddy-pick { align-self: stretch; display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 6px 0 4px; }
.buddy-q { margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff; }
.buddy-hint { margin: 0; font-size: .82rem; color: #93A1BD; }
.buddy-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.buddy-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; }
.buddy-card:not(:disabled):active { border-color: var(--gold-bright); background: rgba(227,176,75,.16); }
.buddy-card:disabled:not(.dim) { border-color: var(--gold-bright); background: rgba(227,176,75,.16); box-shadow: 0 0 24px rgba(227,176,75,.25); }
.buddy-card.dim { opacity: .35; }
.buddy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buddy-mini { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; text-align: left; white-space: nowrap; color: var(--ink, inherit); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: .9rem; }
.buddy-mini[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
@media (prefers-reduced-motion: reduce) { .av .av-eyes, .av .av-head, .av .av-head-back, .av.talking .av-smile, .av.talking .av-open { animation: none; } }


/* ===== Llamada por voz ===== */
.call-screen { background: radial-gradient(120% 70% at 50% 30%, #1C3A6B 0%, #0E213E 55%, #081529 100%); color: #fff; display: flex; flex-direction: column; }
.call-head { display: flex; align-items: center; gap: 8px; padding: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
.call-head .icon-btn { color: #fff; }
.call-title { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.call-title b { font-size: 1rem; }
.call-title span { font-size: .8rem; color: #93A1BD; font-variant-numeric: tabular-nums; }
.cc-btn { font-weight: 800; font-size: .78rem; letter-spacing: .04em; border: 1.5px solid rgba(255,255,255,.35) !important; border-radius: 8px !important; width: 38px !important; height: 30px !important; }
.cc-btn[aria-pressed="true"] { background: #fff !important; color: #0E213E !important; }
.call-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; min-height: 0; overflow: auto; }
.call-av { position: relative; width: min(64vw, 260px); aspect-ratio: 1; border: 0; padding: 0; background: none; border-radius: 50%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.call-av .av-call { position: absolute; inset: 0; width: 100%; height: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 4px rgba(227,176,75,.55); z-index: 2; }
.call-av .av-call .av-open { transform-box: fill-box; transform-origin: center; transition: transform .07s; }
.call-av .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(227,176,75,.6); opacity: 0; z-index: 1; }
.call-av[data-state="listening"] { transform: scale(1.04); }
.call-av[data-state="listening"] .ring { animation: callRing 2.1s cubic-bezier(.2,.6,.3,1) infinite; }
.call-av[data-state="listening"] .r2 { animation-delay: .7s; }
.call-av[data-state="listening"] .r3 { animation-delay: 1.4s; }
@keyframes callRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
.call-av[data-state="listening"] .av-head { animation: avBreath 3.4s ease-in-out infinite, avTilt 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes avTilt { 0%, 100% { rotate: 0deg; } 50% { rotate: -4deg; } }
.call-av[data-state="speaking"] .av-head { transform-box: fill-box; transform-origin: 50% 95%; animation: avNod 1.6s ease-in-out infinite; }
@keyframes avNod { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-1.5px) rotate(1.5deg); } 60% { transform: translateY(.5px) rotate(-1.2deg); } }
.call-av[data-state="speaking"] .av-body { transform-box: fill-box; transform-origin: 50% 100%; animation: avSway 2.4s ease-in-out infinite; }
@keyframes avSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.8deg); } }
.call-av[data-state="thinking"] .av-eyes { animation: none; transform: translate(1.2px, -1.5px); transition: transform .4s; }
.call-av .think { position: absolute; top: 2%; right: 2%; z-index: 3; display: flex; gap: 5px; padding: 9px 12px; background: #fff; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.3); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s cubic-bezier(.3,1.5,.5,1); }
.call-av .think i { width: 7px; height: 7px; border-radius: 50%; background: #1C3A6B; animation: dotBounce 1s infinite; }
.call-av .think i:nth-child(2) { animation-delay: .15s; } .call-av .think i:nth-child(3) { animation-delay: .3s; }
.call-av[data-state="thinking"] .think { opacity: 1; transform: scale(1); }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.call-name { font-size: 1.35rem; margin-top: 14px; }
.call-state { min-height: 1.2em; font-size: .9rem; color: #B9C4DA; text-align: center; }
.call-wave { display: flex; align-items: center; gap: 5px; height: 34px; opacity: 0; transition: opacity .3s; }
.call-wave i { width: 5px; height: 6px; border-radius: 3px; background: var(--gold-bright, #E3B04B); }
.call-screen[data-state="speaking"] .call-wave, .call-screen[data-state="listening"] .call-wave { opacity: 1; }
.call-screen[data-state="speaking"] .call-wave i { animation: wave .9s ease-in-out infinite; }
.call-screen[data-state="listening"] .call-wave i { background: #7FD1AE; animation: wave 1.4s ease-in-out infinite; }
.call-wave i:nth-child(2) { animation-delay: .12s !important; } .call-wave i:nth-child(3) { animation-delay: .3s !important; } .call-wave i:nth-child(4) { animation-delay: .05s !important; }
.call-wave i:nth-child(5) { animation-delay: .22s !important; } .call-wave i:nth-child(6) { animation-delay: .38s !important; } .call-wave i:nth-child(7) { animation-delay: .16s !important; }
@keyframes wave { 0%, 100% { height: 6px; } 50% { height: 30px; } }
.call-cc { width: 100%; max-width: 420px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.call-cc p { margin: 0; }
.cc-you { color: #9FE0C2; font-size: .88rem; }
.cc-you::before { content: "Tú: "; font-weight: 700; }
.cc-them { font-size: 1rem; font-weight: 600; }
.cc-tr { color: #B9C4DA; font-size: .86rem; }
.cc-fix { color: #F3CF83; font-size: .86rem; }
.call-hints { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.call-hints .hint { text-align: left; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.call-hints .hint small { color: #B9C4DA; font-weight: 400; }
.call-ctrl { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 18px 0 max(26px, env(safe-area-inset-bottom)); }
.cbtn { width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; transition: transform .2s, background .2s, box-shadow .3s; }
.cbtn:active { transform: scale(.92); }
.cbtn .i { width: 26px; height: 26px; }
.cbtn.mic { width: 78px; height: 78px; background: #fff; color: #0E213E; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cbtn.mic .i { width: 32px; height: 32px; }
.cbtn.mic.on { background: #7FD1AE; box-shadow: 0 0 0 10px rgba(127,209,174,.18), 0 0 0 20px rgba(127,209,174,.08); }
.cbtn.end { background: #E5484D; }
.cbtn.end .i { fill: #fff; stroke: none; }
@media (prefers-reduced-motion: reduce) { .call-av .ring, .call-av .av-head, .call-av .av-body, .call-wave i { animation: none !important; } }


/* ===== Llamada en vivo: silencio y repaso ===== */
.cbtn.mic.muted { background: rgba(255,255,255,.18); color: #fff; }
.cbtn.mic.muted::after { content: ""; position: absolute; width: 40px; height: 3px; background: #E5484D; border-radius: 2px; transform: rotate(-45deg); }
.cbtn.mic { position: relative; }
.call-screen.reviewing .call-stage, .call-screen.reviewing .call-ctrl, .call-screen.reviewing .cc-btn, .call-screen.reviewing #callTimer { display: none; }
.call-review { flex: 1; overflow: auto; padding: 16px 18px max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; }
.cr-card { width: 100%; max-width: 440px; margin: 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(227,176,75,.4); border-radius: 22px; padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.cr-title { font-size: 1.5rem; color: var(--gold-bright, #E3B04B); }
.cr-min { color: #93A1BD; font-size: .85rem; }
.cr-sum { margin: 0; font-size: 1rem; line-height: 1.45; }
.cr-sec { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cr-fix { background: rgba(0,0,0,.22); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cr-fix s { color: #F5A3A6; font-size: .88rem; }
.cr-fix b { color: #9FE0C2; }
.cr-fix span { color: #B9C4DA; font-size: .85rem; }
.cr-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cr-label { width: 100%; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #93A1BD; }


/* ===== Compañero en video (3D) ===== */
.call-av .bvid { display: none; }
.call-av.has-video { width: min(58vw, 240px); aspect-ratio: 480 / 864; border-radius: 0; }
.call-av.has-video .av-call, .call-av.has-video .ring { display: none; }
.call-av.has-video .bvid { display: block; position: absolute; inset: 0; z-index: 2; }
.bvid .bv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.bvid .bv.on { opacity: 1; }
.call-av.has-video[data-state="listening"] { transform: none; }
.call-av.has-video .think { top: 6%; right: -4%; }
.call-av.has-video::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 3%; height: 10px; border-radius: 50%; background: rgba(0,0,0,.25); filter: blur(4px); z-index: 1; }


.cr-buddy { width: 150px; aspect-ratio: 480 / 864; margin: -8px auto -6px; height: auto; }
.cr-buddy video { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ===== Bienvenida con el Élder y la Hermana ===== */
.duo { position: relative; width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; justify-items: center; margin-top: 8px; }
.duo-p { width: 100%; aspect-ratio: 480 / 864; max-height: 46vh; display: block; }
.duo-p:first-of-type { margin-right: -18%; }
.duo-p:last-of-type { margin-left: -18%; }
.duo-p video { width: 100%; height: 100%; object-fit: contain; display: block; }
.hello-bubble { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; background: #fff; color: #0E213E; padding: 6px 16px; border-radius: 999px; height: auto; font-size: 1.15rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.hello-bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.brand-logo { width: 40px; height: 40px; border-radius: 11px; vertical-align: -6px; margin-right: 10px; box-shadow: 0 0 0 1px rgba(227,176,75,.4); }
.welcome .welcome-stage { gap: 0; }

/* ===== Nivelación con el compañero en video ===== */
.lingo-step.has-video .lingo-head { padding-top: 6px; padding-bottom: 0; align-items: flex-end; }
.lingo-step.has-video #lingoAv { width: 86px; height: 104px; border-radius: 0; box-shadow: none; position: relative; overflow: hidden; flex: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
.lingo-step.has-video #lingoAv .bv { aspect-ratio: 480 / 864; opacity: 0; transition: opacity .3s; position: absolute; width: 170%; height: auto; right: auto; bottom: auto; left: -35%; top: -2%; object-fit: initial; }
.lingo-step.has-video .lingo-who { padding-bottom: 14px; }
.lingo-step.has-video .lingo-manual { margin-bottom: 14px; }
.lingo-step.has-video .av-msg { display: none; }
.lingo-step.has-video .lmsg.ai.cont { padding-left: 0; }
.buddy-vid { width: 100px; aspect-ratio: 480 / 864; display: block; }
.buddy-vid video { width: 100%; height: 100%; object-fit: contain; display: block; }

.lingo-step.has-video #lingoAv .bv.on { opacity: 1; }


/* ===== Elegir compañero con confirmación ===== */
.buddy-card.sel { border-color: var(--gold-bright); background: rgba(227,176,75,.16); box-shadow: 0 0 24px rgba(227,176,75,.25); }
.buddy-card.dim { opacity: .45; }
.buddy-go { margin-top: 4px; }
.buddy-go:disabled { opacity: .45; }
/* ===== Nivelación como llamada ===== */
.call-finish { padding: 10px 22px; border-radius: 999px; font-weight: 800; box-shadow: 0 8px 24px rgba(227,176,75,.3); }
.call-screen.placement #callHelp { visibility: hidden; }
.pl-q { margin: 0 0 4px; font-weight: 700; text-align: center; }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.call-screen.reviewing .call-finish { display: none; }
.pl-card .lresult { background: transparent; border: 0; padding: 0; box-shadow: none; }


/* ===================== Camino de aprendizaje ===================== */
.path { display: flex; flex-direction: column; align-items: center; padding: 6px 0 24px; }
.path-level { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 22px 4px 4px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.path-level::before, .path-level::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.path-level b { font-size: .95rem; color: var(--ink); letter-spacing: .04em; }
.path-unit { align-self: stretch; margin: 16px 0 14px; padding: 14px 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1C3A6B, #0E213E); box-shadow: 0 6px 18px rgba(14,33,62,.25); }
.path-unit.done { background: linear-gradient(135deg, #B8861F, #E3B04B); color: #0E213E; }
.path-unit small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.path-unit b { display: block; font-size: 1.08rem; margin: 2px 0; }
.path-unit span { font-size: .84rem; opacity: .85; line-height: 1.35; }
.path-row { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 6px 0; }
.path-row.cur { padding-top: 40px; }
.path-dots { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 2px 0; }
.path-dots i { width: 9px; height: 9px; border-radius: 50%; background: #CBD3E1; display: block; }
.path-dots.lit i { background: #E3B04B; box-shadow: 0 0 6px rgba(227,176,75,.5); }
.pn-label { margin-bottom: 2px; }
.path-node { position: relative; width: 68px; height: 64px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 1.6rem;
  background: #D9DFEA; color: #8D99B0; box-shadow: 0 6px 0 #B7C0D0; transition: transform .15s; }
.path-node.big { width: 80px; height: 74px; font-size: 1.9rem; }
.path-node.done { background: linear-gradient(180deg, #F1C468, #E3B04B); color: #0E213E; box-shadow: 0 6px 0 #B8861F; font-weight: 900; }
.path-node.current { background: linear-gradient(180deg, #2A5196, #1C3A6B); color: #fff; box-shadow: 0 6px 0 #0E213E, 0 0 0 6px rgba(227,176,75,.35); animation: pnPulse 2s ease-in-out infinite; }
.path-node.locked .pn-ico { filter: grayscale(1); opacity: .55; }
.path-node:active { translate: 0 4px; box-shadow: none; }
@keyframes pnPulse { 0%, 100% { box-shadow: 0 6px 0 #0E213E, 0 0 0 6px rgba(227,176,75,.35); } 50% { box-shadow: 0 6px 0 #0E213E, 0 0 0 12px rgba(227,176,75,.12); } }
.pn-tip { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: #fff; color: #1C3A6B; font-size: .72rem; font-weight: 900; letter-spacing: .06em; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); white-space: nowrap; animation: pnBob 1.6s ease-in-out infinite; }
.pn-tip::after { content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
@keyframes pnBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.pn-label { font-size: .74rem; color: var(--muted); margin-top: 10px; font-weight: 600; }
.path-buddy { position: absolute; top: -40px; width: 74px; aspect-ratio: 480 / 864; pointer-events: none; z-index: 1; }
.path-buddy video { width: 100%; height: 100%; object-fit: contain; display: block; }
.free-practice { margin: 8px 0 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 4px 14px; }
.free-practice summary { cursor: pointer; padding: 12px 0; font-weight: 700; list-style: none; }
.free-practice summary::-webkit-details-marker { display: none; }

/* ===================== Lecciones ===================== */
.lesson-screen { background: var(--bg); display: flex; flex-direction: column; }
.ls-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); flex-wrap: wrap; }
.ls-progress { flex: 1; height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ls-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #E3B04B, #F1C468); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.ls-title { width: 100%; text-align: center; font-size: .8rem; color: var(--muted); font-weight: 700; }
.ls-body { flex: 1; overflow-y: auto; padding: 8px 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.ls-foot { padding: 12px 18px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.ls-foot:empty { display: none; }
.ls-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 14px rgba(14,33,62,.06); }
.ls-card h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.ls-kicker { color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: .72rem; }
.ls-big { font-size: 1.8rem !important; }
.ls-mean { margin: 0; font-size: 1.05rem; color: var(--muted); }
.ls-ex { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: var(--bg); border-radius: 14px; padding: 10px 12px; align-items: center; }
.ls-ex b { grid-column: 1; } .ls-ex span { grid-column: 1; color: var(--muted); font-size: .9rem; } .ls-ex .ls-say { grid-column: 2; grid-row: 1 / span 2; }
.ls-say { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; border: 0; background: var(--gold-soft); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.ls-opts { display: grid; gap: 10px; }
.ls-opt { text-align: left; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); font-size: 1rem; font-weight: 600; box-shadow: 0 3px 0 var(--line); }
.ls-opt.ok { border-color: #3FAF77; background: #E6F7EE; color: #1C6E46; box-shadow: 0 3px 0 #3FAF77; }
.ls-opt.bad { border-color: #E5484D; background: #FDECEC; color: #A3262A; box-shadow: 0 3px 0 #E5484D; animation: shake .35s; }
@keyframes shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.ls-ans { min-height: 56px; border-bottom: 2px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.ls-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 8px; }
.ls-tile { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; box-shadow: 0 3px 0 var(--line); }
.ls-fb { border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ls-fb.ok { background: #E6F7EE; color: #1C6E46; } .ls-fb.bad { background: #FDECEC; color: #A3262A; } .ls-fb.near { background: var(--gold-soft); color: #7A5A12; }
.ls-input { width: 100%; border: 2px solid var(--line); border-radius: 14px; padding: 12px; font: inherit; font-size: 1.05rem; resize: vertical; background: var(--surface); color: var(--ink); }
.ls-input:focus { outline: none; border-color: var(--gold-bright); }
.ls-count { align-self: flex-end; font-size: .8rem; color: var(--muted); font-weight: 700; } .ls-count.ok { color: #3FAF77; }
.ls-text { font-size: 1.08rem; line-height: 1.7; }
.ls-text .gl { border: 0; background: none; padding: 0; font: inherit; color: inherit; border-bottom: 2px dotted var(--gold-bright); }
.ls-gloss { background: var(--gold-soft); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ls-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; flex: 1; }
.ls-done h2 { margin: 0; font-size: 1.6rem; color: var(--gold); }
.ls-score { font-weight: 800; font-size: 1.1rem; margin: 0; }
.ls-buddy { display: block; aspect-ratio: 480 / 864; }
.ls-buddy video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ls-buddy.sm { width: 58px; flex: none; } .ls-buddy.md { width: 120px; } .ls-buddy.lg { width: 170px; }
.ls-talk { display: flex; align-items: flex-end; gap: 6px; }
.ls-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; padding: 10px 14px; font-weight: 600; margin-bottom: 18px; }
.ls-wres { align-items: stretch; }
.ls-meter { height: 12px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.ls-meter::after { content: ""; position: absolute; inset: 0; width: var(--p); background: linear-gradient(90deg, #E3B04B, #3FAF77); border-radius: 999px; }
.ls-pts { font-size: 1.4rem; text-align: center; }
.ls-wres .cr-fix { background: var(--bg); }
.ls-wres .cr-fix s { color: #C2373C; } .ls-wres .cr-fix b { color: #1C6E46; } .ls-wres .cr-fix span { color: var(--muted); }
.ls-impr summary { font-weight: 700; cursor: pointer; padding: 6px 0; }


/* ===== Interruptor ===== */
.field.switch-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.field.switch-row > span { align-items: flex-start; display: flex; flex-direction: column; gap: 2px; }
button.switch { flex: none; width: 52px; height: 30px; border-radius: 999px; border: 0; background: var(--line); position: relative; transition: background .2s; }
button.switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
button.switch[aria-checked="true"] { background: #3FAF77; }
button.switch[aria-checked="true"] i { transform: translateX(22px); }


/* ===== Video en loop sin cortes ===== */
.vloop { position: relative; display: block; width: 100%; height: 100%; }
.vloop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.vloop video.off, .vloop video.wait { opacity: 0; }

/* ===== Movimiento y toque ===== */
button { transition: transform .15s ease, background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
button:active:not(:disabled) { transform: scale(.97); }
.scen-card:active, .lang-opt:active, .choice:active { transform: scale(.98); }
.tabbar button .i { transition: transform .25s cubic-bezier(.22,.9,.24,1); }
.tabbar button[aria-current="page"] .i { transform: translateY(-2px) scale(1.08); }
.bar span { transition: width .8s cubic-bezier(.22,.9,.24,1); }
.thinking .bubble { display: flex; gap: 5px; align-items: center; min-height: 44px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite ease-in-out; }
.dot:nth-child(2) { animation-delay: .15s; } .dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.toast { animation: toastIn .35s cubic-bezier(.22,.9,.24,1); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.screen { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { button, .tabbar button .i, .bar span { transition: none; } .dot, .toast { animation: none; } button:active:not(:disabled) { transform: none; } }

/* ===== Planes ===== */
.plans-screen[hidden] { display: none !important; }
.plans-screen { display: block; background: radial-gradient(120% 60% at 50% 0%, #1C3A6B 0%, #0E213E 55%, #081529 100%); color: #fff; overflow-y: auto !important; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
.pl-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 1rem; z-index: 2; }
.plan-hero { display: flex; align-items: flex-end; gap: 4px; margin: 0 0 12px; }
.plan-buddy { width: 140px; height: 220px; flex: none; margin-left: -8px; }
.plan-buddy .vloop video { object-fit: contain; }
.plan-hero .hero-txt { flex: 1; padding-bottom: 16px; min-width: 0; }
.plan-hero h1 { font-size: 1.45rem; line-height: 1.15; margin: 0 0 10px; color: #fff; }
.bubble-say { position: relative; background: #fff; color: #0E213E; border-radius: 18px 18px 18px 6px; padding: 10px 13px; font-size: .9rem; font-weight: 600; line-height: 1.3; box-shadow: 0 8px 22px rgba(0,0,0,.3); min-height: 3.6em; display: flex; align-items: center; }
.bubble-say::before { content: ""; position: absolute; left: -7px; bottom: 8px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.bubble-say span { transition: opacity .25s, transform .25s; }
.bubble-say span.out { opacity: 0; transform: translateY(4px); }
.bubble-say b { color: #B8862B; }
.plan-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px; margin: 4px 0 18px; }
.plan-tabs button { border: 0; background: transparent; font: inherit; font-size: .78rem; font-weight: 700; padding: 9px 0; border-radius: 999px; color: #B9C4DA; position: relative; transition: background .25s, color .25s; }
.plan-tabs button.on { background: #fff; color: #0E213E; }
.plan-tabs small { position: absolute; top: -9px; right: 0; background: #7FD1AE; color: #0E213E; font-size: .6rem; padding: 1px 5px; border-radius: 6px; }
.plan-card { border-radius: 22px; padding: 16px 16px 14px; margin-bottom: 14px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); position: relative; animation: planIn .4s cubic-bezier(.22,.9,.24,1) both; }
.plan-card:nth-child(2) { animation-delay: .06s; } .plan-card:nth-child(3) { animation-delay: .12s; }
@keyframes planIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.plan-card.star { background: linear-gradient(160deg, rgba(227,176,75,.22), rgba(227,176,75,.06)); border-color: #E3B04B; box-shadow: 0 10px 30px rgba(227,176,75,.18); }
.plan-card .badge { position: absolute; top: -11px; left: 16px; background: #E3B04B; color: #0E213E; font-weight: 800; font-size: .68rem; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.plan-card .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.plan-card .row > div:first-child { min-width: 0; }
.plan-card .name { font-size: 1.15rem; font-weight: 800; }
.plan-card .who { color: #B9C4DA; font-size: .8rem; margin-top: 2px; }
.plan-card .price { text-align: right; white-space: nowrap; flex: none; }
.plan-card .price b { font-size: 1.6rem; }
.plan-card .price > span { color: #B9C4DA; font-size: .78rem; }
.plan-card .price .eq { display: block; color: #7FD1AE; font-size: .74rem; font-weight: 700; margin-top: 2px; }
.plan-card .price .save { display: block; color: #E3B04B; font-size: .7rem; font-weight: 700; }
.plan-card .mins { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; background: rgba(0,0,0,.25); border-radius: 14px; padding: 10px 12px; }
.plan-card .mins .big { font-size: 1.7rem; font-weight: 800; color: #E3B04B; line-height: 1; }
.plan-card .mins .lbl { font-size: .82rem; line-height: 1.25; }
.plan-card .mins .lbl i { display: block; color: #93A1BD; font-style: normal; font-size: .72rem; }
.plan-card .bar { flex: 1; height: 8px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.plan-card .bar i { display: block; height: 100%; background: #E3B04B; border-radius: 4px; }
.plan-card ul { list-style: none; display: grid; gap: 5px; font-size: .84rem; padding: 0; margin: 0 0 12px; }
.plan-card li::before { content: "✓"; color: #7FD1AE; font-weight: 800; margin-right: 7px; }
.plan-card li.no { color: #6F7E9C; } .plan-card li.no::before { content: "–"; color: #6F7E9C; }
.plan-free { text-align: center; color: #B9C4DA; font-size: .8rem; margin: 4px 0 10px; line-height: 1.5; }
.plan-free b { color: #fff; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-row b { display: block; }

/* ===== Pantalla principal en azul marino (igual que la bienvenida) ===== */
.main {
  --bg: #0E213E; --surface: #15294D; --surface-2: #1C3562; --ink: #EEF2F9; --muted: #A9B6CE; --line: #27406D;
  --accent: #E3B04B; --accent-ink: #0E213E; --gold: #E3B04B; --gold-soft: #2A2a1E; --green: #7FD1AE;
  --you: #E3B04B; --you-ink: #0E213E; --warn: #F2C27A; --danger: #FF8A80;
  color-scheme: dark;
  background: radial-gradient(120% 55% at 50% 0%, #1C3A6B 0%, #0E213E 60%, #0A1A33 100%);
  color: var(--ink);
}
.main .tab-page { background: transparent; }
.main .tabbar { z-index: 6; background: rgba(9,22,44,.96); border-top-color: #1F3762; backdrop-filter: blur(8px); }
.main .tabbar button[aria-current="page"] { color: #E3B04B; }
/* camino */
.main .path-node { background: #1D3561; color: #7F8FB0; box-shadow: 0 6px 0 #11234A; }
.main .path-node.locked .pn-ico { opacity: .45; }
.main .path-node.done { background: linear-gradient(180deg, #9BE3C3, #6FC9A2); color: #0E213E; box-shadow: 0 6px 0 #3E9874; }
.main .path-node.current { background: linear-gradient(180deg, #F4CB72, #E3B04B); color: #0E213E; box-shadow: 0 6px 0 #A9791A, 0 0 0 6px rgba(227,176,75,.28); animation: pnPulseN 2s ease-in-out infinite; }
@keyframes pnPulseN { 0%, 100% { box-shadow: 0 6px 0 #A9791A, 0 0 0 6px rgba(227,176,75,.28); } 50% { box-shadow: 0 6px 0 #A9791A, 0 0 0 14px rgba(227,176,75,.08); } }
.main .path-dots i { background: #25406F; }
.main .path-dots.lit i { background: #7FD1AE; box-shadow: 0 0 8px rgba(127,209,174,.55); }
.main .pn-label { color: #C9D3E6; }
.main .pn-tip { background: #fff; color: #0E213E; border-color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.main .path-unit { background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); border-left: 4px solid #E3B04B; box-shadow: 0 8px 22px rgba(0,0,0,.25); color: #fff; }
.main .path-unit.done { background: linear-gradient(135deg, rgba(127,209,174,.22), rgba(127,209,174,.06)); border-left-color: #7FD1AE; color: #fff; }
.main .path-unit small { color: #E3B04B; opacity: 1; }
.main .path-unit.done small { color: #7FD1AE; }
.main .path-level::before, .main .path-level::after { background: #27406D; }
/* órbitas girando en la tarjeta de racha (igual que el logo) */
.main .streak-card::after { display: none; }
.main .streak-card > *:not(.sc-orbits) { position: relative; z-index: 1; }
.sc-orbits { position: absolute; right: -30px; top: -58px; width: 190px; height: 190px; pointer-events: none; z-index: 0; }
.sc-orbits .orbit { inset: 0; }
.sc-orbits .orbit.rev { inset: 14%; }
/* compañero del camino: video + globito de lo que dice */
.path-buddy .pb-vid { position: absolute; inset: 0; display: block; }
.path-buddy .pb-vid .vloop { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.path-buddy .pb-vid .vloop.on { opacity: 1; }
.pb-say { position: absolute; bottom: calc(100% + 4px); left: 50%; width: max-content; max-width: 150px; background: #fff; color: #0E213E; font-size: .78rem; font-weight: 700; line-height: 1.25; text-align: center; padding: 7px 10px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.35); opacity: 0; transform: translate(-50%, 6px) scale(.92); transition: opacity .22s, transform .22s cubic-bezier(.22,.9,.24,1.2); }
.pb-say::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.pb-say.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pb-say b { color: #B8862B; }
.main .tab-page { overflow-x: hidden; }

/* ===== Barra de 4 pestañas ===== */
.tabbar { grid-template-columns: repeat(4, 1fr); }
/* ===== Encabezado de Inicio ===== */
.home-title-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; color: inherit; font: inherit; }
.home-title-btn .i { color: var(--muted); }
.voice-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(227,176,75,.12); border: 1px solid rgba(227,176,75,.45); color: #F3CF83; font-size: .82rem; margin-bottom: 4px; }
.voice-badge b { font-size: 1.05rem; color: #fff; }
.voice-badge span { color: #C9D3E6; font-size: .74rem; }
/* encabezado mini fijo */
.home-mini { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 10px; background: rgba(12,28,54,.94); backdrop-filter: blur(10px); border-bottom: 1px solid #22396A; box-shadow: 0 6px 18px rgba(0,0,0,.3); transform: translateY(-110%); transition: transform .28s cubic-bezier(.22,.9,.24,1); pointer-events: none; }
.home-mini.show { transform: none; }
.home-mini .hm-st, .home-mini .hm-voice { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #fff; white-space: nowrap; }
.home-mini .flame { color: #E3B04B; }
.home-mini .hm-voice { color: #F3CF83; font-size: .85rem; }
.home-mini .hm-voice b { color: #fff; }
.home-mini .hm-goal { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-mini .hm-goal small { font-size: .68rem; color: #A9B6CE; }
.home-mini .hm-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.home-mini .hm-bar i { display: block; height: 100%; background: #E3B04B; border-radius: 3px; transition: width .4s; }
/* ===== Practicar ===== */
.practice-hero { display: flex; align-items: flex-end; gap: 6px; padding: 0 14px 0 0; border-radius: 20px; background: linear-gradient(135deg, rgba(227,176,75,.16), rgba(255,255,255,.04)); border: 1px solid rgba(227,176,75,.35); overflow: hidden; min-height: 128px; }
.ph-buddy { width: 84px; height: 140px; flex: none; position: relative; margin-bottom: -6px; }
.ph-buddy .vloop { position: absolute; inset: 0; }
.ph-txt { flex: 1; padding: 16px 0; display: flex; flex-direction: column; gap: 4px; align-self: center; }
.ph-txt b { font-size: 1.05rem; color: #fff; }
.ph-txt span { font-size: .84rem; color: #C9D3E6; }
/* ===== Jefe final ===== */
.path-node.boss { width: 96px; height: 96px; padding: 0; overflow: visible; }
.path-node.boss .pn-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 4px solid #E3B04B; box-shadow: 0 0 0 4px rgba(227,176,75,.25), 0 0 26px rgba(227,176,75,.45); }
.main .path-node.boss.locked { background: none; box-shadow: none; }
.main .path-node.boss.locked .pn-face { filter: saturate(.55) brightness(.75); border-color: #B8862B; animation: bossGlow 2.6s ease-in-out infinite; }
.main .path-node.boss.done { background: none; box-shadow: none; }
.main .path-node.boss.done .pn-face { border-color: #7FD1AE; box-shadow: 0 0 0 4px rgba(127,209,174,.25); }
.main .path-node.boss.current { background: none; box-shadow: none; animation: none; }
.main .path-node.boss.current .pn-face { animation: bossGlow 1.8s ease-in-out infinite; }
@keyframes bossGlow { 0%, 100% { box-shadow: 0 0 0 4px rgba(227,176,75,.25), 0 0 18px rgba(227,176,75,.35); } 50% { box-shadow: 0 0 0 9px rgba(227,176,75,.12), 0 0 34px rgba(227,176,75,.6); } }
.pn-boss { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #F4CB72, #E3B04B); color: #0E213E; font-size: .7rem; font-weight: 900; padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.path-node.boss.done .pn-boss { background: #7FD1AE; }
.pn-check { position: absolute; right: -2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; background: #7FD1AE; color: #0E213E; font-weight: 900; font-size: .95rem; display: grid; place-items: center; border: 3px solid #0E213E; }
.path-row.r-boss { padding-top: 34px; }
/* ===== Perfil: estadísticas ===== */
.stats-card { border-radius: 20px; padding: 14px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--line); }
.stats-title { display: block; font-size: 1rem; margin: 0 0 10px 2px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.stat .st-ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; background: rgba(227,176,75,.14); }
.stat > span:last-child { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.stat b { font-size: 1.2rem; line-height: 1.15; white-space: nowrap; }
.stat small { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; }
.st-bar i { display: block; height: 100%; background: #7FD1AE; border-radius: 3px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { min-width: 0; }
.field-row input, .field-row select { width: 100%; min-width: 0; }
/* Situación real: escena actuada (un paso antes del jefe final) */
.main .path-node.scene.locked { background: linear-gradient(180deg, #2B4A86, #213C70); box-shadow: 0 6px 0 #142A55, 0 0 0 4px rgba(127,170,255,.18); }
.main .path-node.scene.locked .pn-ico { opacity: .8; filter: none; }
.pn-scene { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #DCE7FF; color: #0E213E; font-size: .68rem; font-weight: 900; padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.path-node.scene.done .pn-scene { background: #7FD1AE; }
.path-row.r-scene { padding-top: 34px; }
/* unidades de la ruta misional */
.main .path-unit.mission { border-left-color: #9DB8FF; background: linear-gradient(135deg, rgba(157,184,255,.16), rgba(255,255,255,.03)); }
.main .path-unit.mission small { color: #B9CCFF; }
.pu-pme { display: inline-block; margin-top: 8px; font-style: normal; font-size: .72rem; font-weight: 700; color: #DCE7FF; background: rgba(157,184,255,.18); border: 1px solid rgba(157,184,255,.35); padding: 3px 9px; border-radius: 999px; }
.main .path-unit.mission.done { border-left-color: #7FD1AE; }
.path-row.cur.first { padding-top: 92px; }
.pu-pme { display: table; }
.path-row.cur.first .path-buddy { top: 46px; }
/* pronunciación fácil */
.ls-pron { margin: 4px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lp-say { display: inline-flex; align-items: baseline; gap: 8px; background: var(--gold-soft, #FBF1DA); border: 1px dashed var(--gold, #B8861F); padding: 6px 12px; border-radius: 12px; }
.lp-say small { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lp-say b { font-size: 1.15rem; letter-spacing: .02em; }
.lp-tip { margin: 0; font-size: .88rem; color: var(--ink); background: var(--surface-2); padding: 8px 12px; border-radius: 12px; text-align: left; line-height: 1.35; }
.ls-phrase { text-align: left; }
.ls-phrase > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-say-inline { font-size: .82rem; color: var(--gold, #B8861F); font-weight: 700; }
.ls-phrase .lp-tip { padding: 4px 8px; font-size: .8rem; margin-top: 2px; }
.ls-good { margin: 0; font-size: .95rem; }
.ls-miss { margin: 0; font-size: .95rem; background: rgba(227,176,75,.14); border-left: 4px solid #E3B04B; padding: 10px 12px; border-radius: 10px; text-align: left; }
.ls-later { margin-top: 6px; color: var(--muted) !important; }
/* aviso de la ruta misional */
.route-banner { align-self: stretch; display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; padding: 10px 14px; border-radius: 14px; background: rgba(157,184,255,.12); border: 1px solid rgba(157,184,255,.35); }
.route-banner b { color: #DCE7FF; font-size: .92rem; }
.route-banner span { color: #B9C6E3; font-size: .78rem; line-height: 1.35; }

/* ===== Lecciones y chat también en azul marino ===== */
.lesson-screen, .chat-screen {
  --bg: #0E213E; --surface: #15294D; --surface-2: #1C3562; --ink: #EEF2F9; --muted: #A9B6CE; --line: #27406D;
  --accent: #E3B04B; --accent-ink: #0E213E; --gold: #E3B04B; --gold-soft: rgba(227,176,75,.14); --green: #7FD1AE;
  --you: #E3B04B; --you-ink: #0E213E; --warn: #F2C27A; --danger: #FF8A80;
  color-scheme: dark; color: var(--ink);
  background: radial-gradient(120% 55% at 50% 0%, #1C3A6B 0%, #0E213E 60%, #0A1A33 100%);
}
.lesson-screen .ls-card { background: var(--surface); border-color: var(--line); color: var(--ink); }
.lesson-screen .ls-opt.ok { border-color: #7FD1AE; background: rgba(127,209,174,.16); color: #BDF0D6; box-shadow: 0 3px 0 #3E9874; }
.lesson-screen .ls-opt.bad { border-color: #F2A97A; background: rgba(242,169,122,.14); color: #FFD9C2; box-shadow: 0 3px 0 #B86E45; }
.lesson-screen .ls-fb.ok { background: rgba(127,209,174,.16); color: #BDF0D6; }
.lesson-screen .ls-fb.bad { background: rgba(242,169,122,.14); color: #FFD9C2; }
.lesson-screen .ls-fb.near { background: rgba(227,176,75,.14); color: #F3CF83; }
.lesson-screen .lp-say { background: rgba(227,176,75,.12); border-color: rgba(227,176,75,.6); }
.lesson-screen .ls-done h2 { color: #F3CF83; }
.lesson-screen .ls-ex { background: rgba(255,255,255,.05); }
/* elegir cómo hacer la lección: con el maestro o en modo silencioso */
.lchoose { position: fixed; inset: 0; z-index: 40; background: rgba(5,12,26,.6); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.lchoose-card { width: 100%; max-width: 560px; background: #12264A; color: #EEF2F9; border-radius: 26px 26px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #2A4677; box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
.lc-head { display: flex; align-items: flex-end; gap: 10px; }
.lc-head .ls-buddy { width: 64px; height: 92px; flex: none; }
.lc-head > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.lc-head b { font-size: 1.2rem; }
.lc-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 18px; border: 1.5px solid #2A4677; background: rgba(255,255,255,.05); color: #EEF2F9; }
.lc-opt.gold { border-color: #E3B04B; background: linear-gradient(135deg, rgba(227,176,75,.2), rgba(227,176,75,.06)); }
.lc-opt .lc-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: rgba(255,255,255,.08); }
.lc-opt > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.lc-opt b { font-size: 1.02rem; }
.lc-opt small { color: #A9B6CE; font-size: .8rem; }
.lc-cancel { border: 0; background: none; color: #A9B6CE; padding: 10px; font-weight: 700; }
/* ritmo */
.week-top { margin-top: 10px; font-size: .82rem; }
.bar.week span { background: #7FD1AE; }
.pace-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pace-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line, #27406D); background: var(--surface, rgba(255,255,255,.05)); color: inherit; }
.pace-card[aria-pressed="true"] { border-color: #E3B04B; background: linear-gradient(135deg, rgba(227,176,75,.2), rgba(227,176,75,.05)); }
.pace-card .pc-ico { font-size: 1.5rem; width: 40px; text-align: center; flex: none; }
.pace-card > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.pace-card small { color: var(--muted, #A9B6CE); font-size: .8rem; }
.pace-card em { font-style: normal; font-size: .72rem; font-weight: 700; color: #F3CF83; }
.lpace { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-top: 6px; }
.lpace > span { font-size: .9rem; font-weight: 700; }
.lpace .pace-card { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
.lpace .pace-card[aria-pressed="true"] { border-color: #E3B04B; background: linear-gradient(135deg, rgba(227,176,75,.22), rgba(227,176,75,.06)); }
.lpace .pace-card small { color: #B9C4DA; }
/* clase grabada con el maestro */
.cls-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 100%; padding-bottom: 10px; }
.cls-teacher { position: relative; width: 150px; height: 250px; flex: none; }
.cls-teacher .vloop { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.cls-teacher .vloop.on { opacity: 1; }
.cls-cap { width: 100%; text-align: center; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); min-height: 74px; justify-content: center; }
.cls-cap b { font-size: 1.35rem; line-height: 1.25; }
.cls-cap span { color: var(--muted); font-size: .95rem; }
.cls-act { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cls-mic { width: 96px; height: 96px; border-radius: 50%; border: 0; background: linear-gradient(180deg, #F4CB72, #E3B04B); color: #0E213E; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 8px 24px rgba(227,176,75,.35); font-weight: 800; }
.cls-mic span { font-size: 1.8rem; line-height: 1; }
.cls-mic small { font-size: .66rem; }
.cls-mic.on { animation: micPulse 1.2s ease-in-out infinite; background: linear-gradient(180deg, #9BE3C3, #6FC9A2); }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(127,209,174,.5); } 50% { box-shadow: 0 0 0 16px rgba(127,209,174,0); } }
.cls-heard { margin: 0; font-size: .9rem; color: var(--muted); text-align: center; }
.cls-act .ls-opts { width: 100%; }
/* clase: maestro más grande, texto más chico, todo al centro de la pantalla */
.cls-stage { justify-content: center; gap: 10px; min-height: calc(100% - 8px); }
.cls-teacher { width: 200px; height: 340px; }
.cls-cap { padding: 10px 14px; min-height: 0; max-width: 340px; }
.cls-cap b { font-size: 1.08rem; }
.cls-cap span { font-size: .85rem; }
.cls-cap .lp-say-inline { font-size: .78rem; }
.cls-cap .lp-tip { font-size: .78rem; padding: 6px 10px; }
.cls-mic { width: 78px; height: 78px; }
.cls-mic span { font-size: 1.5rem; }
.cls-teacher { width: 220px; height: 370px; }
.lp-tip.hot { background: rgba(227,176,75,.18); border: 1px solid rgba(227,176,75,.55); color: #FBE3AE; }

/* ===== Fluidez: solo animamos cosas que el teléfono mueve sin esfuerzo (transform y opacity) ===== */
.main .tabbar, .home-mini, .lchoose { backdrop-filter: none; -webkit-backdrop-filter: none; }
.main .tabbar { background: #0B1A33; }
.home-mini { background: #0C1C36; }
.lchoose { background: rgba(5,12,26,.72); }
.main .tab-page, .ls-body, .plans-screen { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.main .path-row, .path-dots { contain: layout; }
/* el pulso de la lección actual y del jefe final: un anillo que crece (sin repintar sombras) */
.main .path-node.current { animation: none; box-shadow: 0 6px 0 #A9791A, 0 0 0 6px rgba(227,176,75,.28); }
.main .path-node.current::after, .main .path-node.boss.current .pn-face + *::after { content: none; }
.main .path-node.current::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(227,176,75,.55); animation: ringOut 2s ease-out infinite; pointer-events: none; will-change: transform, opacity; }
@keyframes ringOut { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
.main .path-node.boss.locked .pn-face, .main .path-node.boss.current .pn-face { animation: none; }
.main .path-node.boss.locked::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgba(227,176,75,.4); animation: ringOut 2.6s ease-out infinite; pointer-events: none; }
.cls-mic.on { animation: none; }
.cls-mic.on::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgba(127,209,174,.7); animation: ringOut 1.2s ease-out infinite; }
.cls-mic { position: relative; }
.cls-mic.wait { opacity: .55; pointer-events: none; }
.toast.long { white-space: normal; border-radius: 16px; text-align: center; line-height: 1.35; font-size: .84rem; width: calc(100% - 32px); }

/* ===== MCER: examen oral, resultado, perfil y certificado ===== */
.path-exam { align-self: stretch; display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; padding: 16px; border-radius: 22px; text-align: left; color: #fff; border: 2px solid rgba(227,176,75,.55); background: linear-gradient(135deg, #1C3A6B, #0B1C36); box-shadow: 0 10px 28px rgba(0,0,0,.28); font: inherit; cursor: pointer; transition: transform .2s ease; }
.path-exam:active { transform: scale(.98); }
.path-exam.locked { opacity: .62; border-style: dashed; }
.path-exam.current { border-color: #E3B04B; box-shadow: 0 0 0 4px rgba(227,176,75,.18), 0 10px 28px rgba(0,0,0,.3); }
.path-exam.done { background: linear-gradient(135deg, #B8861F, #E3B04B); color: #0E213E; border-color: #F3CF83; }
.pe-ico { font-size: 2.1rem; flex: none; }
.pe-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-tx small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 800; }
.pe-tx b { font-size: 1.08rem; }
.pe-tx span { font-size: .82rem; opacity: .9; }
.pe-go { flex: none; background: #E3B04B; color: #0E213E; font-weight: 800; font-size: .74rem; padding: 7px 11px; border-radius: 999px; letter-spacing: .04em; }

.mc-intro { max-height: 92vh; overflow-y: auto; }
.mc-global { margin: 0; font-size: .86rem; color: #B9C4DA; line-height: 1.45; }
.mc-parts { display: grid; gap: 6px; }
.mc-part { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.05); border-radius: 14px; padding: 8px 10px; }
.mc-part b { display: block; font-size: .9rem; } .mc-part small { color: #B9C4DA; font-size: .78rem; }
.mc-pn { width: 26px; height: 26px; border-radius: 50%; background: #E3B04B; color: #0E213E; font-weight: 800; display: grid; place-items: center; flex: none; font-size: .85rem; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-chip { font-size: .76rem; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.mc-tips { margin: 0; font-size: .82rem; background: rgba(227,176,75,.12); border-radius: 12px; padding: 10px 12px; line-height: 1.45; }

.mc-result { text-align: center; }
.mc-sum { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.mc-sum b { font-size: 2.6rem; color: #F3CF83; line-height: 1; }
.mc-sum span { color: #B9C4DA; font-weight: 700; }
.mc-crit { display: grid; gap: 8px; width: 100%; text-align: left; }
.mc-row { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px 12px; }
.mc-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mc-row-top b { font-size: .92rem; }
.mc-bname { color: #B9C4DA; font-size: .74rem; }
.mc-fb { margin: 4px 0 0; font-size: .84rem; }
.mc-ev { display: block; margin-top: 4px; font-size: .8rem; color: #9FB0CF; font-style: italic; }
.mc-band { display: inline-flex; gap: 3px; flex: none; }
.mc-band i { width: 16px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); }
.mc-band i.on { background: #E3B04B; }
.mc-band.b1 i.on, .mc-band.b2 i.on { background: #F2A97A; }
.mc-band.b4 i.on, .mc-band.b5 i.on { background: #7FD1AE; }
.mc-pscore { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.mc-ps { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 8px 10px; }
.mc-ps small { font-size: .76rem; }
.mc-rule { display: block; color: #8EA0C2; font-size: .72rem; line-height: 1.4; }
.mc-unit { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: inherit; font: inherit; }
.mc-unit small { color: #B9C4DA; font-size: .78rem; }
.mc-lvgrid { display: grid; gap: 6px; width: 100%; }
.mc-lvrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; text-align: left; }
.mc-lvscale { display: inline-flex; gap: 3px; }
.mc-lvscale i { font-style: normal; font-size: .66rem; font-weight: 800; padding: 3px 5px; border-radius: 6px; background: rgba(255,255,255,.08); color: #6F7E9C; }
.mc-lvscale i.on { background: #E3B04B; color: #0E213E; }

.mcer-box { display: grid; gap: 12px; }
.mc-card { border-radius: 20px; padding: 14px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--line); display: grid; gap: 10px; }
.mc-card.due { border-color: rgba(227,176,75,.7); box-shadow: 0 0 0 3px rgba(227,176,75,.12); }
.mc-top { display: flex; align-items: center; gap: 12px; }
.mc-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-seal { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; background: #0E213E; color: #fff; box-shadow: inset 0 0 0 3px #E3B04B; }
.mc-seal.sm { width: 40px; height: 40px; font-size: .95rem; }
.mc-hours { display: grid; gap: 2px; font-size: .86rem; background: rgba(0,0,0,.18); border-radius: 12px; padding: 9px 11px; }
.mc-hours small { color: #9FB0CF; font-size: .74rem; }
.mc-h { font-size: 1rem; }
.mc-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px; }
.mc-tab { border: 0; border-radius: 999px; padding: 7px 0; font: inherit; font-weight: 800; font-size: .78rem; background: transparent; color: #B9C4DA; transition: background .2s, color .2s; }
.mc-tab.on { background: #fff; color: #0E213E; }
.mc-tab.ok:not(.on) { color: #F3CF83; }
.mc-skill { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.07); }
.mc-skh { display: flex; justify-content: space-between; align-items: center; }
.mc-skh b { font-size: .9rem; }
.mc-pill { font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: #9FB0CF; }
.mc-pill.prog { background: rgba(227,176,75,.16); color: #F3CF83; }
.mc-pill.done { background: rgba(127,209,174,.16); color: #9FE3C5; }
.mc-pill.cert { background: #E3B04B; color: #0E213E; }
.mc-can { margin: 0; display: flex; gap: 8px; font-size: .82rem; color: #9FB0CF; line-height: 1.4; }
.mc-can.ok { color: #EEF2F9; } .mc-can.half { color: #CBD5E8; }
.mc-mark { flex: none; width: 16px; font-weight: 800; color: #6F7E9C; }
.mc-can.ok .mc-mark { color: #7FD1AE; } .mc-can.half .mc-mark { color: #E3B04B; }
.mc-hist { display: flex; align-items: flex-end; gap: 10px; height: 96px; padding: 4px 2px 0; }
.mc-hi { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.mc-hi i { width: 100%; max-width: 30px; border-radius: 8px 8px 4px 4px; background: linear-gradient(#E3B04B, #B8861F); }
.mc-hi small { font-size: .68rem; font-weight: 800; color: #B9C4DA; }
.mc-certrow { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: inherit; font: inherit; }
.mc-certrow > span:last-child { display: flex; flex-direction: column; }
.mc-certrow small { color: #B9C4DA; font-size: .76rem; }
.mc-certov { align-items: center; }
.mc-cert { border-radius: 22px; margin: 0 12px; max-width: 640px; }
.mc-certimg { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.mc-bands { width: 100%; display: grid; gap: 6px; text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px 12px; }
.mc-bandrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .86rem; }
.mc-plgrid { text-align: left; }
.lc-goal { display: grid; gap: 2px; background: rgba(227,176,75,.1); border: 1px solid rgba(227,176,75,.3); border-radius: 14px; padding: 9px 12px; }
.lc-goal small { color: #F3CF83; font-weight: 800; font-size: .72rem; letter-spacing: .04em; }
.lc-goal span { font-size: .9rem; }
.mc-self { width: 100%; display: grid; gap: 6px; background: rgba(255,255,255,.05); border-radius: 16px; padding: 12px; }
.mc-self p { margin: 0; font-size: .92rem; }
.mc-selfrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mc-selfrow button { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: inherit; border-radius: 12px; padding: 9px 4px; font: inherit; font-size: .8rem; font-weight: 700; transition: background .2s, border-color .2s; }
.mc-selfrow button[aria-pressed="true"] { background: rgba(227,176,75,.2); border-color: #E3B04B; }
/* ===== Cuéntanos de ti ===== */
.about-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.about-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.about-head h2 { margin: 0; }
.about-head p { margin: 2px 0 0; }
.about-ico { font-size: 2.2rem; }
.about-note { margin: -4px 0 4px; font-size: .78rem; color: #9FB0CF; }
.about-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.about-yn button { border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; border-radius: 14px; padding: 13px 8px; font: inherit; font-weight: 800; transition: background .2s, border-color .2s, transform .15s; }
.about-yn button[aria-pressed="true"] { background: rgba(227,176,75,.2); border-color: #E3B04B; color: #F3CF83; }
.about-date { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.about-date select { width: 100%; border-radius: 12px; padding: 12px 10px; background: rgba(255,255,255,.07); color: #fff; border: 1.5px solid rgba(255,255,255,.18); font: inherit; }
.about-date select option { color: #0E213E; }
.onb-step.about-step { background: radial-gradient(120% 60% at 50% 0%, #1A3A6B 0%, #0E213E 55%, #081530 100%); color: #EEF2FA; padding-top: calc(env(safe-area-inset-top, 0px) + 18px); }
.about-step .field input { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.18); }
.about-step .label { color: #CFDBF0; }
.about-step .muted { color: #A9B8D4; }

/* ===== Camino nuevo: cielo de noche, regiones y plataformas 3D ===== */
#page-home { position: relative; isolation: isolate; }
.home-sky { position: sticky; top: 0; height: 0; z-index: -1; pointer-events: none; }
.home-sky > div { position: absolute; left: -16px; right: -16px; top: 0; height: 100vh; }
.sky-grad { background: linear-gradient(180deg, #081429 0%, #0E2148 40%, #17336E 75%, #1E4288 100%); }
.sky-stars { background-repeat: repeat; background-size: 390px 520px; will-change: transform; }
.sky-stars.s1 { height: calc(100vh + 520px) !important; opacity: .9; background-image:
  radial-gradient(1.4px 1.4px at 30px 60px, #fff, transparent), radial-gradient(1px 1px at 120px 140px, #cfe0ff, transparent),
  radial-gradient(1.6px 1.6px at 260px 40px, #fff, transparent), radial-gradient(1px 1px at 340px 170px, #fff, transparent),
  radial-gradient(1.2px 1.2px at 200px 230px, #bcd3ff, transparent), radial-gradient(1px 1px at 70px 300px, #fff, transparent),
  radial-gradient(1.4px 1.4px at 360px 330px, #fff, transparent), radial-gradient(1px 1px at 160px 390px, #dfe9ff, transparent),
  radial-gradient(1.2px 1.2px at 290px 460px, #fff, transparent), radial-gradient(1px 1px at 20px 480px, #cfe0ff, transparent); }
.sky-stars.s2 { height: calc(100vh + 520px) !important; opacity: .55; background-size: 300px 520px; background-image:
  radial-gradient(2px 2px at 80px 100px, #fff, transparent), radial-gradient(1.8px 1.8px at 240px 260px, #fff6d8, transparent),
  radial-gradient(2px 2px at 150px 420px, #fff, transparent); }
.sky-glow { background: radial-gradient(60% 40% at 50% 38%, rgba(227,176,75,.16), rgba(227,176,75,0) 70%); }
#page-home > *:not(.home-sky) { position: relative; }

.level-banner { align-self: stretch; text-align: center; margin: 4px 0 6px; }
.lb-ribbon { background: linear-gradient(#F3CF83, #E3B04B); color: #0E213E; border-radius: 14px; padding: 8px 10px 7px; box-shadow: 0 4px 0 #A9781F, 0 10px 24px rgba(0,0,0,.35); }
.lb-ribbon small { display: block; font-size: .64rem; font-weight: 900; letter-spacing: .12em; opacity: .75; }
.lb-ribbon b { font-size: 1.05rem; font-weight: 900; letter-spacing: .02em; }
.lb-bar { margin: 12px auto 0; width: 78%; height: 12px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.lb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7FD1AE, #E3B04B); border-radius: 8px; transition: width .6s cubic-bezier(.22,.9,.24,1); }
.lb-txt { display: block; margin-top: 5px; font-size: .74rem; font-weight: 700; color: #CFE0FF; }

.region-art { align-self: stretch; margin: 26px -16px -46px; height: 120px; pointer-events: none; }
.region-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rg-b { fill: #21468C; opacity: .6; } .rg-f { fill: #15306A; } .rg-c { fill: #112857; opacity: .9; }
.rg-w { fill: #F3CF83; opacity: .85; } .rg-s { fill: #DCE7FF; opacity: .85; } .rg-l { fill: #F3CF83; }
.main .path-level { position: relative; color: #CFE0FF; }
.main .path-level span { font-weight: 800; letter-spacing: .12em; }

/* plataformas */
.main .path-node.pf-node, .main .path-node.pf-node.current, .main .path-node.pf-node.done, .main .path-node.pf-node.scene.locked { width: 92px; height: 74px; border-radius: 0; background: none; box-shadow: none; animation: none; display: block; overflow: visible; }
.path-node.pf-node .pf { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); }
.path-node.pf-node .pn-ico { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); font-size: 1.45rem; line-height: 1; font-weight: 900; z-index: 1; }
.pf-t { fill: #3A5A99; } .pf-l { fill: #22396A; } .pf-r { fill: #1B2F59; }
.path-node.done .pf-t { fill: #9FE3C5; } .path-node.done .pf-l { fill: #3E9874; } .path-node.done .pf-r { fill: #2E7A5C; }
.path-node.current .pf-t { fill: #F3CF83; } .path-node.current .pf-l { fill: #C8902A; } .path-node.current .pf-r { fill: #A9781F; }
.path-node.scene.locked .pf-t { fill: #5B7BB8; } .path-node.scene.locked .pf-l { fill: #2F4C86; } .path-node.scene.locked .pf-r { fill: #253F72; }
.path-node.done .pn-ico { color: #0E213E; }
.main .path-node.pf-node.locked .pn-ico { opacity: .6; filter: grayscale(.4); }
.main .path-node.pf-node:active { translate: 0 4px; }
.main .path-node.pf-node.current::before { inset: -8px -12px 30px -12px; border-radius: 50%; border: 3px solid rgba(243,207,131,.75); box-shadow: 0 0 22px rgba(227,176,75,.5); }
.path-node.pf-node .pn-tip { top: -40px; }
.path-node.pf-node .pn-scene { top: -34px; }
/* reto de la unidad: plataforma grande con la cara del compañero */
.main .path-node.pf-boss, .main .path-node.pf-boss.current, .main .path-node.pf-boss.done, .main .path-node.pf-boss.locked { width: 118px; height: 90px; }
.path-node.pf-boss .pf-t { fill: #E3B04B; } .path-node.pf-boss .pf-l { fill: #B8861F; } .path-node.pf-boss .pf-r { fill: #94691A; }
.path-node.pf-boss.locked .pf { filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)) saturate(.6) brightness(.8); }
.path-node.pf-boss.done .pf-t { fill: #9FE3C5; } .path-node.pf-boss.done .pf-l { fill: #3E9874; } .path-node.pf-boss.done .pf-r { fill: #2E7A5C; }
.main .path-node.pf-boss .pn-face { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); width: 66px; height: 66px; z-index: 1; }
.path-node.pf-boss .pn-boss { top: -64px; z-index: 2; }
.path-node.pf-boss .pn-check { right: 18px; bottom: 30px; z-index: 2; }
.path-row.r-pf-boss { padding-top: 70px; }
.path-node.pf-boss .pn-tip { top: -66px; }
@media (prefers-reduced-motion: reduce) { .sky-stars { transform: none !important; } }
.home-sky > div { left: -24px; right: -24px; }
.main .path-node.pf-node.current::before { inset: -6px -14px 28px -14px; border: 3px solid rgba(243,207,131,.9); }
.main .path-node.pf-boss.locked::before, .main .path-node.pf-boss.current::before { inset: 8px -12px 30px -12px; border-radius: 50%; }
.home-sky > div { left: -40px; right: -40px; }
.main .path-node.pf-boss.locked::before { content: none; }
.home-sky { margin: 0 -20px; align-self: stretch; }
.home-sky > div { left: 0; right: 0; }
.region-art { margin-left: -20px; margin-right: -20px; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
/* ===== Repaso espaciado ===== */
.srs-head { display: grid; gap: 10px; border-radius: 20px; padding: 14px; background: linear-gradient(160deg, rgba(227,176,75,.16), rgba(227,176,75,.04)); border: 1px solid rgba(227,176,75,.4); }
.srs-top { display: flex; align-items: center; gap: 14px; }
.srs-big { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.srs-big b { font-size: 2.4rem; line-height: 1; color: #F3CF83; }
.srs-big span { font-size: .7rem; color: #CFDBF0; text-align: center; }
.srs-stats { display: grid; gap: 3px; font-size: .84rem; color: #DCE5F5; }
.srs-how { color: #9FB0CF; font-size: .74rem; line-height: 1.4; }
.srs-acts { grid-template-columns: repeat(3, 1fr); }
.srs-acts .btn { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-radius: 16px; }
.srs-acts small { font-size: .7rem; opacity: .75; font-weight: 600; }
.srs-g0 { background: rgba(242,169,122,.16); color: #FFD9C2; border: 1px solid rgba(242,169,122,.5); }
.srs-g1 { background: rgba(127,209,174,.16); color: #BDF0D6; border: 1px solid rgba(127,209,174,.5); }
.srs-g2 { background: rgba(227,176,75,.18); color: #F3CF83; border: 1px solid rgba(227,176,75,.55); }
.srs-tools { display: flex; justify-content: center; gap: 10px; align-items: center; min-height: 0; }
.srs-mic { width: 64px; height: 64px; border-radius: 50%; background: #E3B04B; color: #0E213E; border: 0; box-shadow: 0 6px 0 #A9781F; transition: transform .15s; }
.srs-mic.on { animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 6px 0 #A9781F, 0 0 0 0 rgba(227,176,75,.5); } 50% { box-shadow: 0 6px 0 #A9781F, 0 0 0 12px rgba(227,176,75,0); } }
.srs-heard { margin: 0; text-align: center; font-size: .9rem; font-weight: 700; padding: 8px 12px; border-radius: 12px; }
.srs-heard.ok { background: rgba(127,209,174,.16); color: #BDF0D6; } .srs-heard.near { background: rgba(227,176,75,.14); color: #F3CF83; } .srs-heard.bad { background: rgba(242,169,122,.14); color: #FFD9C2; }
.w-srs { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: #9FB0CF; margin-top: 3px; }
.w-dots { display: inline-flex; gap: 2px; } .w-dots i { width: 10px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); } .w-dots i.on { background: #7FD1AE; }
.tabbar button { position: relative; }
.tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #F2A97A; color: #0E213E; font-size: .66rem; font-weight: 900; display: grid; place-items: center; }
.about-select { width: 100%; border-radius: 12px; padding: 12px 10px; background: rgba(255,255,255,.07); color: #fff; border: 1.5px solid rgba(255,255,255,.18); font: inherit; }
.about-select option { color: #0E213E; }
body.i18n-wait > * { visibility: hidden; }
body.i18n-wait::after { content: ""; position: fixed; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; border: 4px solid rgba(227,176,75,.25); border-top-color: #E3B04B; animation: i18nSpin .8s linear infinite; }
body.i18n-wait { background: #0E213E; }
@keyframes i18nSpin { to { transform: rotate(360deg); } }

/* ===================== INICIO: islas flotantes, día y noche ===================== */
/* --- cielo: noche (azul con estrellas) o día (atardecer con sol y nubes) --- */
.sky-sun, .sky-clouds { opacity: 0; transition: opacity .8s ease; }
body[data-sky="day"] .sky-grad { background: linear-gradient(180deg, #2B2F6E 0%, #5E4C93 22%, #B9708A 46%, #E58C6A 66%, #F4BC7C 86%, #F7CF8E 100%); }
body[data-sky="day"] .sky-stars { opacity: .12; }
body[data-sky="day"] .sky-sun { opacity: 1; position: absolute; left: auto !important; right: 34px !important; top: 150px !important; width: 96px !important; height: 96px !important; border-radius: 50%; background: radial-gradient(circle, #FFF3D1 0%, #FFE2A0 55%, rgba(255,226,160,0) 72%); }
body[data-sky="day"] .sky-clouds { opacity: 1; background:
  radial-gradient(60px 18px at 70px 300px, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(80px 20px at 310px 470px, rgba(255,255,255,.5), transparent 70%),
  radial-gradient(70px 16px at 90px 640px, rgba(255,255,255,.45), transparent 70%); }
body[data-sky="day"] .sky-glow { background: radial-gradient(60% 35% at 70% 25%, rgba(255,226,160,.35), rgba(255,226,160,0) 70%); }
body[data-sky="day"] .rg-b { fill: #6F4F94; opacity: .45; } body[data-sky="day"] .rg-f { fill: #5A3F7E; } body[data-sky="day"] .rg-c { fill: #4A3570; opacity: .7; }
body[data-sky="day"] .main .path-level { color: #FFF3E0; text-shadow: 0 1px 6px rgba(60,20,60,.5); }

/* --- tarjeta de bienvenida --- */
.hero-card { position: relative; border-radius: 24px; padding: 16px 16px 14px; min-height: 186px; overflow: hidden; color: #EEF2F9;
  background: linear-gradient(150deg, #22447F, #132B55); border: 1px solid rgba(201,165,90,.4); box-shadow: 0 6px 0 #0B1B3A, 0 16px 34px rgba(0,0,0,.35); cursor: pointer; }
.hero-card::after { content: ""; position: absolute; right: -50px; top: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(rgba(227,176,75,.25), rgba(227,176,75,0) 70%); pointer-events: none; }
.hc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; z-index: 2; max-width: calc(100% - 96px); }
.hc-top small { font-size: .64rem; letter-spacing: .18em; color: #C9A55A; font-weight: 800; }
.hc-lang { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.2); color: #DCE5F5; font: inherit; font-size: .7rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.hc-hello { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.55rem; margin: 6px 0 2px; position: relative; z-index: 2; }
.hc-today { font-size: .84rem; color: #B9C4DA; max-width: calc(100% - 104px); line-height: 1.35; position: relative; z-index: 2; margin: 0; }
.hc-today b { color: #F3CF83; }
.hc-stats { display: flex; gap: 7px; margin-top: 12px; position: relative; z-index: 2; max-width: calc(100% - 92px); }
.hc-st { background: rgba(0,0,0,.24); border-radius: 12px; padding: 6px 9px; font-size: .68rem; color: #B9C4DA; flex: 1; min-width: 0; }
.hc-st b { display: block; color: #F3CF83; font-size: .98rem; white-space: nowrap; }
.hc-goal { position: relative; z-index: 2; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 10px; max-width: calc(100% - 92px); overflow: hidden; }
.hc-goal span { display: block; height: 100%; background: linear-gradient(90deg, #7FD1AE, #F3CF83); border-radius: 3px; transition: width .6s cubic-bezier(.22,.9,.24,1); }
.hc-buddy { position: absolute; right: 4px; bottom: -58px; width: 100px; aspect-ratio: 480 / 864; z-index: 1; pointer-events: none; }
.hc-buddy .vloop { position: absolute; inset: 0; }
.hc-say { position: absolute; right: 14px; top: 98px; z-index: 3; background: #fff; color: #0E213E; font-size: .72rem; font-weight: 800; padding: 6px 9px; border-radius: 12px 12px 4px 12px; box-shadow: 0 6px 14px rgba(0,0,0,.3); pointer-events: none; }

/* --- se hunde al tocar y regresa (tarjeta, islas, botones) --- */
.press, .btn, .path-exam, .lc-opt, .mc-tab, .about-yn button { transition: transform .12s ease, box-shadow .12s ease, translate .12s ease; }
.press:active { transform: translateY(5px); box-shadow: 0 1px 0 #0B1B3A, 0 8px 18px rgba(0,0,0,.3); }
.btn:active, .lc-opt:active, .about-yn button:active { transform: translateY(3px) scale(.985); }
.path-exam:active { transform: translateY(4px) scale(.99); }

/* --- listón dorado de la unidad --- */
.level-banner { margin-top: 2px; }
.lb-ribbon { position: relative; }
.lb-ribbon::before, .lb-ribbon::after { content: ""; position: absolute; top: 12px; width: 18px; height: 26px; background: #B8861F; z-index: -1; }
.lb-ribbon::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 42% 50%); }
.lb-ribbon::after { right: -12px; clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%); }
.level-banner { isolation: isolate; padding: 0 12px; }

/* --- islas --- */
.main .path-node.isl-node, .main .path-node.isl-node.current, .main .path-node.isl-node.done, .main .path-node.isl-node.locked, .main .path-node.isl-node.scene.locked, .main .path-node.isl-node.boss { width: 138px; height: 112px; border-radius: 0; background: none; box-shadow: none; animation: none; display: block; overflow: visible; padding: 0; }
.main .path-node.isl-node::before { content: none !important; }
.isl { position: absolute; inset: 0; display: block; }
.isl-top, .isl::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 46px; border-radius: 50%; z-index: 2;
  background: radial-gradient(ellipse at 50% 30%, #5B7BB8, #2B4A86); box-shadow: inset 0 -7px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.16); }
.isl-rock, .isl::after { content: ""; position: absolute; left: 12%; right: 12%; top: 58px; height: 62px; z-index: 1; background: linear-gradient(#34477E, #1A2A55);
  clip-path: polygon(0 0, 100% 0, 78% 55%, 56% 100%, 42% 80%, 22% 55%); }
body[data-sky="day"] .isl-rock, body[data-sky="day"] .isl::after { background: linear-gradient(#9A6B44, #5E3E25); }
.isl-glow { position: absolute; left: -24px; right: -24px; top: 6px; height: 90px; border-radius: 50%; background: radial-gradient(rgba(243,207,131,.55), rgba(243,207,131,0) 70%); opacity: 0; }
.path-node.done .isl-top, .path-node.done .isl::before { background: radial-gradient(ellipse at 50% 30%, #A6EBC3, #3E9C6A); }
.path-node.current .isl-top, .path-node.current .isl::before { background: radial-gradient(ellipse at 50% 30%, #FFE9A8, #D9A646); }
.path-node.current .isl-glow { opacity: 1; }
.path-node.scene.locked .isl-top, .path-node.scene.locked .isl::before { background: radial-gradient(ellipse at 50% 30%, #7A95D0, #3E5C9E); }
.path-node.isl-node.locked .isl { opacity: .92; }
/* gema arriba de la isla */
.path-node.isl-node .pn-ico { position: absolute; left: 50%; top: 22px; transform: translate(-50%, -50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-weight: 900;
  background: radial-gradient(circle at 35% 30%, #4A6AA8, #22396A); box-shadow: 0 5px 0 #15284D, inset 0 0 0 2px rgba(143,166,214,.4); color: #AFC0E2; filter: none; opacity: 1; }
.path-node.isl-node.done .pn-ico { background: radial-gradient(circle at 35% 30%, #D6FFEE, #7FD1AE 55%, #2E9C76); color: #0E213E; box-shadow: 0 5px 0 #23775A, 0 0 16px rgba(127,209,174,.55); }
.path-node.isl-node.current .pn-ico { width: 64px; height: 64px; font-size: 1.7rem; left: 64%; background: radial-gradient(circle at 35% 30%, #FFF7DC, #F3CF83 50%, #C8902A); color: #0E213E; box-shadow: 0 0 0 7px rgba(243,207,131,.22), 0 0 34px 8px rgba(243,207,131,.5), 0 6px 0 #A9781F; }
.main .path-node.isl-node.locked .pn-ico { opacity: 1; filter: none; }
.path-node.isl-node .pn-ico > * { opacity: .9; }
.path-node.isl-node.current .pn-tip { left: 64%; top: -40px; }
.path-node.isl-node .pn-scene { top: -20px; z-index: 4; }
/* reto: isla dorada grande con la cara del compañero */
.main .path-node.isl-node.isl-boss { width: 160px; height: 128px; }
.path-node.isl-boss .isl-top, .path-node.isl-boss .isl::before { top: 38px; height: 52px; background: radial-gradient(ellipse at 50% 30%, #FFE7A6, #C8902A) !important; }
.path-node.isl-boss.done .isl-top, .path-node.isl-boss.done .isl::before { background: radial-gradient(ellipse at 50% 30%, #A6EBC3, #3E9C6A) !important; }
.path-node.isl-boss .isl-rock, .path-node.isl-boss .isl::after { top: 70px; height: 70px; }
.path-node.isl-boss.locked .isl { filter: saturate(.75) brightness(.9); }
.main .path-node.isl-boss .pn-face { position: absolute; left: 50%; top: 26px; transform: translate(-50%, -50%); width: 70px; height: 70px; z-index: 3; }
.main .path-node.isl-boss.current .pn-face { left: 64%; }
.path-node.isl-boss .pn-boss { top: -34px; z-index: 4; }
.path-node.isl-boss .pn-check { right: 30px; bottom: auto; top: 34px; z-index: 4; }
.path-row.r-isl-boss { padding-top: 46px; }
.path-row.r-isl-node { padding-top: 16px; }
.path-row.cur.r-isl-node { padding-top: 46px; }
.path-row.cur.first { padding-top: 64px; }
/* nombre en píldora oscura */
.main .pn-label { margin-top: 2px; background: rgba(6,14,34,.62); color: #DCE7FF; padding: 3px 10px; border-radius: 999px; font-size: .72rem; }
.main .path-row.cur .pn-label { color: #F3CF83; }
/* hundirse al tocar */
.main .path-node.isl-node:active { translate: 0 6px; }
/* las islas cercanas flotan suavecito */
@keyframes islFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.path-node.isl-node.near .isl, .path-node.isl-node.near .pn-ico, .path-node.isl-node.near .pn-face { animation: islFloat 4.2s ease-in-out infinite; }
.path-node.isl-node.near .pn-ico, .path-node.isl-node.near .pn-face { animation-name: islFloatG; }
@keyframes islFloatG { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.path-row:nth-child(odd) .path-node.isl-node.near .isl, .path-row:nth-child(odd) .path-node.isl-node.near .pn-ico, .path-row:nth-child(odd) .path-node.isl-node.near .pn-face { animation-delay: -2.1s; }
@media (prefers-reduced-motion: reduce) { .path-node.isl-node .isl, .path-node.isl-node .pn-ico, .path-node.isl-node .pn-face { animation: none !important; } }
/* camino de luz (puntitos) */
.main .path-dots i { width: 8px; height: 8px; background: rgba(143,166,214,.35); }
.main .path-dots.lit i { background: #7FD1AE; box-shadow: 0 0 10px rgba(127,209,174,.8); }
/* el compañero parado sobre la isla */
.path-buddy.on-isl { position: absolute; width: 58px; aspect-ratio: 480 / 864; top: 0; left: 0; margin: 0; translate: -50% -94%; z-index: 5; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 8px 8px rgba(0,0,0,.45)); }
.path-buddy.on-isl .pb-say { bottom: calc(100% + 2px); }
#pathWrap { position: relative; }
/* de día las tarjetas van sólidas para que se lean bien sobre el atardecer */
body[data-sky="day"] .main .route-banner, body[data-sky="day"] .main .path-unit:not(.done) { background: linear-gradient(135deg, rgba(28,58,107,.94), rgba(14,33,62,.94)); border-color: rgba(201,165,90,.35); }
body[data-sky="day"] .main .path-unit.done { background: linear-gradient(135deg, rgba(20,60,52,.92), rgba(14,40,40,.92)); }
body[data-sky="day"] .main .path-unit.done small { color: #9FE3C5; }
body[data-sky="day"] .lb-txt { color: #FFF3E0; text-shadow: 0 1px 6px rgba(60,20,60,.6); }
.path-buddy.on-isl { width: 64px; }
/* sin compañero en las islas: la gema de la isla actual va al centro */
.path-node.isl-node.current .pn-ico, .path-node.isl-node.current .pn-tip, .main .path-node.isl-boss.current .pn-face { left: 50%; }
/* el globito va arriba de la cabeza, sin tapar la cara */
.hc-say { top: 40px; right: 64px; border-radius: 12px 12px 4px 12px; }
.hc-say { top: 94px; right: 8px; border-radius: 12px 12px 12px 4px; }
.hc-say { top: 60px; right: 6px; }
.hc-say::after { content: ""; position: absolute; bottom: -6px; right: 44px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.hc-today { max-width: calc(100% - 124px); }
.about-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.about-who button { border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; border-radius: 14px; padding: 10px; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; transition: background .2s, border-color .2s, transform .12s; }
.about-who button b { font-size: .88rem; } .about-who button small { font-size: .7rem; color: #9FB0CF; }
.about-who button[aria-pressed="true"] { background: rgba(227,176,75,.2); border-color: #E3B04B; }
.about-who button[aria-pressed="true"] b { color: #F3CF83; }
.about-who button:active { transform: translateY(3px) scale(.985); }
/* ===== Cuéntanos de ti · 3 pasos ===== */
.onb-step.about-step { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
.ab-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px 0; }
.ab-back { flex: none; }
.ab-prog { flex: 1; height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.ab-prog i { display: block; height: 100%; width: 33%; border-radius: 6px; background: linear-gradient(90deg, #7FD1AE, #E3B04B); transition: width .45s cubic-bezier(.22,.9,.24,1); }
.ab-count { font-size: .76rem; font-weight: 800; color: #9FB0CF; flex: none; }
.about-body { padding-top: 14px; }
.ab-page { display: flex; flex-direction: column; gap: 12px; }
.ab-kick { font-size: .66rem; letter-spacing: .2em; font-weight: 800; color: #C9A55A; }
.ab-title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.75rem; margin: -4px 0 0; color: #F4F6FB; }
.ab-sub { margin: -4px 0 4px; color: #A9B8D4; font-size: .9rem; line-height: 1.45; }
.ab-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(201,165,90,.22); }
.ab-label { font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: #CFDBF0; text-transform: uppercase; line-height: 1.4; }
.ab-field { display: flex; flex-direction: column; gap: 6px; }
.ab-field span { font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: #CFDBF0; text-transform: uppercase; }
.ab-field input { width: 100%; border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 1rem; background: rgba(6,14,34,.45); color: #fff; border: 1.5px solid rgba(255,255,255,.14); transition: border-color .2s, box-shadow .2s; }
.ab-field input:focus, .about-date select:focus, .about-select:focus { outline: none; border-color: #E3B04B; box-shadow: 0 0 0 4px rgba(227,176,75,.16); }
.ab-note { margin: 0; font-size: .76rem; color: #93A1BD; line-height: 1.4; }
.about-date select, .about-select { background: rgba(6,14,34,.45); border-color: rgba(255,255,255,.14); padding: 13px 10px; }
.ab-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-lang { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 12px; border-radius: 14px; text-align: left; font: inherit; color: inherit; background: rgba(6,14,34,.4); border: 1.5px solid rgba(255,255,255,.12); transition: background .2s, border-color .2s, transform .12s; }
.ab-lang .ab-hello { font-size: .76rem; color: #9FB0CF; font-weight: 700; }
.ab-lang b { font-size: .95rem; }
.ab-lang[aria-pressed="true"] { background: rgba(227,176,75,.18); border-color: #E3B04B; box-shadow: 0 0 0 3px rgba(227,176,75,.12); }
.ab-lang[aria-pressed="true"] b { color: #F3CF83; }
.ab-lang:active { transform: translateY(3px) scale(.985); }
.about-step .about-yn button, .about-step .about-who button { background: rgba(6,14,34,.4); }
.about-step .form-msg { margin-top: 12px; }

/* ===================== Lecciones estilo Duolingo ===================== */
.duo-lesson { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-height: 100%; }
.duo-head { display: flex; align-items: flex-end; gap: 10px; min-height: 104px; }
.duo-av { position: relative; width: 62px; aspect-ratio: 480 / 864; flex: none; display: block; transform-origin: 50% 100%; }
.duo-av .vloop { position: absolute; inset: 0; }
.duo-bub { position: relative; margin-bottom: 26px; background: #fff; color: #0E213E; font-weight: 800; font-size: 1rem; line-height: 1.3; padding: 10px 14px; border-radius: 16px; border: 2px solid #DCE4F2; box-shadow: 0 4px 0 #C9D5EA; }
.duo-bub::before { content: ""; position: absolute; left: -10px; bottom: 12px; border: 9px solid transparent; border-right-color: #DCE4F2; border-left: 0; }
.duo-bub::after { content: ""; position: absolute; left: -6px; bottom: 14px; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
.duo-bub b { color: #B8862B; }
.duo-combo { align-self: flex-start; font-size: .78rem; font-weight: 900; color: #F3CF83; background: rgba(227,176,75,.14); border: 1px solid rgba(227,176,75,.4); padding: 4px 10px; border-radius: 999px; }
.duo-ex { display: flex; flex-direction: column; gap: 14px; }
.duo-card { border-radius: 20px; padding: 18px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 2px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 10px; }
.duo-card.center { align-items: center; text-align: center; }
.duo-card h2 { margin: 0; }
.duo-wordrow { display: flex; align-items: center; gap: 12px; }
.duo-wordrow.center { justify-content: center; }
.duo-word { margin: 0; font-size: 2.2rem; font-weight: 900; letter-spacing: -.01em; }
.duo-word.sm { font-size: 1.5rem; }
.duo-mean { margin: 0; font-size: 1.08rem; color: #9FE3C5; font-weight: 700; }
.duo-exs { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; background: rgba(0,0,0,.18); border-radius: 14px; padding: 10px 12px; }
.duo-exs b { grid-column: 1; } .duo-exs span { grid-column: 1; font-size: .85rem; color: #9FB0CF; } .duo-exs .duo-spk { grid-column: 2; grid-row: 1 / span 2; }
.duo-spk { flex: none; width: 44px; height: 44px; border-radius: 14px; border: 0; font-size: 20px; background: #1CB0F6; box-shadow: 0 4px 0 #1384B8; display: grid; place-items: center; transition: transform .1s; }
.duo-spk.big { width: 76px; height: 76px; border-radius: 22px; font-size: 34px; box-shadow: 0 6px 0 #1384B8; }
.duo-spk.slow { background: #3A5A99; box-shadow: 0 4px 0 #22396A; width: 52px; height: 52px; }
.duo-spk:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.duo-listen { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 8px 0; }
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo-opt { position: relative; min-height: 64px; padding: 12px 12px 12px 40px; text-align: left; border-radius: 16px; font: inherit; font-weight: 700; font-size: 1rem; color: #EEF2F9; background: #15294D; border: 2px solid #2C4A82; box-shadow: 0 4px 0 #2C4A82; transition: transform .1s, background .15s, border-color .15s; }
.duo-n { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 7px; border: 2px solid #3A5A99; color: #8FA6D6; font-size: .72rem; display: grid; place-items: center; }
.duo-opt:active, .duo-tile:active, .duo-pair:active { transform: translateY(3px); box-shadow: 0 1px 0 #2C4A82; }
.duo-opt.sel { background: rgba(28,176,246,.16); border-color: #1CB0F6; box-shadow: 0 4px 0 #1384B8; }
.duo-opt.ok { background: rgba(88,204,2,.18); border-color: #58CC02; box-shadow: 0 4px 0 #3F9A00; }
.duo-opt.bad { background: rgba(255,75,75,.16); border-color: #FF6B6B; box-shadow: 0 4px 0 #C93E3E; }
.duo-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo-match > div { display: flex; flex-direction: column; gap: 10px; }
.duo-pair { min-height: 54px; border-radius: 14px; font: inherit; font-weight: 700; color: #EEF2F9; background: #15294D; border: 2px solid #2C4A82; box-shadow: 0 4px 0 #2C4A82; transition: transform .1s, opacity .3s, background .15s; }
.duo-pair.sel { border-color: #1CB0F6; background: rgba(28,176,246,.16); box-shadow: 0 4px 0 #1384B8; }
.duo-pair.ok { border-color: #58CC02; background: rgba(88,204,2,.18); box-shadow: 0 4px 0 #3F9A00; }
.duo-pair.bad { border-color: #FF6B6B; background: rgba(255,75,75,.16); animation: duoShake .35s; }
.duo-pair.gone { opacity: .25; }
@keyframes duoShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.duo-prompt { display: flex; gap: 10px; align-items: center; }
.duo-pq { font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: #EEF2F9; }
.duo-line { min-height: 60px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding: 8px 0; border-bottom: 2px solid rgba(255,255,255,.12); background: repeating-linear-gradient(180deg, transparent 0 56px, rgba(255,255,255,.12) 56px 58px); }
.duo-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 6px; }
.duo-slot { display: inline-block; min-width: 44px; min-height: 46px; border-radius: 12px; }
.duo-slot.used { background: rgba(255,255,255,.07); }
.duo-tile { padding: 10px 14px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 1rem; color: #EEF2F9; background: #15294D; border: 2px solid #2C4A82; box-shadow: 0 4px 0 #2C4A82; transition: transform .1s; }
.duo-tile.sel { border-color: #1CB0F6; box-shadow: 0 4px 0 #1384B8; }
.duo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.duo-blank-s { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.7; text-align: center; }
.duo-gap { display: inline-block; min-width: 80px; border-bottom: 3px solid #8FA6D6; margin: 0 4px; text-align: center; color: #F3CF83; }
.duo-gap.ok { color: #9BF0C8; border-color: #58CC02; } .duo-gap.bad { color: #FF9A9A; border-color: #FF6B6B; }
.duo-kb { width: 100%; border-radius: 16px; padding: 14px; font: inherit; font-size: 1.05rem; color: #fff; background: #0F2140; border: 2px solid #2C4A82; resize: none; }
.duo-kb:focus { outline: none; border-color: #1CB0F6; }
.duo-kbtoggle { align-self: center; }
.duo-micwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; }
.duo-mic { width: 96px; height: 96px; border-radius: 50%; border: 0; font-size: 40px; background: radial-gradient(circle at 35% 30%, #F8D98E, #E3B04B 60%, #C8902A); box-shadow: 0 7px 0 #A9781F, 0 0 0 10px rgba(227,176,75,.14); transition: transform .1s; }
.duo-mic:active { transform: translateY(5px); box-shadow: 0 2px 0 #A9781F; }
.duo-mic.on { animation: micPulse 1.1s ease-in-out infinite; }
.duo-miclbl { font-weight: 800; color: #F3CF83; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.duo-heard { margin: 0; color: #CFDBF0; font-style: italic; min-height: 1.2em; }
/* botón y hoja de resultado */
.ls-foot.duo-foot { border-top: 2px solid rgba(255,255,255,.08); background: #0E213E; transition: background .25s; }
.duo-check { background: #E3B04B; color: #0E213E; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; border-radius: 16px; box-shadow: 0 5px 0 #A9781F; }
.duo-check:disabled { background: #22396A; color: #6F7E9C; box-shadow: 0 5px 0 #162A51; }
.duo-skip { align-self: center; color: #8FA6D6; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.ls-foot.duo-foot.duo-sheet { border-top: 0; border-radius: 22px 22px 0 0; }
.ls-foot.duo-foot.duo-sheet.ok { background: #D7FFB8; color: #3F8700; }
.ls-foot.duo-foot.duo-sheet.bad { background: #FFDFE0; color: #C22D2D; }
.duo-sheet-top { display: flex; align-items: center; gap: 10px; }
.duo-sheet-top b { font-size: 1.25rem; font-weight: 900; flex: 1; }
.duo-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #fff; }
.duo-replay { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255,255,255,.7); font-size: 18px; }
.duo-ans { margin: 0; font-weight: 700; font-size: 1.02rem; color: #8A1F1F; }
.duo-sheet.ok .duo-ans { color: #2F6A00; }
.duo-note { margin: 0; font-size: .88rem; color: inherit; opacity: .9; }
.duo-go { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; border-radius: 16px; color: #fff; }
.duo-go.ok { background: #58CC02; box-shadow: 0 5px 0 #3F9A00; }
.duo-go.bad { background: #FF4B4B; box-shadow: 0 5px 0 #C93E3E; }
.duo-go:active, .duo-check:active { transform: translateY(4px); box-shadow: none; }
/* final */
.duo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.duo-stat { border-radius: 16px; border: 2px solid; overflow: hidden; text-align: center; background: #0E213E; }
.duo-stat small { display: block; padding: 5px 0; font-size: .62rem; font-weight: 900; letter-spacing: .1em; color: #0E213E; }
.duo-stat b { display: block; padding: 12px 0; font-size: 1.25rem; }
.duo-stat.gold { border-color: #E3B04B; } .duo-stat.gold small { background: #E3B04B; } .duo-stat.gold b { color: #F3CF83; }
.duo-stat.blue { border-color: #1CB0F6; } .duo-stat.blue small { background: #1CB0F6; } .duo-stat.blue b { color: #8ED8FF; }
.duo-stat.green { border-color: #58CC02; } .duo-stat.green small { background: #58CC02; } .duo-stat.green b { color: #B8F28A; }
.duo-lesson { width: 100%; align-self: stretch; text-align: left; }
.duo-ex > * { width: 100%; }
.duo-ex > .duo-kbtoggle { width: auto; }
.ls-foot.duo-foot.duo-sheet { padding-top: 16px; }
/* lección a pantalla completa con el compañero grande */
#lessonScreen .ls-body:has(.duo-lesson) { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 12px; }
.duo-lesson { flex: 1; min-height: 0; justify-content: flex-start; }
.duo-head { min-height: 0; align-items: flex-end; gap: 12px; padding: 4px 0 2px; }
.duo-av { width: clamp(96px, 30vw, 128px); }
.duo-bub { margin-bottom: 46%; font-size: 1.05rem; padding: 12px 16px; }
.duo-ex { flex: 1; justify-content: center; gap: 18px; padding-bottom: 8px; }
.duo-opt { min-height: 78px; font-size: 1.05rem; }
.duo-pair { min-height: 62px; font-size: 1.02rem; }
.duo-tile { padding: 12px 16px; font-size: 1.08rem; }
.duo-word { font-size: 2.5rem; }
.duo-pq { font-size: 1.25rem; }
.duo-line { min-height: 124px; }
.duo-mic { width: 110px; height: 110px; font-size: 46px; }
.duo-combo { position: absolute; top: 2px; right: 0; }
.duo-lesson { position: relative; }
@media (max-height: 700px) { .duo-av { width: 84px; } .duo-opt { min-height: 62px; } .duo-line { min-height: 64px; } }
/* ===== micrófono moderno ===== */
.duo-micbox { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0; }
.duo-mic2 { position: relative; width: 112px; height: 112px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.duo-mic2 .core { position: absolute; inset: 14px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: radial-gradient(circle at 32% 28%, #FFE9AE 0%, #F1C462 38%, #D79C34 100%);
  box-shadow: 0 10px 24px rgba(227,176,75,.35), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -6px 12px rgba(150,96,20,.35);
  transition: transform .15s ease, background .3s ease, box-shadow .3s ease; }
.duo-mic2 .core svg { width: 40px; height: 40px; fill: #0E213E; stroke: #0E213E; }
.duo-mic2:active .core { transform: scale(.92); }
.duo-mic2 .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(243,207,131,.35); opacity: 0; transform: scale(.8); }
.duo-micbox[data-state="idle"] .ring.r1 { opacity: .9; transform: scale(1); animation: micIdle 2.8s ease-in-out infinite; }
@keyframes micIdle { 0%, 100% { transform: scale(.94); opacity: .5; } 50% { transform: scale(1); opacity: .9; } }
/* escuchando: el botón se vuelve rojo suave y los anillos salen como ondas */
.duo-micbox[data-state="listen"] .core, .duo-micbox[data-state="talk"] .core { background: radial-gradient(circle at 32% 28%, #FF9D8F 0%, #FF5D5D 45%, #D93A4A 100%); box-shadow: 0 10px 28px rgba(255,93,93,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.duo-micbox[data-state="listen"] .core svg, .duo-micbox[data-state="talk"] .core svg { fill: #fff; stroke: #fff; }
.duo-micbox[data-state="listen"] .ring, .duo-micbox[data-state="talk"] .ring { border-color: rgba(255,120,120,.55); animation: micOut 1.6s ease-out infinite; }
.duo-micbox[data-state="listen"] .ring.r2, .duo-micbox[data-state="talk"] .ring.r2 { animation-delay: .8s; }
.duo-micbox[data-state="talk"] .ring { animation-duration: .9s; }
.duo-micbox[data-state="talk"] .ring.r2 { animation-delay: .45s; }
@keyframes micOut { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.duo-micbox[data-state="ok"] .core { background: radial-gradient(circle at 32% 28%, #D6FFEE, #58CC02 60%, #3F9A00); }
.duo-micbox.miss .core { animation: duoShake .35s; }
/* barras de voz */
.duo-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; width: 100%; }
.duo-wave i { width: 5px; height: 6px; border-radius: 3px; background: rgba(143,166,214,.35); transition: background .25s; }
.duo-micbox[data-state="listen"] .duo-wave i { background: #FF8A8A; animation: waveSoft 1.2s ease-in-out infinite; }
.duo-micbox[data-state="talk"] .duo-wave i { background: linear-gradient(#FFB3A8, #FF5D5D); animation: waveTalk .55s ease-in-out infinite; }
.duo-wave i:nth-child(3n) { animation-duration: .7s !important; } .duo-wave i:nth-child(4n+1) { animation-duration: .45s !important; }
@keyframes waveSoft { 0%, 100% { height: 6px; } 50% { height: 14px; } }
@keyframes waveTalk { 0%, 100% { height: 8px; } 50% { height: 40px; } }
.duo-wave i:nth-child(1), .duo-wave i:nth-child(15) { opacity: .45; } .duo-wave i:nth-child(2), .duo-wave i:nth-child(14) { opacity: .7; }
.duo-miclbl { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; color: #F3CF83; }
.duo-micbox[data-state="listen"] .duo-miclbl, .duo-micbox[data-state="talk"] .duo-miclbl { color: #FF9A9A; }
@media (prefers-reduced-motion: reduce) { .duo-wave i, .duo-mic2 .ring { animation: none !important; } }
/* opciones apagadas tras un error, respuesta a la vista y hoja azul de "Ahora tú" */
.duo-opt.off, .duo-tile.off { opacity: .35; filter: grayscale(.6); box-shadow: none; }
.duo-reveal { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(28,176,246,.12); border: 2px dashed rgba(28,176,246,.55); }
.duo-reveal small { font-size: .62rem; font-weight: 900; letter-spacing: .14em; color: #8ED8FF; }
.duo-reveal b { font-size: 1.05rem; }
.ls-foot.duo-foot.duo-sheet.show { background: #DDF4FF; color: #0B6FA4; }
.duo-sheet.show .duo-ans { color: #0B5C88; }
.duo-go.show { background: #1CB0F6; box-shadow: 0 5px 0 #1384B8; }

/* =====================================================================
   Lecciones con identidad RMLingo: noche azul marino, pergamino y dorado.
   (Sustituye el look genérico verde/azul por la paleta de la marca.)
   ===================================================================== */
.lesson-screen:has(.duo-lesson), .lesson-screen:has(.duo-end) {
  --pg: #F8F1E0; --pg2: #EFE3C6; --pg-ink: #172846; --pg-mute: #7A6740;
  --ok: #3FC18E; --ok-d: #23845E; --ok-s: rgba(63,193,142,.14);
  --no: #EE7468; --no-d: #A9443B; --no-s: rgba(238,116,104,.13);
  --au: #E3B04B; --au-l: #F6D88E; --au-d: #9C7322;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 31%, rgba(246,216,142,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 6%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 22%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(90% 40% at 22% 12%, rgba(227,176,75,.10), transparent 70%),
    linear-gradient(180deg, #13284D 0%, #0D1E3B 48%, #0A172F 100%);
}
/* barra de progreso: hilo dorado con estrella */
.lesson-screen .ls-progress { height: 10px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(227,176,75,.16); overflow: visible; position: relative; }
.lesson-screen .ls-progress span { position: relative; background: linear-gradient(90deg, #B98A2C, #E3B04B 55%, #F6D88E); box-shadow: 0 0 12px rgba(227,176,75,.45); min-width: 10px; }
.lesson-screen .ls-progress span::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%) rotate(45deg); background: #FFF3D1; border-radius: 3px; box-shadow: 0 0 10px 2px rgba(246,216,142,.8); }

/* escenario del compañero */
.duo-head { position: relative; align-items: flex-end; gap: 6px; padding: 2px 0 0; }
.duo-stage { position: relative; flex: none; width: clamp(138px, 41vw, 176px); display: flex; justify-content: center; padding-bottom: 6px; }
.duo-stage .duo-av { position: relative; z-index: 2; width: 92%; }
.duo-halo { position: absolute; left: 50%; top: 4%; width: 128%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(246,216,142,.30) 0%, rgba(227,176,75,.12) 38%, rgba(227,176,75,0) 68%); }
.duo-halo::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 1px solid rgba(246,216,142,.22); }
.duo-floor { position: absolute; left: 6%; right: 6%; bottom: 0; height: 16px; border-radius: 50%; z-index: 1;
  background: radial-gradient(closest-side, rgba(227,176,75,.45), rgba(227,176,75,.08) 70%, transparent); box-shadow: 0 0 0 1px rgba(246,216,142,.18); }
.duo-bubwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 44%; }
.duo-who { font-family: var(--f-brand); font-size: .7rem; letter-spacing: .14em; color: var(--au-l); text-transform: uppercase; padding-left: 4px; }
.duo-bub { margin: 0; background: linear-gradient(180deg, var(--pg), var(--pg2)); color: var(--pg-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.12rem; line-height: 1.35;
  padding: 12px 16px; border-radius: 4px 18px 18px 18px; border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(156,115,34,.25); }
.duo-bub::before { left: -9px; top: 0; bottom: auto; border: 0; width: 10px; height: 14px; background: var(--pg); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.duo-bub::after { display: none; }
.duo-bub b { color: var(--au-d); font-weight: 700; }

/* etiqueta del ejercicio */
.duo-kick { display: flex; align-items: center; gap: 10px; }
.duo-kick i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--au-l); border: 1px solid rgba(227,176,75,.45); background: rgba(227,176,75,.08); }
.duo-kick i svg { width: 16px; height: 16px; }
.duo-kick span { flex: 1; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--au-l); }
.duo-kick em { font-style: normal; font-size: .76rem; font-weight: 700; color: #8C9DBF; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.duo-ex { justify-content: flex-start; gap: 16px; }
.duo-combo { color: #1A1407; background: linear-gradient(180deg, #F6D88E, #E3B04B); border: 0; box-shadow: 0 4px 14px rgba(227,176,75,.35); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* tarjeta de pergamino (la palabra o la frase) */
.duo-card { border: 1px solid rgba(227,176,75,.2); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border-radius: 18px; }
.duo-folio { position: relative; background: linear-gradient(170deg, var(--pg) 0%, var(--pg2) 100%); color: var(--pg-ink); border: 0; border-radius: 16px; padding: 20px 18px;
  outline: 1px solid rgba(156,115,34,.38); outline-offset: -7px; box-shadow: 0 14px 30px rgba(0,0,0,.32); }
.duo-folio::before { content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg); background: var(--au); box-shadow: 0 0 0 3px #0F2140; }
.duo-folio .duo-word { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: var(--pg-ink); letter-spacing: 0; }
.duo-folio .duo-mean { color: var(--pg-mute); font-style: italic; font-weight: 400; font-family: Georgia, serif; font-size: 1.08rem; }
.duo-folio .duo-exs { background: rgba(23,40,70,.06); border: 1px solid rgba(156,115,34,.18); }
.duo-folio .duo-exs b { color: var(--pg-ink); } .duo-folio .duo-exs span { color: #6E6550; }
.duo-folio .duo-pq { color: var(--pg-ink); font-family: Georgia, serif; font-size: 1.22rem; font-weight: 400; }
.duo-prompt.duo-folio { padding: 18px 18px 16px; }
.duo-folio .duo-blank-s { color: var(--pg-ink); font-family: Georgia, serif; }
.duo-folio .duo-gap { border-bottom-color: var(--au-d); color: var(--au-d); }
.duo-folio .duo-gap.ok { color: var(--ok-d); border-color: var(--ok-d); } .duo-folio .duo-gap.bad { color: var(--no-d); border-color: var(--no-d); }
.duo-folio .pron, .duo-folio [class*="pron"] { color: var(--pg-ink); }
.duo-lessoncard h2 { font-family: Georgia, serif; font-weight: 400; font-size: 1.4rem; color: #F4F6FB; }

/* botones de audio */
.duo-spk { width: 46px; height: 46px; border-radius: 50%; color: #172846; background: radial-gradient(circle at 35% 30%, #FBE6B0, #E3B04B 65%, #C4922F); box-shadow: 0 4px 12px rgba(227,176,75,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.duo-spk svg { width: 22px; height: 22px; }
.duo-spk.big { width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 0 0 8px rgba(227,176,75,.12), 0 8px 20px rgba(227,176,75,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.duo-spk.big svg { width: 32px; height: 32px; }
.duo-spk.slow { width: 54px; height: 54px; background: rgba(227,176,75,.06); color: var(--au-l); box-shadow: inset 0 0 0 1.5px rgba(227,176,75,.6); }
.duo-spk.slow svg { width: 26px; height: 26px; }
.duo-spk:active { transform: scale(.92); box-shadow: none; }
.duo-folio .duo-spk:not(.big) { box-shadow: 0 3px 8px rgba(156,115,34,.35), inset 0 1px 0 rgba(255,255,255,.5); }

/* opciones */
.duo-opt, .duo-pair { color: #EEF2F9; background: linear-gradient(180deg, #172D55, #12244A); border: 1.5px solid rgba(143,166,214,.22); box-shadow: 0 3px 0 #0A1730, 0 8px 18px rgba(0,0,0,.18); border-radius: 18px; }
.duo-opt { padding-left: 52px; min-height: 74px; }
.duo-n { left: 12px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(227,176,75,.5); color: var(--au-l); font-family: var(--f-brand); font-size: .78rem; font-weight: 700; background: rgba(227,176,75,.06); }
.duo-opt:active, .duo-pair:active { transform: translateY(2px); box-shadow: 0 1px 0 #0A1730; }
.duo-opt.sel, .duo-pair.sel { border-color: var(--au); background: linear-gradient(180deg, rgba(227,176,75,.16), rgba(227,176,75,.07)); box-shadow: 0 3px 0 var(--au-d), 0 0 0 4px rgba(227,176,75,.12); }
.duo-opt.sel .duo-n { background: var(--au); color: #172846; border-color: var(--au); }
.duo-opt.ok, .duo-pair.ok { border-color: var(--ok); background: var(--ok-s); box-shadow: 0 3px 0 var(--ok-d); }
.duo-opt.ok .duo-n { background: var(--ok); border-color: var(--ok); color: #0B2A1D; }
.duo-opt.bad, .duo-pair.bad { border-color: var(--no); background: var(--no-s); box-shadow: 0 3px 0 var(--no-d); }
.duo-opt.bad .duo-n { background: var(--no); border-color: var(--no); color: #2F0D09; }
.duo-opt.off { opacity: .3; filter: none; text-decoration: line-through; text-decoration-color: rgba(238,116,104,.7); }

/* fichas de marfil para armar oraciones */
.duo-tile { color: var(--pg-ink); background: linear-gradient(180deg, #FBF6EA, #EEE2C4); border: 0; border-radius: 12px; box-shadow: 0 3px 0 #B9A578, 0 6px 14px rgba(0,0,0,.25); font-weight: 700; }
.duo-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #B9A578; }
.duo-tile.sel { box-shadow: 0 3px 0 var(--au-d), 0 0 0 3px rgba(227,176,75,.55); }
.duo-tile.off { opacity: .3; filter: grayscale(.4); }
.duo-slot.used { background: rgba(227,176,75,.07); box-shadow: inset 0 0 0 1px rgba(227,176,75,.2); }
.duo-line { border-bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 56px, rgba(227,176,75,.28) 56px 57px); }
.duo-kb { background: rgba(10,23,47,.6); border: 1.5px solid rgba(227,176,75,.25); }
.duo-kb:focus { border-color: var(--au); box-shadow: 0 0 0 4px rgba(227,176,75,.12); }
.duo-kbtoggle, .duo-skip { color: #A9B6CE; }

/* respuesta revelada */
.duo-reveal { background: rgba(227,176,75,.08); border: 1px dashed rgba(227,176,75,.6); }
.duo-reveal small { color: var(--au-l); }

/* pie: comprobar y hoja de resultado */
.ls-foot.duo-foot { background: linear-gradient(180deg, rgba(10,23,47,.0), rgba(10,23,47,.85) 30%); border-top: 1px solid rgba(227,176,75,.14); }
.duo-check { background: linear-gradient(180deg, #F3CF83, #E3B04B 60%, #D29E37); color: #172846; box-shadow: 0 4px 0 var(--au-d), 0 10px 22px rgba(227,176,75,.25); border-radius: 16px; letter-spacing: .12em; }
.duo-check:disabled { background: rgba(255,255,255,.06); color: #5F6F91; box-shadow: inset 0 0 0 1px rgba(143,166,214,.18); }
.ls-foot.duo-foot.duo-sheet { color: #EEF2F9; border-radius: 24px 24px 0 0; border-top: 0; position: relative; }
.ls-foot.duo-foot.duo-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 24px 24px 0 0; }
.ls-foot.duo-foot.duo-sheet.ok { background: radial-gradient(120% 90% at 0% 0%, rgba(63,193,142,.22), transparent 60%), #0E2340; color: #BFF0D9; }
.ls-foot.duo-foot.duo-sheet.ok::before { background: linear-gradient(90deg, var(--ok), rgba(63,193,142,.2)); }
.ls-foot.duo-foot.duo-sheet.bad { background: radial-gradient(120% 90% at 0% 0%, rgba(238,116,104,.2), transparent 60%), #0E2340; color: #FFD3CD; }
.ls-foot.duo-foot.duo-sheet.bad::before { background: linear-gradient(90deg, var(--no), rgba(238,116,104,.2)); }
.ls-foot.duo-foot.duo-sheet.show { background: radial-gradient(120% 90% at 0% 0%, rgba(227,176,75,.22), transparent 60%), #0E2340; color: #F6D88E; }
.ls-foot.duo-foot.duo-sheet.show::before { background: linear-gradient(90deg, var(--au), rgba(227,176,75,.2)); }
.duo-sheet-top b { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.3rem; }
.duo-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.duo-ic svg { width: 22px; height: 22px; }
.duo-sheet.ok .duo-ic { color: #0B2A1D; background: var(--ok); box-shadow: 0 0 0 5px rgba(63,193,142,.18); }
.duo-sheet.bad .duo-ic { color: #2F0D09; background: var(--no); box-shadow: 0 0 0 5px rgba(238,116,104,.16); }
.duo-sheet.show .duo-ic { color: #172846; background: var(--au); box-shadow: 0 0 0 5px rgba(227,176,75,.18); }
.duo-replay { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px currentColor; }
.duo-replay svg { width: 20px; height: 20px; }
.duo-ans, .duo-sheet.ok .duo-ans, .duo-sheet.show .duo-ans { color: #FFF3D1; font-family: Georgia, serif; font-size: 1.1rem; }
.duo-note { color: inherit; opacity: .85; }
.duo-go { letter-spacing: .12em; }
.duo-go.ok { background: linear-gradient(180deg, #5ED6A4, #3FC18E); color: #0B2A1D; box-shadow: 0 4px 0 var(--ok-d); }
.duo-go.bad { background: linear-gradient(180deg, #F58C82, #EE7468); color: #2F0D09; box-shadow: 0 4px 0 var(--no-d); }
.duo-go.show { background: linear-gradient(180deg, #F3CF83, #E3B04B); color: #172846; box-shadow: 0 4px 0 var(--au-d); }

/* micrófono con la paleta de la marca */
.duo-micbox[data-state="listen"] .core, .duo-micbox[data-state="talk"] .core { background: radial-gradient(circle at 32% 28%, #FFB2A8 0%, #EE7468 50%, #C9564B 100%); box-shadow: 0 10px 28px rgba(238,116,104,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.duo-micbox[data-state="ok"] .core { background: radial-gradient(circle at 32% 28%, #D6FFEE, #3FC18E 60%, #23845E); }
.duo-micbox[data-state="listen"] .duo-wave i { background: #F2988F; }
.duo-micbox[data-state="talk"] .duo-wave i { background: linear-gradient(#FFD0C9, #EE7468); }

/* pantalla final */
.duo-end h2 { font-family: Georgia, serif; font-weight: 400; font-size: 1.7rem; }
.duo-stat { border-width: 1.5px; border-radius: 16px; background: rgba(255,255,255,.03); }
.duo-stat small { letter-spacing: .14em; }
.duo-stat.blue { border-color: #8FB0EA; } .duo-stat.blue small { background: #8FB0EA; } .duo-stat.blue b { color: #CFE0FF; }
.duo-stat.green { border-color: var(--ok); } .duo-stat.green small { background: var(--ok); } .duo-stat.green b { color: #BFF0D9; }
@media (max-height: 700px) { .duo-stage { width: 118px; } .duo-bubwrap { margin-bottom: 30%; } .duo-opt { min-height: 60px; } }
.duo-folio .lp-say { background: rgba(227,176,75,.16); border-color: rgba(156,115,34,.45); color: var(--pg-ink); }
.duo-folio .lp-say small { color: var(--pg-mute); }
.duo-folio .lp-tip { color: #5E5440; }
/* ejercicios con mucho contenido: el compañero un poco más compacto para que todo quepa sin cortarse */
.duo-lesson.k-build .duo-stage, .duo-lesson.k-match .duo-stage, .duo-lesson.k-dictation .duo-stage { width: clamp(112px, 33vw, 140px); }
.duo-lesson.k-build .duo-bubwrap, .duo-lesson.k-match .duo-bubwrap, .duo-lesson.k-dictation .duo-bubwrap { margin-bottom: 38%; }

/* ===================== Clase con tutor (como libro de texto) ===================== */
.pn-label.cls { display: flex; flex-direction: column; align-items: center; line-height: 1.15; max-width: 170px; text-align: center; }
.pn-label.cls small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #E3B04B; font-weight: 800; }
.duo-grid.one { grid-template-columns: 1fr; }
.duo-grid.one .duo-opt { min-height: 60px; }
/* objetivo */
.cl-goal { background: linear-gradient(170deg, var(--pg), var(--pg2)); color: var(--pg-ink); border: 0; outline: 1px solid rgba(156,115,34,.38); outline-offset: -7px; box-shadow: 0 14px 30px rgba(0,0,0,.32); padding: 22px 20px; }
.cl-num { font-family: var(--f-brand); font-size: .7rem; letter-spacing: .16em; color: var(--au-d); text-transform: uppercase; }
.cl-goal h2 { font-family: Georgia, serif; font-weight: 700; font-size: 1.6rem; color: var(--pg-ink); line-height: 1.2; }
.cl-goaltxt { margin: 0; font-family: Georgia, serif; font-style: italic; color: #4F4430; font-size: 1.05rem; }
.cl-plan { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 8px; }
.cl-plan li { counter-increment: p; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; color: var(--pg-ink); }
.cl-plan li::before { content: counter(p); width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-brand); font-size: .75rem; color: #FFF3D1; background: var(--pg-ink); }
/* el pizarrón: verde de escuela con marco dorado y letra de gis */
.cl-board { position: relative; border-radius: 14px; padding: 18px 18px 20px; color: #F2F5EE;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.06), transparent 60%), linear-gradient(170deg, #24473D, #1A362F);
  border: 6px solid #8C6A2A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.35), 0 12px 26px rgba(0,0,0,.35);
  outline: 1px solid rgba(246,216,142,.5); outline-offset: -1px; }
.cl-board::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -12px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6E5220, #A88236, #6E5220); }
.cl-bstep { font-size: .66rem; letter-spacing: .16em; color: rgba(242,245,238,.6); font-weight: 800; }
.cl-board h3 { margin: 4px 0 6px; font-family: Georgia, serif; font-weight: 700; font-size: 1.3rem; color: #FFF6D6; }
.cl-bp { margin: 0 0 4px; font-size: 1.02rem; line-height: 1.45; color: #E7EEE5; }
.cl-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 1rem; }
.cl-table th { text-align: left; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #F6D88E; padding: 6px 8px; border-bottom: 1.5px dashed rgba(246,216,142,.5); }
.cl-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.1); color: #F2F5EE; }
.cl-table td:first-child { font-weight: 700; color: #FFFFFF; font-family: Georgia, serif; font-size: 1.08rem; }
.cl-table tbody tr { cursor: pointer; transition: background .2s; }
.cl-table tbody tr.hot { background: rgba(246,216,142,.18); }
.cl-listen { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(227,176,75,.5); background: rgba(227,176,75,.08); color: #F6D88E; font: inherit; font-weight: 700; font-size: .88rem; }
.cl-listen svg { width: 18px; height: 18px; }
/* error común */
.cl-mistake { gap: 10px; }
.cl-mk { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 1.08rem; font-family: Georgia, serif; }
.cl-mk i { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: .85rem; font-family: var(--f-body); }
.cl-mk span { flex: 1; }
.cl-mk.bad { background: var(--no-s); color: #FFD3CD; } .cl-mk.bad span { text-decoration: line-through; text-decoration-color: rgba(238,116,104,.8); }
.cl-mk.bad i { background: var(--no); color: #2F0D09; }
.cl-mk.good { background: var(--ok-s); color: #D2F7E6; } .cl-mk.good i { background: var(--ok); color: #0B2A1D; }
.cl-why { margin: 0; color: #C9D3E6; font-size: .95rem; }
/* palabras de la clase */
.cl-words { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-word { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; font: inherit; color: var(--pg-ink); background: linear-gradient(180deg, #FBF6EA, #EEE2C4); border: 0; box-shadow: 0 3px 0 #B9A578, 0 6px 14px rgba(0,0,0,.22); }
.cl-word b { font-family: Georgia, serif; font-size: 1.12rem; }
.cl-word span { font-size: .85rem; color: #6E6550; } .cl-word small { font-size: .74rem; color: var(--au-d); font-weight: 700; }
.cl-word:active { transform: translateY(2px); box-shadow: 0 1px 0 #B9A578; }
/* diálogo */
.cl-dctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-trbtn { color: #A9B6CE; font-size: .85rem; }
.cl-dlg { display: flex; flex-direction: column; gap: 10px; }
.cl-dlg h3 { margin: 0 0 2px; font-family: Georgia, serif; font-weight: 400; color: #F6D88E; font-size: 1.1rem; }
.cl-line { display: flex; align-items: flex-end; gap: 8px; cursor: pointer; }
.cl-line.b { flex-direction: row-reverse; }
.cl-line i { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: .78rem; font-family: var(--f-brand); }
.cl-line.a i { background: var(--au); color: #172846; } .cl-line.b i { background: #8FB0EA; color: #10213F; }
.cl-bub { max-width: 80%; padding: 10px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; transition: box-shadow .2s, transform .2s; }
.cl-line.a .cl-bub { background: linear-gradient(180deg, var(--pg), var(--pg2)); color: var(--pg-ink); border-bottom-left-radius: 4px; }
.cl-line.b .cl-bub { background: #1C3562; color: #EEF2F9; border: 1px solid rgba(143,176,234,.35); border-bottom-right-radius: 4px; }
.cl-bub b { font-weight: 700; font-size: 1.02rem; }
.cl-tr { display: none; font-size: .84rem; opacity: .75; }
.cl-dlg.tr .cl-tr { display: block; }
.cl-line.hot .cl-bub { box-shadow: 0 0 0 3px rgba(246,216,142,.6); transform: scale(1.02); }
/* producir */
.cl-produce h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 1.15rem; color: #F4F6FB; line-height: 1.35; }
.cl-count { align-self: flex-end; color: #8C9DBF; font-weight: 700; } .cl-count.ok { color: var(--ok); }
.cl-model summary { cursor: pointer; color: #F6D88E; font-weight: 700; font-size: .9rem; }
.cl-model p { font-family: Georgia, serif; color: #E7EEF8; }
.cl-fb { gap: 10px; } .cl-score { font-family: Georgia, serif; font-size: 1.6rem; color: #F6D88E; }
.cl-fb .cr-fix { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.cl-fb .cr-fix s { color: #FF9A9A; } .cl-fb .cr-fix b { color: #9BF0C8; } .cl-fb .cr-fix span { color: #B9C6E3; font-size: .85rem; }
/* resumen final */
.cl-sum { width: 100%; text-align: left; padding: 16px 18px; border-radius: 16px; background: linear-gradient(170deg, var(--pg), var(--pg2)); color: var(--pg-ink); outline: 1px solid rgba(156,115,34,.38); outline-offset: -6px; }
.cl-sum small { font-family: var(--f-brand); letter-spacing: .14em; color: var(--au-d); font-size: .7rem; }
.cl-sum ul { margin: 8px 0 6px; padding-left: 20px; display: grid; gap: 6px; font-family: Georgia, serif; font-size: 1rem; }
.cl-sum .muted { color: #6E6550 !important; margin: 0; font-size: .85rem; }
.duo-head.long .duo-bubwrap { margin-bottom: 14%; }
.duo-head.long .duo-bub { font-size: 1rem; }
.duo-lesson.k-board .duo-stage, .duo-lesson.k-dialogue .duo-stage, .duo-lesson.k-produce .duo-stage, .duo-lesson.k-words .duo-stage { width: clamp(104px, 30vw, 128px); }
.duo-lesson.k-board .duo-bubwrap, .duo-lesson.k-dialogue .duo-bubwrap, .duo-lesson.k-produce .duo-bubwrap, .duo-lesson.k-words .duo-bubwrap { margin-bottom: 30%; }
.duo-lesson .duo-combo { left: 0; right: auto; top: 0; z-index: 3; }

/* ===================== Vocabulario por temas ===================== */
#wordsMode { margin-bottom: 12px; }
.vt-wrap { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }
.vt-due { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(227,176,75,.45); background: var(--gold-soft); color: var(--ink); font: inherit; text-align: left; }
.vt-due b { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: #E3B04B; color: #0E213E; font-weight: 900; }
.vt-due span { flex: 1; font-weight: 700; } .vt-due em { font-style: normal; font-weight: 800; color: var(--gold); }
.vt-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.vt-h b { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.vt-h span { font-size: .84rem; color: var(--muted); }
.vt-sec.evangelio .vt-h b::before { content: "✦ "; color: var(--gold); }
.vt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vt-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; min-height: 118px; border-radius: 18px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line), 0 6px 16px rgba(14,33,62,.06); transition: transform .1s; }
.vt-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.vt-ico { font-size: 1.7rem; line-height: 1; margin-bottom: 2px; }
.vt-card b { font-size: .98rem; line-height: 1.2; }
.vt-card small { font-size: .74rem; color: var(--muted); margin-top: auto; }
.vt-bar { display: block; width: 100%; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.vt-bar i { display: block; height: 100%; background: linear-gradient(90deg, #C4922F, #E3B04B); border-radius: 999px; }
.vt-card.done { border-color: rgba(227,176,75,.6); } .vt-card.done small { color: var(--gold); font-weight: 800; }
.vt-sec.evangelio .vt-card { background: linear-gradient(170deg, var(--surface), var(--gold-soft)); }
/* pantalla del tema */
.vt-topic { display: flex; flex-direction: column; gap: 14px; }
.vt-thead { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: linear-gradient(170deg, #F8F1E0, #EFE3C6); color: #172846; outline: 1px solid rgba(156,115,34,.38); outline-offset: -6px; }
.vt-tico { font-size: 2.4rem; }
.vt-thead small { font-family: var(--f-brand); font-size: .66rem; letter-spacing: .14em; color: #9C7322; }
.vt-thead h2 { margin: 2px 0; font-family: Georgia, serif; font-size: 1.45rem; color: #172846; }
.vt-thead span { font-size: .84rem; color: #6E6550; }
.vt-group { border-radius: 18px; padding: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(227,176,75,.18); display: flex; flex-direction: column; gap: 10px; }
.vt-group.done { border-color: rgba(63,193,142,.45); }
.vt-gtop { display: flex; align-items: center; gap: 10px; }
.vt-gtop b { flex: 1; font-family: Georgia, serif; font-size: 1.08rem; color: #F6D88E; }
.vt-go { border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 800; font-size: .82rem; color: #172846; background: linear-gradient(180deg, #F3CF83, #E3B04B); }
.vt-group.done .vt-go { background: rgba(63,193,142,.18); color: #9BF0C8; box-shadow: inset 0 0 0 1px rgba(63,193,142,.5); }
.vt-words { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vt-w { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border-radius: 12px; text-align: left; font: inherit; color: #172846; background: linear-gradient(180deg, #FBF6EA, #EEE2C4); border: 0; box-shadow: 0 2px 0 #B9A578; }
.vt-w b { font-family: Georgia, serif; font-size: 1rem; } .vt-w span { font-size: .8rem; color: #6E6550; } .vt-w small { font-size: .7rem; color: #9C7322; font-weight: 700; }
#wordsMode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#wordsMode button { padding-left: 4px; padding-right: 4px; white-space: nowrap; font-size: .92rem; }
.vt-sec.evangelio .vt-card { background: var(--surface); border-color: rgba(227,176,75,.35); }

/* ===== Explicación en escena: el tutor habla, las palabras salen a su derecha y el texto aparece al ritmo de su voz ===== */
.duo-lesson.k-board .duo-bub, .duo-lesson.k-board .duo-who { display: none; }
.duo-lesson.k-board .duo-head { align-items: stretch; min-height: clamp(250px, 40vh, 330px); }
.duo-lesson.k-board .duo-stage { width: clamp(150px, 44vw, 190px); align-self: flex-end; }
.duo-lesson.k-board .duo-bubwrap { margin: 0; justify-content: center; }
.cl-items { display: flex; flex-direction: column; justify-content: center; gap: 8px; max-height: clamp(250px, 40vh, 330px); overflow-y: auto; padding: 4px 2px 4px 0; scrollbar-width: none; }
.cl-items::-webkit-scrollbar { display: none; }
.cl-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 12px; border-radius: 12px; border: 0; font: inherit; text-align: left; color: #172846;
  background: linear-gradient(180deg, #FBF6EA, #EEE2C4); box-shadow: 0 3px 0 #B9A578, 0 6px 14px rgba(0,0,0,.25); opacity: .55; transform-origin: left center;
  animation: clChipIn .55s cubic-bezier(.2,.9,.3,1.2) both; transition: opacity .3s, transform .3s, box-shadow .3s; }
.cl-chip b { font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.2; }
.cl-chip small { font-size: .76rem; color: #6E6550; }
.cl-chip.now { opacity: 1; transform: scale(1.04); box-shadow: 0 3px 0 #9C7322, 0 0 0 3px rgba(246,216,142,.6), 0 10px 22px rgba(227,176,75,.3); }
.cl-items:not(:has(.now)) .cl-chip { opacity: 1; }
@keyframes clChipIn { from { opacity: 0; transform: translateX(70px) scale(.9); } to { transform: translateX(0) scale(1); } }
.cl-cap { border-radius: 18px; padding: 14px 16px 16px; background: rgba(10,23,47,.55); border: 1px solid rgba(227,176,75,.22); min-height: 110px; display: flex; flex-direction: column; gap: 6px; }
.cl-caph { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #F6D88E; font-weight: 800; }
.cl-say { font-family: Georgia, "Times New Roman", serif; font-size: 1.16rem; line-height: 1.5; color: #F4F6FB; }
.cl-say p { margin: 0; }
.tw { opacity: 0; transition: opacity .28s ease; }
.tw.on { opacity: 1; }
.cl-itemline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.cl-itemline b { font-size: 1.45rem; color: #FFF3D1; } .cl-itemline span { color: #F6D88E; font-size: 1.05rem; }
.cl-note { margin: 0; color: #DCE4F2; }
.cl-exs { display: flex; flex-direction: column; gap: 8px; }
.cl-ctl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cl-mini { border: 1px solid rgba(143,166,214,.3); background: rgba(255,255,255,.04); color: #C9D3E6; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .8rem; font-weight: 700; }
/* el tutor ofrece repasar */
.cl-offer { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cl-no { background: rgba(255,255,255,.06); color: #EEF2F9; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(143,166,214,.3); font-weight: 800; letter-spacing: .06em; }
.cl-offmic { align-self: center; } .cl-offmic.on { color: #FFB2A8; border-color: #EE7468; animation: micPulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cl-chip { animation: none; } .tw { transition: none; } }
.cl-items.many { gap: 6px; justify-content: flex-start; }
.cl-items.many .cl-chip { flex-direction: row; align-items: baseline; gap: 8px; padding: 7px 11px; flex: none; }
.cl-items.many .cl-chip b { font-size: 1.02rem; white-space: nowrap; }
.cl-items.many .cl-chip small { font-size: .72rem; }
/* textos más discretos en la clase */
.duo-head.quiet .duo-bub, .duo-head.quiet .duo-who { visibility: hidden; }
.cl-say { font-size: .98rem; line-height: 1.5; }
.cl-caph { font-size: .62rem; }
.cl-itemline b { font-size: 1.15rem; } .cl-itemline span { font-size: .92rem; }
.cl-note { font-size: .95rem; }
.cl-cap { min-height: 92px; padding: 12px 14px; }
.duo-lesson:is(.k-goal, .k-board, .k-mistake, .k-words, .k-dialogue, .k-produce, .k-review, .k-check) .duo-bub { font-size: .95rem; padding: 10px 13px; }
.cl-goal h2 { font-size: 1.35rem; } .cl-goaltxt { font-size: .95rem; } .cl-plan li { font-size: .88rem; }
.cl-mk { font-size: .98rem; } .cl-why { font-size: .9rem; }
.cl-weak { gap: 6px; }
.cl-weak small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #F6D88E; font-weight: 800; }
.cl-weak ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #DCE4F2; font-size: .92rem; }
.cl-sum2 { display: block; margin-top: 8px; font-family: var(--f-brand); letter-spacing: .14em; color: #A9443B; font-size: .66rem; }
.cl-sumweak { margin: 6px 0; padding-left: 20px; font-size: .92rem; color: #5E5440; }
/* espera amena mientras se prepara una clase nueva */
.ls-center.prep { gap: 10px; text-align: center; padding: 0 12px; }
.prep-t { font-family: Georgia, serif; font-weight: 700; font-size: 1.2rem; color: #F6D88E; }
.prep-s { margin: 0; font-weight: 700; color: #EEF2F9; min-height: 1.4em; }
.prep-bar { width: min(260px, 80%); height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(227,176,75,.18); }
.prep-bar i { display: block; height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, #B98A2C, #E3B04B, #F6D88E); transition: width .5s ease; }
.prep-tip { margin: 6px 0 0; max-width: 300px; font-size: .9rem; color: #C9D3E6; line-height: 1.4; }
.prep-n { font-size: .75rem; }
/* el globito de la tarjeta de bienvenida solo aparece de vez en cuando */
.hc-say { opacity: 0; transform: translateY(6px) scale(.92); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.hc-say.in { opacity: 1; transform: none; }
/* menú de lección: entra y sale suave (sin pantallazo) */
.lchoose { opacity: 0; transition: opacity .26s ease; }
.lchoose.open { opacity: 1; }
.lchoose .lchoose-card { transform: translateY(40px); transition: transform .34s cubic-bezier(.2,.85,.3,1); }
.lchoose.open .lchoose-card { transform: none; }
.lchoose.mc-certov .lchoose-card { transform: scale(.94); }
.lchoose.mc-certov.open .lchoose-card { transform: none; }
/* las islas ya no se hunden de golpe con :active; lo hace una animación suave al tocarlas */
.main .path-node.isl-node:active, .main .path-node:active, .main .path-node.pf-node:active { translate: none; }
@media (prefers-reduced-motion: reduce) { .lchoose, .lchoose .lchoose-card { transition: none; } }
/* el avatar SIEMPRE del mismo tamaño y en el mismo lugar en toda la lección (sin brincos entre ejercicios) */
.duo-lesson[class*="k-"] .duo-stage { width: clamp(132px, 38vw, 164px); transition: none; }
.duo-lesson[class*="k-"] .duo-head { min-height: 0; }
.duo-lesson[class*="k-"] .duo-bubwrap { margin-bottom: 34%; transition: margin .3s ease; }
.duo-lesson[class*="k-"] .duo-head.long .duo-bubwrap { margin-bottom: 14%; }
.duo-lesson.k-board[class*="k-"] .duo-bubwrap { margin: 0; }
.duo-lesson[class*="k-"] .cl-items { max-height: clamp(230px, 34vh, 290px); }
@media (max-height: 700px) { .duo-lesson[class*="k-"] .duo-stage { width: 116px; } }
/* solo el contenido de abajo entra animado; el avatar se queda quieto */
.duo-lesson > .duo-head { will-change: auto; }
.err-why { display: block; max-width: 320px; margin-top: 6px; font-size: .78rem; opacity: .8; word-break: break-word; }
/* Perfil: "Soy" fijo y niveles que se desbloquean al aprobar el examen */
.lock-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(180deg, #F3CF83, #E3B04B); color: #14213D; font-weight: 800; }
.lock-pill .lp-lock { font-size: .85rem; opacity: .75; }
.lock-note { display: block; width: 100%; margin-top: 6px; font-size: .78rem; }
#setLevel { gap: 8px; }
.lvl-pill { position: relative; min-width: 58px; height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 800; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.lvl-pill .lvl-ico { font-size: .78rem; }
.lvl-pill.current { background: linear-gradient(180deg, #F3CF83, #E3B04B); border-color: #E3B04B; color: #14213D; box-shadow: 0 0 0 4px rgba(227,176,75,.2); }
.lvl-pill.done { background: rgba(63,193,142,.16); border-color: #3FC18E; color: #9BF0C8; }
.lvl-pill.done .lvl-ico { color: #3FC18E; font-weight: 900; }
.lvl-pill.locked { opacity: .55; }
.lvl-pill.locked .lvl-ico { font-size: .7rem; filter: grayscale(1); }
#setLevel { display: flex; flex-wrap: nowrap; }
#setLevel .lvl-pill { flex: 1; min-width: 0; padding: 0 6px; height: 42px; font-size: .92rem; gap: 3px; }
/* niveles en círculos: actual dorado, aprobados verdes, bloqueados transparentes con candado dorado */
#setLevel { display: flex; flex-wrap: wrap; gap: 10px; }
#setLevel .lvl-pill { flex: none; width: 56px; height: 56px; min-width: 0; padding: 0; border-radius: 50%; font-size: 1rem; }
#setLevel .lvl-pill.current { background: linear-gradient(180deg, #F3CF83, #E3B04B); border-color: #E3B04B; color: #14213D; box-shadow: 0 0 0 4px rgba(227,176,75,.18); }
#setLevel .lvl-pill.done { background: linear-gradient(180deg, #5ED6A4, #3FC18E); border-color: #3FC18E; color: #0B2A1D; }
#setLevel .lvl-pill.locked { opacity: 1; background: var(--surface); }
#setLevel .lvl-pill.locked b { opacity: .28; }
#setLevel .lvl-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #E3B04B; pointer-events: none; }
#setLevel .lvl-lock svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
/* tipo de voz de cada plan */
.plan-voice { margin: 10px 0 4px; padding: 7px 12px; border-radius: 12px; font-size: .84rem; font-weight: 800; }
.plan-voice.turnos { background: rgba(143,176,234,.14); color: #CFE0FF; border: 1px solid rgba(143,176,234,.35); }
.plan-voice.vivo { background: rgba(227,176,75,.16); color: #F6D88E; border: 1px solid rgba(227,176,75,.5); }
/* menú de abajo transparente (efecto cristal): se ve el contenido pasar por debajo */
.main .tabbar { background: linear-gradient(180deg, rgba(11,26,51,.35), rgba(8,19,40,.62)); border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.main .tabbar button { color: rgba(220,231,255,.78); text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.main .tabbar button[aria-current="page"] { color: #F3CF83; }
.route-banner .rb-note { display: block; margin-top: 4px; font-size: .7rem; color: #9FB0CF; opacity: .9; }
/* el compañero como parte de la app: cada cambio (al repetirse o al cambiar de gesto) se funde suave, sin brincos */
.vloop video { transition: opacity .32s ease; }
.vloop video.wait { transition: none; }
.vloop.bv { opacity: 0; transition: opacity .38s ease; }
.vloop.bv.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vloop video, .vloop.bv { transition: none; } }
/* el avatar aparece con un fundido suave la primera vez (no "salta" como un video que carga) */
.vloop:not(.bv) video.wait { opacity: 0; }
/* las tarjetitas de palabras nunca se cortan a la izquierda: sin scroll de lado, caben completas y el texto se acomoda */
.cl-items { overflow-x: hidden; padding: 6px 10px 8px 4px; position: relative; }
.cl-chip { box-sizing: border-box; max-width: 100%; min-width: 0; flex-shrink: 0; }
.cl-chip b, .cl-chip small { overflow-wrap: anywhere; }
.cl-items.many .cl-chip { flex-wrap: wrap; row-gap: 0; }
.cl-items.many .cl-chip b { white-space: normal; }
.cl-chip.now { transform: scale(1.03); }
.duo-lesson.k-board[class*="k-"] .cl-items { max-height: clamp(260px, 42vh, 360px); }
/* con 5 o más formas, tarjetas más compactas para que se vean todas sin cortarse */
.cl-items.many { gap: 5px; padding: 4px 10px 6px 4px; }
.cl-items.many .cl-chip { padding: 4px 11px 5px; }
/* ===== Detalles del cielo (noche: luna, estrellas, fugaces · día: rayos, nubes, pájaros) ===== */
.sky-fx { overflow: hidden; }
.sky-fx > div { position: absolute; inset: 0; transition: opacity .9s ease; }
.fx-day { opacity: 0; }
body[data-sky="day"] .fx-night { opacity: 0; }
body[data-sky="day"] .fx-day { opacity: 1; }
/* pausa todo cuando no estás en el camino */
.sky-fx.paused * { animation-play-state: paused !important; }
.sky-fx i { position: absolute; display: block; pointer-events: none; }
/* luna creciente con halo */
.fx-moon { right: 30px; top: 118px; width: 58px; height: 58px; border-radius: 50%;
  box-shadow: inset -13px 6px 0 0 #F6EBCB, 0 0 26px 4px rgba(246,235,203,.18); transform: rotate(-18deg); opacity: .95; }
.fx-moon::after { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(200,215,255,.12), transparent 65%); }
/* vía láctea suave en diagonal */
.fx-milky { left: -30%; top: 6%; width: 160%; height: 210px; transform: rotate(-24deg); opacity: .55;
  background: radial-gradient(50% 50% at 50% 50%, rgba(170,190,255,.16), rgba(170,190,255,0) 70%),
              radial-gradient(30% 35% at 38% 46%, rgba(255,230,200,.08), transparent 70%);
  filter: blur(6px); }
/* estrellas que titilan */
.fx-tw { width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px 1px rgba(210,225,255,.6); animation: fxTw 4s ease-in-out infinite; }
.fx-tw.big { width: 3px; height: 3px; box-shadow: 0 0 6px 2px rgba(255,240,210,.55); }
.fx-tw.big::before, .fx-tw.big::after { content: ""; position: absolute; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translate(-50%,-50%); width: 14px; height: 1px; }
.fx-tw.big::after { transform: translate(-50%,-50%) rotate(90deg); }
@keyframes fxTw { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
/* estrella fugaz */
.fx-shoot { width: 110px; height: 2px; border-radius: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9) 85%, #fff);
  filter: drop-shadow(0 0 4px rgba(200,220,255,.9)); opacity: 0; animation: fxShoot 1.2s ease-out forwards; }
@keyframes fxShoot {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(.2); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(-260px) scaleX(1); } }
/* día: rayos de sol que giran muy lento */
.fx-rays { right: -68px; top: 48px; width: 300px; height: 300px; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255,240,200,.22) 0deg 6deg, rgba(255,240,200,0) 6deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: fxSpin 90s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
/* nubes esponjosas que pasan */
.fx-cloud { left: 0; width: 150px; height: 46px; opacity: .75; animation: fxCloud 90s linear infinite;
  background: radial-gradient(28px 22px at 40px 26px, rgba(255,255,255,.75), transparent 70%),
              radial-gradient(36px 28px at 76px 20px, rgba(255,250,240,.8), transparent 70%),
              radial-gradient(30px 20px at 112px 28px, rgba(255,255,255,.7), transparent 70%),
              radial-gradient(70px 14px at 76px 36px, rgba(255,240,230,.65), transparent 70%);
  filter: blur(1.5px); }
.fx-cloud.c1 { transform: scale(.7); opacity: .55; }
.fx-cloud.c2 { width: 210px; opacity: .45; filter: blur(3px); }
@keyframes fxCloud { from { transform: translateX(-240px); } to { transform: translateX(calc(100vw + 60px)); } }
/* pájaros a lo lejos */
.fx-birds { left: 0; opacity: .7; animation: fxBirds 20s linear forwards; }
.fx-birds svg { display: block; fill: none; stroke: #4A3570; stroke-width: 1.6; stroke-linecap: round; animation: fxFlap .6s ease-in-out infinite alternate; }
.fx-birds.rtl { animation-name: fxBirdsR; } .fx-birds.rtl svg { transform: scaleX(-1); }
@keyframes fxBirds { from { transform: translate(-80px, 0); } to { transform: translate(calc(100vw + 40px), -60px); } }
@keyframes fxBirdsR { from { transform: translate(calc(100vw + 40px), 0); } to { transform: translate(-80px, -50px); } }
@keyframes fxFlap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
.fx-birds.rtl svg { animation-name: fxFlapR; } @keyframes fxFlapR { from { transform: scaleX(-1) scaleY(1); } to { transform: scaleX(-1) scaleY(.55); } }
/* destellos de luz flotando */
.fx-mote { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,240,200,.85); box-shadow: 0 0 8px 2px rgba(255,220,160,.5); opacity: 0; animation: fxMote 12s ease-in-out infinite; }
@keyframes fxMote { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: .8; } 75% { opacity: .5; } 100% { opacity: 0; transform: translateY(-140px) translateX(20px); } }
@media (prefers-reduced-motion: reduce) { .sky-fx * { animation: none !important; } .fx-tw { opacity: .7; } .fx-mote, .fx-shoot, .fx-birds { display: none; } }
/* luna y sol arriba, entre las casitas, para que no queden detrás de la tarjeta de la unidad */
.fx-moon { right: auto; left: 58%; top: 58px; width: 42px; height: 42px; box-shadow: inset -10px 5px 0 0 #F6EBCB, 0 0 22px 3px rgba(246,235,203,.16); }
body[data-sky="day"] .sky-sun { left: 56% !important; right: auto !important; top: 40px !important; width: 78px !important; height: 78px !important; }
.fx-rays { right: auto; left: calc(56% + 39px - 130px); top: 79px; margin-top: -130px; width: 260px; height: 260px; }
/* todas las islas flotan suavecito, cada una a su ritmo (sube, baja y se mece un poquito) */
@keyframes islBob { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -7px; rotate: -.8deg; } 65% { translate: 0 -3px; rotate: .6deg; } }
.main .path-node.isl-node .isl, .main .path-node.isl-node .pn-ico, .main .path-node.isl-node .pn-face { animation: islBob 5.2s ease-in-out infinite; }
.main .path-row:nth-child(3n+1) .path-node.isl-node :is(.isl, .pn-ico, .pn-face) { animation-duration: 4.6s; animation-delay: -1.3s; }
.main .path-row:nth-child(3n+2) .path-node.isl-node :is(.isl, .pn-ico, .pn-face) { animation-duration: 5.8s; animation-delay: -3.1s; }
.main .path-row:nth-child(3n) .path-node.isl-node :is(.isl, .pn-ico, .pn-face) { animation-duration: 5.2s; animation-delay: -.4s; }
@media (prefers-reduced-motion: reduce) { .main .path-node.isl-node :is(.isl, .pn-ico, .pn-face) { animation: none !important; } }
/* aviso: se acabaron los minutos de hoy */
.lim-sheet { position: fixed; inset: 0; z-index: 9000; background: rgba(6,14,30,.62); backdrop-filter: blur(4px); display: grid; place-items: end center; padding: 16px; animation: fadeIn .25s ease both; }
.lim-sheet.out { opacity: 0; transition: opacity .25s ease; }
.lim-card { width: min(420px, 100%); background: linear-gradient(180deg, #16294D, #0E213E); border: 1px solid rgba(227,176,75,.35); border-radius: 24px; padding: 18px 18px 14px; color: #EEF2F9; text-align: center; display: grid; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: limUp .38s cubic-bezier(.2,.9,.3,1.1) both; }
.lim-card h3 { margin: 0; color: #F6D88E; font-size: 1.15rem; } .lim-card p { margin: 0 0 4px; color: #C9D3E6; line-height: 1.45; }
.lim-buddy { width: 110px; height: 130px; margin: -54px auto 0; position: relative; } .lim-buddy .vloop { position: absolute; inset: 0; }
.lim-buddy video { width: 100%; height: 100%; object-fit: contain; }
@keyframes limUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* plan, código de escuela, enlaces legales y visor */
#profLeft { display: block; font-size: .78rem; margin-top: 2px; }
.code-row { display: flex; gap: 8px; } .code-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; }
#schoolMsg { display: block; margin-top: 4px; }
.legal-links { text-align: center; font-size: .8rem; margin: 6px 0 10px; color: var(--muted); }
.legal-links a, label.check a { color: var(--gold-bright, #F6D88E); text-decoration: underline; }
.legal-view { position: fixed; inset: 0; z-index: 9500; background: #F7F1E3; display: flex; flex-direction: column; animation: fadeIn .22s ease both; }
.legal-view.out { opacity: 0; transition: opacity .22s ease; }
.legal-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 18px; background: #0E213E; color: #F6D88E; }
.legal-bar .icon-btn { color: #fff; font-size: 1.1rem; }
.legal-view iframe { flex: 1; border: 0; width: 100%; background: #F7F1E3; }
#delAccBtn { margin-top: 8px; opacity: .85; }
/* reportar respuesta de la IA */
.rep-btn { opacity: .55; } .rep-btn:hover, .rep-btn:active { opacity: 1; }
.rep-btn .i { width: 18px; height: 18px; }
.ls-head .rep-btn { padding: 4px; flex: none; }
.rep-card { text-align: left; max-height: 86vh; overflow-y: auto; }
.rep-card h3 { text-align: center; }
.rep-list { display: grid; gap: 6px; }
.rep-opt { text-align: left; font: inherit; font-size: .86rem; line-height: 1.35; color: #DCE4F2; background: rgba(255,255,255,.05); border: 1px solid rgba(143,166,214,.28); border-radius: 12px; padding: 8px 10px; }
.rep-opt.on { border-color: #E3B04B; background: rgba(227,176,75,.12); color: #fff; }
.rep-why { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-chip { font: inherit; font-size: .8rem; font-weight: 700; color: #C9D3E6; background: transparent; border: 1px solid rgba(143,166,214,.35); border-radius: 999px; padding: 6px 11px; }
.rep-chip.on { background: #E3B04B; border-color: #E3B04B; color: #14213D; }
.rep-note { width: 100%; font: inherit; font-size: .9rem; border-radius: 12px; border: 1px solid rgba(143,166,214,.35); background: rgba(0,0,0,.2); color: #fff; padding: 8px 10px; resize: none; }
.plan-legal { font-size: .72rem; line-height: 1.45; color: #9fb0cf; text-align: center; margin: 10px 4px 4px; }
.plan-legal a { color: #F6D88E; }
.plan-links { display: flex; justify-content: center; gap: 18px; margin: 4px 0 8px; }
.plan-links .link { font-size: .82rem; color: #C9D3E6; background: none; border: 0; text-decoration: underline; }

.plan-trial { margin: 8px 2px 0; font-size: .8rem; opacity: .8; text-align: center; }

/* Planes a la vista (Inicio y Practicar, solo sin plan) */
.plan-promo { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 14px 14px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(135deg, #14294D 0%, #1E3A68 60%, #2A4A7E 100%); border: 1px solid rgba(227,176,75,.55); box-shadow: 0 8px 22px rgba(10,22,48,.25); color: #fff; }
.plan-promo .pp-ic { font-size: 1.6rem; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgba(227,176,75,.18); }
.plan-promo .pp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-promo .pp-txt b { font-size: .98rem; }
.plan-promo .pp-txt span { font-size: .8rem; color: #C9D3E6; }
.plan-promo .pp-go { flex: none; padding: 9px 14px; font-size: .85rem; white-space: nowrap; }
.hm-voice.tap { cursor: pointer; }
@media (max-width: 360px) { .plan-promo { flex-wrap: wrap; } .plan-promo .pp-go { width: 100%; } }
.tabbar.five { grid-template-columns: repeat(5, 1fr); }
.tabbar button[hidden] { display: none; }
.tabbar button.tab-plans, .tabbar button.tab-plans span { color: #E3B04B; }
/* Planes como pestaña */
.plans-page { background: radial-gradient(120% 60% at 50% 0%, #1C3A6B 0%, #0E213E 55%, #081529 100%); color: #fff; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(var(--tabbar) + 28px + env(safe-area-inset-bottom, 0px)); }
/* Pestaña Planes: medalla dorada (del tamaño de los demás íconos) que late, con partículas */
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tabbar button.tab-plans { overflow: visible; }
.tp-medal { position: relative; width: 28px; height: 28px; margin: -2px 0 -2px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #FFF1B8 0%, #F6CF63 32%, #E3B04B 58%, #B07A1C 100%);
  box-shadow: 0 0 0 1.5px rgba(255,224,138,.7), 0 0 12px rgba(227,176,75,.55), inset 0 -2px 3px rgba(120,70,0,.35), inset 0 1px 2px rgba(255,255,255,.7);
  overflow: visible; animation: tpBeat 1.8s ease-in-out infinite; }
.tp-crown { width: 17px; height: 17px; fill: #5A3A05; filter: drop-shadow(0 .5px 0 rgba(255,240,190,.8)); position: relative; z-index: 2; }
.tp-ring { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255,214,110,.75); animation: tpRing 1.8s ease-out infinite; }
.tp-shine { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 3; pointer-events: none; }
.tp-shine::before { content: ""; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: rotate(20deg); animation: tpShine 3.4s ease-in-out infinite; }
/* partículas doradas que salen alrededor */
.tp-p { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 5px 1px rgba(255,214,110,.9); opacity: 0; z-index: 4; pointer-events: none; animation: tpFly 2.4s ease-out infinite; }
.tp-p.p1 { --x: 0px;   --y: -24px; animation-delay: 0s; }
.tp-p.p2 { --x: 17px;  --y: -17px; animation-delay: .3s; width: 2px; height: 2px; }
.tp-p.p3 { --x: 24px;  --y: 0px;   animation-delay: .6s; }
.tp-p.p4 { --x: 17px;  --y: 15px;  animation-delay: .9s; width: 2px; height: 2px; }
.tp-p.p5 { --x: 0px;   --y: 22px;  animation-delay: 1.2s; }
.tp-p.p6 { --x: -17px; --y: 15px;  animation-delay: 1.5s; width: 2px; height: 2px; }
.tp-p.p7 { --x: -24px; --y: 0px;   animation-delay: 1.8s; }
.tp-p.p8 { --x: -17px; --y: -17px; animation-delay: 2.1s; width: 2px; height: 2px; }
.tabbar button.tab-plans[aria-current="page"] .tp-medal { box-shadow: 0 0 0 1.5px #FFE08A, 0 0 18px rgba(255,214,110,.9), inset 0 -2px 3px rgba(120,70,0,.35), inset 0 1px 2px rgba(255,255,255,.7); }
.tabbar button.tab-plans .tp-lbl { color: #E3B04B; }
@keyframes tpBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(.96); } 45% { transform: scale(1.08); } 60% { transform: scale(1); } }
@keyframes tpRing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes tpShine { 0%, 55% { translate: 0 0; } 80%, 100% { translate: 475% 0; } }
@keyframes tpFly { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tp-medal, .tp-ring, .tp-shine::before, .tp-p { animation: none; } }
/* iPhone: sin botón de Google (regla 4.8 de Apple) */
.ios [data-google], .ios .email-form .or { display: none !important; }
/* iPhone: los avatares se dibujan en un canvas (video empacado con transparencia) */
.vloop.pk video { opacity: .01 !important; z-index: 0 !important; pointer-events: none; }
.vloop canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; transition: opacity .32s ease; }
.vloop canvas.off, .vloop canvas.wait { opacity: 0; }
/* Perfil: lo que incluye tu plan */
.plan-incl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.plan-incl li { position: relative; padding-left: 26px; font-size: .92rem; line-height: 1.35; }
.plan-incl li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: #7FD1AE; font-weight: 900; }
.plan-incl li.no { opacity: .55; }
.plan-incl li.no::before { content: "–"; color: inherit; }

/* --- Compañero de la tarjeta de bienvenida dibujado en un lienzo (sin capas de video que se desfasen al deslizar) --- */
.hc-buddy .pb-src { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hc-buddy .pb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* --- Cambio de gesto natural: fundido real entre videos (por suma) y cambio de copia instantáneo --- */
.vloop video { transition: none !important; }
.vloop.bv { transition: opacity .24s linear !important; }
.bv-blend > .vloop.bv { mix-blend-mode: plus-lighter; }
.vloop canvas { transition: none !important; }

/* Fluidez: las islas solo se mecen cuando están cerca de la pantalla (antes se movían cientos a la vez, aunque no se vieran) */
/* fluidez: las islas lejos de la pantalla no se animan (ni ocupan capa), lo muy lejano no se dibuja,
   y del cielo solo se anima el de ahora (de día no titilan las estrellas escondidas, de noche no pasan nubes) */
.main .path-node.isl-node:not(.near) :is(.isl, .pn-ico, .pn-face) { animation: none; }
#pathWrap > .far { visibility: hidden; }
#pathWrap > .far * { animation: none !important; }
body[data-sky="day"] .fx-night *, body:not([data-sky="day"]) .fx-day * { animation: none !important; }
/* el compañero de la tarjeta aparece suave (no de golpe) cuando ya tiene su primer cuadro */
.hc-buddy .pb-canvas { opacity: 0; transition: opacity .35s ease; }
.hc-buddy .pb-canvas.ready { opacity: 1; }

/* pista del foquito: palabras clave, cómo empezar y la respuesta solo si la pides */
.pista-tt { font-weight: 800; font-size: .82rem; letter-spacing: .02em; }
.pista-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.pista-key { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: .88rem; }
.hint.pista-start small { display: block; color: var(--muted); font-weight: 600; font-size: .72rem; }
.pista-more { align-self: flex-start; background: none; border: 0; padding: 4px 2px; font-weight: 700; font-size: .82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.call-hints .pista-tt { color: #F3CF83; }
.call-hints .pista-key { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.call-hints .pista-more { color: #B9C4DA; align-self: center; }
.call-hints .hint.pista-start small { color: #B9C4DA; }
/* queda 1 minuto */
#callTimer.ending { color: #F3CF83; font-weight: 800; animation: tEnd 1.6s ease-in-out infinite; }
@keyframes tEnd { 50% { opacity: .55; } }

/* puntitos del camino: un solo elemento dibuja los 3 (::before, <i> y ::after) */
.path-dots::before, .path-dots::after { content: ""; display: block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #CBD3E1; }
.main .path-dots::before, .main .path-dots::after { width: 8px; height: 8px; background: rgba(143,166,214,.35); }
.main .path-dots.lit::before, .main .path-dots.lit::after { background: #7FD1AE; box-shadow: 0 0 10px rgba(127,209,174,.8); }
.path-dots::before { transform: translateX(var(--d1, 0)); }
.path-dots > i { transform: translateX(var(--d2, 0)); }
.path-dots::after { transform: translateX(var(--d3, 0)); }
/* fluidez al cambiar de pestaña: Inicio (el camino, con miles de piezas) nunca se "desarma";
   cuando vas a otra pestaña solo se vuelve invisible debajo, y la otra pestaña se pone encima.
   Así regresar a Inicio es instantáneo (antes el celular tenía que recalcular todo el camino). */
.main #page-home[hidden] { display: flex !important; opacity: 0; }
.main .tab-page:not(#page-home) { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; bottom: 0; z-index: 2; }
/* SOLO Windows / web (nunca en las apps de Android ni iPhone): los menús como ventanita flotante en medio */
@media (min-width: 700px) {
  html.web .sheet, html.web .lchoose { align-items: center; padding: 16px; }
  html.web .lim-sheet { place-items: center; }
  html.web .sheet-card { width: min(460px, 100%); border-radius: 24px; padding-bottom: 20px; max-height: min(80vh, 640px); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  html.web .lchoose-card { width: min(460px, 100%); border-radius: 26px; padding-bottom: 18px; border: 1px solid rgba(255,255,255,.1); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
  html.web .lchoose .lchoose-card { transform: translateY(14px) scale(.96); }
  html.web .lchoose.open .lchoose-card { transform: none; }
}
/* ===================== WINDOWS EN PANTALLA DE COMPUTADORA (html.wide) =====================
   Solo la versión web/Windows (nunca las apps de Android ni iPhone): la app ocupa toda la pantalla,
   el menú pasa a la izquierda y el camino de islas va de izquierda a derecha. */
html.wide .screen { max-width: none; }
html.wide { --side: 0px; }
/* menú abajo, centrado */
html.wide .main .tabbar { display: flex; justify-content: center; gap: 8px; }
html.wide .main .tabbar button { width: 150px; flex: none; font-size: .8rem; }
html.wide .main .tab-page { padding: 28px 40px calc(var(--tabbar) + 24px); }
html.wide .home-mini { display: none !important; }
/* las otras pestañas: contenido a lo ancho, en columnas */
html.wide .main .tab-page:not(#page-home) > * { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; }
html.wide .sc-list, html.wide .scen-list, html.wide #scenarioGroups .sc-group > div:not(:first-child) { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
/* Inicio: la tarjeta arriba y el camino ocupando todo lo demás, de izquierda a derecha */
html.wide #page-home { overflow: hidden; gap: 14px; padding-bottom: calc(var(--tabbar) + 12px); }
html.wide #page-home > .hero-card { width: 100%; max-width: 1180px; margin: 0 auto; min-height: 0; }
html.wide #pathWrap { flex: 1 1 auto; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; margin: 0 -40px; padding: 30px 60px 30px 60px; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: rgba(227,176,75,.6) transparent; }
html.wide #pathWrap > * { flex: none; align-self: center; }
html.wide #pathWrap > .far { visibility: hidden; }
html.wide .path-row { width: 150px; padding: 0 !important; }
html.wide .main .path-row .path-node { left: 0 !important; top: calc(var(--off, 0) * 1.25px); }
html.wide .main .path-row .pn-label { transform: translateY(calc(var(--off, 0) * 1.25px)) !important; max-width: 150px; text-align: center; }
html.wide .path-dots { flex-direction: row; gap: 9px; padding: 0 2px; }
html.wide .path-dots::before { transform: translateY(calc(var(--d1, 0px) * 1.25)); }
html.wide .path-dots > i { transform: translateY(calc(var(--d2, 0px) * 1.25)); }
html.wide .path-dots::after { transform: translateY(calc(var(--d3, 0px) * 1.25)); }
html.wide .level-banner, html.wide .route-banner { width: 300px; margin: 0 26px; align-self: center; }
html.wide .main .path-unit { width: 270px; margin: 0 26px; align-self: center; }
html.wide .path-exam { width: 300px; margin: 0 30px; align-self: center; }
html.wide .path-level { flex-direction: column; justify-content: center; width: 150px; margin: 0 10px; text-align: center; }
html.wide .region-art { width: 380px; height: 120px; margin: 0 -40px !important; align-self: flex-end; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
/* el cielo cubre toda la pantalla */
html.wide .home-sky { margin: -28px -40px 0 -40px; }
/* el mundo en 3D girando (solo Windows en pantalla de computadora, de noche) */
.sky-globe { display: none; }
html.wide .sky-globe { display: block; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
html.wide .sky-globe.show { opacity: 1; }
html.wide .sky-globe canvas { width: 100%; height: 100%; display: block; }
html.wide body[data-sky="day"] .sky-globe { opacity: 0; }
/* islas más grandes en la computadora */
html.wide .path-row { width: 196px; }
html.wide .main .path-row .path-node { scale: 1.32; }
html.wide .main .path-row .pn-label { margin-top: 30px; font-size: .82rem; }
html.wide .path-dots { gap: 12px; }
/* paisaje de día con lugares del mundo y estaciones (solo Windows en pantalla de computadora) */
.sky-land { display: none; }
html.wide .sky-land { display: block; top: calc(100vh - 280px - var(--tabbar) + 24px) !important; bottom: auto; height: 280px !important; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
html.wide .sky-land.show { opacity: 1; }
html.wide body:not([data-sky="day"]) .sky-land { opacity: 0; }
.land-strip { position: absolute; left: 0; bottom: 0; height: 280px; display: flex; will-change: transform; }
.land-strip svg { flex: none; display: block; }
.land-fx { position: absolute; inset: -400px 0 0 0; }
.lfx { position: absolute; top: 0; display: block; animation: lfall 10s linear infinite; }
.lfx.snow { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; }
.lfx.leaf { width: 10px; height: 6px; border-radius: 6px 0; background: #D9822F; }
.lfx.petal { width: 8px; height: 6px; border-radius: 50% 0; background: #F6B6CD; }
@keyframes lfall { from { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(60px, 680px) rotate(320deg); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .lfx { display: none; } }

/* cielo de noche lleno de estrellas en la computadora */
html.wide .home-sky::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100vh; pointer-events: none; background-size: 600px 600px; opacity: .85; transition: opacity 1s ease; background-image: radial-gradient(1px 1px at 331px 154px, #fff, transparent), radial-gradient(0.6px 0.6px at 74px 548px, #dfe9ff, transparent), radial-gradient(1px 1px at 596px 59px, #fff, transparent), radial-gradient(1px 1px at 38px 88px, #cfe0ff, transparent), radial-gradient(0.6px 0.6px at 71px 246px, #fff6d8, transparent), radial-gradient(1.4px 1.4px at 434px 60px, #fff6d8, transparent), radial-gradient(1.2px 1.2px at 126px 228px, #fff6d8, transparent), radial-gradient(1px 1px at 63px 590px, #cfe0ff, transparent), radial-gradient(0.6px 0.6px at 50px 226px, #fff6d8, transparent), radial-gradient(1px 1px at 136px 296px, #fff, transparent), radial-gradient(1px 1px at 553px 120px, #dfe9ff, transparent), radial-gradient(0.6px 0.6px at 573px 185px, #fff6d8, transparent), radial-gradient(0.8px 0.8px at 584px 192px, #fff, transparent), radial-gradient(1px 1px at 560px 64px, #fff, transparent), radial-gradient(1.2px 1.2px at 210px 508px, #fff6d8, transparent), radial-gradient(1px 1px at 437px 321px, #fff6d8, transparent), radial-gradient(0.8px 0.8px at 464px 370px, #fff, transparent), radial-gradient(0.6px 0.6px at 184px 249px, #fff6d8, transparent), radial-gradient(1px 1px at 307px 537px, #dfe9ff, transparent), radial-gradient(1px 1px at 459px 294px, #fff, transparent), radial-gradient(1px 1px at 120px 524px, #fff, transparent), radial-gradient(1px 1px at 350px 155px, #cfe0ff, transparent), radial-gradient(1.4px 1.4px at 40px 79px, #fff6d8, transparent), radial-gradient(0.8px 0.8px at 586px 321px, #dfe9ff, transparent), radial-gradient(1.4px 1.4px at 508px 593px, #cfe0ff, transparent), radial-gradient(0.8px 0.8px at 70px 95px, #cfe0ff, transparent), radial-gradient(1.2px 1.2px at 66px 62px, #dfe9ff, transparent), radial-gradient(0.8px 0.8px at 591px 456px, #cfe0ff, transparent), radial-gradient(1px 1px at 355px 23px, #dfe9ff, transparent), radial-gradient(1px 1px at 172px 119px, #fff, transparent), radial-gradient(0.8px 0.8px at 223px 294px, #fff, transparent), radial-gradient(1.4px 1.4px at 407px 400px, #cfe0ff, transparent), radial-gradient(1px 1px at 82px 170px, #cfe0ff, transparent), radial-gradient(0.8px 0.8px at 562px 284px, #cfe0ff, transparent), radial-gradient(1.2px 1.2px at 563px 285px, #cfe0ff, transparent), radial-gradient(0.8px 0.8px at 367px 389px, #fff, transparent), radial-gradient(0.8px 0.8px at 84px 180px, #fff, transparent), radial-gradient(1px 1px at 238px 12px, #fff6d8, transparent), radial-gradient(0.8px 0.8px at 186px 269px, #fff, transparent), radial-gradient(1px 1px at 149px 429px, #dfe9ff, transparent), radial-gradient(0.8px 0.8px at 579px 326px, #fff6d8, transparent), radial-gradient(1.4px 1.4px at 55px 467px, #fff6d8, transparent), radial-gradient(1px 1px at 401px 407px, #cfe0ff, transparent), radial-gradient(1.2px 1.2px at 106px 493px, #cfe0ff, transparent), radial-gradient(0.6px 0.6px at 63px 195px, #fff, transparent), radial-gradient(0.6px 0.6px at 451px 166px, #dfe9ff, transparent), radial-gradient(0.6px 0.6px at 53px 104px, #fff6d8, transparent), radial-gradient(0.6px 0.6px at 154px 549px, #dfe9ff, transparent), radial-gradient(1.4px 1.4px at 26px 72px, #fff, transparent), radial-gradient(1.2px 1.2px at 385px 152px, #dfe9ff, transparent), radial-gradient(1px 1px at 355px 372px, #fff, transparent), radial-gradient(1px 1px at 118px 499px, #cfe0ff, transparent), radial-gradient(0.6px 0.6px at 495px 319px, #fff, transparent), radial-gradient(1.2px 1.2px at 104px 350px, #dfe9ff, transparent), radial-gradient(1px 1px at 490px 165px, #fff, transparent), radial-gradient(0.8px 0.8px at 210px 540px, #fff, transparent), radial-gradient(1.4px 1.4px at 556px 27px, #fff6d8, transparent), radial-gradient(1.2px 1.2px at 305px 93px, #dfe9ff, transparent), radial-gradient(0.8px 0.8px at 530px 375px, #dfe9ff, transparent), radial-gradient(1px 1px at 228px 545px, #fff6d8, transparent), radial-gradient(1px 1px at 337px 228px, #fff, transparent), radial-gradient(1.2px 1.2px at 245px 410px, #fff, transparent), radial-gradient(1px 1px at 204px 530px, #dfe9ff, transparent), radial-gradient(1.4px 1.4px at 29px 28px, #dfe9ff, transparent), radial-gradient(0.8px 0.8px at 483px 265px, #fff6d8, transparent), radial-gradient(1.4px 1.4px at 352px 457px, #dfe9ff, transparent), radial-gradient(0.8px 0.8px at 373px 82px, #fff, transparent), radial-gradient(0.8px 0.8px at 232px 481px, #dfe9ff, transparent), radial-gradient(1px 1px at 209px 494px, #fff6d8, transparent), radial-gradient(1.2px 1.2px at 1px 490px, #dfe9ff, transparent); }
html.wide body[data-sky="day"] .home-sky::before { opacity: .08; }