:root{--f-display:'Noto Sans JP',sans-serif;--f-body:'Noto Sans JP',sans-serif}
html[lang="ja"] body, html[lang="ja"] body *:not(svg):not(svg *){font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif !important;letter-spacing:0 !important}
html[lang="ja"] body{line-break:strict;word-break:auto-phrase;overflow-wrap:anywhere;line-height:1.8}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{line-height:1.35;font-weight:900}

/* ===== Demostración de los 10 capítulos ===== */
.demo{margin-top:44px}
.demo-h{font-size:clamp(20px,3.2vw,28px);font-weight:900;color:var(--navy);line-height:1.4}
.demo .lead{margin-top:10px}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.demo-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 16px 16px;box-shadow:0 6px 20px rgba(15,35,64,.07);display:flex;flex-direction:column;gap:12px}
.demo-tag{align-self:flex-start;background:var(--navy);color:#fff;font-weight:700;font-size:13px;padding:4px 12px;border-radius:999px}
.demo-card dl{margin:0;display:grid;gap:8px}
.demo-card dt{font-size:12px;font-weight:700;color:#b27800;letter-spacing:0}
.demo-card dd{margin:0;font-size:14px;line-height:1.7;color:#1d2b44}
.demo-use{margin:0;font-size:14px;font-weight:700;line-height:1.7;color:var(--navy);border-top:1px dashed var(--line);padding-top:10px}
.demo-note{margin:16px 0 0;text-align:center;font-size:12px;color:#5b6b85}
.scr{border:6px solid #16213a;border-radius:22px;background:#fbf8f1;overflow:hidden;max-width:260px;width:100%;margin:2px auto;box-shadow:0 8px 18px rgba(15,35,64,.18)}
.scr-bar{background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:9px 12px;display:flex;align-items:center;gap:10px}
.scr-bar i{width:14px;height:2px;background:#fff;box-shadow:0 5px 0 #fff,0 -5px 0 #fff;display:inline-block}
.scr-body{padding:12px;display:grid;gap:6px;font-size:12px;color:#1d2b44}
.scr-lab{justify-self:start;background:#2e9d57;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.scr-lab.or{background:#c8640a}
.scr-t{font-size:13px;line-height:1.5}
.scr-field{border:1px solid #cfd7e6;background:#fff;border-radius:8px;padding:6px 10px;font-weight:700}
.scr-row{display:flex;justify-content:space-between;font-size:11px;margin-top:4px}
.scr-row em{font-style:normal;font-weight:700}
.scr-meter{height:7px;background:#e6eaf2;border-radius:6px;overflow:hidden}
.scr-meter i{display:block;height:100%}
.scr-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:4px}
.scr-grid u{text-decoration:none;text-align:center;font-size:10px;font-weight:700;padding:5px 0;border-radius:6px;background:#eceff5;color:#5b6b85}
.scr-grid u.on{background:#c8640a;color:#fff}
.scr-body.paper{line-height:1.9;background:repeating-linear-gradient(#fbf8f1 0 26px,#e3d9c6 26px 27px)}
.scr-body.paper p{margin:0}
.fill{background:#f9d4d0;border:1px solid #e9a8a1;border-radius:4px;padding:0 5px;font-weight:700;font-size:11px}
@media(max-width:860px){.demo-grid{grid-template-columns:1fr}.demo-card{padding:16px 14px}}

.bimg .btag{display:none}

/* ===== Bonos: legibilidad (tamaño, contraste, espaciado, móvil) ===== */
.bbody{padding:20px 20px 18px;gap:10px}
.bbody h4{font-size:1.14rem;line-height:1.5}
.bbody p{color:#2c3a52;font-size:.97rem;line-height:1.9}
.bval{padding-top:14px}
.bval s{color:#4a5873}
@media(max-width:759px){.bonus-grid{gap:22px}.bcard{max-width:420px;width:100%;margin-inline:auto}.bbody p{font-size:1rem}}