/* Estilos de las páginas de clase. Reutilizan los tokens y componentes de la portada (index.html). */
:root{--ink:#17213d;--paper:#f4f0e8;--white:#fffef9;--lime:#dfff68;--coral:#ff7769;--blue:#b8dcff;--yellow:#ffd969;--line:#cfc9bd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
.header{min-height:80px;padding:8px 6vw;border-bottom:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}.brand{display:flex;align-items:center;gap:10px}.mark{width:38px;height:38px;border-radius:52% 48% 46% 54%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font:bold calc(21px*var(--letra)) Georgia;transform:rotate(-4deg)}.brand-text{display:grid;line-height:1}.brand-text b{font-size:calc(17px*var(--letra))}.brand-text small{color:#e75447;font-size:calc(9px*var(--letra));font-weight:900;letter-spacing:3px;margin-top:5px}.nav{display:flex;flex-wrap:nowrap;gap:28px;font-size:calc(13px*var(--letra));font-weight:700}.nav a{white-space:nowrap}.nav a:hover{text-decoration:underline}.btn-small{background:var(--lime);border:1px solid var(--ink);padding:12px 18px;font-weight:800;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.tag{display:inline-block;border:1px solid var(--ink);padding:8px 10px;margin-bottom:28px;font-size:calc(10px*var(--letra));font-weight:900;letter-spacing:1.7px}.tag-light{border-color:#aeb6c9;color:var(--lime)}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-2px;line-height:1;margin:0}em{font-weight:inherit;color:#eb5f53}
.primary{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:white;padding:15px 20px;font-weight:800;box-shadow:4px 4px 0 var(--coral)}
.lesson-hero{background:var(--ink);color:white;padding:80px 7vw 70px;border-bottom:1px solid var(--ink)}.lesson-hero h1{font-size:clamp(calc(34px*var(--letra)),calc(4vw*var(--letra)),calc(59px*var(--letra)));max-width:900px}.lesson-hero p{max-width:680px;font:calc(18px*var(--letra))/1.65 Georgia;color:#c4cad8;margin:24px 0 0}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.chips span{background:white;color:var(--ink);border:1px solid var(--ink);padding:8px 11px;font-size:calc(10px*var(--letra));font-weight:800}.chips span:first-child{background:var(--lime)}.source{display:block;margin-top:22px;font-size:calc(11px*var(--letra));color:#8d95a7}
.route{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--ink);padding:0 7vw;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}.route a{flex:0 0 auto;padding:16px 12px;font-size:calc(11px*var(--letra));font-weight:800;border-bottom:3px solid transparent;white-space:nowrap}.route a span{color:#e65c50;margin-right:6px;font-family:Georgia}.route a:hover,.route a.on{border-bottom-color:var(--coral)}
.block{padding:90px 7vw;border-bottom:1px solid var(--ink);scroll-margin-top:52px}.block:nth-of-type(even){background:var(--white)}.block-head{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;margin-bottom:40px;max-width:980px}.block-num{font:calc(58px*var(--letra))/1 Georgia;color:#e65c50}.block-head h2{font-size:clamp(38px,4.2vw,60px)}.block-head p{font:calc(17px*var(--letra))/1.65 Georgia;color:#535c72;margin:16px 0 0;max-width:680px}
.prose{max-width:760px}.prose p{font:calc(17px*var(--letra))/1.75 Georgia;color:#3c4560;margin:0 0 18px}.rule{border-left:4px solid var(--coral);background:#f3f0e8;padding:16px 18px;font:calc(15px*var(--letra))/1.6 Georgia;max-width:760px;margin-top:22px}.block:nth-of-type(odd) .rule{background:white}
.eq{display:block;text-align:center;background:#f4f1e9;border:1px solid #d7d2c8;padding:20px;margin:20px 0;font:600 clamp(calc(24px*var(--letra)),3.4vw,36px)/1.4 Georgia}.block:nth-of-type(odd) .eq{background:white}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .15em;line-height:1.1}.fr>span:first-child{border-bottom:2px solid currentColor;padding:0 .2em .08em}.fr>span:last-child{padding:.08em .2em 0}
.order{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:1100px}.order article{background:white;border:1px solid var(--ink);padding:22px;min-height:170px}.order article:nth-child(1){background:var(--lime)}.order article:nth-child(2){background:var(--blue)}.order article:nth-child(3){background:var(--yellow)}.order article:nth-child(4){background:var(--white)}.order article:nth-child(5){background:var(--coral)}.order article:nth-child(6){background:var(--lime)}.order small{font:calc(40px*var(--letra)) Georgia;opacity:.35;display:block}.order h3{font:600 calc(22px*var(--letra))/1.1 Georgia;margin:8px 0}.order p{font:calc(14px*var(--letra))/1.55 Georgia;margin:0}
.examples{display:grid;gap:34px;max-width:980px}.example{background:var(--white);border:1px solid var(--ink);box-shadow:9px 9px 0 var(--blue)}.example:nth-child(2){box-shadow:9px 9px 0 var(--lime)}.example:nth-child(3){box-shadow:9px 9px 0 var(--yellow)}.example:nth-child(4){box-shadow:9px 9px 0 var(--coral)}.example-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid #d6d1c7;font-size:calc(11px*var(--letra));font-weight:900;letter-spacing:1px}.example-body{padding:8px 24px 26px}
.steps{display:grid;gap:10px;margin-top:6px}.math-step{border:1px solid #c8c3b9;padding:16px;display:grid;grid-template-columns:32px 1fr;gap:14px;background:white}.math-step>span{width:31px;height:31px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:800;font-size:calc(12px*var(--letra))}.math-step b{font-size:calc(14px*var(--letra))}.math-step .res{display:inline-block;background:var(--lime);padding:6px 10px;margin:10px 0 4px;font:calc(19px*var(--letra))/1.5 Georgia}.why{margin-top:10px;background:#f3f0e8;border-left:3px solid var(--coral);padding:10px 12px;font:calc(14px*var(--letra))/1.6 Georgia;color:#4f586f}.why b{font:900 calc(10px*var(--letra)) Arial;letter-spacing:1.2px;color:var(--ink);display:block;margin-bottom:3px}
.check{margin-top:14px;border:1px solid var(--ink);background:#e9ffc3;padding:14px 16px;font:calc(15px*var(--letra))/1.7 Georgia}.check b{font:900 calc(10px*var(--letra)) Arial;letter-spacing:1.2px;display:block}.note{font:calc(14px*var(--letra))/1.6 Georgia;color:#596174;margin:14px 0 0}
.step-ctrl{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.ghost{background:white;border:1px solid var(--ink);padding:12px 16px;font-size:calc(12px*var(--letra));font-weight:800;box-shadow:3px 3px 0 var(--ink)}.ghost.dark{background:var(--ink);color:white;box-shadow:3px 3px 0 var(--coral)}
.errors{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1100px}.error-card{background:white;border:1px solid var(--ink);padding:22px}.error-card h3{font:600 calc(21px*var(--letra))/1.2 Georgia;margin:0 0 14px}.bad,.good{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;padding:10px 12px;font:calc(16px*var(--letra))/1.6 Georgia;margin-bottom:6px}.bad{background:#ffe0dc}.good{background:#e9ffc3}.bad i,.good i{font-style:normal;font-weight:900}.bad s{text-decoration-color:rgba(179,38,30,.6)}.error-card p{font:calc(14px*var(--letra))/1.6 Georgia;color:#4f586f;margin:12px 0 0}.error-card .tip{font:calc(12px*var(--letra))/1.5 Arial;color:var(--ink);background:var(--yellow);padding:8px 10px;margin-top:12px}
.verify{display:grid;grid-template-columns:1fr 1fr;gap:6vw;max-width:1100px;align-items:start}.verify ol{margin:0;padding-left:22px;display:grid;gap:10px;font:calc(16px*var(--letra))/1.6 Georgia;color:#3c4560}.tester{background:var(--white);border:1px solid var(--ink);padding:24px;box-shadow:9px 9px 0 var(--coral)}.tester h3{font:600 calc(22px*var(--letra)) Georgia;margin:0 0 6px}.tester p{font:calc(14px*var(--letra))/1.55 Georgia;color:#596174;margin:0}
.answer{display:flex;border:1px solid var(--ink);min-height:55px;margin-top:12px;background:white}.answer span{padding:14px;font:calc(21px*var(--letra)) Georgia}.answer input{flex:1;width:0;min-width:30px;border:0;background:transparent;outline:0;font:calc(22px*var(--letra)) Georgia}.answer button{border:0;background:var(--ink);color:white;padding:0 18px;font-size:calc(11px*var(--letra));font-weight:900}
.message,.hint{padding:14px;margin-top:12px;border:1px solid var(--ink);font:calc(14px*var(--letra))/1.55 Georgia}.message.good{background:#e9ffc3;display:block}.message.badm{background:#ffe0dc}.message.info{background:#f1eee7}.hint{background:var(--yellow);border-left:4px solid var(--ink)}.hint b{font:900 calc(10px*var(--letra)) Arial;letter-spacing:1.2px;display:block}.hint-btn{width:100%;background:none;border:1px dashed #9e9a91;padding:12px;margin-top:12px;font-size:calc(11px*var(--letra));font-weight:800}
.practice{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1100px}.exercise{background:white;border:1px solid var(--ink);padding:24px;display:flex;flex-direction:column}.exercise-top{display:flex;justify-content:space-between;gap:10px;font-size:calc(10px*var(--letra));font-weight:900;letter-spacing:1px}.exercise-top span:last-child{color:#727989}.exercise .eq{font-size:clamp(22px,2.6vw,30px)}.exercise label{font-size:calc(12px*var(--letra));font-weight:800}
details.solution{margin-top:14px;border:1px solid var(--ink)}details.solution summary{cursor:pointer;padding:13px 14px;font-size:calc(12px*var(--letra));font-weight:800;background:#f3f0e8}details.solution[open] summary{border-bottom:1px solid var(--ink)}details.solution .steps{padding:12px}details.solution .math-step{padding:12px}details.solution .check{margin:0 12px 12px}
.next-up{background:var(--coral);text-align:center;padding:80px 7vw;border-bottom:1px solid var(--ink)}.next-up h2{font-size:clamp(40px,5vw,70px);margin:18px 0 20px}.next-up h2 em{color:var(--ink);text-decoration:underline;text-underline-offset:8px}.next-up p{font:calc(17px*var(--letra))/1.6 Georgia;max-width:620px;margin:0 auto 30px}.next-up .primary{background:white;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.loading,.load-error{padding:120px 7vw;font:calc(18px*var(--letra))/1.6 Georgia;text-align:center}.load-error{background:#ffe0dc}
.catalog{padding:80px 7vw;display:grid;gap:26px;max-width:1100px}.course{background:white;border:1px solid var(--ink);padding:26px;box-shadow:8px 8px 0 var(--blue)}.course.soon{opacity:.6;box-shadow:none}.course h2{font-size:clamp(30px,3.4vw,44px)}.course-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.pill{border:1px solid #c0bbb2;border-radius:30px;padding:5px 9px;font-size:calc(10px*var(--letra));font-weight:800;white-space:nowrap}.pill.on{background:var(--lime);border-color:var(--ink)}.lesson-link{display:grid;grid-template-columns:35px 1fr auto;gap:10px;align-items:center;padding:15px 3px;border-top:1px solid var(--line);font-size:calc(13px*var(--letra))}.lesson-link.muted{opacity:.5}.lesson-link b{font-family:Georgia;font-size:calc(16px*var(--letra))}a.lesson-link:hover b{text-decoration:underline}
footer{background:var(--ink);color:white;padding:42px 6vw;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:35px;align-items:center}footer p{font:calc(12px*var(--letra))/1.5 Georgia;color:#bdc4d2}footer nav{display:flex;justify-content:flex-end;gap:18px;font-size:calc(10px*var(--letra));font-weight:800;flex-wrap:wrap}footer small{grid-column:1/-1;border-top:1px solid #414b62;padding-top:18px;color:#8d95a7;font-size:calc(9px*var(--letra))}footer small a{text-decoration:underline}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ffad00;outline-offset:3px}.hidden{display:none!important}.practice>*,.verify>*,.errors>*,.examples>*{min-width:0}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:950px){.nav{display:none}.order{grid-template-columns:1fr 1fr}.errors,.practice,.verify{grid-template-columns:1fr}}
@media(max-width:620px){.header{height:70px;padding:0 18px}.btn-small{padding:10px;font-size:calc(11px*var(--letra))}.lesson-hero{padding:60px 22px 54px}.lesson-hero h1{font-size:calc(32px*var(--letra))}.route{padding:0 12px}.block{padding:64px 22px}.block-head{grid-template-columns:1fr;gap:6px}.block-num{font-size:calc(42px*var(--letra))}.order{grid-template-columns:1fr}.order article{min-height:0}.example-head,.example-body{padding-left:16px;padding-right:16px}.example{box-shadow:6px 6px 0 var(--blue)}.math-step{grid-template-columns:1fr;gap:8px}.exercise,.tester,.error-card{padding:18px}.catalog{padding:60px 22px}.next-up{padding:64px 22px}footer{grid-template-columns:1fr;padding:40px 22px}footer nav{justify-content:flex-start}footer small{grid-column:auto}}
.tag .tema-link{color:inherit;text-decoration:underline;text-underline-offset:3px}.tag .tema-link:focus-visible{outline:3px solid var(--num);outline-offset:3px}
/* Catálogo: cursos en columnas; el curso disponible ocupa todo el ancho y sus temas van en columnas de lectura cómoda.
   Cada tema es un acordeón (assets/catalogo.js). Sin JavaScript, o si el acordeón falla, todo queda abierto. */
.catalog{max-width:1500px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:start}
.course.on{grid-column:1/-1}
.course-asig{font:calc(15px*var(--letra)) Georgia;margin:0;color:#596174}
.temas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:0 34px;align-items:start}
.tema-acc{max-width:760px;border-top:2px solid var(--ink);margin-top:18px}
.tema-cab{margin:0;font-size:inherit}
.tema-btn{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 10px;width:100%;padding:14px 2px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}.tema-nom{overflow-wrap:anywhere}
.tema-btn:disabled{cursor:default;opacity:1}
.tema-btn:hover .tema-nom{text-decoration:underline;text-underline-offset:3px}
.tema-nom{font-size:calc(12px*var(--letra));font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tema-meta{grid-column:2;justify-self:start;text-align:left;font:calc(13px*var(--letra)) Georgia;color:#596174}  /* el contador va DEBAJO del título: el título usa todo el ancho (16/10/2026) */

.tri{flex:none;width:calc(12px*var(--letra));height:calc(12px*var(--letra));margin-top:calc(2px*var(--letra));transition:transform .2s ease}
.tema-btn[aria-expanded="true"] .tri{transform:rotate(90deg)}
.tema-link{display:inline-block;margin:0 0 8px;font-size:calc(12px*var(--letra));font-weight:800;text-decoration:underline;text-underline-offset:3px}
.tema-todos{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.acordeon .tema-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}
.acordeon .tema-acc.plegado .tema-panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .25s ease,visibility 0s linear .25s}
.tema-dentro{min-height:0;overflow:hidden}
@media(prefers-reduced-motion:reduce){.tri,.acordeon .tema-panel,.acordeon .tema-acc.plegado .tema-panel{transition:none!important}}
@media print{.acordeon .tema-acc.plegado .tema-panel{grid-template-rows:1fr;visibility:visible}.tri,.tema-todos{display:none}}
.tema-dentro .lesson-link{grid-template-columns:35px minmax(0,1fr) auto}.tema-dentro .lesson-link b{overflow-wrap:anywhere}
@media(max-width:620px){.tema-dentro .lesson-link{grid-template-columns:30px minmax(0,1fr);row-gap:8px}.tema-dentro .lesson-link .pill{grid-column:2;justify-self:start;white-space:normal}}
/* Ancho completo (14/10/2026): bloques y catálogo a todo el ancho; el texto corrido, con ancho de lectura cómodo. */
.catalog,.block-head,.prose,.rule,.order,.examples,.errors,.verify,.practice,.tema-acc{max-width:none}
.temas{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.prose p,.rule,.course-asig{max-width:78ch}
.temas{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.catalog{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.course-top{flex-wrap:wrap}.course-top h2{min-width:0;overflow-wrap:anywhere}
/* Al entrar en un apartado, el foco va a su título por programa (para el lector de pantalla): sin recuadro visible. */
.block-head h2[tabindex="-1"]:focus{outline:none}