:root{
  color-scheme:light;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-reading:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --canvas:#f7f8fb;
  --canvas-warm:#fbfaf7;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --surface-raised:#ffffff;
  --ink:#111827;
  --ink-soft:#1f2937;
  --text:#2f3a4a;
  --text-soft:#475569;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;

  --brand:#1d4ed8;
  --brand-dark:#153eac;
  --brand-soft:#eff6ff;
  --brand-border:#bfdbfe;
  --accent:#047857;
  --accent-soft:#ecfdf5;
  --accent-border:#a7f3d0;
  --warning:#92400e;
  --warning-soft:#fffbeb;
  --warning-border:#f5d08a;
  --danger:#b42318;
  --danger-soft:#fff1f2;
  --danger-border:#fecdd3;

  --shadow-1:0 1px 2px rgba(15,23,42,.05);
  --shadow-2:0 10px 30px rgba(15,23,42,.06);
  --shadow-3:0 22px 65px rgba(15,23,42,.10);

  --radius-xs:10px;
  --radius-sm:14px;
  --radius-md:20px;
  --radius-lg:28px;
  --radius-pill:999px;

  --max:1120px;
  --reader:740px;
  --reader-wide:880px;
  --header-h:72px;

  --step--1:clamp(.89rem,.86rem + .12vw,.96rem);
  --step-0:clamp(1rem,.97rem + .18vw,1.08rem);
  --step-1:clamp(1.12rem,1.05rem + .34vw,1.28rem);
  --step-2:clamp(1.38rem,1.22rem + .78vw,1.78rem);
  --step-3:clamp(1.75rem,1.48rem + 1.32vw,2.44rem);
  --step-4:clamp(2.18rem,1.78rem + 1.96vw,3.28rem);
  --step-5:clamp(2.72rem,2.08rem + 3.16vw,4.45rem);

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-14:3.5rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-width:320px;
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:1.72;
  color:var(--text);
  background:
    radial-gradient(circle at 12% -8%,rgba(29,78,216,.08),transparent 28rem),
    linear-gradient(180deg,#ffffff 0,#f8fafc 42rem,#f6f7f9 100%);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;text-underline-offset:.22em}
a:hover{color:var(--brand)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(29,78,216,.25);
  outline-offset:3px;
  border-radius:12px;
}
button,select,input,textarea{font:inherit}
img,svg{display:block;max-width:100%}
p{margin:0 0 1.08rem;color:var(--text);line-height:1.74}
ul,ol{margin:0 0 1.1rem;padding-left:1.25rem}
li+li{margin-top:.45rem}
strong{color:var(--ink);font-weight:750}
h1,h2,h3{
  margin:0;
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.08;
}
h1{font-size:var(--step-5);max-width:900px}
h2{font-size:var(--step-3);letter-spacing:-.032em}
h3{font-size:var(--step-1);letter-spacing:-.022em;line-height:1.22}

.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.section{padding:clamp(4.75rem,7vw,7.4rem) 0}
.section+.section{border-top:1px solid rgba(226,232,240,.78)}
.section>.wrap>h2,
.story-content>section>h2{max-width:820px;margin-bottom:clamp(1.5rem,2.8vw,2.35rem)}
.section>.wrap>.lead{margin-top:-.55rem;margin-bottom:2.2rem}
.lead{
  max-width:760px;
  color:var(--text-soft);
  font-size:var(--step-1);
  line-height:1.72;
  letter-spacing:-.01em;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1rem;
  color:var(--brand);
  font-size:.74rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:999px;background:currentColor;opacity:.72}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:0 max(24px,calc((100vw - var(--max))/2));
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(226,232,240,.88);
  backdrop-filter:blur(18px) saturate(160%);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.82rem;
  min-width:0;
  color:var(--ink);
  font-weight:850;
  letter-spacing:-.02em;
}
.brand:hover{color:var(--ink)}
.brand-mark{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:0;
  border-radius:16px;
  padding:0;
  background:transparent;
  box-shadow:0 12px 28px rgba(29,78,216,.16);
  overflow:hidden;
}
.brand-mark svg{width:42px;height:42px}
.brand-text{display:flex;flex-direction:column;gap:.06rem;min-width:0;line-height:1.06}
.brand-title{display:block;color:var(--ink);font-size:1rem;font-weight:850;letter-spacing:-.026em;white-space:nowrap}
.brand-subtitle{display:block;color:var(--muted);font-size:.71rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.brand:hover .brand-title{color:var(--ink)}
.brand:hover .brand-subtitle{color:var(--text-soft)}

.main-nav{display:flex;align-items:center;gap:.18rem}
.main-nav a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:.52rem .78rem;
  border-radius:var(--radius-pill);
  color:#334155;
  font-size:.91rem;
  font-weight:700;
  letter-spacing:-.012em;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.main-nav a:hover{background:var(--brand-soft);color:var(--brand-dark)}
.menu-toggle{
  display:none;
  min-height:42px;
  padding:.58rem .92rem;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--ink);
  font-size:.92rem;
  font-weight:750;
  cursor:pointer;
  box-shadow:var(--shadow-1);
}

.hero{position:relative;padding:clamp(5.4rem,8vw,8rem) 0 clamp(4.8rem,7vw,7.2rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,390px);gap:clamp(3rem,6.8vw,6.6rem);align-items:center}
.hero h1{margin-bottom:1.15rem}
.hero .lead{margin-top:0;margin-bottom:0}
.hero .btns{margin-top:2rem}
.hero-card{
  justify-self:end;
  width:100%;
  padding:2rem;
  border:1px solid rgba(203,213,225,.9);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#ffffff,#f9fafb);
  box-shadow:var(--shadow-3);
}
.hero-card::before{
  content:"Ruta recomendada";
  display:block;
  margin:0 0 .85rem;
  color:var(--brand);
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-card h2{font-size:1.28rem;letter-spacing:-.026em;line-height:1.18;margin-bottom:1rem}
.hero-card ol{margin:.8rem 0 0;padding-left:1.25rem;color:var(--text-soft)}
.hero-card li{font-size:.98rem;line-height:1.66}
.hero-card li::marker{font-weight:850;color:var(--brand)}

main.wrap>.hero{padding:clamp(4.4rem,6.8vw,7rem) 0 clamp(3.3rem,5vw,5rem);border-bottom:1px solid rgba(226,232,240,.78)}
main.wrap>.hero h1{font-size:clamp(2.45rem,4.7vw,4.2rem);max-width:880px;margin-bottom:1.05rem}
main.wrap>.hero .lead{max-width:760px;margin-top:0;margin-bottom:0}
main.wrap.simple{max-width:1120px}
main.wrap.simple>.hero .grid.two{margin-top:2.5rem}

.btns{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.78rem 1.14rem;
  border:1px solid var(--brand);
  border-radius:var(--radius-pill);
  background:var(--brand);
  color:#fff!important;
  font-size:.95rem;
  font-weight:750;
  letter-spacing:-.012em;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(29,78,216,.18);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff!important;transform:translateY(-1px);box-shadow:0 14px 32px rgba(29,78,216,.23)}
.btn.secondary{background:#fff;color:var(--ink)!important;border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.btn.secondary:hover{background:var(--surface-soft);border-color:var(--brand-border);color:var(--brand-dark)!important;box-shadow:var(--shadow-2)}
.btn.teal{background:var(--accent);border-color:var(--accent);box-shadow:0 10px 26px rgba(4,120,87,.16)}
.btn.teal:hover{background:#065f46;border-color:#065f46;box-shadow:0 14px 32px rgba(4,120,87,.21)}

.grid{display:grid;gap:1.25rem}
.grid.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.card,.story-card,.day{
  position:relative;
  display:block;
  border:1px solid rgba(203,213,225,.86);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow-1);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.card{padding:1.6rem 1.65rem}
.card:hover,.story-card:hover,.day:hover{transform:translateY(-2px);border-color:#b7c4d4;box-shadow:var(--shadow-2);color:inherit;background:#fff}
a.card{color:inherit}
.card h2{font-size:clamp(1.65rem,2.4vw,2.25rem);line-height:1.1;margin-bottom:.82rem;letter-spacing:-.035em}
.card h3,.card strong{display:block;margin-bottom:.55rem;color:var(--ink)}
.card p:last-child,.story-card p:last-child{margin-bottom:0}

.story-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.story-card{display:flex;flex-direction:column;min-height:192px;padding:1.5rem 1.55rem;overflow:hidden}
.story-card::before{content:"";position:absolute;left:1.55rem;top:1.08rem;width:32px;height:2px;border-radius:999px;background:var(--brand);opacity:.75}
.story-card::after{content:attr(data-level);position:absolute;top:.95rem;right:1.22rem;color:var(--muted);font-size:.66rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.story-card .eyebrow{margin-top:.05rem;margin-bottom:.7rem;padding-left:46px;font-size:.67rem}
.story-card .eyebrow::before{display:none}
.story-card h3{padding-right:3.2rem;margin-bottom:.62rem;font-size:1.18rem;line-height:1.22}
.story-card h3 a{color:var(--ink)}
.story-card h3 a:hover{color:var(--brand)}
.story-card p{font-size:.96rem;line-height:1.62;color:var(--text-soft)}
.completed-badge{display:none;width:max-content;margin-bottom:.72rem;padding:.28rem .66rem;border:1px solid var(--accent-border);border-radius:var(--radius-pill);background:var(--accent-soft);color:#05604f;font-size:.66rem;font-weight:820;letter-spacing:.08em;text-transform:uppercase}
.is-completed .completed-badge{display:inline-flex}

.breadcrumbs{margin:1.35rem 0 .2rem;color:var(--muted);font-size:.88rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.16rem;list-style:none;margin:0;padding:0}
.breadcrumbs li{display:inline-flex;align-items:center;min-width:0;margin:0}
.breadcrumbs li::after{content:"/";margin:0 .6rem;color:var(--muted-2)}
.breadcrumbs li:last-child::after{content:""}
.breadcrumbs a{font-weight:700;color:var(--text-soft)}
.breadcrumbs a:hover{color:var(--brand)}
.meta{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.18rem 0 2rem}
.meta span{display:inline-flex;align-items:center;min-height:34px;padding:.36rem .76rem;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;color:var(--text-soft);font-size:.82rem;font-weight:720}
.notice{padding:1rem 1.1rem!important;margin:1.45rem 0 0!important;border:1px solid var(--accent-border);border-radius:16px;background:var(--accent-soft);color:#05604f;font-weight:740}
.notice .progress-bar{margin-top:.75rem}

.story-shell{width:100%;margin:.35rem auto 5.6rem;padding:0;background:transparent;border:0}
.story-content{max-width:var(--reader);margin-inline:auto;padding:clamp(2.6rem,5vw,4.6rem) 0 0;position:relative}
.story-content>h1{font-size:clamp(2.35rem,4.5vw,4rem);margin-bottom:1rem;max-width:760px}
.story-content>.lead{color:var(--text-soft);font-size:clamp(1.04rem,1.1vw,1.12rem);line-height:1.76;margin-top:0;max-width:735px}
.story-content .eyebrow{margin-bottom:1rem}
.story-content>h2{font-size:clamp(1.42rem,2vw,1.78rem);font-weight:800;letter-spacing:-.03em;line-height:1.16;margin-top:clamp(3.6rem,5.5vw,4.9rem);margin-bottom:1.2rem;padding-top:0;border-top:0}
.story-content>h2::after{content:"";display:block;width:40px;height:2px;margin-top:.74rem;border-radius:999px;background:var(--brand);opacity:.28}

.story-text{
  margin:1.4rem 0 0;
  padding:clamp(1.55rem,3.2vw,2.35rem);
  border:1px solid rgba(203,213,225,.8);
  border-radius:24px;
  background:#fffdf8;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 48px rgba(15,23,42,.055);
  font-family:var(--font-reading);
  font-size:clamp(1.12rem,1.16vw,1.2rem);
  line-height:1.88;
  color:#1f2937;
}
.story-text p{margin:0 0 1.35rem;color:#1f2937;line-height:1.88}
.story-text p:last-child{margin-bottom:0}
.reading-actions{display:flex;justify-content:flex-start;margin:1.2rem 0 .75rem}
.support{margin:1rem 0 3.1rem;padding:1.35rem 1.45rem;border:1px solid #dbe7f4;border-left:5px solid var(--brand);border-radius:20px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);box-shadow:var(--shadow-2)}
.support[hidden]{display:none}
.support h2{margin:0 0 .9rem;padding:0;border:0;color:var(--ink);font-size:1.16rem;line-height:1.25;letter-spacing:-.03em}
.support h2::after{display:none}
.support p{margin:0;color:#334155;font-size:1rem;line-height:1.78}
.support p+p{margin-top:.78rem}
.support strong{color:var(--ink);font-weight:820}

.word-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:1.05rem}
.word-list div{padding:1rem 1.05rem;border:1px solid rgba(203,213,225,.82);border-radius:15px;background:rgba(255,255,255,.96);box-shadow:var(--shadow-1)}
.word-list strong{font-size:.96rem;font-weight:780}
.word-list span{display:block;margin-top:.22rem;color:var(--muted);font-size:.91rem;line-height:1.48}

.quiz-box{margin-top:1.55rem;padding:clamp(1.3rem,2.7vw,1.95rem);border:1px solid rgba(203,213,225,.86);border-radius:24px;background:#fff;box-shadow:var(--shadow-2)}
.quiz-box h2{font-size:clamp(1.45rem,2.05vw,1.84rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1.2rem}
.question{padding:1.35rem 0;border-top:1px solid var(--line)}
.question:first-of-type{border-top:0;padding-top:.1rem}
.question h3{margin-bottom:.85rem;font-size:1rem;font-weight:760;letter-spacing:-.014em;line-height:1.42}
.options{display:grid;gap:.6rem}
.option{display:flex;align-items:flex-start;gap:.8rem;min-height:48px;padding:.84rem .95rem;border:1px solid var(--line);border-radius:14px;background:#fff;color:#334155;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.option:hover{border-color:var(--brand-border);background:var(--brand-soft);box-shadow:var(--shadow-1)}
.option input{margin-top:.24rem;width:1.05rem;height:1.05rem;accent-color:var(--brand)}
.option.correct{border-color:var(--accent-border);background:var(--accent-soft);color:#05604f}
.option.wrong{border-color:var(--danger-border);background:var(--danger-soft);color:#9f1d17}
.quiz-result{min-height:1.6rem;margin-top:1.15rem;color:var(--ink);font-weight:800;font-size:1.04rem}

.filters{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.75rem 0 2.4rem}
.filters select{appearance:none;min-width:230px;min-height:50px;padding:.78rem 2.3rem .78rem 1rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:#fff;color:#334155;font-weight:720;box-shadow:var(--shadow-1)}
.progress-bar{height:10px;overflow:hidden;border-radius:var(--radius-pill);background:#dfe7f1}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#047857,#10b981);transition:width .3s ease}
.route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.05rem;margin:clamp(2.4rem,3.8vw,3.25rem) 0 1.2rem}
.day{min-height:152px;padding:1.25rem 1.3rem;background:#fff}
.day::before{content:"Día";display:block;margin-bottom:.45rem;color:var(--muted);font-size:.67rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.day .tag{display:block;color:var(--text-soft);font-size:.9rem;font-weight:700;line-height:1.2}
.day h3{font-size:1.14rem;font-weight:800;letter-spacing:-.03em;line-height:1.18;margin:.32rem 0}
.day h3 a{color:var(--ink)}
.day h3 a:hover{color:var(--brand)}
.day p{font-size:.92rem;line-height:1.42;margin:0;color:var(--text-soft)}
.day.done{border-color:var(--accent-border);background:var(--accent-soft)}
.day.done::after{content:"Completado";position:absolute;right:1rem;top:1rem;color:#05604f;font-size:.64rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.toc,details{padding:1.05rem 1.15rem;margin:1rem 0;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-1)}
summary{cursor:pointer;color:var(--ink);font-weight:760;letter-spacing:-.012em}
summary::marker{color:var(--brand)}
details p{margin:.9rem 0 0}
.legal main,.simple main{width:min(880px,calc(100% - 48px));margin:auto;padding:4rem 0 5.2rem}
.simple main h1,.legal main h1{font-size:clamp(2.45rem,4.5vw,4rem)}
.simple main h2,.legal main h2{margin-top:2.2rem;margin-bottom:.85rem;font-size:clamp(1.38rem,2.1vw,1.82rem)}
.simple main p,.legal main p{font-size:1rem;line-height:1.78;color:var(--text-soft)}

.site-footer{margin-top:clamp(3.8rem,5.8vw,5.8rem);padding:clamp(3.7rem,5.2vw,5.2rem) max(24px,calc((100vw - var(--max))/2));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:2.1rem;align-items:start;background:#0f172a;color:#e5edf7}
.site-footer strong{color:#fff;font-weight:800}
.site-footer p{max-width:460px;color:#cbd5e1;font-size:.96rem;line-height:1.65;margin-top:.25rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.7rem 1.08rem;justify-content:flex-end}
.site-footer a{display:inline-flex;padding:.25rem 0;color:#e5edf7;font-size:.86rem;font-weight:720;border-bottom:1px solid transparent}
.site-footer a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.72)}

.page-home .section:nth-of-type(2) .grid.cards{gap:1rem}
.page-home .section:nth-of-type(2) .card{padding:1.55rem 1.55rem 1.65rem;background:#fff}
.page-home .section:nth-of-type(2) .card h3{font-size:1.18rem;margin-bottom:.48rem}
.page-home .section:nth-of-type(2) .card p{font-size:.96rem;color:var(--text-soft);line-height:1.6}
.page-home .section:nth-of-type(3){background:linear-gradient(180deg,rgba(239,246,255,.42),rgba(248,250,252,0))}
.page-home .section:nth-of-type(4) .grid.two{gap:1.35rem}
.page-home .section:nth-of-type(4) .card{padding:1.9rem;min-height:210px;display:flex;flex-direction:column;justify-content:center}
.page-home .section:nth-of-type(4) .card h2{font-size:clamp(1.8rem,2.6vw,2.55rem)}
.page-home .section:nth-of-type(5) details{margin-bottom:.8rem}
.page-home .section:nth-of-type(5) summary{min-height:48px;display:flex;align-items:center}
.page-library .story-list,.page-level .story-list,.page-topic .story-list{margin-bottom:2rem}
.page-route main.wrap>.hero,.page-simple main.wrap.simple>.hero,.page-level main.wrap>.hero,.page-topic main.wrap>.hero,.page-library main.wrap>.hero{margin-top:1rem;border-bottom:0}
.page-route main.wrap>.hero::after,.page-simple main.wrap.simple>.hero::after,.page-level main.wrap>.hero::after,.page-topic main.wrap>.hero::after,.page-library main.wrap>.hero::after{content:"";display:block;width:100%;height:1px;margin-top:2.4rem;background:linear-gradient(90deg,rgba(29,78,216,.22),rgba(226,232,240,.82),rgba(226,232,240,0))}
.page-simple .grid.two .card h2{font-size:clamp(1.5rem,2.1vw,2rem)}
.page-legal main{max-width:820px;background:rgba(255,255,255,.72);border:1px solid rgba(226,232,240,.82);border-radius:24px;padding:clamp(1.9rem,3.8vw,3rem);margin-top:2rem;margin-bottom:2rem}
.page-legal main h1{margin-bottom:1.35rem}
.page-legal main h2{padding-top:.7rem}

@media (min-width:1120px){
  .grid.cards .card{min-height:150px}
  .grid.two .card{min-height:178px}
}
@media (max-width:980px){
  :root{--header-h:68px}
  .site-header{min-height:var(--header-h);padding-inline:20px}
  .brand-title{max-width:58vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main-nav{display:none;position:fixed;top:calc(var(--header-h) + 10px);left:12px;right:12px;padding:.65rem;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-3);flex-direction:column;align-items:stretch;gap:.12rem}
  .main-nav.open{display:flex}
  .main-nav a{justify-content:space-between;min-height:52px;padding:.82rem .95rem;border-radius:15px;font-size:1rem}
  .main-nav a::after{content:"→";color:var(--muted-2)}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero-card{justify-self:start;max-width:600px}
  .grid.cards,.grid.two,.story-list,.route{grid-template-columns:1fr 1fr}
  .site-footer{grid-template-columns:1fr}
  .site-footer nav{justify-content:flex-start}
}
@media (max-width:680px){
  :root{--header-h:64px;--reader:100%}
  body{font-size:17px;line-height:1.72;background:linear-gradient(180deg,#fff 0,#f8fafc 32rem,#f7f8fb 100%)}
  .wrap{width:calc(100% - 32px)}
  p{line-height:1.74}
  .site-header{min-height:var(--header-h);padding-inline:16px}
  .brand{gap:.68rem}
  .brand-mark,.brand-mark svg{width:38px;height:38px;border-radius:14px}
  .brand-title{font-size:.95rem;max-width:52vw;overflow:hidden;text-overflow:ellipsis}
  .brand-subtitle{display:none}
  .main-nav{top:calc(var(--header-h) + 8px);left:8px;right:8px}
  .hero{padding:3.6rem 0 4.2rem}
  .hero h1{font-size:clamp(2.22rem,9.6vw,3.2rem);letter-spacing:-.045em}
  .hero .btns{margin-top:1.55rem}
  .lead{font-size:1.04rem;line-height:1.7}
  .section{padding:4.1rem 0}
  .section>.wrap>h2{margin-bottom:1.35rem}
  .hero-card{padding:1.25rem;border-radius:20px}
  .grid.cards,.grid.two,.story-list,.route{grid-template-columns:1fr;gap:1rem}
  .card,.story-card,.day{border-radius:18px}
  .card,.story-card{padding:1.18rem}
  .card h2{font-size:1.55rem}
  .story-card{min-height:auto}
  .story-card::before{left:1.18rem;top:1rem;width:28px}
  .story-card::after{right:1rem;top:.86rem}
  .story-card .eyebrow{padding-left:40px}
  .btns{display:grid;grid-template-columns:1fr;width:100%}
  .btn{width:100%;min-height:52px}
  .filters{display:grid;grid-template-columns:1fr;margin:1.3rem 0 1.6rem}
  .filters select{width:100%;min-width:0}
  main.wrap>.hero{padding:2.8rem 0 3.25rem}
  main.wrap>.hero h1{font-size:clamp(2.18rem,9.4vw,3.18rem)}
  .breadcrumbs{font-size:.82rem;margin:1rem 0 .1rem}
  .story-content{padding:1.75rem 0 0}
  .story-content>h1{font-size:clamp(2.05rem,9vw,3rem)}
  .story-content>.lead{font-size:1rem;line-height:1.72}
  .story-content>h2{margin-top:3.25rem;margin-bottom:1rem}
  .meta{gap:.45rem;margin:1rem 0 1.45rem}
  .meta span{font-size:.78rem;min-height:32px;padding:.28rem .62rem}
  .story-text{margin-top:1.25rem;padding:1.18rem;border-radius:18px;font-size:1.1rem;line-height:1.86;box-shadow:var(--shadow-1)}
  .story-text p{line-height:1.86;margin-bottom:1.18rem}
  .word-list{grid-template-columns:1fr;gap:.72rem}
  .quiz-box{padding:1.1rem;border-radius:18px;box-shadow:var(--shadow-1)}
  .question{padding:1.12rem 0}
  .option{padding:.86rem .78rem}
  .reading-actions .btn{width:100%}
  .support{padding:1.12rem 1.05rem;border-radius:17px;margin-bottom:2.65rem;box-shadow:var(--shadow-1)}
  .support p{font-size:.98rem;line-height:1.74}
  .route{margin-top:1.55rem}
  .day{min-height:118px;padding:1.12rem}
  .legal main,.simple main{width:calc(100% - 32px);padding:2.8rem 0 3.7rem}
  .page-home .section:nth-of-type(4) .card{min-height:auto;padding:1.32rem}
  .page-route main.wrap>.hero,.page-simple main.wrap.simple>.hero,.page-level main.wrap>.hero,.page-topic main.wrap>.hero,.page-library main.wrap>.hero{margin-top:.55rem}
  .page-route main.wrap>.hero::after,.page-simple main.wrap.simple>.hero::after,.page-level main.wrap>.hero::after,.page-topic main.wrap>.hero::after,.page-library main.wrap>.hero::after{margin-top:1.9rem}
  .page-legal main{border-radius:20px;padding:1.28rem;margin-top:1.15rem}
  .site-footer{padding:2.8rem 16px;margin-top:3.6rem}
  .site-footer nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.6rem 1rem}
  .site-footer a{justify-content:flex-start;text-align:left}
}
@media (max-width:420px){
  .brand-title{max-width:48vw}
  .site-footer nav{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Refinamiento de ritmo vertical: lectura móvil y desktop
   Ajustes aplicados para separar mejor títulos, secciones y bloques sin tocar la lógica. */
:root{
  --rhythm-title-content:clamp(1.9rem,3.2vw,2.9rem);
  --rhythm-section:clamp(5.4rem,7.2vw,8rem);
  --rhythm-section-mobile:4.6rem;
  --rhythm-card-gap:1.25rem;
}

.section{
  padding-block:var(--rhythm-section);
}

.section > h2,
.section > .wrap > h2,
.story-content > section > h2{
  margin-bottom:var(--rhythm-title-content);
}

.section > h2 + .grid,
.section > h2 + .story-list,
.section > h2 + .route,
.section > h2 + details,
.section > .wrap > h2 + .grid,
.section > .wrap > h2 + .story-list,
.section > .wrap > h2 + .route,
.section > .wrap > h2 + details{
  margin-top:0;
}

.section > .lead,
.section > .wrap > .lead{
  margin-bottom:clamp(2rem,3vw,2.8rem);
}

main.wrap > .hero{
  padding-bottom:clamp(4.2rem,6.5vw,6.2rem);
}

main.wrap > .hero + .section{
  padding-top:clamp(5.5rem,7.4vw,8.2rem);
}

.notice{
  margin-top:clamp(1.6rem,2.7vw,2.35rem)!important;
}

.grid,
.grid.two,
.grid.cards,
.story-list,
.route{
  gap:clamp(1.25rem,2vw,1.7rem);
}

.card,
.story-card,
.day{
  padding:clamp(1.45rem,2.1vw,1.95rem);
}

.card h2,
.card h3,
.story-card h3,
.day h3{
  margin-bottom:.85rem;
}

.card h2 + p,
.card h3 + p,
.story-card h3 + p,
.day h3 + p{
  margin-top:.1rem;
}

.card p + .btn,
.card p + .btns,
.card p + a.btn{
  margin-top:clamp(1.2rem,2vw,1.7rem);
}

.story-card p + p{
  margin-top:.85rem;
}

.story-card .eyebrow{
  margin-bottom:.82rem;
}

.page-level .section > h2,
.page-topic .section > h2,
.page-library .section > h2,
.page-route .section > h2,
.page-simple .section > h2{
  margin-bottom:clamp(2.05rem,3.4vw,3.1rem);
}

.page-level main.wrap > .section,
.page-topic main.wrap > .section,
.page-library main.wrap > .section,
.page-route main.wrap > .section,
.page-simple main.wrap > .section{
  padding-block:clamp(5.2rem,7vw,7.8rem);
}

.story-content > h2{
  margin-top:clamp(4.4rem,6.5vw,5.8rem);
  margin-bottom:clamp(1.35rem,2.4vw,2rem);
}

.story-text,
.word-list,
.quiz-box{
  margin-top:clamp(1.35rem,2.4vw,2.05rem);
}

.word-list + h2,
.quiz-box + h2,
.support + h2{
  margin-top:clamp(4.8rem,7vw,6rem);
}

@media (max-width:680px){
  :root{
    --rhythm-title-content:1.65rem;
    --rhythm-section:var(--rhythm-section-mobile);
  }

  .section{
    padding-block:var(--rhythm-section-mobile);
  }

  .section > h2,
  .section > .wrap > h2,
  .story-content > section > h2{
    margin-bottom:1.55rem;
  }

  main.wrap > .hero{
    padding-bottom:3.5rem;
  }

  main.wrap > .hero + .section{
    padding-top:4.2rem;
  }

  .page-level main.wrap > .section,
  .page-topic main.wrap > .section,
  .page-library main.wrap > .section,
  .page-route main.wrap > .section,
  .page-simple main.wrap > .section{
    padding-block:4.35rem;
  }

  .page-level .section > h2,
  .page-topic .section > h2,
  .page-library .section > h2,
  .page-route .section > h2,
  .page-simple .section > h2{
    margin-bottom:1.7rem;
  }

  .grid,
  .grid.two,
  .grid.cards,
  .story-list,
  .route{
    gap:1rem;
  }

  .card,
  .story-card,
  .day{
    padding:1.25rem;
  }

  .card h2,
  .card h3,
  .story-card h3,
  .day h3{
    margin-bottom:.7rem;
  }

  .story-card p + p{
    margin-top:.72rem;
  }

  .story-content > h2{
    margin-top:3.85rem;
    margin-bottom:1.2rem;
  }

  .story-text,
  .word-list,
  .quiz-box{
    margin-top:1.2rem;
  }

  .word-list + h2,
  .quiz-box + h2,
  .support + h2{
    margin-top:3.9rem;
  }
}