/* =========================================================
   Teclea · Tema "cuaderno" (octubre 2026)
   Se carga después de styles.css y site-pages.css y los sobrescribe.
   Tipografía Hanken Grotesk alojada en /fuentes (licencia SIL OFL 1.1).
   ========================================================= */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fuentes/hanken-grotesk-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fuentes/hanken-grotesk-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fuentes/hanken-grotesk-latin-600-normal.woff2") format("woff2");}


:root{
  --bg:#111214;
  --bg-soft:#16171a;
  --bg-warm:#16171a;
  --panel:#16171a;
  --ink:#f2f2f0;
  --ink-soft:rgba(242,242,240,.62);
  --ink-faint:rgba(242,242,240,.38);
  --line:rgba(242,242,240,.14);
  --line-strong:rgba(242,242,240,.32);
  --accent:#E8A04A;
  --accent-dark:#f2f2f0;
  --accent-2:#E8A04A;
  --error:#ff6b57;
  --error-soft:rgba(255,107,87,.16);
  --correct-soft:rgba(242,242,240,.08);
  --sans:"Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:var(--sans);
  --gap:32px;
}

html{background:var(--bg);}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);letter-spacing:-.005em;}
::selection{background:var(--accent);color:#111214;}

/* ---------- etiquetas pequeñas en mayúsculas ---------- */
.t-label,
.tool-step-label,
.benefit-num,
.side-label{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- etiqueta vertical fija ---------- */
.side-label{
  position:fixed;
  left:22px;
  top:50%;
  z-index:5;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;
  color:var(--ink-soft);
  pointer-events:none;
}

/* ---------- cabecera ---------- */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(17,18,20,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:20px 56px;
}
.wordmark,
.wordmark--animated{
  font-family:var(--sans);
  font-weight:500;
  font-size:20px;
  letter-spacing:-.02em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark--animated::after{height:1px;bottom:-4px;background:var(--accent);border-radius:0;}
nav a{
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-left:32px;
  transition:color .2s ease;
}
nav a:hover{color:var(--ink);}
.nav-cta{
  background:var(--ink);
  color:#111214 !important;
  padding:10px 20px;
  border-radius:999px;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{background:var(--accent);transform:translateY(-1px);}

/* ---------- portada ---------- */
.hero{max-width:1120px;padding:120px 56px 56px;}
.hero h1{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(40px,6vw,76px);
  line-height:1.02;
  letter-spacing:-.035em;
  max-width:980px;
  margin:0 0 28px;
}
.hero h1 em{font-style:normal;color:var(--ink-faint);}
.hero .sub{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:560px;margin:0 0 24px;}

/* ---------- herramienta: rejilla cuadrada y aireada ---------- */
.tool-card{max-width:1120px;padding:0 56px;margin:0 auto 64px;}
.tool-frame{border:1px solid var(--line);}
.tool-row{padding:28px 32px;border-bottom:1px solid var(--line);}
.tool-row:last-child{border-bottom:0;}
.tool-step-label{display:block;margin-bottom:16px;}

.mode-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;background:none;border:1px solid var(--line);border-radius:0;width:100%;}
.mode-btn{
  border-radius:0;
  border-right:1px solid var(--line);
  padding:16px 18px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:background .2s ease,color .2s ease;
}
.mode-btn:last-child{border-right:0;}
.mode-btn:hover{color:var(--ink);background:rgba(242,242,240,.04);}
.mode-btn.active{background:var(--ink);color:#111214;font-weight:500;box-shadow:none;}

.letter-drill-panel,.sample-text-panel,.own-text-panel{margin:0;}
.letter-drill-panel.visible{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 2fr;
  grid-template-rows:auto auto 1fr;
  gap:12px 40px;
  align-items:start;
  text-align:left;
}
.letter-drill-panel label{grid-column:1;grid-row:1;}
.letter-drill-panel select{grid-column:1;grid-row:2;}
.letter-drill-panel .keyboard-guide{grid-column:2;grid-row:1 / span 3;}
.sample-text-panel.visible{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:12px 40px;align-items:center;}
.sample-text-panel label,.letter-drill-panel label{
  font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.sample-text-panel select,.letter-drill-panel select{
  width:100%;
  max-width:320px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:0;
  padding:12px 36px 12px 14px;
  font-size:14px;
}
.sample-text-panel select:focus,.letter-drill-panel select:focus{outline:1px solid var(--accent);outline-offset:2px;}

.keyboard-guide{max-width:none;width:100%;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:0;}
.keyboard-guide p{color:var(--ink-soft);font-size:13px;margin:0 0 18px;}
.keyboard-rows{gap:8px;}
.keyboard-row{gap:8px;opacity:.35;}
.keyboard-row span{
  width:38px;height:38px;
  background:transparent;
  color:var(--ink-soft);
  border:1px solid var(--line-strong);
  border-radius:0;
  font-size:13px;
}
.keyboard-row-offset{margin-left:19px;}
.keyboard-row-offset-large{margin-left:38px;}
.keyboard-row.highlighted span{color:#111214;background:var(--accent);border-color:var(--accent);box-shadow:none;}

.own-text-panel textarea{
  background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-radius:0;
  padding:16px;font-size:15px;min-height:110px;
}
.own-text-panel button{
  margin-top:14px;background:var(--ink);color:#111214;border-radius:0;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:13px 20px;
}

.type-box{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:0;
  padding:40px;
  font-size:24px;
  line-height:1.75;
  min-height:150px;
  max-height:220px;
}
.type-box:focus-within{border-color:var(--line-strong);}
.type-box span{color:var(--ink-faint);}
.type-box span.correct{color:var(--ink);background:transparent;}
.type-box span.incorrect{color:var(--error);background:var(--error-soft);}
.type-box span.current{color:var(--ink);background:rgba(232,160,74,.18);border-bottom:2px solid var(--accent);}

.controls{margin-top:0;gap:24px;flex-wrap:wrap;}
.stats-row{gap:0;font-family:var(--sans);}
.stats-row > div{
  display:flex;flex-direction:column;gap:6px;
  padding-right:40px;margin-right:40px;border-right:1px solid var(--line);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.stats-row > div:last-child{border-right:0;margin-right:0;}
.stats-row strong{font-family:var(--mono);font-size:26px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);}
.reset-btn{
  background:transparent;color:var(--ink);border:1px solid var(--line-strong);border-radius:0;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:13px 22px;
  transition:background .2s ease,color .2s ease;
}
.reset-btn:hover{background:var(--ink);color:#111214;border-color:var(--ink);}

/* ---------- espacio publicitario ---------- */
.ad-slot{background:transparent;border:1px dashed var(--line-strong);color:var(--ink-faint);}
.ad-slot-banner{max-width:1008px;min-height:110px;margin:0 auto 120px;}

/* ---------- ventajas con iconos animados ---------- */
.benefits{background:var(--bg);padding:120px 56px;border-top:1px solid var(--line);}
.benefits-inner{max-width:1120px;}
.section-heading{
  font-family:var(--sans);font-weight:400;font-size:clamp(30px,4vw,48px);
  line-height:1.08;letter-spacing:-.03em;max-width:760px;margin:0 0 20px;color:var(--ink);
}
.section-intro{color:var(--ink-soft);max-width:560px;font-size:16px;margin:0 0 72px;}
.benefit-list{grid-template-columns:repeat(4,1fr);gap:0;}
.benefit-item{
  display:flex;flex-direction:column;gap:0;
  padding:0 28px 8px;border-left:1px solid var(--line);
}
.benefit-num{display:block;margin-bottom:28px;}
.benefit-anim{width:120px;height:96px;margin-bottom:40px;color:var(--ink);}
.benefit-anim svg{width:100%;height:100%;overflow:visible;}
.benefit-item h3{font-size:18px;font-weight:400;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);}
.benefit-item p{font-size:14px;line-height:1.6;color:var(--ink-soft);}

/* trazos finos */
.benefit-anim svg *{vector-effect:non-scaling-stroke;}
.ba-stroke{fill:none;stroke:currentColor;stroke-width:1;}
.ba-fill{fill:var(--bg);stroke:currentColor;stroke-width:1;}
.ba-accent{fill:var(--accent);stroke:none;}

/* 001 · reloj: aguja girando y punto recorriendo la esfera */
.ba-hand{transform-origin:60px 48px;animation:ba-spin 6s linear infinite;}
.ba-hand-slow{transform-origin:60px 48px;animation:ba-spin 36s linear infinite;}
.ba-orbit{transform-origin:60px 48px;animation:ba-spin 9s linear infinite reverse;}
@keyframes ba-spin{to{transform:rotate(360deg);}}

/* 002 · tres círculos que se separan y se juntan */
.ba-c1{animation:ba-c1 5s ease-in-out infinite;}
.ba-c2{animation:ba-c2 5s ease-in-out infinite;}
.ba-c3{animation:ba-c3 5s ease-in-out infinite;}
@keyframes ba-c1{0%,100%{transform:translate(0,0);}50%{transform:translate(-14px,-8px);}}
@keyframes ba-c2{0%,100%{transform:translate(0,0);}50%{transform:translate(14px,-8px);}}
@keyframes ba-c3{0%,100%{transform:translate(0,0);}50%{transform:translate(0,14px);}}

/* 003 · teclas que se pulsan una detrás de otra */
.ba-key{animation:ba-press 2.4s ease-in-out infinite;}
.ba-key:nth-of-type(2){animation-delay:.3s;}
.ba-key:nth-of-type(3){animation-delay:.6s;}
.ba-key:nth-of-type(4){animation-delay:.9s;}
@keyframes ba-press{0%,60%,100%{transform:translateY(0);}20%{transform:translateY(6px);}}

/* 004 · infinito con un punto que lo recorre */
.ba-loop{stroke-dasharray:6 6;animation:ba-dash 12s linear infinite;}
.ba-runner{offset-path:path("M60 48 C 76 28, 104 28, 104 48 C 104 68, 76 68, 60 48 C 44 28, 16 28, 16 48 C 16 68, 44 68, 60 48 Z");animation:ba-run 5s linear infinite;}
@keyframes ba-dash{to{stroke-dashoffset:-120;}}
@keyframes ba-run{to{offset-distance:100%;}}

/* ---------- método ---------- */
.method{max-width:1120px;padding:120px 56px;border-top:1px solid var(--line);}
.method-steps{gap:0;margin-top:0;border-top:1px solid var(--line);}
.method-step{border-top:0;border-left:1px solid var(--line);padding:32px 28px 8px;}
.method-step:first-child{border-left:0;padding-left:0;}
.method-step .step-number{font-family:var(--sans);font-style:normal;font-size:10.5px;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:28px;}
.method-step .step-number::before{content:"00";}
.method-step h3{font-size:22px;font-weight:400;letter-spacing:-.01em;margin:0 0 12px;}
.method-step p{color:var(--ink-soft);font-size:14px;}

.method-reading{grid-template-columns:1fr 1fr;gap:0;margin-top:96px;border-top:1px solid var(--line);}
.method-reading a{
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  color:var(--ink);font-weight:400;font-size:16px;padding:22px 0;
  transition:color .2s ease,padding .25s ease;
}
.method-reading a:nth-child(odd){margin-right:28px;}
.method-reading a:nth-child(even){margin-left:28px;}
.method-reading a::after{content:"→";text-decoration:none;font-size:16px;color:var(--ink-faint);transition:transform .25s ease,color .2s ease;}
.method-reading a:hover{background:transparent;color:var(--accent);box-shadow:none;transform:none;padding-left:8px;}
.method-reading a:hover::after{color:var(--accent);transform:translateX(4px);}

/* ---------- artículos y páginas legales ---------- */
.static-page{max-width:760px;padding:120px 56px 120px;}
.static-page h1{font-family:var(--sans);font-weight:400;font-size:clamp(36px,5vw,58px);line-height:1.04;letter-spacing:-.03em;margin:0 0 32px;}
.static-page h2{font-family:var(--sans);font-weight:400;font-size:26px;letter-spacing:-.02em;margin:64px 0 16px;padding-top:24px;border-top:1px solid var(--line);}
.static-page p,.static-page li{color:var(--ink-soft);font-size:17px;line-height:1.75;}
.static-page strong{color:var(--ink);font-weight:500;}
.static-page a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;}
.static-page a:hover{color:var(--accent);}
.static-page .notice{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0;padding:20px 24px;}
.static-page .contact-email{color:var(--ink);}
.static-page figure img{border-color:var(--line) !important;border-radius:0 !important;}
.static-page figcaption{color:var(--ink-faint) !important;}
.static-page iframe.pa-frame{border:1px solid var(--line) !important;}

/* ---------- test ---------- */
.test-result{background:var(--panel);border:1px solid var(--line);border-radius:0;padding:32px;margin-top:0;border-top:0;}
.test-result-title{font-family:var(--sans);font-weight:400;font-size:26px;letter-spacing:-.02em;}
.test-result-grid{gap:0;border:1px solid var(--line);}
.test-result-grid div{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;padding:24px 12px;}
.test-result-grid div:last-child{border-right:0;}
.test-result-grid strong{color:var(--accent);font-weight:400;font-size:40px;}
.test-result-grid span{color:var(--ink-faint);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
.test-result-level{color:var(--ink);}
.test-options{margin-bottom:24px !important;}
.static-page.test-page-text{padding-top:48px;}

/* ---------- pie ---------- */
footer{background:var(--bg);border-top:1px solid var(--line);padding:40px 56px;color:var(--ink-faint);font-size:12px;}
.footer-links{border-top:1px solid var(--line);gap:28px;}
.footer-links a{font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.footer-links a:hover{color:var(--ink);text-decoration:none;}

/* ---------- aviso de cookies ---------- */
.cookie-banner{background:#1b1c20;border:1px solid var(--line-strong);border-radius:0;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.cookie-banner p{color:var(--ink-soft);}
.cookie-banner a{color:var(--ink);}
.cookie-banner button{border-radius:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;}
.cookie-reject{background:transparent;color:var(--ink-soft);border:1px solid var(--line-strong);}
.cookie-accept{background:var(--ink);color:#111214;border:1px solid var(--ink);}
.cookie-settings-btn{border-radius:0;background:var(--ink);color:#111214;border-color:var(--ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.cookie-settings-btn:hover{background:var(--accent);border-color:var(--accent);}

/* ---------- aparición al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1;transform:none;}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .benefit-list{grid-template-columns:1fr 1fr;row-gap:56px;}
  .benefit-item:nth-child(3){border-left:0;padding-left:0;}
  .benefit-item:first-child{padding-left:0;border-left:0;}
}
@media (max-width:760px){
  .side-label{display:none;}
  header{padding:16px 20px;}
  .hero{padding:72px 20px 40px;}
  .tool-card{padding:0 20px;}
  .tool-row{padding:20px;}
  .mode-btn{padding:14px 6px;font-size:10.5px;letter-spacing:.05em;}
  .letter-drill-panel.visible,.sample-text-panel.visible{grid-template-columns:1fr;}
  .letter-drill-panel .keyboard-guide{grid-column:1;grid-row:auto;padding:16px;}
  .keyboard-row{gap:4px;}
  .keyboard-row span{width:26px;height:30px;font-size:11px;}
  .keyboard-row-offset{margin-left:13px;}
  .keyboard-row-offset-large{margin-left:26px;}
  .type-box{font-size:18px;padding:22px;max-height:150px;}
  .stats-row > div{padding-right:18px;margin-right:18px;}
  .stats-row strong{font-size:20px;}
  .ad-slot-banner{margin:0 20px 72px;}
  .benefits,.method{padding:72px 20px;}
  .benefit-list{grid-template-columns:1fr;}
  .benefit-item{border-left:0;padding:0 0 32px;border-bottom:1px solid var(--line);}
  .method-step,.method-step:first-child{border-left:0;padding:28px 0;border-bottom:1px solid var(--line);}
  .method-reading{grid-template-columns:1fr;margin-top:56px;}
  .method-reading a:nth-child(odd),.method-reading a:nth-child(even){margin:0;}
  .static-page{padding:64px 20px 80px;}
  .test-result-grid{grid-template-columns:1fr 1fr;}
  .test-result-grid div:nth-child(2){border-right:0;}
  .test-result-grid div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  footer{padding:28px 20px;}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .benefit-anim *{animation:none !important;}
}

/* ---------- ajustes de alineación ---------- */
.benefits-inner{max-width:1008px;}
.method-reading a,
.footer-links a{margin-left:0;}
.method-reading a{text-transform:none;letter-spacing:-.005em;font-size:16px;font-weight:400;}
@media (max-width:760px){.benefits-inner{max-width:none;}}
@media (max-width:760px){
  .keyboard-row{gap:4px;}
  .keyboard-row span{width:22px;height:28px;font-size:10.5px;}
  .keyboard-row-offset{margin-left:11px;}
  .keyboard-row-offset-large{margin-left:22px;}
  .keyboard-guide{overflow:hidden;}
}

:root{color-scheme:dark;}

/* ---------- v2: letra más rellena ---------- */
:root{--sans:"Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;}
body{font-weight:400;}
.hero h1,.section-heading,.static-page h1{font-weight:500;letter-spacing:-.03em;}
.static-page h2,.method-step h3,.benefit-item h3,.test-result-title{font-weight:500;}
.wordmark,.wordmark--animated{font-weight:600;}
nav a,.mode-btn,.reset-btn,.tool-step-label,.benefit-num,.side-label,
.sample-text-panel label,.letter-drill-panel label,.stats-row > div,
.footer-links a,.cookie-banner button,.own-text-panel button{font-weight:600;}
.method-reading a{font-weight:500;}
.hero .sub,.section-intro,.static-page p,.static-page li,.benefit-item p,.method-step p{font-weight:400;}

/* ---------- v2: letras sueltas centradas, selector arriba y teclado debajo ---------- */
.letter-drill-panel.visible{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.letter-drill-panel select{width:100%;max-width:340px;}
.letter-drill-panel .keyboard-guide{
  width:100%;max-width:620px;margin-top:22px;
  display:flex;flex-direction:column;align-items:center;padding:28px 24px;
}
.keyboard-rows{justify-items:start;}
.sample-text-panel.visible{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.sample-text-panel select{width:100%;max-width:340px;}
@media (max-width:760px){
  .letter-drill-panel .keyboard-guide{padding:18px 12px;margin-top:14px;}
}

/* ---------- v3: negro cálido y más ámbar ---------- */
:root{
  --bg:#141210;
  --bg-soft:#1b1815;
  --bg-warm:#1b1815;
  --panel:#1b1815;
  --ink:#f4efe7;
  --ink-soft:rgba(244,239,231,.64);
  --ink-faint:rgba(244,239,231,.40);
  --line:rgba(244,239,231,.13);
  --line-strong:rgba(244,239,231,.30);
}
header{background:rgba(20,18,16,.86);}
.cookie-banner{background:#1f1b18;}
.benefit-num,.method-step .step-number,.tool-step-label{color:var(--accent);}
.stats-row > div:first-child strong{color:var(--accent);}
.mode-btn.active{background:var(--ink);color:var(--bg);}
.nav-cta,.cookie-accept,.reset-btn:hover,.own-text-panel button{color:var(--bg) !important;}

/* ---------- v3: titular que se escribe solo ---------- */
.hero h1 .tw-ch{opacity:0;}
.hero h1 .tw-ch.on{opacity:1;}
.hero h1 .tw-caret{
  display:inline-block;width:.06em;height:.9em;margin-left:.04em;vertical-align:-.08em;
  background:var(--accent);animation:tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink{50%{opacity:0;}}

/* ---------- v3: teclado que responde ---------- */
.keyboard-row span{transition:transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease;}
.keyboard-row span.kb-next{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.keyboard-row span.kb-hit{transform:translateY(3px);background:var(--ink) !important;color:var(--bg) !important;border-color:var(--ink) !important;}
.keyboard-row span.kb-miss{transform:translateY(3px);background:var(--error) !important;color:var(--bg) !important;border-color:var(--error) !important;}
@media (prefers-reduced-motion:reduce){
  .hero h1 .tw-ch{opacity:1;}
  .hero h1 .tw-caret{animation:none;}
}

/* =========================================================
   v4 · "Pizarra": ni blanco ni negro. Verde pizarra de aula,
   cuadrícula de cuaderno muy suave y garabatos de tiza animados.
   ========================================================= */
:root{
  --bg:#25302c;
  --bg-soft:#2b3732;
  --bg-warm:#2b3732;
  --panel:#2b3732;
  --ink:#f2eee4;
  --ink-soft:rgba(242,238,228,.72);
  --ink-faint:rgba(242,238,228,.48);
  --line:rgba(242,238,228,.16);
  --line-strong:rgba(242,238,228,.34);
  --accent:#F2B661;
  --error:#ff8f78;
  --error-soft:rgba(255,143,120,.18);
  --grid:rgba(242,238,228,.045);
}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
  background-attachment:fixed;
}
header{background:rgba(37,48,44,.9);}
footer,.benefits{background:transparent;}
.cookie-banner{background:#2f3c37;}
.type-box,.keyboard-guide,.test-result{background:rgba(23,30,27,.55);}
.type-box span.current{background:rgba(242,182,97,.22);}

/* ---------- garabatos de tiza ---------- */
.hero{position:relative;}
.chalk{position:absolute;pointer-events:none;color:var(--ink);opacity:.55;overflow:visible;}
.chalk path,.chalk circle,.chalk rect,.chalk line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.chalk .acc{stroke:var(--accent);}
.chalk.draw path,.chalk.draw circle,.chalk.draw rect,.chalk.draw line{stroke-dasharray:400;stroke-dashoffset:400;animation:chalk-draw 1.6s ease-out forwards;}
.chalk.float{animation:chalk-float 6s ease-in-out infinite;}
@keyframes chalk-draw{to{stroke-dashoffset:0;}}
@keyframes chalk-float{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-8px) rotate(-3deg);}}

.chalk-arrow{right:2%;top:46%;width:150px;height:110px;}
.chalk-stars{right:12%;top:12%;width:90px;height:70px;}
.chalk-keys{left:-4%;top:-10%;width:120px;height:80px;}
.chalk-under{position:absolute;left:0;bottom:-.18em;width:100%;height:.3em;}
.hero h1 .hl{position:relative;display:inline-block;}

.section-heading{position:relative;}
.chalk-mini{position:absolute;width:56px;height:56px;right:-70px;top:-24px;}

@media (max-width:900px){
  .chalk-arrow,.chalk-keys,.chalk-mini{display:none;}
  .chalk-stars{right:4%;top:4%;width:60px;}
}
@media (prefers-reduced-motion:reduce){
  .chalk.draw *{animation:none;stroke-dashoffset:0;}
  .chalk.float{animation:none;}
}
.chalk-keys{left:0;top:36px;width:100px;height:66px;}
.chalk-arrow{right:-3%;top:62%;}
.chalk-stars{right:8%;top:10%;}

/* =========================================================
   v5 · Cuaderno: fondo crema con la misma cuadrícula,
   tinta casi negra con un toque verde y acento ámbar.
   ========================================================= */
:root{
  color-scheme:light;
  --bg:#F3EEE3;
  --bg-soft:#ECE6D9;
  --bg-warm:#FBF8F1;
  --panel:#FBF8F1;
  --ink:#1E2622;
  --ink-soft:rgba(30,38,34,.72);
  --ink-faint:rgba(30,38,34,.50);
  --line:rgba(30,38,34,.14);
  --line-strong:rgba(30,38,34,.30);
  --accent:#D98B2B;
  --error:#C7432F;
  --error-soft:rgba(199,67,47,.12);
  --grid:rgba(30,38,34,.06);
}
::selection{background:var(--accent);color:var(--ink);}
header{background:rgba(243,238,227,.9);}
.cookie-banner{background:var(--panel);box-shadow:0 18px 40px rgba(30,38,34,.18);}
.type-box,.keyboard-guide,.test-result{background:var(--panel);}
.type-box span.current{background:rgba(217,139,43,.22);}
.type-box span.correct{color:var(--ink);}
.keyboard-row.highlighted span{color:var(--ink);background:#F4C27E;border-color:var(--accent);}
.keyboard-row span{background:var(--panel);}
.chalk{opacity:.7;}
.hero h1 em{color:rgba(30,38,34,.42);}
.test-result-grid strong,.stats-row > div:first-child strong{color:#B86F17;}
.benefit-num,.method-step .step-number,.tool-step-label{color:#B86F17;}
.ad-slot{background:rgba(251,248,241,.6);}

/* ---------- v6: herramienta sin marco gris y sin hueco publicitario ---------- */
.tool-frame{border:0;}
.tool-row{border-bottom:0;padding:24px 0;}
.tool-row:first-child{padding-top:8px;}
.tool-card{margin-bottom:120px;}
@media (max-width:760px){.tool-row{padding:18px 0;}.tool-card{margin-bottom:72px;}}

/* ---------- v7: botones de modo con el mismo fondo que el desplegable ---------- */
.mode-btn{background:var(--bg);}
.mode-btn:hover{background:var(--bg-soft);}
.mode-btn.active,.mode-btn.active:hover{background:var(--ink);}
.sample-text-panel select,.letter-drill-panel select{
  -webkit-appearance:none;appearance:none;background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231E2622' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;
}

/* ---------- v8: resultados sin líneas separadoras ---------- */
.stats-row > div{border-right:0;padding-right:0;margin-right:56px;}
.stats-row > div:last-child{margin-right:0;}
@media (max-width:760px){.stats-row > div{margin-right:28px;}}

/* ---------- v9: método sin líneas grises ---------- */
.method-steps{border-top:0;gap:48px;}
.method-step,.method-step:first-child{border-left:0;padding:8px 0 0;}
.method-reading{border-top:0;gap:12px 28px;margin-top:88px;}
.method-reading a,.method-reading a:nth-child(odd),.method-reading a:nth-child(even){
  margin:0;border-bottom:0;padding:18px 22px;background:var(--bg);
  transition:background .2s ease,color .2s ease,padding .25s ease;
}
.method-reading a:hover{background:var(--bg-soft);padding-left:28px;}

/* ---------- v9: pie sin líneas, en una banda de color ---------- */
footer{border-top:0;background:var(--bg-soft);padding-top:48px;padding-bottom:48px;}
.footer-links{border-top:0;padding-top:0;margin-top:20px;}
@media (max-width:760px){
  .method-steps{gap:0;}
  .method-step,.method-step:first-child{border-bottom:0;padding:20px 0;}
  .method-reading{margin-top:48px;}
  footer{padding-top:32px;padding-bottom:32px;}
}
.method-reading a,.method-reading a:nth-child(odd),.method-reading a:nth-child(even){background:var(--panel);}
.method-reading a:hover{background:var(--ink);color:var(--bg);}
.method-reading a:hover::after{color:var(--accent);}

/* ---------- página del test: separación entre caja, datos y resultado ---------- */
.tool-card > .controls{margin-top:28px;}
.tool-card > .test-result{margin-top:28px;border-top:1px solid var(--line);}