/* Hallmark · genre: editorial · macrostructure: Map / Diagram · theme: Studio
 * nav: N9 · footer: Ft2 · enrichment: typography only
 * audience: principiantes hispanohablantes · use: unir pronombres y verbos · tone: cuaderno didáctico
 * pre-emit critique: P4 H4 E4 S5 R5 V4 */
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:16px;line-height:1.5}button,summary{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:8px 16px;background:var(--color-clear);color:var(--color-ink);white-space:nowrap;transition:background-color .15s}button:disabled{opacity:.5;cursor:default}button:active:not(:disabled){transform:translateY(1px)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:hover:not(:disabled){background:var(--color-soft);color:var(--color-ink)}[hidden]{display:none!important}h1,h2,p{margin:0}h1,h2{font-family:var(--font-display);font-weight:700;line-height:1.15}h1{font-size:clamp(36px,4vw,56px);letter-spacing:-.04em}h1 span:first-child{font-weight:400;color:var(--color-accent)}h2{font-size:28px}.masthead,main,footer{max-width:1280px;margin:auto;padding-inline:32px}.masthead{min-height:96px;display:flex;justify-content:space-between;align-items:center;gap:16px}.wordmark{font-family:var(--font-display);font-size:23px;font-weight:700}.brand-dot{color:var(--color-accent)}.text-button{border-color:var(--color-clear);padding-inline:8px}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-block:20px 36px}.intro>p{color:var(--color-muted);padding-bottom:4px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:12px}.intro .eyebrow{color:var(--color-accent)}#steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-block:1px solid var(--color-rule);margin-bottom:32px;gap:8px}#steps button{border:0;border-radius:0;padding:16px 0;font-size:14px;color:var(--color-muted);text-align:left;position:relative}#steps button[aria-current=step]{color:var(--color-accent);font-weight:700}#steps button[aria-current=step]:after{position:absolute;content:'';height:3px;bottom:-1px;left:0;right:16px;background:var(--color-accent)}.step-number{margin-right:8px;font-variant-numeric:tabular-nums}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px}.panel-heading{margin:8px 0 16px}.panel-heading h2{font-family:var(--font-body);font-size:16px}.panel-heading>span{font-size:13px;color:var(--color-muted)}#pronouns{display:grid;gap:4px}.person{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;border-color:var(--color-clear);border-radius:var(--radius-sm);padding:9px 12px}.person .english{font-size:21px;font-weight:700}.person .spanish{font-size:13px;color:var(--color-muted);text-align:right}.person[aria-pressed=true]{background:var(--color-soft);color:var(--color-accent);border-color:var(--color-rule)}.person[aria-pressed=true] .spanish{color:var(--color-accent)}.aside-note{margin:20px 12px 0;font-size:13px;color:var(--color-muted);max-width:28ch}.lesson-panel{padding:28px 32px 20px;background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-md);min-width:0}.stage-top{display:flex;justify-content:space-between;gap:16px}.stage-top .eyebrow{color:var(--color-accent)}.mode-label{font-size:11px;letter-spacing:.08em;color:var(--color-muted)}.instruction{color:var(--color-muted);margin-top:12px;min-height:48px;max-width:55ch}.board{min-height:216px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding-block:36px 20px}.tiles{display:flex;align-items:center;justify-content:center;gap:12px;min-height:84px;width:100%;flex-wrap:wrap}.tile{font-size:clamp(28px,3.7vw,52px);font-weight:700;letter-spacing:-.04em;padding:8px 18px;border-bottom:2px solid var(--color-rule);line-height:1.2;position:relative}.subject{color:var(--color-ink);background:var(--color-paper)}.verb{color:var(--color-accent);background:var(--color-soft);border-color:var(--color-accent)}.negative{color:var(--color-negative);background:var(--color-negative-soft);border-color:var(--color-negative)}.complement{font-weight:400;padding-inline:4px;border-color:var(--color-clear)}.punctuation{font-size:42px;margin-left:-12px}.translation{margin-top:20px;font-size:18px;color:var(--color-muted);text-align:center}.connector{width:100px;height:16px;border-bottom:1px solid var(--color-accent);border-inline:1px solid var(--color-accent);position:absolute;top:120px;display:none}.explanation{border-top:1px solid var(--color-rule);padding-block:18px;min-height:100px}.explanation p{font-size:15px}.explanation strong{color:var(--color-accent)}#contraction{margin-top:6px;color:var(--color-muted);font-size:14px}.pronoun-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding-bottom:20px}.pronoun-controls button{width:44px;padding:0}.pronoun-controls span{font-size:13px;color:var(--color-muted);min-width:112px;text-align:center}.transport{border-top:1px solid var(--color-rule);padding-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.transport .primary{margin-left:auto}.primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent);font-weight:600}.primary:hover:not(:disabled){background:var(--color-ink);color:var(--color-accent-ink)}.reference{margin-block:32px;border-block:1px solid var(--color-rule);padding:20px 0}.reference summary{cursor:pointer;min-height:44px;padding:8px 0;font-weight:600}.reference>p{font-size:14px;color:var(--color-muted);max-width:90ch;padding-bottom:8px}.reference-grid{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:24px;margin-block:16px 24px}.reference-grid strong{display:block;font-size:21px;color:var(--color-accent)}.reference-grid span{font-size:14px;color:var(--color-muted)}footer{display:flex;justify-content:space-between;gap:24px;font-size:13px;color:var(--color-muted);padding-bottom:24px}.practice{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;padding-block:24px}.practice>div>p:not(.eyebrow){margin-top:16px;color:var(--color-muted)}.quiz{background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:32px}#quiz-sentence{font-size:clamp(28px,4vw,42px);font-weight:700;line-height:1.3;margin-block:24px;color:var(--color-ink)}#answers{display:flex;flex-wrap:wrap;gap:12px}#answers button{font-size:22px;padding:8px 24px}#answers button.correct{background:var(--color-soft);color:var(--color-accent);border-color:var(--color-accent)}#feedback{min-height:72px;padding-top:20px;color:var(--color-ink)}
@media(max-width:1000px){.workspace{grid-template-columns:210px minmax(0,1fr);gap:20px}.lesson-panel{padding:24px}.intro>p{font-size:14px}.tile{padding:8px 12px}.tiles{gap:8px}#steps button{font-size:12px}.step-number{margin-right:4px}}
@media(max-width:760px){.masthead,main,footer{padding-inline:20px}.masthead{min-height:76px}.wordmark{font-size:20px}.intro{display:block;padding-block:12px 24px}.intro>p{margin-top:16px}.intro>p br{display:none}#steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;margin-bottom:24px}#steps button{font-size:13px;padding:12px 0}.workspace{display:flex;flex-direction:column;gap:20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-top:0;margin-bottom:12px}#pronouns{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.person{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-color:var(--color-rule);padding:6px 2px;min-height:67px}.person .spanish{text-align:center;font-size:11px}.person .english{font-size:20px}.aside-note{display:none}.lesson-panel{padding:20px}.stage-top{gap:8px}.mode-label{font-size:9px}.lesson-panel h2{font-size:25px}.instruction{font-size:14px;min-height:63px}.board{min-height:180px;padding-block:20px}.tiles{gap:6px;min-height:60px}.tile{font-size:32px;padding:8px 10px}.complement{padding-inline:2px}.punctuation{font-size:28px;margin-left:-6px}.translation{font-size:16px}.explanation{min-height:125px}.transport{gap:8px}.transport button{font-size:13px}.transport .primary{margin-left:auto}.reference-grid{grid-template-columns:1fr;gap:16px}.practice{grid-template-columns:1fr;gap:24px;padding-top:0}.quiz{padding:24px}footer{flex-direction:column;gap:8px}.pronoun-controls{padding-bottom:12px}}
@media(max-width:374px){.masthead,main,footer{padding-inline:12px}.wordmark{font-size:18px}.masthead #restart{font-size:12px}.lesson-panel{padding:16px}.tile{font-size:28px;padding:7px}.transport .primary{width:100%;margin-top:4px}.mode-label{display:none}h1{font-size:34px}.person .spanish{font-size:10px}.explanation p{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:500px){#steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}}
/* Juegos: extensión de la lección, con los mismos tokens. */
#steps{grid-template-columns:repeat(7,minmax(0,1fr))}.games-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.games-heading>p{max-width:34ch;color:var(--color-muted)}.game-picker{display:flex;border-bottom:1px solid var(--color-rule);gap:16px;margin-bottom:24px}.game-picker button{flex:1;text-align:left;white-space:normal;border:0;border-radius:0;padding:16px 12px;border-bottom:3px solid var(--color-clear)}.game-picker button[aria-pressed=true]{border-bottom-color:var(--color-accent);background:var(--color-soft);color:var(--color-accent)}.game-picker b,.game-picker span{display:block}.game-picker span{font-size:13px;margin-top:8px}.game-surface{background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:32px;max-width:960px;margin:auto}.game-status{display:flex;justify-content:space-between;align-items:center;gap:12px}.game-status .eyebrow{margin:0;color:var(--color-accent)}.game-surface h3{font-family:var(--font-display);font-size:28px;line-height:1.2;margin:16px 0 12px}.game-surface #game-help{color:var(--color-muted);margin-bottom:24px}.game-surface #game-feedback{min-height:72px;padding-top:20px;font-weight:600}.pair-pronouns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pair-pronouns button{white-space:normal;min-height:80px}.pair-pronouns b{font-size:24px;display:block}.pair-pronouns small{display:block;color:var(--color-muted)}.pair-pronouns button[aria-pressed=true]{outline:2px solid var(--color-accent);background:var(--color-soft)}.pair-pronouns button.matched{opacity:1;border-color:var(--color-accent);color:var(--color-accent);background:var(--color-soft)}.verb-targets{display:flex;gap:16px;margin-top:24px;justify-content:center}.verb-targets button{min-width:80px;font-size:28px;font-weight:700}.sentence-slot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:90px;background:var(--color-paper);color:var(--color-ink);padding:16px;border-bottom:2px solid var(--color-rule);margin-bottom:20px}.sentence-slot:empty:before{content:'Toca las palabras para construir la frase.';color:var(--color-muted)}
.word-bank{display:flex;flex-wrap:wrap;gap:12px}.word-bank button,.sentence-slot button{font-size:22px}.sentence-slot button{background:var(--color-soft);color:var(--color-accent);border-color:var(--color-accent)}#game-actions{display:flex;flex-wrap:wrap;gap:12px}.detective-sentence{font-size:clamp(28px,4vw,42px);font-weight:700;padding-block:16px 32px;line-height:1.3}.detective-options{display:flex;gap:16px;flex-wrap:wrap}.game-result{padding:24px 0;font-family:var(--font-display);font-size:36px;color:var(--color-accent)}
@media(max-width:1000px){#steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.games-heading{display:block}.games-heading>p{margin-top:16px}.game-picker{flex-direction:column;gap:4px}.game-picker button{padding:12px}.game-picker span{margin-top:4px}.game-surface{padding:20px}.pair-pronouns{grid-template-columns:repeat(2,minmax(0,1fr))}.game-status{align-items:flex-start}.game-status .eyebrow{font-size:10px;padding-top:12px}.game-status button{font-size:12px}.verb-targets{gap:8px}.verb-targets button{min-width:64px}.sentence-slot{padding:12px}.word-bank{gap:8px}.word-bank button,.sentence-slot button{font-size:18px}}
@media(max-width:500px){#steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Colores y competición solicitados por Mayka. */
#games .eyebrow{color:var(--game-purple)}.game-picker button:nth-child(1){background:var(--game-blue-soft);color:var(--game-blue)}.game-picker button:nth-child(2){background:var(--game-orange-soft);color:var(--game-orange)}.game-picker button:nth-child(3){background:var(--game-purple-soft);color:var(--game-purple)}.game-picker button[aria-pressed=true]{border-bottom-color:currentColor;box-shadow:inset 0 0 0 2px currentColor;border-radius:8px}.competition{background:var(--game-blue-soft);color:var(--color-ink);border-radius:16px;padding:24px;margin:24px auto;max-width:960px}.competition-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.competition-top h3{margin:0;font-family:var(--font-display);font-size:24px}.competition-top button{background:var(--color-surface);color:var(--game-blue);border-color:var(--game-blue)}.match-settings{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:20px 0}.match-settings label{font-size:13px;flex:1;min-width:160px;font-weight:600}.match-settings input,.match-settings select{display:block;width:100%;height:44px;font:inherit;font-size:16px;background:var(--color-surface);color:var(--color-ink);border:1px solid var(--game-blue);border-radius:6px;padding:8px;margin-top:6px}.scoreboard{display:flex;gap:16px}.score-player{flex:1;min-width:0;border:2px solid var(--color-clear);border-radius:12px;padding:16px 20px;background:var(--color-surface);color:var(--game-blue)}.score-player.player-1{color:var(--game-purple)}.score-player.active{border-color:currentColor;box-shadow:0 4px 0 currentColor}.score-player b{display:block;overflow-wrap:anywhere}.score-player strong{font-size:48px;line-height:1.2;display:block;font-variant-numeric:tabular-nums}.score-player span{display:block;font-size:14px}#turn-label{font-weight:700;font-size:20px;margin-top:20px}#score-event{min-height:28px;font-size:15px;margin-top:8px}.points-rules{font-size:13px;margin-top:8px}.points-rules summary{cursor:pointer;padding:10px 0;min-height:44px}.points-rules p{margin:8px 0;max-width:85ch}.game-surface{border-width:2px;transition:border-color .15s,background-color .15s}.game-surface[data-feedback=hit]{border-color:var(--game-success);background:var(--game-success-soft)}.game-surface[data-feedback=miss]{border-color:var(--game-error);background:var(--game-error-soft)}.pair-pronouns button{background:var(--game-blue-soft);color:var(--game-blue);border-color:var(--game-blue)}.pair-pronouns button:nth-child(3n+2){background:var(--game-orange-soft);color:var(--game-orange);border-color:var(--game-orange)}.pair-pronouns button:nth-child(3n){background:var(--game-purple-soft);color:var(--game-purple);border-color:var(--game-purple)}.pair-pronouns button[aria-pressed=true]{outline:3px solid var(--game-purple);outline-offset:2px}.pair-pronouns button.matched{background:var(--game-success-soft);color:var(--game-success);border-color:var(--game-success)}.verb-targets button:nth-child(1){background:var(--game-blue);color:var(--color-surface)}.verb-targets button:nth-child(2){background:var(--game-orange);color:var(--color-surface)}.verb-targets button:nth-child(3){background:var(--game-purple);color:var(--color-surface)}.word-bank button{background:var(--game-orange-soft);color:var(--game-orange);border-color:var(--game-orange)}.sentence-slot button{background:var(--game-purple-soft);color:var(--game-purple);border-color:var(--game-purple)}.detective-options button:first-child{background:var(--game-success);color:var(--color-surface)}.detective-options button:last-child{background:var(--game-error);color:var(--color-surface)}.ranking{max-width:960px;margin:24px auto;background:var(--game-purple-soft);color:var(--game-purple);padding:24px;border-radius:12px}.ranking h3{font-family:var(--font-display);font-size:24px;margin:0 0 8px}.ranking p{font-size:13px}.ranking ol{padding-left:24px;margin-bottom:0}.ranking li{padding:10px 4px;overflow-wrap:anywhere}.ranking li span{display:inline-block;margin-right:16px}.ranking li b{white-space:nowrap}
@media(max-width:760px){.competition{padding:20px}.competition-top{align-items:flex-start;flex-direction:column}.competition-top h3{font-size:23px}.match-settings{gap:12px}.match-settings label{min-width:100%;}.scoreboard{gap:8px}.score-player{padding:12px}.score-player strong{font-size:36px}.score-player span{font-size:12px}.ranking{padding:20px}}
.compact-score{position:sticky;top:0;z-index:2;background:var(--game-purple);color:var(--color-surface);padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:15px;font-weight:700;overflow-wrap:anywhere}
/* Más juegos: mismo cuaderno y colores existentes. */
.game-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0}.game-picker button{border-radius:8px;border:1px solid var(--color-rule)}.game-picker button:nth-child(3n+1){background:var(--game-blue-soft);color:var(--game-blue)}.game-picker button:nth-child(3n+2){background:var(--game-orange-soft);color:var(--game-orange)}.game-picker button:nth-child(3n){background:var(--game-purple-soft);color:var(--game-purple)}.choice-options{display:grid;gap:12px}.choice-options button{text-align:left;white-space:normal;font-size:clamp(18px,2.5vw,24px);background:var(--game-blue-soft);color:var(--game-blue);border-color:var(--game-blue);padding:14px 18px}.choice-options button.answer-correct{opacity:1;background:var(--game-success-soft);color:var(--game-success);border-color:var(--game-success)}.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.memory-grid button{min-height:100px;white-space:normal;overflow-wrap:anywhere;background:var(--game-purple);color:var(--color-surface);font-weight:700}.memory-grid button[aria-pressed=true]{opacity:1;background:var(--game-purple-soft);color:var(--game-purple)}.memory-grid button.memory-found{background:var(--game-success-soft);color:var(--game-success)}
@media(max-width:760px){.game-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.game-picker button{font-size:14px}.game-picker span{font-size:12px}.memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.memory-grid button{padding:8px;min-height:96px;font-size:14px}}
@media(max-width:374px){.memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Juegos ilustrados: mismas fichas y controles, con objetivos amplios. */
.scene-picture{width:min(100%,360px);margin:12px auto}.scene-picture svg{display:block;width:100%;height:auto}.picture-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.picture-options button{padding:8px;min-width:0}.picture-options .scene-picture{margin:0}#game-content>button{margin:4px 8px 4px 0}.memory-grid button[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:-3px}