/* おけいこ帖 · la hoja sobre el fieltro (DISENO.md, «下敷き»).
   Manda el fieltro; la hoja es un objeto pequeño y claro encima.
   El bermellón es solo del maestro: ni un botón, ni un icono, ni un adorno lo usa. */

@font-face { font-family: 'Yuji Syuku'; src: url('/fonts/yuji-syuku.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Klee One'; src: url('/fonts/klee-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gowun Batang'; src: url('/fonts/gowun-batang.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/courier-prime.woff2') format('woff2'); font-display: swap; }

:root {
  --fieltro: #18233f;
  --fieltro-hondo: #121a30;
  --pauta: rgba(255, 255, 255, .075);
  --papel: #f3ecdd;
  --papel-viejo: #e6dcc7;
  --sumi: #17130f;
  --sumi-suave: #4a4338;
  --bermellon: #d8432b;
  --bermellon-texto: #f08a72;
  --anil: #3d5a9a;
  --susurro: #aab0c4;
  --susurro-papel: #6c6556;
  --f-grito: 'Yuji Syuku', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif;
  --f-cuerpo: 'Klee One', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
  --f-mono: var(--f-cuerpo);
  --medida: 70rem;
  --celda: 56px;
}
html:lang(ja) body { font-feature-settings: normal; font-kerning: normal; }
html:lang(ko) { --f-grito: 'Gowun Batang', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif; --f-cuerpo: 'Gowun Batang', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif; }
html:lang(en) { --f-grito: 'Gowun Batang', Georgia, 'Times New Roman', serif; --f-cuerpo: 'Gowun Batang', Georgia, 'Times New Roman', serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fieltro); }
body {
  margin: 0; min-height: 100vh; color: var(--papel); font-family: var(--f-cuerpo); font-size: 1.0625rem; line-height: 1.85;
  background-color: var(--fieltro);
  background-image:
    linear-gradient(var(--pauta) 1px, transparent 1px),
    linear-gradient(90deg, var(--pauta) 1px, transparent 1px);
  background-size: var(--celda) var(--celda);
  background-position: -1px -1px;
  text-rendering: optimizeLegibility;
}
body::before { /* la luz sobre la mesa: una viñeta, no un adorno */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .05), transparent 55%), radial-gradient(140% 100% at 50% 120%, rgba(0, 0, 0, .35), transparent 60%);
}
body > * { position: relative; z-index: 1; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--papel); outline-offset: 3px; border-radius: 2px; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--papel); color: var(--sumi); padding: .5rem .9rem; z-index: 10; }
.saltar:focus { top: 12px; }

.ancho { width: min(100% - 2.5rem, var(--medida)); margin-inline: auto; }

/* ---------- cabecera ---------- */
.cab { padding: 1rem 0 .4rem; }
.cab .ancho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marca { font-family: var(--f-grito); font-size: 1.6rem; letter-spacing: .08em; text-decoration: none; color: var(--papel); display: inline-flex; align-items: baseline; gap: .7rem; line-height: 1; }
.marca small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; color: var(--susurro); }
.idiomas { display: flex; gap: .2rem; font-family: var(--f-mono); font-size: .8rem; }
.idiomas a, .idiomas span { padding: .35rem .7rem; text-decoration: none; color: var(--susurro); border: 1px solid transparent; border-radius: 2px; }
.idiomas a:hover { color: var(--papel); border-color: rgba(255, 255, 255, .25); }
.idiomas [aria-current] { color: var(--sumi); background: var(--papel); }

/* ---------- la hoja ---------- */
.papel-hoja, .mz-hoja {
  position: relative; color: var(--sumi); background-color: var(--papel);
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 100, 60, .045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 1px, transparent 1px 7px),
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .5), transparent 60%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 22px 34px -14px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .25);
}
.mz-hoja { box-shadow: 10px 8px 0 -1px #cfc5ae, 11px 9px 0 -1px rgba(0, 0, 0, .18), 0 22px 34px -14px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .25); }
.pinza {
  position: absolute; top: -13px; left: 50%; width: 46%; height: 26px; transform: translateX(-50%); border-radius: 3px; z-index: 2;
  background: linear-gradient(#3b3b3d, #1b1b1d 60%, #0f0f10); box-shadow: 0 8px 12px -4px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ---------- el maestro ---------- */
.mz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 3rem; align-items: start; }
@media (min-width: 52rem) { .mz { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); } .mz.mz-ancha { grid-template-columns: minmax(0, 32rem) 1fr; } }
.mz-hoja { padding: 1.5rem 1.4rem 1.2rem; transform: rotate(-.45deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mz-pinza { position: absolute; top: -13px; left: 50%; width: 46%; height: 26px; transform: translateX(-50%); border-radius: 3px; z-index: 2; background: linear-gradient(#3b3b3d, #1b1b1d 60%, #0f0f10); box-shadow: 0 8px 12px -4px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22); }
.mz-fecha { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; color: var(--susurro-papel); margin: .6rem 0 .5rem .2rem; white-space: pre; }
.mz-lienzo { position: relative; aspect-ratio: 1; width: 100%; }
.mz-lienzo canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.mz-lado { display: grid; gap: 1rem; align-content: start; }
.mz-dicho { margin: 0; min-height: 3.6em; font-size: 1.2rem; line-height: 1.7; font-family: var(--f-cuerpo); color: var(--susurro); }
.mz-dicho.mz-vacio { font-size: 1rem; }
.mz-dicho.mz-rojo { color: var(--bermellon-texto); font-family: var(--f-grito); font-size: 1.45rem; line-height: 1.55; }
.mz-susurro { margin: -.4rem 0 0; min-height: 1.4em; font-family: var(--f-mono); font-size: .78rem; line-height: 1.6; color: var(--susurro); letter-spacing: .02em; }
.mz-acciones { display: flex; flex-wrap: wrap; gap: .55rem; }
.mz-btn, .boton {
  appearance: none; cursor: pointer; font: inherit; font-size: .95rem; color: var(--papel); background: transparent;
  border: 1px solid rgba(243, 236, 221, .35); border-radius: 2px; padding: .55rem 1rem; min-height: 44px; line-height: 1.2; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), background .2s, border-color .2s, opacity .2s;
}
.mz-btn:hover:not(:disabled) { border-color: var(--papel); }
.mz-btn:active:not(:disabled), .boton:active { transform: translateY(1px) scale(.985); }
.mz-btn:disabled { opacity: .35; cursor: default; }
.mz-btn[aria-pressed='false'] { opacity: .6; }
.mz-principal, .boton-papel { background: var(--papel); color: var(--sumi); border-color: var(--papel); font-family: var(--f-grito); letter-spacing: .1em; font-size: 1.05rem; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.mz-principal:hover:not(:disabled), .boton-papel:hover { background: #fff8e8; }
.mz-principal.mz-hecho { background: transparent; color: var(--papel); border-color: rgba(243, 236, 221, .35); box-shadow: none; }
.mz-letras { display: flex; flex-wrap: wrap; gap: .4rem; }
.mz-letra { appearance: none; cursor: pointer; font-family: var(--f-grito); font-size: 1.5rem; line-height: 1; width: 3rem; height: 3rem; color: var(--papel); background: rgba(255, 255, 255, .04); border: 1px solid rgba(243, 236, 221, .22); border-radius: 2px; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.mz-letra:hover { background: rgba(255, 255, 255, .1); }
.mz-letra:active { transform: scale(.94); }
.mz-letra[aria-pressed='true'] { background: var(--papel); color: var(--sumi); border-color: var(--papel); }
.mz-nombre { display: grid; gap: .35rem; font-size: .9rem; color: var(--susurro); }
.mz-nombre input { font: inherit; font-size: 1.1rem; color: var(--papel); background: transparent; border: 0; border-bottom: 1px solid rgba(243, 236, 221, .45); padding: .45rem .1rem; border-radius: 0; max-width: 20rem; font-family: var(--f-grito); }
.mz-nombre input::placeholder { color: rgba(170, 176, 196, .6); }
.mz-aviso { margin: -.4rem 0 0; min-height: 1.2em; font-size: .82rem; color: var(--susurro); }
.mz-todas summary { cursor: pointer; font-size: .9rem; color: var(--susurro); padding: .3rem 0; }
.mz-grid { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.mz-grid .mz-letra { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
.mz-nota { margin: .2rem 0 0; font-size: .92rem; line-height: 1.8; color: var(--susurro); border-left: 2px solid rgba(243, 236, 221, .3); padding-left: .9rem; max-width: 34rem; }

/* ---------- portada ---------- */
.heroe { padding: 1.2rem 0 3rem; }
.heroe-cab { max-width: 44rem; margin-bottom: 2.2rem; }
.sobre { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; color: var(--susurro); margin: 0 0 .9rem; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--f-grito); font-weight: 400; line-height: 1.35; margin: 0; }
h1 { font-size: clamp(2rem, 6.2vw, 3.7rem); letter-spacing: .04em; margin-bottom: 1rem; text-wrap: balance; }
html:lang(ko) h1, html:lang(en) h1 { letter-spacing: 0; line-height: 1.25; font-size: clamp(1.9rem, 5.4vw, 3.2rem); }
.bajada { font-size: 1.12rem; color: #dcd5c6; margin: 0; max-width: 38rem; text-wrap: pretty; }
.fila { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.4rem; }
.boton-papel { padding: .75rem 1.5rem; }
.boton-papel svg { width: 1.15rem; height: 1.15rem; flex: none; }
.boton-claro { border-color: rgba(243, 236, 221, .35); }
.boton-claro:hover { border-color: var(--papel); }

.bloque { padding: 3rem 0; border-top: 1px solid rgba(243, 236, 221, .14); }
.bloque h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: .06em; margin-bottom: 1.4rem; }
html:lang(ko) .bloque h2, html:lang(en) .bloque h2 { letter-spacing: 0; }
.pasos { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: p; list-style: none; padding: 0; margin: 0; }
.pasos li { counter-increment: p; padding-top: 2.6rem; position: relative; }
.pasos li::before { content: counter(p, cjk-ideographic); font-family: var(--f-grito); font-size: 1.9rem; position: absolute; top: 0; left: 0; line-height: 1; color: var(--papel); }
html:lang(ko) .pasos li::before, html:lang(en) .pasos li::before { content: counter(p); font-family: var(--f-mono); font-size: 1.1rem; }
.pasos strong { display: block; font-family: var(--f-grito); font-weight: 400; font-size: 1.25rem; margin-bottom: .25rem; }
.pasos span { color: #cfc8b9; font-size: .98rem; line-height: 1.8; }

.tarjetas { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.tarjetas a { display: block; height: 100%; padding: 1.2rem 1.2rem 1.3rem; text-decoration: none; transform: rotate(var(--giro, 0deg)); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s; }
.tarjetas li:nth-child(odd) a { --giro: -.5deg; } .tarjetas li:nth-child(even) a { --giro: .4deg; }
.tarjetas a:hover { transform: rotate(0) translateY(-3px); }
.tarjetas b { display: block; font-family: var(--f-grito); font-weight: 400; font-size: 1.28rem; line-height: 1.4; margin-bottom: .45rem; }
.tarjetas span { display: block; font-size: .9rem; line-height: 1.7; color: var(--sumi-suave); }
.tarjetas .k { font-family: var(--f-grito); font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; display: block; color: var(--sumi); }

.app-bloque { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 46rem) { .app-bloque { grid-template-columns: 1.3fr 1fr; } }
.app-bloque p { margin: 0 0 .6rem; max-width: 36rem; color: #dcd5c6; }
.aparte { font-size: .88rem; color: var(--susurro); }

/* ---------- guías ---------- */
.migas { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; color: var(--susurro); padding: 1.2rem 0 0; }
.migas a { text-decoration: none; } .migas a:hover { text-decoration: underline; }
.guia-cab { padding: 1.4rem 0 2rem; max-width: 46rem; }
.guia-cab h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.articulo { padding: clamp(1.6rem, 4vw, 3rem) clamp(1.3rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 2.6rem); max-width: 48rem; transform: rotate(-.15deg); margin-bottom: 3.4rem; }
.articulo h2 { font-size: 1.55rem; letter-spacing: .05em; margin: 2.2rem 0 .7rem; padding-top: .3rem; color: var(--sumi); }
.articulo h2:first-of-type { margin-top: 1rem; }
html:lang(ko) .articulo h2, html:lang(en) .articulo h2 { letter-spacing: 0; }
.articulo p, .articulo li { color: #2b261f; font-size: 1.04rem; line-height: 1.95; }
.articulo p { margin: 0 0 1rem; text-wrap: pretty; }
.articulo ul, .articulo ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.articulo li { margin-bottom: .45rem; padding-left: .2rem; }
.articulo .muestra { font-family: var(--f-grito); font-size: 1.15em; }
.articulo .cuadro { border: 1px solid rgba(23, 19, 15, .3); padding: 1rem 1.2rem; margin: 1.2rem 0; background: rgba(255, 255, 255, .35); }
.articulo .cuadro p { margin: 0; font-size: .98rem; }
.articulo table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.4rem; font-size: .98rem; }
.articulo th, .articulo td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid rgba(23, 19, 15, .25); vertical-align: top; line-height: 1.7; color: #2b261f; }
.articulo th { font-family: var(--f-grito); font-weight: 400; font-size: 1.02rem; }
.practica { margin: 0 0 4rem; }
.practica > h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: .5rem; letter-spacing: .05em; }
html:lang(ko) .practica > h2, html:lang(en) .practica > h2 { letter-spacing: 0; }
.practica > p { margin: 0 0 1.8rem; color: #cfc8b9; max-width: 38rem; }
.otras h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.pie-guia { margin: 0 0 3rem; }

/* ---------- pie ---------- */
.pie { border-top: 1px solid rgba(243, 236, 221, .18); margin-top: 3rem; padding: 2.2rem 0 3rem; font-size: .88rem; line-height: 1.8; color: var(--susurro); background: rgba(10, 15, 30, .35); }
.pie .ancho { display: grid; gap: 1.4rem; }
@media (min-width: 46rem) { .pie .ancho { grid-template-columns: 1.4fr 1fr; } }
.pie p { margin: 0 0 .5rem; max-width: 40rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; align-content: start; }
.pie a { color: var(--papel); }
.pie .licencia-kvg { font-size: .85rem; }

/* ---------- textos largos (licencias, privacidad) ---------- */
.texto { max-width: 44rem; padding: 1.6rem 0 2.5rem; }
.texto h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.texto h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; }
.texto p, .texto li { color: #e3dccd; }
.texto table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 1rem 0; }
.texto th, .texto td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid rgba(243, 236, 221, .2); vertical-align: top; line-height: 1.65; }
.texto th { font-weight: 600; color: var(--susurro); font-family: var(--f-mono); font-size: .78rem; letter-spacing: .05em; }
.texto pre { white-space: pre-wrap; font-family: var(--f-mono); font-size: .76rem; line-height: 1.6; color: var(--susurro); background: rgba(0, 0, 0, .25); padding: 1rem; overflow: auto; }
.cuatro { text-align: center; padding: 5rem 0 3rem; }
.cuatro .gran { font-family: var(--f-grito); font-size: clamp(5rem, 22vw, 11rem); line-height: 1; margin: 0; }

@media (max-width: 40rem) {
  body { font-size: 1rem; --celda: 44px; }
  .mz-hoja { padding: 1.3rem 1rem 1rem; }
  .mz-dicho.mz-rojo { font-size: 1.28rem; }
  .cab .ancho { gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { body { background: #fff; color: #000; } body::before, .cab, .pie, .practica, .mz { display: none; } .articulo { box-shadow: none; transform: none; } }

/* tipografía: sin monoespaciada, sin espaciado en latinas */
.marca small, .idiomas, .migas, .mz-fecha, .mz-susurro, .sobre { letter-spacing: 0; text-transform: none; }
.marca small { font-size: .8rem; }
html:lang(ko) .boton-papel, html:lang(en) .boton-papel, html:lang(ko) .mz-principal, html:lang(en) .mz-principal { letter-spacing: 0; }
.boton-papel[data-tienda] { letter-spacing: .02em; }
.boton-pronto { cursor: default; opacity: .85; }
.boton-pronto:hover { background: var(--papel); }
.jg-cta:disabled { opacity: .85; cursor: default; }