:root{
    --paper:#f4efe4;
    --paper-2:#ece4d4;
    --paper-3:#e4dac6;
    --ink:#211d18;
    --ink-soft:#4a4436;        /* darker for better contrast (seniors) */
    --ink-faint:#766c5b;
    --clay:#bd552f;
    --clay-deep:#8f3a1c;       /* used for small text on paper */
    --clay-tint:rgba(189,85,47,0.12);
    --green:#3f5236;           /* darker green for "objetivo" labels */
    --line:rgba(33,29,24,0.18);
    --line-soft:rgba(33,29,24,0.06);
    --shadow:0 1px 0 rgba(33,29,24,0.04), 0 18px 40px -28px rgba(33,29,24,0.45);
    --display:"Bricolage Grotesque",system-ui,sans-serif;
    --serif:"Spectral",Georgia,serif;
    --mono:"IBM Plex Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:92px;font-size:112.5%}  /* ~18px root so rem sizes scale up for older eyes; respects user's browser font setting */
  body{
    font-family:var(--serif);
    color:var(--ink);
    background-color:var(--paper);
    background-image:
      linear-gradient(var(--line-soft) 1px,transparent 1px),
      linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
    background-size:32px 32px;
    line-height:1.7;
    font-size:1.15rem;           /* ~20.7px comfortable reading size */
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--clay);color:var(--paper)}

  /* ---- top bar ---- */
  header.bar{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    gap:1rem;
    padding:.85rem clamp(1rem,4vw,3rem);
    background:rgba(244,239,228,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .bar__brand{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600}
  .bar__brand b{color:var(--clay-deep)}
  nav.toc{display:flex;gap:.2rem;flex-wrap:wrap}
  nav.toc a{
    font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-soft);text-decoration:none;padding:.4rem .6rem;border-radius:3px;transition:.18s;
  }
  nav.toc a:hover{color:var(--clay-deep);background:var(--clay-tint)}
  @media(max-width:900px){nav.toc{display:none}}

  /* ---- layout shell ---- */
  main{max-width:1080px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
  section{padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--line-soft)}
  .kicker{font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-deep);font-weight:600;display:inline-flex;align-items:center;gap:.6rem}
  .kicker::before{content:"";width:28px;height:2px;background:var(--clay)}
  h2.sect{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.4vw,3rem);line-height:1.05;letter-spacing:-.02em;margin:1.1rem 0 .5rem}
  .lede{font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--ink-soft);max-width:62ch}

  /* ---- hero ---- */
  .hero{position:relative;padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line)}
  .hero__deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.45}
  .hero__deco svg{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(44vw,540px);height:auto;color:var(--ink)}
  .hero__inner{position:relative;max-width:26ch}
  .hero h1{
    font-family:var(--display);font-weight:800;
    font-size:clamp(3.2rem,10vw,6.6rem);line-height:.94;letter-spacing:-.035em;
    margin:1.3rem 0 .4rem;
  }
  .hero h1 em{font-style:italic;font-family:var(--serif);font-weight:400;color:var(--clay-deep);letter-spacing:-.01em}
  .hero .sub{font-size:clamp(1.2rem,2.2vw,1.5rem);max-width:34ch;color:var(--ink)}
  .hero .tag{margin-top:1.5rem;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink-soft);position:relative;padding-left:1.1rem}
  .hero .tag::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;background:var(--clay)}

  .principle{
    margin-top:clamp(2.5rem,5vw,3.5rem);
    border:1px solid var(--line);border-left:5px solid var(--clay);
    background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));
    padding:clamp(1.5rem,3vw,2.1rem) clamp(1.5rem,3vw,2.3rem);
    max-width:760px;box-shadow:var(--shadow);
  }
  .principle .k{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-deep);font-weight:600}
  .principle p{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.8vw,1.9rem);line-height:1.2;letter-spacing:-.02em;margin-top:.6rem}
  .principle small{display:block;margin-top:.9rem;font-family:var(--serif);font-size:1.1rem;color:var(--ink-soft)}

  /* ---- stats ---- */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
  .stat{background:var(--paper);padding:1.5rem 1.4rem}
  .stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1;letter-spacing:-.03em}
  .stat span{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:.55rem;display:block}

  /* ---- audience cards ---- */
  .two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
  @media(max-width:720px){.two{grid-template-columns:1fr}}
  .card{background:var(--paper-2);border:1px solid var(--line);padding:1.7rem 1.8rem;border-radius:4px}
  .card.is{border-top:4px solid var(--green)}
  .card.isnot{border-top:4px solid var(--clay)}
  .card h3{font-family:var(--display);font-size:1.15rem;font-weight:700;margin-bottom:.8rem}
  .card.is h3{color:var(--green)} .card.isnot h3{color:var(--clay-deep)}
  .card p{color:var(--ink-soft);font-size:1.05rem}
  .card strong{color:var(--ink);font-weight:600}

  /* ---- routes ---- */
  .routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:2rem}
  .route{border:1px solid var(--line);padding:1.3rem 1.4rem;background:var(--paper);border-radius:4px}
  .route .n{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-deep);font-weight:600}
  .route h4{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:.5rem 0 .4rem}
  .route p{font-size:1rem;color:var(--ink-soft)}
  .route code{font-family:var(--mono);font-size:.92rem;color:var(--ink);background:var(--paper-3);padding:.08rem .4rem;border-radius:3px}

  /* ---- module overview table ---- */
  .map{margin-top:2.5rem;border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .map a.row{display:grid;grid-template-columns:54px 1fr auto;gap:1.1rem;align-items:center;padding:1rem 1.2rem;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-soft);transition:.16s;background:var(--paper)}
  .map a.row:last-child{border-bottom:0}
  .map a.row:hover{background:var(--clay-tint)}
  .map .mn{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--clay-deep)}
  .map .mt{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em}
  .map .mt small{display:block;font-family:var(--serif);font-weight:400;font-size:.98rem;color:var(--ink-soft);letter-spacing:0;margin-top:.1rem}
  .map .mh{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap}

  /* ---- curriculum modules ---- */
  .module{border:1px solid var(--line);border-radius:5px;margin-top:1.5rem;background:var(--paper);overflow:hidden;box-shadow:var(--shadow)}
  .module>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto auto;gap:1.2rem;align-items:center;padding:1.4rem clamp(1.1rem,2.5vw,1.9rem);transition:.16s}
  .module>summary::-webkit-details-marker{display:none}
  .module>summary:hover{background:var(--paper-2)}
  .module .bignum{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,3.8rem);line-height:.8;letter-spacing:-.04em;color:var(--ink);opacity:.9}
  .module[open] .bignum{color:var(--clay-deep)}
  .module .head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.8vw,1.75rem);letter-spacing:-.02em;line-height:1.1}
  .module .head .focus{font-size:1.05rem;color:var(--ink-soft);margin-top:.3rem}
  .module .meta{text-align:right;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap}
  .module .meta b{display:block;color:var(--clay-deep);font-size:.9rem;font-weight:600}
  .module .toggle{width:40px;height:40px;border-radius:50%;border:2px solid var(--clay);display:flex;align-items:center;justify-content:center;color:var(--clay-deep);flex:0 0 auto}
  .module .toggle::before{content:"+";font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1}
  .module[open] .toggle{background:var(--clay);border-color:var(--clay);color:var(--paper)}
  .module[open] .toggle::before{content:"–"}
  .module .lessons{padding:0 clamp(1.1rem,2.5vw,1.9rem) .6rem;border-top:1px solid var(--line-soft)}

  .lesson{display:grid;grid-template-columns:58px 1fr;gap:1.1rem;padding:1.6rem 0;border-bottom:1px solid var(--line-soft)}
  .lesson:last-child{border-bottom:0}
  .lesson__no{font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--clay-deep);padding-top:.2rem}
  .lesson h4{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;line-height:1.22;margin-bottom:.7rem}
  .lesson .obj,.lesson .delta{font-size:1.15rem;margin-bottom:.6rem;line-height:1.62}
  .lesson .obj{color:var(--ink-soft)}
  .lesson .delta{background:var(--clay-tint);border-left:3px solid var(--clay);padding:.7rem 1rem;border-radius:0 4px 4px 0;color:var(--ink)}
  .lesson .lab{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:.15rem}
  .lesson .obj .lab{color:var(--green)} .lesson .delta .lab{color:var(--clay-deep)}
  .lesson .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
  .lesson .tags span{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);border:1px solid var(--line);padding:.25rem .6rem;border-radius:3px;background:var(--paper-2)}
  .lesson h4 a.lec-link{color:inherit;text-decoration:none;border-bottom:2px solid var(--clay-tint);transition:.14s}
  .lesson h4 a.lec-link:hover{color:var(--clay-deep);border-bottom-color:var(--clay)}
  .module .head h3 .live-badge{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--green);padding:.12rem .4rem;border-radius:3px;font-weight:600;vertical-align:.2em;margin-left:.5rem}

  .sample{display:flex;align-items:center;gap:1rem;margin-top:1.8rem;text-decoration:none;color:inherit;
    border:1px solid var(--line);border-left:5px solid var(--clay);border-radius:5px;background:var(--paper);
    padding:1.1rem 1.3rem;box-shadow:var(--shadow);transition:.16s}
  .sample:hover{background:var(--clay-tint)}
  .sample .badge{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--clay);padding:.4rem .6rem;border-radius:3px;font-weight:600;white-space:nowrap}
  .sample .txt{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.25}
  .sample .txt small{display:block;font-family:var(--serif);font-weight:400;font-size:.98rem;color:var(--ink-soft);margin-top:.15rem}
  .sample .arrow{margin-left:auto;font-family:var(--display);font-weight:700;color:var(--clay-deep);font-size:1.5rem}
  .ctrlbar{display:flex;align-items:center;gap:1.1rem;margin-top:2rem;flex-wrap:wrap}
  .btn{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);padding:.7rem 1.1rem;border-radius:3px;cursor:pointer;transition:.16s}
  .btn:hover{background:var(--clay);color:var(--paper);border-color:var(--clay)}
  .hint{font-family:var(--serif);font-size:1rem;color:var(--ink-faint)}
  .new-badge{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--green);padding:.12rem .4rem;border-radius:3px;font-weight:600;vertical-align:.18em;margin-left:.5rem}

  /* ---- glossary ---- */
  .gloss-group{margin-top:2rem}
  .gloss-group h3{font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-deep);padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
  .gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:.3rem 2.2rem}
  .gloss div{padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
  .gloss dt{font-family:var(--display);font-weight:600;font-size:1.08rem}
  .gloss dt em{font-style:normal;font-family:var(--mono);font-size:.82rem;color:var(--ink-faint);font-weight:500;margin-left:.4rem}
  .gloss dd{font-size:1rem;color:var(--ink-soft);margin-top:.25rem;line-height:1.5}

  /* ---- resources / tables ---- */
  table.tbl{width:100%;border-collapse:collapse;margin-top:1.8rem;font-size:1rem}
  table.tbl th{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:.7rem .8rem;border-bottom:2px solid var(--ink)}
  table.tbl td{padding:.7rem .8rem;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top}
  table.tbl td:first-child{color:var(--ink);font-weight:600}
  table.tbl tr:hover td{background:var(--paper-2)}
  .mn-cell{font-family:var(--mono);color:var(--clay-deep)!important;white-space:nowrap}
  .warn{color:var(--clay-deep);font-weight:600}

  ul.clean{list-style:none;margin-top:1.4rem;display:grid;gap:.85rem}
  ul.clean li{padding-left:1.5rem;position:relative;color:var(--ink-soft);font-size:1.05rem}
  ul.clean li::before{content:"›";position:absolute;left:0;color:var(--clay);font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.3}
  ul.clean li b{color:var(--ink);font-weight:600}

  .callout{margin-top:2rem;border:2px dashed var(--clay);background:var(--clay-tint);padding:1.3rem 1.5rem;border-radius:4px;font-size:1.05rem;color:var(--ink)}
  .callout b{color:var(--clay-deep)}
  .callout.good{border-style:solid;border-color:var(--green);background:var(--green-tint,rgba(63,82,54,.1))}
  .callout.good b{color:var(--green)}

  /* ---- next steps ---- */
  .next{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:2.2rem}
  .next .q{border:1px solid var(--line);border-top:4px solid var(--ink);padding:1.4rem;background:var(--paper)}
  .next .q .n{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--clay-deep)}
  .next .q h4{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:.5rem 0 .4rem}
  .next .q p{font-size:1.02rem;color:var(--ink-soft)}

  footer{padding:3rem clamp(1rem,4vw,3rem);text-align:center;border-top:1px solid var(--line)}
  footer .b{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
  footer .m{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:.6rem}

  /* ---- load reveal ---- */
  .rev{opacity:0;transform:translateY(14px);animation:rev .7s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes rev{to{opacity:1;transform:none}}
  .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.28s}.d4{animation-delay:.42s}.d5{animation-delay:.56s}
  @media(prefers-reduced-motion:reduce){.rev{animation:none;opacity:1;transform:none}html{scroll-behavior:auto}}