:root {
    --ink: #0f0f0f; --cream: #f7f3ec; --warm: #f0e8d8;
    --accent: #c84b2f; --gold: #d4973a; --muted: #8a7f72;
    --card: #ffffff; --green: #2d7a4f;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Nunito Sans',system-ui,-apple-system,sans-serif; background:var(--cream); color:var(--ink); min-height:100vh; line-height:1.55; }

  header { background:var(--ink); color:var(--cream); position:sticky; top:0; z-index:100; border-bottom:3px solid var(--accent); }
  .header-inner { max-width:1100px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .logo { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; }
  .logo-dot { color:var(--accent); }
  .header-nav { display:flex; align-items:center; gap:10px; }
  .header-nav-link { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.78rem; color:var(--cream); text-decoration:none; padding:7px 14px; border:1px solid #444; border-radius:6px; transition:all 0.2s; white-space:nowrap; }
  .header-nav-link:hover { border-color:var(--gold); color:var(--gold); }
  .progress-bar-wrap { flex:1; max-width:320px; display:flex; flex-direction:column; gap:7px; }
  .progress-label { font-family:'Nunito Sans',sans-serif; font-size:0.78rem; color:var(--cream); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
  .progress-label #progress-text { color:var(--gold); }
  .progress-bar { height:9px; background:#2a2a2a; border-radius:6px; overflow:hidden; border:1px solid #333; }
  .progress-fill { height:100%; background:linear-gradient(90deg,var(--accent) 0%,var(--gold) 100%); border-radius:6px; transition:width 0.6s ease; width:0%; }
  .support-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.78rem; background:var(--accent); color:white; border:none; border-radius:6px; padding:8px 18px; cursor:pointer; transition:background 0.2s; white-space:nowrap; }
  .support-btn:hover { background:#a83520; }

  /* MIC PERMISSION BANNER */
  .mic-banner { background:#1a1a2e; color:white; padding:12px 24px; text-align:center; font-family:'Nunito Sans',sans-serif; font-size:0.8rem; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
  .mic-banner.hidden { display:none; }
  .mic-grant-btn { background:var(--accent); color:white; border:none; border-radius:6px; padding:7px 16px; cursor:pointer; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.78rem; }
  .mic-status { font-size:0.75rem; opacity:0.7; }

  .hero { background:var(--ink); color:var(--cream); padding:72px 24px 60px; text-align:center; position:relative; overflow:hidden; }
  .hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(200,75,47,0.18) 0%,transparent 70%); }
  .hero-eyebrow { font-family:'Nunito Sans',sans-serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; position:relative; }
  .hero h1 { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:clamp(2.4rem,6vw,4rem); line-height:1.05; letter-spacing:-0.03em; margin-bottom:16px; position:relative; }
  .hero h1 span { color:var(--accent); }
  .hero-sub { font-style:italic; color:#bbb; font-size:1.1rem; max-width:520px; margin:0 auto 36px; position:relative; line-height:1.6; }
  .hero-stats { display:flex; gap:32px; justify-content:center; flex-wrap:wrap; position:relative; }
  .stat { text-align:center; }
  .stat-num { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:2rem; color:var(--gold); }
  .stat-label { font-size:0.75rem; color:#888; font-style:italic; }

  .lessons-section { max-width:1100px; margin:0 auto 48px; padding:0 24px; }
  .section-header { display:flex; align-items:baseline; gap:16px; margin-bottom:32px; }
  .section-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:-0.02em; }
  .section-badge { font-family:'Nunito Sans',sans-serif; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; background:var(--warm); color:var(--muted); padding:4px 12px; border-radius:20px; border:1px solid #ddd; }
  .lessons-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:20px; }

  .lesson-card { background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.06); transition:transform 0.2s,box-shadow 0.2s; cursor:pointer; border:2px solid transparent; position:relative; }
  .lesson-card:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.12); border-color:var(--accent); }
  .lesson-card.completed { border-color:var(--green); }
  .card-top { padding:20px 22px 14px; display:flex; align-items:flex-start; gap:14px; }
  .lesson-number { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:2rem; color:var(--accent); line-height:1; min-width:48px; text-align:center; }
  .card-meta { flex:1; }
  .card-tag { font-family:'Nunito Sans',sans-serif; font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .card-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1.05rem; line-height:1.3; color:var(--ink); }
  .card-bottom { padding:0 22px 12px; display:flex; align-items:center; justify-content:space-between; }
  .card-preview { font-size:0.82rem; color:var(--muted); font-style:italic; }
  .card-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; background:var(--warm); flex-shrink:0; }
  .completed-badge { position:absolute; top:12px; right:12px; background:var(--green); color:white; border-radius:20px; padding:2px 10px; font-family:'Nunito Sans',sans-serif; font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; }

  /* SOUND DOTS ON CARDS */
  .card-sounds { padding:0 22px 16px; display:flex; align-items:flex-start; gap:6px; }
  .sound-dot-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
  .sound-dot { height:5px; border-radius:3px; background:#e8e0d4; width:100%; transition:background 0.5s; }
  .sound-dot.practiced { background:var(--gold); }
  .sound-dot.mastered  { background:var(--green); }
  .sound-dot-pct { font-family:'Nunito Sans',sans-serif; font-size:0.55rem; color:var(--muted); font-weight:700; }

  /* MODAL */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,10,0.75); z-index:200; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; backdrop-filter:blur(4px); }
  .modal-overlay.open { display:flex; }
  .modal { background:var(--cream); border-radius:20px; max-width:720px; width:100%; margin:auto; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,0.3); animation:modalIn 0.25s ease; }
  @keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
  .modal-header { background:var(--ink); color:var(--cream); padding:28px 32px 24px; position:relative; }
  .modal-eyebrow { font-family:'Nunito Sans',sans-serif; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
  .modal-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.7rem; letter-spacing:-0.02em; line-height:1.2; }
  .close-btn { position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.1); border:none; color:#ccc; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
  .close-btn:hover { background:rgba(255,255,255,0.2); }
  .modal-body { padding:32px; max-height:65vh; overflow-y:auto; }

  /* SCREEN DOTS — indicador de progreso dentro de la lección */
  .screen-dots { display:flex; align-items:center; gap:8px; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid #e8e0d4; flex-wrap:wrap; }
  .screen-dot { width:10px; height:10px; border-radius:50%; background:#e0d4c0; transition:background 0.3s,transform 0.2s; }
  .screen-dot.done   { background:var(--green); }
  .screen-dot.active { background:var(--accent); transform:scale(1.35); box-shadow:0 0 0 3px rgba(200,75,47,0.15); }
  .screen-label { margin-left:auto; font-family:'Nunito Sans',sans-serif; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }

  /* INTRO SCREEN — primera pantalla de cada lección */
  .intro-screen { text-align:center; padding:8px 4px 4px; }
  .intro-emoji { font-size:4rem; margin-bottom:16px; line-height:1; }
  .intro-tag { font-family:'Nunito Sans',sans-serif; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
  .intro-screen-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.8rem; letter-spacing:-0.02em; line-height:1.15; margin-bottom:10px; color:var(--ink); }
  .intro-preview { font-style:italic; color:var(--muted); font-size:1rem; margin-bottom:28px; }
  .intro-text { background:var(--warm); border-radius:12px; padding:20px 24px; line-height:1.75; font-size:0.97rem; border-left:4px solid var(--gold); text-align:left; margin-bottom:28px; }
  .intro-start-btn { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1rem; background:var(--accent); color:white; border:none; border-radius:12px; padding:16px 36px; cursor:pointer; letter-spacing:0.03em; transition:background 0.2s,transform 0.1s; }
  .intro-start-btn:hover { background:#a83520; transform:translateY(-2px); }

  /* LEVEL SELECTOR — pantalla de práctica antes de elegir nivel */
  /* PRACTICE WELCOME — al llegar a la pantalla de Práctica */
  .practice-welcome { background:linear-gradient(135deg,var(--warm) 0%,#fbe8d4 100%); border:1px solid #f0c9a0; border-radius:16px; padding:24px 26px; text-align:center; margin-bottom:24px; }
  .practice-welcome-emoji { font-size:2.6rem; line-height:1; margin-bottom:10px; }
  .practice-welcome-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:-0.01em; color:var(--ink); margin-bottom:12px; }
  .practice-welcome-title span { color:var(--accent); }
  .practice-welcome-lead { font-size:0.95rem; line-height:1.6; color:#4a3a25; margin:0 auto 8px; max-width:560px; }
  .practice-welcome-lead:last-child { margin-bottom:0; }
  .practice-welcome-lead strong { color:var(--accent); }

  .level-selector { text-align:center; padding:8px 0 4px; }
  .level-selector-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:6px; }
  .level-selector-sub { font-style:italic; color:var(--muted); font-size:0.88rem; margin-bottom:24px; }
  .level-cards { display:grid; grid-template-columns:1fr; gap:14px; }
  .level-card { background:var(--card); border:2px solid #e0d4c0; border-radius:14px; padding:18px 22px; cursor:pointer; transition:transform 0.15s,border-color 0.2s,box-shadow 0.2s; text-align:left; display:flex; align-items:center; gap:16px; }
  .level-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
  .level-card.facil:hover    { border-color:var(--green); }
  .level-card.medio:hover    { border-color:var(--gold); }
  .level-card.avanzado:hover { border-color:var(--accent); }
  .level-card-emoji { font-size:2rem; flex-shrink:0; }
  .level-card-tag { font-family:'Nunito Sans',sans-serif; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:800; margin-bottom:4px; }
  .level-card.facil .level-card-tag    { color:var(--green); }
  .level-card.medio .level-card-tag    { color:var(--gold); }
  .level-card.avanzado .level-card-tag { color:var(--accent); }
  .level-card-phrase { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.95rem; color:var(--ink); margin-bottom:4px; line-height:1.3; }
  .level-card-desc { font-size:0.78rem; color:var(--muted); font-style:italic; line-height:1.4; }

  /* PRACTICE LEVEL BAR — botón para cambiar de nivel */
  .practice-level-bar { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
  .change-level-btn { background:transparent; border:1.5px solid #e0d4c0; color:var(--muted); border-radius:8px; padding:7px 14px; cursor:pointer; font-family:'Nunito Sans',sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:0.04em; transition:all 0.2s; }
  .change-level-btn:hover { background:var(--warm); color:var(--ink); border-color:#bbb; }
  .practice-level-tag { font-family:'Nunito Sans',sans-serif; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; font-weight:800; padding:5px 12px; border-radius:20px; }
  .practice-level-tag.level-facil    { background:#e6f4ec; color:var(--green); border:1px solid #b6e5c8; }
  .practice-level-tag.level-medio    { background:#fbf3e1; color:var(--gold); border:1px solid #f0d890; }
  .practice-level-tag.level-avanzado { background:#fbe8e3; color:var(--accent); border:1px solid #f0c4b6; }

  .lesson-intro { background:var(--warm); border-radius:12px; padding:20px 24px; margin-bottom:28px; line-height:1.7; font-size:0.97rem; border-left:4px solid var(--gold); }
  .sound-section { margin-bottom:32px; }
  .sound-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:14px; padding-bottom:8px; border-bottom:2px dashed #e0d4c0; display:flex; align-items:center; gap:10px; }
  .sound-num { background:var(--accent); color:white; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; flex-shrink:0; }
  .words-details { margin-bottom:14px; }
  .words-details summary { cursor:pointer; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.82rem; color:var(--accent); padding:10px 14px; background:var(--warm); border-radius:10px; border:1px solid #e0d4c0; list-style:none; user-select:none; }
  .words-details summary::-webkit-details-marker { display:none; }
  .words-details summary:hover { background:#ece2d0; }
  .words-details[open] summary { border-radius:10px 10px 0 0; margin-bottom:8px; }
  .words-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-bottom:14px; }
  .word-chip { background:var(--card); border:1.5px solid #e0d4c0; border-radius:10px; padding:9px 12px; cursor:pointer; transition:all 0.15s; display:flex; flex-direction:column; gap:2px; }
  .word-chip:hover,.word-chip.playing { border-color:var(--accent); background:#fff5f3; transform:scale(1.03); }
  .word-chip.playing { box-shadow:0 0 0 2px var(--accent); }
  .word-en { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.95rem; color:var(--ink); }
  .word-pron { font-size:0.8rem; color:var(--accent); font-style:italic; font-weight:700; letter-spacing:0.015em; }
  .word-play-icon { font-size:0.7rem; color:var(--muted); margin-top:2px; }
  .tip-box { background:#fffbf0; border:1px solid #f0d890; border-radius:10px; padding:14px 18px; font-size:0.88rem; line-height:1.6; color:#5a4a00; margin-bottom:12px; }
  .tip-box .tip-heading { display:block; font-family:'Nunito Sans',sans-serif; font-size:0.95rem; font-weight:700; color:#5a4a00; margin-bottom:8px; letter-spacing:0.01em; }
  .tip-box .tip-heading + .tip-line { margin-top:0; }
  .tip-box .tip-line { display:block; margin-bottom:8px; }
  .tip-box .tip-line:last-child { margin-bottom:0; }
  .tip-box .tip-list { margin:8px 0 10px; padding:0; list-style:none; }
  .tip-box .tip-list li { padding:6px 10px; margin-bottom:6px; line-height:1.55; background:rgba(240,216,144,0.25); border-left:3px solid var(--gold); border-radius:6px; }
  .tip-box .tip-list li:last-child { margin-bottom:0; }
  .tip-box .tip-list li strong { font-family:'Nunito Sans',sans-serif; }

  /* ── PER-SOUND PRACTICE ── */
  .sound-practice { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); border-radius:12px; padding:16px 20px; margin-top:4px; }
  .sp-top-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .sp-label { font-family:'Nunito Sans',sans-serif; font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
  .sp-word-display { flex:1; min-width:80px; }
  .sp-word-en { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.5rem; color:white; line-height:1; }
  .sp-word-pron { font-size:0.8rem; color:var(--accent); font-style:italic; font-weight:700; letter-spacing:0.015em; margin-top:2px; }

  /* Word navigation arrows */
  .sp-nav { display:flex; align-items:center; gap:8px; }
  .sp-nav-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
  .sp-nav-btn:hover { background:rgba(255,255,255,0.22); }
  .sp-nav-idx { font-family:'Nunito Sans',sans-serif; font-size:0.7rem; color:#aaa; min-width:32px; text-align:center; }

  .sp-actions { display:flex; gap:8px; align-items:center; }
  .sp-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.75rem; border:none; border-radius:8px; padding:9px 14px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .sp-btn.listen { background:rgba(255,255,255,0.1); color:white; border:1px solid rgba(255,255,255,0.2); }
  .sp-btn.listen:hover { background:rgba(255,255,255,0.2); }
  .sp-btn.record { background:var(--accent); color:white; }
  .sp-btn.record:hover { background:#a83520; }
  .sp-btn.record.recording { background:#e53e3e; animation:pulse-rec 1s infinite; }
  @keyframes pulse-rec { 0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,0.4)} 50%{box-shadow:0 0 0 8px rgba(229,62,62,0)} }

  .sp-score-area { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:52px; text-align:center; }
  .sp-score-num { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.6rem; line-height:1; transition:color 0.4s; color:#555; }
  .sp-score-pct { font-family:'Nunito Sans',sans-serif; font-size:0.6rem; color:#666; letter-spacing:0.05em; }

  /* Feedback row below sound practice */
  .sp-feedback-row { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); font-size:0.78rem; line-height:1.5; }
  .sp-heard { color:#aaa; font-style:italic; margin-bottom:4px; }
  .sp-tip { color:#e0c97f; }
  .sp-tip.good { color:#7ecf9f; }
  .prof-encourage { margin:14px 0 6px; padding:12px 16px; background:#fffbf0; border:1px solid #f0d890; border-left:4px solid var(--gold); border-radius:10px; color:#5a4a00; font-size:0.88rem; line-height:1.6; }
  .prof-encourage strong { font-family:'Nunito Sans',sans-serif; font-weight:700; color:#5a4a00; }
  .prof-encourage-host:empty { display:none; }

  .sp-listening-indicator { display:none; align-items:center; gap:6px; font-family:'Nunito Sans',sans-serif; font-size:0.72rem; color:#e53e3e; font-weight:700; letter-spacing:0.05em; }
  .sp-listening-indicator.active { display:flex; }
  .sp-rec-dot { width:7px; height:7px; background:#e53e3e; border-radius:50%; animation:blink 0.8s infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

  /* PRACTICE PHRASE */
  .practice-section { background:var(--ink); color:var(--cream); border-radius:14px; padding:24px; margin-top:24px; }
  .practice-label { font-family:'Nunito Sans',sans-serif; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
  .practice-en { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:8px; line-height:1.4; }
  .practice-pron { font-style:italic; color:var(--accent); font-weight:700; font-size:0.95rem; line-height:1.55; letter-spacing:0.015em; }
  .practice-listen-btn { margin-top:14px; background:var(--accent); color:white; border:none; border-radius:8px; padding:9px 20px; cursor:pointer; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.8rem; letter-spacing:0.05em; display:flex; align-items:center; gap:8px; transition:background 0.2s; }
  .practice-listen-btn:hover { background:#a83520; }

  /* PROFESOR */
  .profesor-section { margin-top:20px; border-radius:16px; overflow:hidden; border:2px solid #e0d4c0; }
  .profesor-header { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); color:white; padding:18px 24px; display:flex; align-items:center; gap:14px; }
  .profesor-icon { width:42px; height:42px; background:rgba(200,75,47,0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; border:1.5px solid rgba(200,75,47,0.5); }
  .profesor-title-wrap { flex:1; }
  .profesor-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1rem; letter-spacing:-0.01em; margin-bottom:2px; }
  .profesor-subtitle { font-size:0.75rem; color:#aaa; font-style:italic; }
  .profesor-body { background:#f9f6f1; padding:22px 24px; }
  .how-to-use { background:#fffbf0; border:1px solid #f0d890; border-radius:10px; padding:12px 16px; margin-bottom:18px; font-size:0.82rem; line-height:1.7; color:#5a4800; }
  .how-to-use strong { font-family:'Nunito Sans',sans-serif; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:6px; color:#8a6a00; }
  .prof-input-row { display:flex; gap:8px; margin-bottom:14px; }
  .prof-input { flex:1; border:2px solid #e0d4c0; border-radius:10px; padding:10px 14px; font-family:'Nunito Sans',system-ui,sans-serif; font-size:0.92rem; background:white; color:var(--ink); outline:none; transition:border-color 0.2s; }
  .prof-input:focus { border-color:var(--accent); }
  .prof-btn-group { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .prof-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.78rem; border:none; border-radius:8px; padding:10px 16px; cursor:pointer; letter-spacing:0.03em; transition:all 0.2s; display:flex; align-items:center; gap:7px; }
  .prof-btn.listen { background:#1a1a2e; color:white; }
  .prof-btn.listen:hover { background:#2d2d4e; }
  .prof-btn.record { background:var(--accent); color:white; }
  .prof-btn.record:hover { background:#a83520; }
  .prof-btn.record.recording { background:#e53e3e; animation:pulse-rec 1s infinite; }
  .prof-btn.analyze { background:var(--green); color:white; }
  .prof-btn.analyze:hover { background:#235f3c; }
  .prof-btn.analyze:disabled { background:#ccc; cursor:default; }

  /* Live transcript in profesor */
  .prof-live-box { background:white; border:1.5px solid var(--accent); border-radius:10px; padding:12px 16px; margin-bottom:14px; font-size:0.9rem; line-height:1.6; display:none; min-height:52px; }
  .prof-live-box.active { display:block; }
  .prof-interim { color:#bbb; font-style:italic; }
  .prof-final { color:var(--ink); }

  .prof-listening-bar { display:none; align-items:center; gap:10px; font-family:'Nunito Sans',sans-serif; font-size:0.78rem; color:#e53e3e; font-weight:700; letter-spacing:0.05em; margin-bottom:12px; }
  .prof-listening-bar.active { display:flex; }
  .rec-dot { width:8px; height:8px; background:#e53e3e; border-radius:50%; animation:blink 0.8s infinite; }

  .no-speech-msg { background:#fff3cd; border:1px solid #ffc107; border-radius:10px; padding:14px 18px; font-size:0.85rem; line-height:1.6; color:#856404; display:none; margin-bottom:14px; }

  .result-panel { display:none; border-radius:12px; overflow:hidden; border:1.5px solid #e0d4c0; }
  .result-panel.visible { display:block; }
  .result-score-bar { padding:18px 20px; background:white; display:flex; align-items:center; gap:16px; }
  .score-circle { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; flex-shrink:0; font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.3rem; color:white; line-height:1; }
  .score-circle .score-label { font-size:0.55rem; font-weight:400; opacity:0.85; }
  .score-great { background:var(--green); } .score-good { background:#d4973a; } .score-fair { background:#c84b2f; }
  .score-right { flex:1; }
  .score-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1rem; margin-bottom:4px; }
  .score-bar-wrap { height:6px; background:#eee; border-radius:3px; overflow:hidden; margin-bottom:4px; }
  .score-bar-fill { height:100%; border-radius:3px; transition:width 0.8s ease; }
  .score-desc { font-size:0.78rem; color:var(--muted); font-style:italic; }
  .result-details { background:#f9f6f1; border-top:1px solid #e0d4c0; padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
  .detail-row { display:flex; align-items:flex-start; gap:10px; font-size:0.84rem; line-height:1.5; }
  .detail-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; flex-shrink:0; margin-top:1px; font-weight:700; }
  .detail-icon.warn { background:#fff3cd; color:#856404; } .detail-icon.tip { background:#d1ecf1; color:#0c5460; } .detail-icon.good { background:#d4edda; color:#155724; } .detail-icon.info { background:#ede7f6; color:#6a1b9a; }
  .word-comparison { background:white; border-top:1px solid #e0d4c0; padding:14px 20px; }
  .word-comp-label { font-family:'Nunito Sans',sans-serif; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .word-tokens { display:flex; flex-wrap:wrap; gap:6px; }
  .word-token { padding:4px 10px; border-radius:6px; font-family:'Nunito Sans',sans-serif; font-size:0.82rem; font-weight:700; }
  .token-ok { background:#d4edda; color:#155724; } .token-close { background:#fff3cd; color:#856404; } .token-miss { background:#f8d7da; color:#721c24; }
  .quick-words { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .quick-chip { background:white; border:1.5px solid #e0d4c0; border-radius:20px; padding:5px 12px; font-family:'Nunito Sans',sans-serif; font-size:0.75rem; font-weight:600; cursor:pointer; transition:all 0.15s; color:var(--ink); }
  .quick-chip:hover { border-color:var(--accent); color:var(--accent); background:#fff5f3; }

  .modal-footer { padding:20px 32px 28px; display:flex; gap:12px; align-items:center; border-top:1px solid #e8e0d4; }
  .complete-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.85rem; background:var(--green); color:white; border:none; border-radius:8px; padding:12px 24px; cursor:pointer; transition:background 0.2s; }
  .complete-btn:hover { background:#235f3c; }
  .next-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.85rem; background:var(--ink); color:var(--cream); border:none; border-radius:8px; padding:12px 24px; cursor:pointer; transition:background 0.2s; }
  .next-btn:hover { background:#333; }
  .next-btn:disabled { background:#ccc; color:#888; cursor:not-allowed; }
  .score-disclaimer { font-family:'Nunito Sans',system-ui,sans-serif; font-size:0.82rem; color:#5a4a00; background:#fffbf0; border:1px solid #f0d890; border-left:4px solid var(--gold); border-radius:8px; padding:12px 16px; margin-bottom:18px; line-height:1.55; }
  .score-disclaimer strong { font-family:'Nunito Sans',sans-serif; font-weight:700; }

  /* CONTINUE SECTION (después de las lecciones) */
  .continue-section { max-width:1100px; margin:0 auto 56px; padding:0 24px; }
  .continue-section-sub { font-family:'Nunito Sans',system-ui,sans-serif; color:var(--muted); font-size:0.95rem; line-height:1.6; margin:-16px 0 24px; max-width:680px; }
  .practice-cards-main { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
  .practice-cards-main .practice-card { background:var(--card); border:2px solid #e8e0d4; color:var(--ink); padding:28px 26px; box-shadow:0 2px 16px rgba(0,0,0,0.06); }
  .practice-cards-main .practice-card:hover { border-color:var(--accent); background:#fff5f3; }
  .practice-cards-main .practice-card-title { font-size:1.15rem; color:var(--ink); margin-bottom:10px; }
  .practice-cards-main .practice-card-desc { color:var(--muted); font-size:0.88rem; }
  .practice-cards-main .practice-card-step { font-family:'Nunito Sans',sans-serif; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:14px; }
  .practice-cards-main .available-tag { display:inline-block; margin-top:14px; background:var(--green); color:white; font-family:'Nunito Sans',sans-serif; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; padding:4px 12px; border-radius:20px; font-weight:700; }

  /* UNLOCK SECTION */
  .unlock-section { max-width:1100px; margin:0 auto 60px; padding:0 24px; display:none; }
  .unlock-section.visible { display:block; }
  .unlock-card { background:linear-gradient(135deg,#0f0f1a 0%,#1a1a2e 100%); border-radius:20px; padding:52px 48px; text-align:center; color:white; position:relative; overflow:hidden; border:1px solid rgba(200,75,47,0.3); }
  .unlock-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(200,75,47,0.2) 0%,transparent 65%); }
  .unlock-emoji { font-size:3.5rem; margin-bottom:18px; position:relative; }
  .unlock-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:2rem; letter-spacing:-0.02em; margin-bottom:12px; position:relative; }
  .unlock-title span { color:var(--accent); }
  .unlock-sub { color:#888; font-style:italic; margin-bottom:40px; position:relative; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.6; }
  .practice-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; position:relative; }
  .practice-card { background:rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.08); border-radius:14px; padding:24px 20px; text-align:left; transition:border-color 0.2s,background 0.2s; }
  .practice-card:hover { border-color:rgba(200,75,47,0.4); background:rgba(200,75,47,0.06); }
  .practice-card-icon { font-size:2rem; margin-bottom:12px; }
  .practice-card-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1rem; margin-bottom:8px; }
  .practice-card-desc { font-size:0.8rem; color:#777; font-style:italic; line-height:1.6; }
  .coming-tag { display:inline-block; margin-top:12px; background:rgba(200,75,47,0.2); color:var(--accent); font-family:'Nunito Sans',sans-serif; font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; padding:3px 10px; border-radius:20px; border:1px solid rgba(200,75,47,0.3); font-weight:700; }

  /* NEQUI */
  .paywall-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,10,0.85); z-index:300; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(6px); }
  .paywall-overlay.open { display:flex; }
  .paywall-card { background:var(--cream); border-radius:20px; max-width:520px; width:100%; overflow:hidden; box-shadow:0 32px 100px rgba(0,0,0,0.4); animation:modalIn 0.3s ease; }
  .paywall-top { background:var(--ink); color:var(--cream); padding:36px 36px 28px; text-align:center; }
  .paywall-top h2 { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.6rem; margin-bottom:10px; }
  .paywall-top p { color:#aaa; font-size:0.95rem; font-style:italic; line-height:1.6; }
  .paywall-body { padding:32px 36px; }
  .price-big { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:2.4rem; color:var(--accent); letter-spacing:0.04em; }
  .price-sub { font-size:0.85rem; color:var(--muted); font-style:italic; margin-top:4px; }
  .cta-main { width:100%; font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1rem; background:#00b050; color:white; border:none; border-radius:12px; padding:16px; cursor:pointer; transition:background 0.2s,transform 0.1s; margin-bottom:10px; }
  .cta-main:hover { background:#009040; transform:translateY(-2px); }
  .cta-dismiss { width:100%; font-family:'Nunito Sans',sans-serif; font-size:0.8rem; background:none; border:none; color:var(--muted); cursor:pointer; padding:8px; }
  .cta-dismiss:hover { color:var(--ink); }

  /* SURVEY SECTION */
  /* TUTOR CTA (antes de la encuesta) */
  .tutor-cta-section { max-width:800px; margin:0 auto 36px; padding:0 24px; }
  .tutor-cta-card { background:var(--card); border-radius:20px; padding:36px 32px; border-top:5px solid var(--accent); box-shadow:0 4px 24px rgba(0,0,0,0.07); text-align:center; }
  .tutor-cta-emoji { font-size:2.6rem; margin-bottom:12px; }
  .tutor-cta-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.4rem; margin-bottom:10px; }
  .tutor-cta-title span { color:var(--accent); }
  .tutor-cta-desc { color:var(--muted); font-size:0.92rem; line-height:1.65; max-width:540px; margin:0 auto 22px; }
  .tutor-cta-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.9rem; background:var(--accent); color:white; border:none; border-radius:50px; padding:13px 30px; cursor:pointer; transition:background 0.2s,transform 0.1s; }
  .tutor-cta-btn:hover { background:#a83520; transform:translateY(-2px); }

  /* Tutor contact modal */
  .tutor-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,10,0.85); z-index:300; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(6px); }
  .tutor-overlay.open { display:flex; }
  .tutor-modal { background:var(--card); border-radius:18px; padding:32px 30px 28px; max-width:480px; width:100%; max-height:92vh; overflow-y:auto; position:relative; box-shadow:0 24px 64px rgba(0,0,0,0.4); text-align:center; }
  .tutor-modal-emoji { font-size:2.6rem; margin-bottom:8px; }
  .tutor-modal-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.5rem; color:var(--ink); margin-bottom:10px; letter-spacing:-0.01em; }
  .tutor-modal-lead { color:#444; font-size:0.95rem; line-height:1.55; margin-bottom:18px; }
  .tutor-modal-list-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; text-align:left; }
  .tutor-modal-list { list-style:none; margin:0 0 18px; padding:0; text-align:left; }
  .tutor-modal-list li { padding:8px 12px; margin-bottom:6px; background:#fff5f3; border:1px solid #f0c4b6; border-left:3px solid var(--accent); border-radius:8px; font-size:0.9rem; color:#444; line-height:1.5; }
  .tutor-modal-note { background:var(--warm); border:1px solid #e0d4c0; border-radius:10px; padding:12px 14px; font-size:0.84rem; color:#5a4a25; line-height:1.55; margin-bottom:18px; text-align:left; }
  .tutor-modal-note strong { color:var(--accent); }
  .tutor-modal-phone { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.9rem; color:var(--green); text-align:center; padding:14px 12px 6px; letter-spacing:0.02em; background:#f0faf4; border:1px solid #b6e5c8; border-radius:10px 10px 0 0; }
  .tutor-modal-phone-sub { font-family:'Nunito Sans',system-ui,sans-serif; font-style:italic; font-size:0.78rem; color:var(--muted); text-align:center; padding:0 12px 12px; line-height:1.4; background:#f0faf4; border:1px solid #b6e5c8; border-top:none; border-radius:0 0 10px 10px; }

  .survey-section { max-width:800px; margin:0 auto 48px; padding:0 24px; }
  .survey-card { background:var(--card); border-radius:20px; padding:44px 40px; border-top:5px solid var(--gold); box-shadow:0 4px 24px rgba(0,0,0,0.07); text-align:center; }
  .survey-emoji { font-size:2.4rem; margin-bottom:14px; }
  .survey-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.4rem; margin-bottom:12px; }
  .survey-title span { color:var(--accent); }
  .survey-desc { color:var(--muted); font-size:0.92rem; line-height:1.7; max-width:520px; margin:0 auto 28px; font-style:italic; }
  .survey-link-btn { display:inline-block; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.9rem; background:var(--accent); color:white; text-decoration:none; border-radius:50px; padding:14px 36px; transition:background 0.2s; }
  .survey-link-btn:hover { background:#a83520; }

  footer { position:relative; background:var(--ink); color:#666; text-align:center; padding:36px 24px 40px; font-size:0.8rem; font-style:italic; }
  footer strong { color:var(--cream); font-style:normal; font-family:'Nunito Sans',sans-serif; }
  .footer-message { max-width:600px; margin:0 auto 22px; color:#bbb; line-height:1.8; font-size:0.92rem; }
  .footer-signature { display:block; margin-top:12px; font-style:normal; font-family:'Nunito Sans',sans-serif; font-weight:700; color:var(--cream); letter-spacing:0.02em; }
  .footer-version { position:absolute; bottom:10px; right:16px; font-size:0.6rem; font-style:normal; color:#4a4a4a; letter-spacing:0.05em; }

  /* CHAT HEADER BUTTON */
  .chat-header-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.78rem; background:transparent; color:var(--cream); border:1px solid #444; border-radius:6px; padding:8px 16px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
  .chat-header-btn:hover { border-color:var(--gold); color:var(--gold); }

  /* UNLOCK SECTION CHAT CARD */
  .practice-card.clickable { cursor:pointer; transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s; border:2px solid transparent; }
  .practice-card.clickable:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,0.15); border-color:var(--gold); }
  .available-tag { display:inline-block; background:var(--green); color:white; font-family:'Nunito Sans',sans-serif; font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border-radius:20px; padding:3px 10px; margin-top:8px; }

  /* CHAT MODAL */
  .chat-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,10,0.8); z-index:300; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(4px); }
  .chat-overlay.open { display:flex; }
  .chat-modal { background:var(--cream); border-radius:20px; width:100%; max-width:620px; height:90vh; max-height:760px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,0.4); animation:modalIn 0.25s ease; }
  .chat-header { background:var(--ink); color:var(--cream); padding:18px 24px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .chat-header-left { display:flex; align-items:center; gap:14px; }
  .chat-avatar { width:42px; height:42px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
  .chat-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1rem; }
  .chat-subtitle { font-size:0.72rem; color:#aaa; font-style:italic; margin-top:2px; }

  /* MESSAGES */
  .chat-messages { flex:1; overflow-y:auto; padding:20px 16px; display:flex; flex-direction:column; gap:12px; }
  .chat-msg { display:flex; }
  .chat-msg.bot { justify-content:flex-start; }
  .chat-msg.student { justify-content:flex-end; }
  .chat-bubble { max-width:82%; padding:12px 16px; border-radius:18px; font-size:0.9rem; line-height:1.55; animation:bubbleIn 0.2s ease; }
  @keyframes bubbleIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
  .chat-bubble.bot { background:white; color:var(--ink); border-top-left-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
  .chat-bubble.student { background:var(--ink); color:var(--cream); border-top-right-radius:4px; }
  .chat-bubble.score { background:var(--warm); border:1px solid #d4b896; color:var(--ink); }

  /* CHAT FOOTER */
  .chat-footer { background:white; border-top:1px solid #e8e0d4; padding:14px 16px; flex-shrink:0; }
  .chat-status { font-family:'Nunito Sans',sans-serif; font-size:0.72rem; color:var(--accent); text-align:center; min-height:18px; margin-bottom:10px; letter-spacing:0.05em; }
  .chat-controls { display:flex; gap:10px; justify-content:center; margin-bottom:8px; }
  .chat-input-row { display:flex; gap:8px; margin-bottom:10px; }
  .chat-input { flex:1; font-family:'Nunito Sans',system-ui,sans-serif; font-size:0.95rem; padding:12px 16px; border:1.5px solid #ddd; border-radius:24px; outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
  .chat-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,75,47,0.12); }
  .chat-send-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.85rem; background:var(--accent); color:white; border:none; border-radius:24px; padding:12px 22px; cursor:pointer; transition:background 0.2s,transform 0.1s; }
  .chat-send-btn:hover { background:#a83520; }
  .chat-send-btn:active { transform:scale(0.97); }
  .chat-listen-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.85rem; background:transparent; color:var(--ink); border:1px solid #ccc; border-radius:50px; padding:12px 20px; cursor:pointer; transition:all 0.2s; }
  .chat-listen-btn:hover { border-color:var(--gold); color:var(--gold); }
  .chat-hint { text-align:center; font-size:0.72rem; color:var(--muted); font-style:italic; }

  @media(max-width:600px){
    .hero h1{font-size:2rem} .header-inner{flex-wrap:wrap;gap:10px} .progress-bar-wrap{max-width:none;flex-basis:100%;order:3}
    .modal-body{padding:20px} .modal-footer{flex-direction:column} .paywall-body{padding:20px 24px}
    .words-grid{grid-template-columns:repeat(2,1fr)} .unlock-card{padding:32px 24px}
    .sp-top-row{flex-direction:column;align-items:flex-start}
    .chat-modal{height:100vh;max-height:100vh;border-radius:0}
    .chat-header-btn{display:none}

    /* Pantalla intro y selector de nivel — ajustes móvil */
    .intro-emoji{font-size:3rem}
    .intro-screen-title{font-size:1.4rem}
    .intro-preview{font-size:0.9rem;margin-bottom:20px}
    .intro-text{padding:16px 18px;font-size:0.92rem}
    .intro-start-btn{padding:14px 28px;font-size:0.92rem;width:100%}
    .level-card{padding:14px 16px;gap:12px}
    .level-card-emoji{font-size:1.6rem}
    .level-card-phrase{font-size:0.88rem}
    .screen-dots{gap:6px;margin-bottom:18px;padding-bottom:14px}
    .screen-dot{width:8px;height:8px}
    .screen-label{font-size:0.6rem;width:100%;text-align:right;margin-top:4px}

    /* Word game — móvil */
    .wg-modal{height:100vh;max-height:100vh;border-radius:0}
    .wg-main{flex-direction:column;gap:14px}
    .wg-right{max-height:140px}
    .wg-grid{max-width:340px}
    .wg-actions-top{gap:8px}
    .wg-btn-ghost{padding:7px 12px;font-size:0.72rem}
    .wg-score-grid{grid-template-columns:repeat(2,1fr)}

    /* Help card — móvil */
    #help-card-host{bottom:12px;right:12px;left:12px}
    .help-card{max-width:none;width:auto;padding:20px 18px}
    .help-card-title{font-size:1.2rem}
    .help-card-phone{font-size:1.6rem}
  }

  /* ── HELP CARD (tutoría gratis) ────────────────────────────────────────── */
  #help-card-host { position:fixed; bottom:22px; right:22px; z-index:250; max-width:380px; }
  .help-card { background:var(--card); border:1px solid #e8e0d4; border-radius:16px; padding:22px 22px 20px; box-shadow:0 18px 48px rgba(0,0,0,0.18); position:relative; color:var(--ink); }
  .help-card-close { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.05); border:none; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:0.9rem; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
  .help-card-close:hover { background:rgba(0,0,0,0.1); color:var(--ink); }
  .help-card-emoji { font-size:2.2rem; line-height:1; margin-bottom:8px; }
  .help-card-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.3rem; color:var(--ink); margin-bottom:10px; letter-spacing:-0.01em; }
  .help-card-lead { font-size:0.9rem; line-height:1.55; color:#444; margin-bottom:10px; }
  .help-card-offer { font-size:0.9rem; line-height:1.55; color:#444; margin-bottom:10px; }
  .help-card-offer strong { color:var(--ink); }
  .help-card-lesson { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.88rem; color:var(--accent); background:#fff5f3; border:1px solid #f0c4b6; border-left:3px solid var(--accent); border-radius:8px; padding:8px 12px; margin-bottom:14px; }
  .help-card-rules { list-style:none; margin:0 0 14px; padding:0; }
  .help-card-rules li { font-size:0.84rem; line-height:1.6; color:#444; padding:3px 0; }
  .help-card-rules li em { color:var(--muted); font-style:italic; }
  .help-card-action { font-size:0.84rem; line-height:1.55; color:#444; margin-bottom:12px; }
  .help-card-action strong { color:var(--accent); }
  .help-card-phone { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.8rem; color:var(--green); text-align:center; padding:12px 10px 6px; letter-spacing:0.02em; background:#f0faf4; border:1px solid #b6e5c8; border-radius:10px; }
  .help-card-phone-sub { font-family:'Nunito Sans',system-ui,sans-serif; font-style:italic; font-size:0.74rem; color:var(--muted); text-align:center; margin-top:6px; line-height:1.4; padding:0 8px 10px; background:#f0faf4; border-left:1px solid #b6e5c8; border-right:1px solid #b6e5c8; border-bottom:1px solid #b6e5c8; border-radius:0 0 10px 10px; margin-top:-6px; }

  .help-mini { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.82rem; background:var(--accent); color:white; border:none; border-radius:24px; padding:10px 18px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,0.2); transition:background 0.2s, transform 0.1s; }
  .help-mini:hover { background:#a83520; transform:translateY(-2px); }

  /* ── WORD GAME ─────────────────────────────────────────────────────────── */
  .wg-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,10,0.9); z-index:300; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(6px); }
  .wg-overlay.open { display:flex; }
  .wg-modal { background:var(--ink); color:var(--cream); border-radius:18px; width:100%; max-width:900px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; border:1px solid #2a2a2a; box-shadow:0 24px 64px rgba(0,0,0,0.55); }
  .wg-modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid #2a2a2a; position:relative; }
  .wg-modal-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.1rem; letter-spacing:-0.01em; color:var(--cream); }

  .wg-pane { display:none; padding:24px; overflow-y:auto; }
  .wg-pane.open { display:block; }

  /* INTRO */
  #wg-intro { text-align:center; }
  .wg-intro-emoji { font-size:3.4rem; line-height:1; margin-bottom:12px; }
  .wg-intro-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:-0.01em; margin-bottom:8px; }
  .wg-intro-lead { color:#ccc; font-size:0.98rem; line-height:1.55; margin:0 auto 22px; max-width:560px; }
  .wg-intro-lead strong { color:var(--gold); }
  .wg-rules { background:rgba(255,255,255,0.04); border:1px solid #2a2a2a; border-radius:14px; padding:20px 22px; text-align:left; margin:0 auto 22px; max-width:620px; }
  .wg-rules-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
  .wg-rules-list { margin:0 0 18px; padding-left:18px; line-height:1.7; font-size:0.9rem; color:#d8d2c4; }
  .wg-rules-list li { margin-bottom:6px; }
  .wg-rules-list strong { color:var(--cream); }
  .wg-score-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .wg-score-cell { background:rgba(212,151,58,0.08); border:1px solid rgba(212,151,58,0.3); border-radius:10px; padding:10px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; font-family:'Nunito Sans',sans-serif; font-size:0.72rem; color:#bbb; }
  .wg-score-cell strong { font-size:1rem; color:var(--gold); }
  .wg-score-cell.big { background:rgba(200,75,47,0.12); border-color:rgba(200,75,47,0.45); grid-column:span 4; flex-direction:row; justify-content:center; gap:10px; }
  .wg-score-cell.big strong { color:var(--accent); font-size:1.1rem; }
  .wg-start-btn { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1rem; background:var(--accent); color:white; border:none; border-radius:12px; padding:14px 36px; cursor:pointer; letter-spacing:0.03em; transition:background 0.2s,transform 0.1s; }
  .wg-start-btn:hover { background:#a83520; transform:translateY(-2px); }

  /* BOARD */
  #wg-board { position:relative; }
  .wg-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
  .wg-time-wrap { text-align:left; }
  .wg-time-label { font-family:'Nunito Sans',sans-serif; font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
  .wg-time { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:2rem; color:var(--cream); letter-spacing:0.02em; transition:color 0.2s; }
  .wg-time.low { color:var(--accent); animation:wg-pulse 1s infinite; }
  @keyframes wg-pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
  .wg-level-wrap { text-align:left; }
  .wg-level-label { font-family:'Nunito Sans',sans-serif; font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
  .wg-level { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:0.01em; transition:color 0.3s; }
  .wg-actions-top { display:flex; gap:10px; }

  /* Toast de subida de nivel — overlay centrado dentro del board */
  .wg-toast { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.6); background:linear-gradient(135deg,var(--accent) 0%,var(--gold) 100%); color:white; padding:24px 36px; border-radius:18px; text-align:center; opacity:0; pointer-events:none; z-index:50; transition:transform 0.4s cubic-bezier(.22,1,.36,1),opacity 0.3s; box-shadow:0 24px 64px rgba(0,0,0,0.5); min-width:280px; }
  .wg-toast.show { transform:translate(-50%,-50%) scale(1); opacity:1; }
  .wg-toast-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.01em; margin-bottom:6px; }
  .wg-toast-sub { font-size:0.88rem; opacity:0.92; line-height:1.4; }
  .wg-btn-ghost { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.78rem; background:transparent; color:var(--cream); border:1px solid #444; border-radius:8px; padding:9px 16px; cursor:pointer; transition:all 0.2s; }
  .wg-btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

  .wg-main { display:flex; gap:20px; margin-bottom:16px; }
  .wg-left { flex:1; display:flex; justify-content:center; }
  .wg-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; max-width:380px; }
  .wg-cell { aspect-ratio:1/1; background:rgba(255,255,255,0.04); border:2px solid rgba(200,75,47,0.4); border-radius:10px; font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.6rem; color:var(--accent); cursor:pointer; transition:background 0.15s,transform 0.1s,border-color 0.15s; }
  .wg-cell:hover { background:rgba(200,75,47,0.1); }
  .wg-cell:active { transform:scale(0.95); }
  .wg-cell.selected { background:var(--accent); color:white; border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,151,58,0.5); }

  .wg-right { flex:1; min-width:220px; background:rgba(255,255,255,0.03); border:1px solid #2a2a2a; border-radius:12px; padding:14px; display:flex; flex-direction:column; min-height:300px; }
  .wg-list-head { display:flex; justify-content:space-between; font-family:'Nunito Sans',sans-serif; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); padding:0 4px 8px; border-bottom:1px solid #2a2a2a; margin-bottom:8px; }
  .wg-list { flex:1; overflow-y:auto; min-height:0; }
  .wg-list-empty { color:#777; font-style:italic; font-size:0.85rem; text-align:center; padding:24px 8px; }
  .wg-list-row { display:flex; justify-content:space-between; align-items:center; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.9rem; }
  .wg-list-word { font-family:'Nunito Sans',system-ui,sans-serif; color:var(--cream); text-transform:lowercase; }
  .wg-list-pts { font-family:'Nunito Sans',sans-serif; font-weight:700; color:var(--gold); font-size:0.85rem; }
  .wg-total-row { display:flex; justify-content:space-between; align-items:center; padding:10px 4px 0; border-top:1px solid #2a2a2a; margin-top:8px; font-family:'Nunito Sans',sans-serif; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
  .wg-total-row strong { font-size:1.4rem; color:var(--gold); letter-spacing:0; }

  .wg-current-wrap { background:rgba(255,255,255,0.04); border:1px dashed #444; border-radius:10px; padding:12px 16px; margin-bottom:14px; text-align:center; min-height:62px; display:flex; flex-direction:column; justify-content:center; }
  .wg-current-label { font-family:'Nunito Sans',sans-serif; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .wg-current { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:0.15em; color:var(--cream); min-height:1.4em; }
  .wg-feedback { margin-top:6px; font-family:'Nunito Sans',sans-serif; font-size:0.78rem; font-weight:700; min-height:1em; }
  .wg-feedback.good { color:#7ecf9f; }
  .wg-feedback.bad  { color:#e88a78; }

  .wg-bottom-actions { display:flex; gap:12px; justify-content:flex-end; }
  .wg-btn-cancel { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.88rem; background:#e74c3c; color:white; border:none; border-radius:10px; padding:12px 26px; cursor:pointer; transition:background 0.2s; }
  .wg-btn-cancel:hover { background:#c0392b; }
  .wg-btn-enter { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:0.88rem; background:var(--green); color:white; border:none; border-radius:10px; padding:12px 28px; cursor:pointer; transition:background 0.2s,transform 0.1s; }
  .wg-btn-enter:hover:not(:disabled) { background:#235f3c; }
  .wg-btn-enter:disabled { background:#3a3a3a; color:#777; cursor:not-allowed; }
  .wg-btn-enter.ready { box-shadow:0 0 0 3px rgba(45,122,79,0.25); }
  .wg-kbd-hint { margin-top:8px; font-family:'Nunito Sans',sans-serif; font-size:0.66rem; letter-spacing:0.04em; color:var(--muted); line-height:1.5; }
  .wg-kbd-hint strong { color:var(--gold); font-weight:700; }

  /* RESULT */
  #wg-result { text-align:center; }
  .wg-result-emoji { font-size:3.4rem; margin-bottom:10px; }
  .wg-result-title { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1.8rem; margin-bottom:10px; color:var(--cream); }
  .wg-result-sub { font-size:0.95rem; line-height:1.6; color:#ccc; max-width:520px; margin:0 auto 22px; }
  .wg-result-sub strong { color:var(--gold); }
  .wg-result-stats { display:flex; gap:24px; justify-content:center; margin-bottom:22px; flex-wrap:wrap; }
  .wg-stat { background:rgba(212,151,58,0.1); border:1px solid rgba(212,151,58,0.35); border-radius:14px; padding:16px 28px; min-width:130px; }
  .wg-stat-num { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:2.4rem; color:var(--gold); line-height:1; }
  .wg-stat-label { font-family:'Nunito Sans',sans-serif; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
  .wg-result-listwrap { background:rgba(255,255,255,0.03); border:1px solid #2a2a2a; border-radius:12px; padding:14px; max-width:520px; margin:0 auto 22px; max-height:200px; display:flex; flex-direction:column; }
  .wg-result-listwrap .wg-list { max-height:160px; }

  /* ── PASTO-QUILLASINGA: HERO CUMBAL ── */
  .hero-cumbal { padding:130px 24px 60px; min-height:clamp(560px,78vh,780px); display:flex; flex-direction:column; justify-content:flex-end; background-image:url('img/volcan-cumbal.jpg'); background-size:cover; background-position:50% 28%; background-repeat:no-repeat; }
  @media (min-aspect-ratio:3/2) { .hero-cumbal { min-height:clamp(560px,88vh,900px); background-position:50% 20%; } }
  .hero-cumbal::before { background:radial-gradient(ellipse 60% 50% at 50% 68%,rgba(10,8,20,0.45),transparent 70%),linear-gradient(180deg,rgba(10,8,20,0.55) 0%,rgba(10,8,20,0.15) 30%,rgba(10,8,20,0.22) 55%,rgba(12,10,8,0.85) 100%),radial-gradient(ellipse at 50% 0%,rgba(200,75,47,0.10) 0%,transparent 70%); }
  .hero-cumbal .hero-eyebrow { color:#e8b84b; font-weight:700; text-shadow:0 1px 12px rgba(0,0,0,0.65); }
  .hero-cumbal h1 { color:#f5f0e6; text-shadow:0 2px 24px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.4); }
  .hero-cumbal .hero-sub { color:rgba(245,240,230,0.85); text-shadow:0 1px 8px rgba(0,0,0,0.5); }
  .hero-cumbal .hero-stats { padding:14px 24px; background:rgba(12,10,8,0.28); backdrop-filter:blur(2px); border-radius:4px; }
  .hero-cumbal .stat-num { color:#e8b84b; text-shadow:0 1px 10px rgba(0,0,0,0.5); }
  .hero-cumbal .stat-label { color:rgba(245,240,230,0.7); }
  @media (max-width:640px) { .hero-cumbal { padding-top:88px; background-position:50% 30%; } }

  /* FOOTER — fondo Laguna (módulo Raíces Ocultas) */
  .footer-laguna { min-height:420px; padding:110px 24px 60px; display:flex; flex-direction:column; align-items:center; justify-content:center; background-repeat:no-repeat; background-size:cover; background-image:linear-gradient(to bottom,#12100e 0%,rgba(10,10,10,0) 22%),radial-gradient(ellipse 65% 55% at 50% 58%,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.55) 100%),linear-gradient(to bottom,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.4) 100%),url('img/laguna-bottom.jpeg'); background-position:center,center,center,center 30%; }
  .footer-laguna .footer-message { color:#f5f0e6; text-shadow:0 2px 10px rgba(0,0,0,0.65); margin-bottom:18px; }
  .footer-laguna .footer-signature { margin-top:0; margin-bottom:28px; text-shadow:0 2px 10px rgba(0,0,0,0.65); }
  .footer-laguna .footer-credits { margin:30px 0 0; color:#aaa; font-size:0.78rem; font-style:italic; }
  .footer-laguna .footer-version { color:#d8d8d8; background:rgba(0,0,0,0.4); padding:3px 8px; border-radius:10px; }
  .btn-nequi { background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.45); color:#f5f0e6; border-radius:20px; padding:8px 20px; cursor:pointer; font-family:'Nunito Sans',sans-serif; font-size:0.78rem; transition:all 0.2s; }
  .btn-nequi:hover { border-color:#00b050; color:#00b050; }
  @media (max-width:600px) { .footer-laguna { min-height:320px; padding:70px 20px 48px; background-position:center; } .footer-laguna .footer-message { font-size:0.88rem; } }

  /* ── MÓDULO CULTURAL: RAÍCES OCULTAS ── */
  .section-desc { line-height:1.8; color:#333; font-size:0.97rem; margin-bottom:14px; }
  .section-desc:last-child { margin-bottom:0; }
  .sources-box { background:var(--warm); border-radius:10px; padding:16px 20px; margin-top:18px; border:1px dashed #d8c8a8; }
  .sources-label { font-family:'Nunito Sans',sans-serif; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
  .sources-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
  .sources-list a { color:var(--accent); text-decoration:none; font-size:0.85rem; line-height:1.5; }
  .sources-list a:hover { text-decoration:underline; }
  .sources-disclaimer { font-size:0.76rem; color:var(--muted); font-style:italic; margin-top:10px; line-height:1.5; }

  .vocab-table-wrap { overflow-x:auto; margin-bottom:14px; }
  .vocab-table { width:100%; border-collapse:collapse; background:var(--card); border-radius:10px; overflow:hidden; font-size:0.88rem; }
  .vocab-table th { background:var(--ink); color:var(--cream); font-family:'Nunito Sans',sans-serif; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; text-align:left; padding:10px 14px; }
  .vocab-table td { padding:10px 14px; border-bottom:1px solid #e8e0d4; vertical-align:top; }
  .vocab-table tr:last-child td { border-bottom:none; }
  .vocab-word { font-family:'Nunito Sans',sans-serif; font-weight:700; color:var(--accent); }

  .bib-section { max-width:800px; margin:0 auto 48px; padding:0 24px; }
  .bib-card { background:var(--card); border-radius:16px; padding:36px 40px; border-left:5px solid var(--gold); box-shadow:0 4px 24px rgba(0,0,0,0.07); }
  .bib-card h2 { font-family:'Nunito Sans',sans-serif; font-size:1.3rem; font-weight:700; margin-bottom:8px; }
  .bib-card .bib-note { color:var(--muted); font-style:italic; font-size:0.88rem; margin-bottom:18px; line-height:1.6; }
  .bib-list { list-style:decimal; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
  .bib-list a { color:var(--accent); text-decoration:none; font-size:0.86rem; line-height:1.5; }
  .bib-list a:hover { text-decoration:underline; }