:root{--plum:#5d365d;--mauve:#f3ebf3;--ivory:#faf8f4;--ink:#20222a;--line:#dfd3df}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--ink);font:1rem/1.65 system-ui,sans-serif}
.shell{width:min(100% - 2rem, 62rem);margin:auto}
header,footer{border-bottom:1px solid var(--line);padding:.65rem 0}
footer{border-block:1px solid var(--line) 0;color:var(--plum)}
.top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-weight:700}
.top img{width:auto;max-width:9rem}
a{color:var(--plum);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
.skip{position:absolute;top:-9rem;background:white;padding:.6rem}
.skip:focus{top:.5rem}
main{padding-block:1.25rem 2.25rem}
nav{margin-bottom:.85rem}
h1,h2{font-family:Georgia,serif;color:var(--plum);line-height:1.2}
h1{font-size:clamp(2.25rem,6vw,3.7rem);margin:.25rem 0}
h2{font-size:clamp(1.45rem,4vw,2rem);margin:0 0 .8rem}
h3{margin-top:1.4rem}
h4{margin-bottom:.35rem}
.hero{padding:clamp(1rem,4vw,2rem);background:var(--mauve);border-left:6px solid var(--plum);border-radius:.55rem}
.hero p{margin:0}
.kicker,.cards span{color:var(--plum);font-size:.8rem;font-weight:750;text-transform:uppercase;letter-spacing:.07em}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.tools{margin:1rem 0 1.5rem}
.tools a,.cards li,.index,.lesson{background:white;border:1px solid var(--line);border-radius:.55rem;padding:1rem;overflow-wrap:break-word}
.tools a,.cards li{border-left:4px solid var(--plum)}
.tools a{text-decoration:none}
.tools a:hover,.cards a:hover{text-decoration:underline}
.cards{list-style:none;padding:0}
.cards li>a{display:block;text-decoration:none}
.cards li strong,small{display:block}
small{color:#5b4d5b}
.index,.lesson{margin-top:1rem}
.index ol{list-style:none;padding:0;margin:0}
.index li a{display:block;padding:.25rem}
.index b{display:inline-block;min-width:2rem}
.box,details,fieldset{padding:.75rem 1rem;border:1px solid var(--line);border-radius:.45rem;margin:.8rem 0}
.box{background:var(--mauve);border-left:4px solid var(--plum)}
.box p:last-child,details p:last-child{margin-bottom:0}
summary{font-weight:650;color:var(--plum);min-height:2rem}
figure{margin:1rem 0}
figure img{max-width:100%;height:auto}
math{font-size:1.08em}
math[display=block]{max-width:100%;overflow-x:auto;display:block}
table{border-collapse:collapse;max-width:100%}
td,th{padding:.4rem;border:1px solid var(--line);text-align:left}
fieldset{min-width:0}
fieldset label{display:flex;align-items:baseline;gap:.55rem;padding:.4rem;min-height:44px}
fieldset legend{font-weight:700;color:var(--plum)}
.quiz-tools{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
button{background:var(--plum);color:white;border:0;border-radius:.3rem;padding:.55rem .8rem;font:inherit}
@media(max-width:600px){.grid{grid-template-columns:1fr}.lesson{padding:.75rem}}
.practice{border:1px solid var(--line);border-radius:.55rem;padding:1rem;margin:1rem 0}
.practice h4{color:var(--plum);margin-top:0}
.practice-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.65rem}
.practice-fields label{display:grid;gap:.3rem;align-content:start}
.practice-fields input,.practice-fields select,.practice-fields textarea{width:100%;min-height:44px;font:inherit;padding:.4rem .55rem;border:1px solid #a48ca4;border-radius:.35rem;color:var(--ink);background:white}
.practice-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.practice-actions button{min-height:44px}
.practice-actions button:not(:first-child){background:white;color:var(--plum);border:1px solid #a48ca4}
.practice-form [role=status]:empty{display:none}

/* Tema 2 visual reference */
.formula-intro{font-size:1.08rem;max-width:62ch}
.formula-nav{display:flex;gap:.55rem;flex-wrap:wrap;margin:1rem 0}
.formula-nav a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .8rem;
  border:1px solid var(--line);border-radius:.45rem;background:var(--mauve);font-weight:700}
.formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.8rem}
.formula-card{padding:.9rem 1rem;border:1px solid var(--line);border-top:4px solid var(--plum);
  border-radius:.45rem;background:#fcf8fc;min-width:0}
.formula-card:nth-child(even){border-top-color:#1a7169;background:#f2faf8}
.formula-card h4{margin:.25rem 0 .65rem;font-size:1.14rem;line-height:1.35}
.formula-card p{margin:.55rem 0}
.formula-card img{display:block;max-width:100%;height:100px;object-fit:contain;margin:.7rem auto}
.formula-poster{padding:.7rem;border:1px solid var(--line);border-radius:.45rem;background:white}
.formula-poster img{display:block;width:100%;height:auto}
.formula-poster figcaption{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;padding:.6rem .3rem 0}
.formula-poster figcaption a{display:inline-block;font-weight:700}
.formula-card h3{margin:.25rem 0 .65rem;font-size:1.14rem;line-height:1.35}

.brand-logo{display:block;width:auto;flex:none}
.footer-brand{display:grid;justify-items:start;gap:.45rem}
@media(max-width:600px){.top .brand-logo{height:28px}}