/* The static pages beside the player: the Spanish landing page and its
   articles (es/) and the teachers' page (professors/). They share the design
   TOKENS (theme.css) and none of the player's components - like
   privacitat.html, and for the same reason: a page a search engine lands on
   must not be coupled to every UI refactor. sw.js does not precache any of
   them; they are for people who have not installed anything yet. */
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.05rem/1.65 Nunito,system-ui,sans-serif}
.page{max-width:42rem;margin:0 auto;padding-block:var(--sp-5) var(--sp-6);padding-inline:16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:var(--sp-5)}
.brand{font-family:var(--display);font-weight:900;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand small{display:block;font:600 .8rem/1.2 var(--ui);color:var(--ink-2);letter-spacing:0}
.top nav a{color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.9rem;margin-left:.9rem}
h1{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,7vw,2.8rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--sp-3);text-wrap:balance}
h2{font-family:var(--display);font-weight:900;font-size:var(--t2);line-height:1.15;margin:var(--sp-5) 0 var(--sp-2)}
p{margin:0 0 var(--sp-3)}
.kick{font-size:var(--t-3);font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.lede{color:var(--ink-2);font-size:var(--t1)}
i[lang]{font-style:normal;font-weight:700}
/* The house button edge: a darker shade of the button's OWN surface. --btn is
   declared on the element that reads it, so each variant gets its own edge. */
.cta{--btn:var(--accent);display:block;text-align:center;background:var(--btn);color:var(--accent-ink);font-family:var(--display);
  font-weight:800;font-size:1.05rem;padding:.95rem 1.2rem;border-radius:var(--r-m);text-decoration:none;margin:var(--sp-3) 0;
  box-shadow:0 var(--sink-d) 0 color-mix(in srgb,var(--btn) 72%,var(--edge-mix))}
.cta.quiet{--btn:var(--card);background:var(--btn);color:var(--ink);border:var(--bw) solid var(--line);font-weight:700}
.cta:active{transform:translateY(var(--sink-d));box-shadow:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--sp-3);margin:var(--sp-3) 0}
.card{background:var(--card);border-radius:var(--r-l);padding:var(--sp-4);box-shadow:var(--sink-s)}
.card b{display:block;font-family:var(--display);font-weight:900;font-size:1.05rem;margin-bottom:.3rem}
.card p{margin:0;color:var(--ink-2);font-size:.95rem}
.egs{display:grid;gap:.5rem;margin:var(--sp-3) 0}
.eg{background:var(--card);border-radius:var(--r-m);padding:.7rem var(--sp-3);box-shadow:var(--sink-s);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.eg b{font-family:var(--display);font-size:1.1rem}
.eg span{color:var(--ink-2)}
table{width:100%;border-collapse:collapse;margin:var(--sp-3) 0;background:var(--card);border-radius:var(--r-l);box-shadow:var(--sink-s);overflow:hidden}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{color:var(--ink-2);font-weight:700;font-size:.85rem}
td b{font-family:var(--display)}
.wide{overflow-x:auto}
ul{padding-left:1.2rem}
li{margin-bottom:.4rem}
.list{list-style:none;padding:0}
.list li{background:var(--card);border-radius:var(--r-m);padding:.8rem var(--sp-3);box-shadow:var(--sink-s)}
.list a{font-weight:800;color:var(--ink);text-decoration:none}
.list small{display:block;color:var(--ink-2);font-weight:400}
details{background:var(--card);border-radius:var(--r-m);padding:.6rem var(--sp-3);margin:var(--sp-2) 0;box-shadow:var(--sink-s)}
summary{cursor:pointer;font-weight:800}
details p{margin:.5rem 0 0}
.note{color:var(--ink-2);font-size:.92rem}
footer{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);color:var(--ink-2);font-size:.9rem}
footer a{color:var(--ink-2)}