/* lloc.css · portada, timeline i pantalla de contrasenya.
   Els colors i tipografies venen de diapos.css, que es carrega abans. */

[hidden]{display:none!important}
body.pg{font-size:16.5px;line-height:1.6}
.wrap{max-width:1000px;margin:0 auto;padding:0 clamp(18px,5vw,48px) 90px}
a{color:inherit}
.top{display:flex;align-items:center;gap:12px;padding:28px 0 0}
.top a{text-decoration:none;display:flex;align-items:center;gap:12px;color:var(--ink)}
.bt-l{font-family:"Archivo",sans-serif;font-weight:800;font-size:11px;line-height:1.25;
  letter-spacing:.06em;text-transform:uppercase}
.bs{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--faint);
  letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
header.h{padding:52px 0 0}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
header.h h1{font-size:clamp(29px,5.2vw,50px);margin:15px 0 0;max-width:16ch;font-weight:800}
header.h p{font-size:17px;color:var(--ink-2);max-width:58ch;margin-top:16px;line-height:1.55}

/* ── portada: targetes d'assignatura ─────────────────────────────────── */
.cs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:40px}
.c{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);border-top:4px solid var(--c);background:var(--surface);
  border-radius:0 0 5px 5px;padding:20px 22px 18px;transition:.14s}
.c:hover{transform:translateY(-2px);border-color:var(--c)}
.c-c{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c)}
.c h2{font-size:21px;margin-top:7px;font-family:"Archivo",sans-serif;font-weight:800;
  letter-spacing:-.03em}
.c-e{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);margin-top:8px}
.c-go{font-family:"Archivo",sans-serif;font-size:12px;font-weight:700;color:var(--c);
  margin-top:auto;padding-top:16px}
.enll{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.enll a{font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:600;text-decoration:none;
  color:var(--muted);border:1px solid var(--rule-2);padding:5px 11px;border-radius:99px;
  transition:.12s}
.enll a:hover{border-color:var(--ink);color:var(--ink)}

/* ── timeline ────────────────────────────────────────────────────────── */
.tl{margin-top:40px;position:relative}
.tl-ud{position:relative;padding-left:40px;margin-top:30px}
.tl-ud::before{content:"";position:absolute;left:11px;top:4px;bottom:-30px;width:2px;
  background:var(--rule);}
.tl-ud:last-child::before{bottom:14px}
.tl-cap{position:relative;display:flex;align-items:baseline;gap:11px;
  border-bottom:1.5px solid var(--ink);padding-bottom:6px;margin-bottom:4px}
.tl-cap::before{content:"";position:absolute;left:-35px;top:2px;width:18px;height:18px;
  border-radius:50%;background:var(--c);box-shadow:0 0 0 4px var(--paper)}
.tl-n{font-family:"Archivo",sans-serif;font-weight:800;font-size:12px;color:var(--c)}
.tl-t{font-family:"Archivo",sans-serif;font-weight:700;font-size:14px;letter-spacing:-.015em;flex:1}
.tl-r{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint)}

.tl-s{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:3px 13px;
  align-items:baseline;padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);transition:.12s}
.tl-s:hover{background:var(--cs);padding-left:10px;padding-right:10px}
.tl-s::before{content:"";position:absolute;left:-32px;top:16px;width:10px;height:10px;
  border-radius:50%;background:var(--paper);border:2px solid var(--c);
  box-shadow:0 0 0 3px var(--paper)}
.tl-s.fet::before{background:var(--c)}
.tl-num{font-family:"Archivo",sans-serif;font-weight:800;font-size:14px;color:var(--c);
  grid-row:span 2;line-height:1.3;min-width:2.4em}
.tl-tit{font-family:"Archivo",sans-serif;font-weight:600;font-size:14.5px;
  letter-spacing:-.012em;line-height:1.3}
.tl-met{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);
  grid-column:2}
.tl-est{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);
  grid-row:span 2;align-self:center;white-space:nowrap}
.tl-s.obert .tl-est{color:var(--c);font-weight:500}
.tl-ent{color:var(--accent);font-weight:600}

/* ── pantalla de contrasenya ─────────────────────────────────────────── */
.pany{position:fixed;inset:52px 0 0 0;display:flex;align-items:center;justify-content:center;
  background:var(--ground);padding:24px}
.pany-c{background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--c);
  border-radius:0 0 5px 5px;padding:34px clamp(24px,5vw,44px) 32px;max-width:440px;width:100%}
.pany-e{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c)}
.pany-c h1{font-family:"Archivo",sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em;
  margin:12px 0 0;line-height:1.2}
.pany-c p{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.pany-f{display:flex;gap:8px;margin-top:22px}
.pany-f input{flex:1;min-width:0;font-family:"IBM Plex Mono",monospace;font-size:16px;
  letter-spacing:.1em;padding:11px 14px;border:1px solid var(--rule-2);border-radius:3px;
  background:var(--paper);color:var(--ink)}
.pany-f input:focus{outline:none;border-color:var(--c)}
.pany-f button{font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;
  padding:11px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:3px}
.pany-f button[disabled]{opacity:.4}
.pany-m{font-family:"IBM Plex Mono",monospace;font-size:11.5px;margin-top:14px;min-height:1.3em}
.pany-m.mal{color:var(--accent)}
.pany-p{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);
  margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);line-height:1.6}

footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);line-height:1.8}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:560px){
  .tl-ud{padding-left:30px}
  .tl-ud::before{left:5px}
  .tl-cap::before{left:-29px;width:14px;height:14px}
  .tl-s::before{left:-26px;width:8px;height:8px}
  .tl-est{grid-row:auto;grid-column:2}
}

/* ── diapositiva a pantalla completa ─────────────────────────────────── */
.play:fullscreen{inset:0;padding:0;background:#000}
.play:-webkit-full-screen{inset:0;padding:0;background:#000;width:100%;height:100%}
.play:fullscreen .stage{width:min(100vw,calc(100vh * 16 / 9));border:0}
.play:-webkit-full-screen .stage{width:min(100vw,calc(100vh * 16 / 9));border:0}