/* Direcció: identitat del CEP de Formentera portada a pàgina. Blau i or del logotip, retolació condensada com la del logotip, blocs de color plens i fotografia real. Res de filets decoratius ni etiquetes monoespaiades. */
:root{
  --paper:#FFFFFF;
  --paper-2:#EEF2F7;     /* gris blavós per a franges */
  --ink:#0B1B33;
  --ink-2:#44546B;
  --blue:#004B99;        /* blau del logotip */
  --blue-deep:#003570;
  --sea:#8FA9C9;
  --sun:#B79D1E;         /* or del logotip */
  --sun-ink:#7A6A10;
  --gold-soft:#F2EBC7;
  --rule:#D5DDE7;
  --land:#FFFFFF;
  --land-2:#1A5DAA;
  --on-blue:#FFFFFF;
  --on-blue-2:#C9D8EC;
  --c1:#1F5FB0;
  --c2:#9C8517;
  --f-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:"Barlow","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-data:"Barlow Semi Condensed","Barlow","Arial Narrow",sans-serif;
  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.7rem,1.4rem + 1.4vw,2.5rem);
  --step-3:clamp(2.3rem,1.7rem + 3vw,4rem);
  --step-4:clamp(3.2rem,2rem + 6vw,7rem);
  --measure:64ch;
  --gutter:clamp(16px,4vw,56px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0B1626;--paper-2:#122238;--ink:#E9EEF5;--ink-2:#A8B6C9;--blue:#2F6FC4;--blue-deep:#0E2F5C;--sea:#4F6F96;
  --sun:#C9AE2E;--sun-ink:#D8C154;--gold-soft:#2A2A14;--rule:#223650;--land:#E9EEF5;--land-2:#2A5A9A;--on-blue:#FFFFFF;--on-blue-2:#C9D8EC;
  --c1:#5A8FE0;--c2:#AE9016;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B1626;--paper-2:#122238;--ink:#E9EEF5;--ink-2:#A8B6C9;--blue:#2F6FC4;--blue-deep:#0E2F5C;--sea:#4F6F96;
  --sun:#C9AE2E;--sun-ink:#D8C154;--gold-soft:#2A2A14;--rule:#223650;--land:#E9EEF5;--land-2:#2A5A9A;--on-blue:#FFFFFF;--on-blue-2:#C9D8EC;
  --c1:#5A8FE0;--c2:#AE9016;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.6}
::selection{background:var(--sun);color:#0B1B33}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:.98;text-wrap:balance;margin:0;letter-spacing:-.005em;text-transform:uppercase}
h4{margin:0}
p{margin:0}
.data{font-family:var(--f-data);font-size:var(--step--1);font-weight:500;font-variant-numeric:tabular-nums}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}

/* Barra */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);box-shadow:0 1px 0 var(--rule)}
.bar .wrap{display:flex;align-items:center;gap:1.5rem;min-height:3.75rem}
.brand{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--ink)}
.brand img{display:block;height:36px;width:auto;background:#fff;padding:3px 5px;border-radius:2px}
.brand span{font-family:var(--f-display);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.nav{display:flex;gap:1.35rem;margin-left:auto;overflow-x:auto;scrollbar-width:none;padding-block:.5rem}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink-2);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;padding-block:.2rem;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{color:var(--blue);border-bottom-color:var(--sun)}
@media (max-width:760px){.brand span{display:none}.nav{gap:1rem}}

/* Portada */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:var(--blue);color:var(--on-blue);min-height:min(78vh,720px)}
.hero-txt{display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(2.5rem,6vw,5rem) max(var(--gutter),calc((100vw - 1240px) / 2 + var(--gutter)))}
.hero h1{font-size:clamp(2.9rem,1rem + 4.6vw,5.6rem);line-height:.9;letter-spacing:-.01em}
.hero h1 span{display:block;color:var(--sun)}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--on-blue-2);max-width:32ch}
.cta{align-self:flex-start;display:inline-flex;align-items:center;gap:.7rem;padding:.85rem 1.4rem;background:var(--sun);color:#0B1B33;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;border-radius:2px;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s}
.cta:hover{background:#CDB43A}
.cta:active{transform:translateY(1px)}
.cta::after{content:"";width:.55rem;height:.55rem;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.cta2{font-family:var(--f-display);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;color:#fff;text-decoration:none;border-bottom:3px solid var(--sun);padding-bottom:2px}
.cta2:hover{color:var(--sun)}
.espais-top{padding-block:clamp(2.5rem,5vw,4rem)}
.espais-top .sec-head{margin-bottom:1.5rem}
.espais-top .sec-head h2{font-size:var(--step-2)}
.hero-photo{margin:0;position:relative;min-height:320px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photo figcaption{position:absolute;left:0;bottom:0;padding:.5rem .9rem;background:var(--blue-deep);color:var(--on-blue-2);font-family:var(--f-data);font-size:var(--step--1)}
@media (max-width:860px){.hero{grid-template-columns:1fr;min-height:0}.hero-txt{padding-inline:var(--gutter)}.hero-photo{aspect-ratio:4/3;min-height:0}}

/* Franja del mapa */
.mapband{background:var(--blue-deep);color:var(--on-blue);padding-block:clamp(3rem,6vw,5rem)}
.mapband-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.mapband h2{font-size:var(--step-3);color:var(--on-blue)}
.mapband-txt{display:grid;gap:1.1rem}
.mapband-txt p{color:var(--on-blue-2);font-size:var(--step-1);line-height:1.45;max-width:34ch}
.go.light{color:var(--on-blue);border-bottom-color:var(--sun)}
.chart{position:relative;min-width:0;margin:0}
.chart svg{display:block;width:100%;height:auto;max-height:80vh}
.chart .land{fill:var(--land)}
.chart .iso{fill:var(--land-2);stroke:var(--land-2);stroke-width:26;stroke-linejoin:round}
.chart .leader{fill:none;stroke:var(--on-blue-2);stroke-width:1.5}
.chart .grid line{stroke:rgba(255,255,255,.14);stroke-width:1}
.chart .grid text,.chart .lbl{font-family:var(--f-data);fill:var(--on-blue-2);font-size:21px}
.chart .lbl-name{font-family:var(--f-display);font-weight:700;fill:var(--on-blue);font-size:30px;text-transform:uppercase;letter-spacing:.02em;paint-order:stroke;stroke:var(--blue-deep);stroke-width:8px;stroke-linejoin:round}
.chart .lbl{paint-order:stroke;stroke:var(--blue-deep);stroke-width:6px;stroke-linejoin:round}
.chart .pin{fill:var(--sun);stroke:var(--blue-deep);stroke-width:5}
.chart .pin-ring{fill:none;stroke:var(--sun);stroke-width:2.5;opacity:.8}
.chart figcaption{margin-top:.6rem;color:var(--on-blue-2);font-family:var(--f-data);font-size:.8rem}
@media (max-width:860px){.mapband-in{grid-template-columns:1fr}}

/* Seccions */
section{padding-block:clamp(3.5rem,8vw,7rem)}
#recorregut,#origens,#replicar{background:var(--paper)}
#municipi,#recursos,#pensament{background:var(--paper-2)}
.sec-head{display:grid;gap:1rem;max-width:56rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.sec-head h2{font-size:var(--step-3);color:var(--blue)}
.sec-head p:not(.data){max-width:var(--measure);color:var(--ink-2);font-size:var(--step-1);line-height:1.5}
.prose{max-width:var(--measure);display:grid;gap:1.1rem}
.body-grid{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:2.5rem}
.body-grid > .margin{font-family:var(--f-data);color:var(--sun-ink);font-weight:600;font-size:var(--step--1)}
@media (max-width:820px){.body-grid{grid-template-columns:1fr;gap:.75rem}}

/* Diagrama de rutes */
.rt{display:grid;gap:0}
.rt-row{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:.5rem 2rem;align-items:center;padding-block:1.1rem}
.rt-row + .rt-row{border-top:1px solid var(--rule)}
.rt-head{padding-block:.4rem}
.rt-head .rt-track li{font-family:var(--f-display);font-weight:700;font-size:1.15rem;letter-spacing:.03em;color:var(--ink-2);text-align:center}
.rt-lbl{display:grid;gap:.05rem;margin:0}
.rt-lbl b{font-family:var(--f-display);font-size:1.4rem;font-weight:700;text-transform:uppercase;line-height:1.05}
.rt-lbl span{color:var(--ink-2);font-size:var(--step--1)}
.rt-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rt-track li{position:relative;display:flex;justify-content:center}
.rt-track .st a{position:relative;z-index:1;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;border:5px solid var(--sun);background:var(--paper);color:var(--ink);font-family:var(--f-display);font-size:1.25rem;font-weight:700;text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.rt-track .st a:hover{transform:scale(1.08)}
.rt-track .st.now a{background:var(--sun);color:#0B1B33}
.rt-track .st.pre a{border-color:var(--sea)}
.rt-track .join::before{content:"";position:absolute;top:50%;right:50%;width:100%;height:5px;margin-top:-2.5px;background:var(--sun)}
.rt-track .join.live::before{background:repeating-linear-gradient(90deg,var(--sun) 0 12px,transparent 12px 20px);background-size:40px 5px;animation:flow 1.8s linear infinite}
.rt-track .join.pre-join::before{background:repeating-linear-gradient(90deg,var(--sea) 0 12px,transparent 12px 20px);background-size:40px 5px}
@keyframes flow{to{background-position:40px 0}}
.rt-head .rt-track li:last-child{color:var(--blue)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:1.5rem;color:var(--ink-2);font-family:var(--f-data);font-size:var(--step--1)}
.legend span{display:inline-flex;align-items:center;gap:.5rem}
.legend svg{flex:none}
@media (max-width:820px){.rt-row{grid-template-columns:1fr}.rt-head{grid-template-columns:1fr}.rt-head > span{display:none}.rt-track .st a{width:3rem;height:3rem;font-size:1.05rem}}

/* Xifres: franja blava */
.tally{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(2.5rem,5vw,4rem);background:var(--blue);color:var(--on-blue);border-radius:2px}
.tally div{padding:1.6rem 1.4rem}
.tally div + div{box-shadow:inset 1px 0 0 rgba(255,255,255,.18)}
.tally b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(2.8rem,2rem + 3vw,4.6rem);line-height:.95;color:var(--sun);font-variant-numeric:tabular-nums}
.tally span{color:var(--on-blue-2);font-size:var(--step--1);display:block;margin-top:.5rem;max-width:22ch}
@media (max-width:820px){.tally{grid-template-columns:repeat(2,minmax(0,1fr))}.tally div:nth-child(3){box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.tally div:nth-child(4){box-shadow:inset 1px 1px 0 rgba(255,255,255,.18)}}

/* Gràfics */
.chart-h{margin:clamp(2.5rem,5vw,3.5rem) 0 0;min-width:0}
.figures .chart-h{margin-top:0}
.chart-h figcaption{display:grid;gap:.15rem;margin-bottom:1rem}
.chart-h figcaption b{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
.chart-h figcaption span{color:var(--ink-2)}
.chart-h svg{display:block;width:100%;max-width:720px;height:auto;overflow:visible}
.chart-h .bar{fill:var(--c1)}
.chart-h .bar.plan,.chart-h .bar.s2{fill:var(--c2)}
.chart-h .cat{font-family:var(--f-data);font-size:14px;font-weight:600;fill:var(--ink-2)}
.chart-h .val{font-family:var(--f-data);font-size:14px;fill:var(--ink);font-weight:600}
.chart-h .axis{stroke:var(--rule);stroke-width:1}
.chart-h g.b:hover .bar{opacity:.85}
.chart-h .legend-c{display:flex;gap:1.25rem;flex-wrap:wrap;margin:-.25rem 0 .9rem;color:var(--ink-2);font-size:var(--step--1)}
.chart-h .legend-c i{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.4rem;vertical-align:-1px}
.charts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:820px){.charts2{grid-template-columns:1fr}}

/* Línies i fitxes */
.lines{display:grid;gap:clamp(3.5rem,7vw,5.5rem);margin-top:clamp(3.5rem,7vw,5.5rem)}
.line > header{display:grid;gap:.6rem;padding:1.6rem 1.75rem;background:var(--paper-2);border-radius:2px}
.line h3{font-size:var(--step-2);color:var(--blue)}
.line > header p{color:var(--ink-2);max-width:var(--measure)}
.entries{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:.75rem 2.5rem;padding-block:2rem;scroll-margin-top:5rem}
.entry + .entry{border-top:1px solid var(--rule)}
.entry:target .num{color:var(--sun-ink)}
.entry .meta{display:grid;gap:.25rem;align-content:start}
.entry .num{font-family:var(--f-display);font-weight:700;font-size:3.4rem;line-height:.9;color:var(--blue)}
.entry .when{color:var(--ink-2);font-family:var(--f-data);font-weight:600}
.tag{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .55rem;border-radius:2px;justify-self:start;margin-top:.4rem}
.tag.t{background:var(--gold-soft);color:var(--sun-ink)}
.tag.o{background:var(--paper-2);color:var(--ink-2)}
.tag.live{background:var(--blue);color:#fff}
.entry h4{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);line-height:1.02;text-transform:uppercase;margin:0 0 .4rem;text-wrap:balance}
.entry .txt{display:grid;gap:.85rem;max-width:var(--measure);min-width:0}
.facts{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;color:var(--ink-2)}
.facts b{color:var(--ink);font-weight:600}
blockquote{margin:0;padding:1rem 1.2rem;background:var(--gold-soft);color:var(--ink);font-size:var(--step-1);line-height:1.4;border-radius:2px}
blockquote cite{display:block;font-style:normal;color:var(--sun-ink);font-size:var(--step--1);margin-top:.5rem;font-family:var(--f-data);font-weight:600}
.credit{color:var(--ink-2);font-size:var(--step--1)}
.go{font-family:var(--f-display);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;border-bottom:3px solid var(--sun);padding-bottom:1px;color:var(--blue)}
.go::after{content:" \2192"}
.shot{margin:.25rem 0 0;max-width:16rem}
.shot.wide{max-width:32rem}
.shot img{display:block;width:100%;height:auto;max-width:100%;border-radius:2px}
.shot figcaption{color:var(--ink-2);margin-top:.35rem;font-size:var(--step--1)}
@media (max-width:820px){.entry{grid-template-columns:1fr}.entry .meta{grid-auto-flow:column;justify-content:start;gap:1rem;align-items:center}.tag{margin-top:0}.entry .num{font-size:2.6rem}}

/* Municipi */
.twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2rem);margin-top:3rem}
.twin article{padding:1.75rem;background:var(--paper);border-radius:2px;display:grid;gap:.75rem;align-content:start}
.twin h3{font-size:var(--step-2);color:var(--blue)}
.twin .data{color:var(--sun-ink);font-weight:600}
@media (max-width:820px){.twin{grid-template-columns:1fr}}
.balears{margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:clamp(1rem,3vw,2rem);background:var(--blue-deep);border-radius:2px}
.balears svg{display:block;width:100%;height:auto;max-height:560px}
.balears .isl{fill:var(--land-2);stroke:var(--sea);stroke-width:1}
.balears .isl.hi{fill:#fff;stroke:#fff}
.balears .arc{fill:none;stroke:var(--sun);stroke-width:3;stroke-dasharray:10 8}
.balears .pin{fill:var(--sun);stroke:var(--blue-deep);stroke-width:4}
.balears .lbl{font-family:var(--f-display);font-weight:700;font-size:36px;text-transform:uppercase;letter-spacing:.03em;fill:#fff;paint-order:stroke;stroke:var(--blue-deep);stroke-width:7px;stroke-linejoin:round}
.balears .lbl.gold{fill:var(--sun)}
.balears .isln{font-family:var(--f-data);font-size:24px;font-weight:600;fill:var(--on-blue-2);letter-spacing:.06em;text-transform:uppercase}
.balears figcaption{margin-top:.75rem;color:var(--on-blue-2);font-size:var(--step--1)}
.refs-inline{color:var(--ink-2);font-size:var(--step--1)}
.edu-map{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem clamp(1.5rem,4vw,3.5rem);margin-top:clamp(3.5rem,7vw,5rem)}
.edu-head{grid-column:1 / -1;display:grid;gap:.6rem;max-width:var(--measure)}
.edu-head h3,.figures h3{font-size:var(--step-2);color:var(--blue)}
.edu-head p{color:var(--ink-2)}
.inset{margin:0;min-width:0}
.inset svg{display:block;width:100%;height:auto;background:var(--paper);border-radius:2px}
.inset .rd{fill:none;stroke:var(--rule);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.inset .rd.mj{stroke:var(--sea);stroke-width:5}
.inset .c{fill:var(--paper);stroke:var(--blue);stroke-width:4}
.inset .c.in{fill:var(--sun);stroke:var(--blue-deep);stroke-width:4}
.inset text{font-family:var(--f-display);font-size:22px;font-weight:700;text-transform:uppercase;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:6px;stroke-linejoin:round}
.inset figcaption{margin-top:.5rem;color:var(--ink-2);font-size:var(--step--1)}
.centres{display:grid;gap:1.5rem;align-content:start;min-width:0}
.nucli h4{font-family:var(--f-display);font-size:1.25rem;font-weight:700;text-transform:uppercase;margin:0 0 .5rem;color:var(--blue)}
.nucli ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.nucli li{display:grid;grid-template-columns:.9rem minmax(0,1fr);column-gap:.6rem}
.nucli li::before{content:"";width:.75rem;height:.75rem;margin-top:.4rem;border-radius:50%;border:3px solid var(--blue);background:var(--paper);grid-row:span 2}
.nucli li.in::before{background:var(--sun);border-color:var(--sun)}
.nucli li b{font-weight:600}
.nucli li span{color:var(--ink-2);font-size:var(--step--1)}
.src-note{color:var(--ink-2)}
@media (max-width:820px){.edu-map{grid-template-columns:1fr}}
.figures{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(3.5rem,7vw,5rem);align-items:start}
.figures b{font-weight:600}
@media (max-width:820px){.figures{grid-template-columns:1fr}}

/* Orígens */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2rem)}
.people article{display:grid;gap:.7rem;align-content:start;padding:1.6rem;background:var(--paper-2);border-radius:2px}
.people article:first-child{background:var(--blue);color:var(--on-blue)}
.people article:first-child h3{color:var(--sun)}
.people h3{font-size:var(--step-1);line-height:1.05;color:var(--blue)}
.people ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}
@media (max-width:900px){.people{grid-template-columns:1fr}}
.wide-photo{margin:clamp(2rem,4vw,3rem) 0 0}
.wide-photo img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:2px}
.wide-photo figcaption{margin-top:.5rem;color:var(--ink-2);font-size:var(--step--1)}
.signature{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:13rem minmax(0,1fr);gap:2.5rem}
.signature > .data{color:var(--sun-ink)!important;font-weight:600}
.signature .prose p:first-child{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:var(--step-2);line-height:1.02;color:var(--blue)}
@media (max-width:820px){.signature{grid-template-columns:1fr;gap:1rem}}

/* Pensament */
.ideas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2rem)}
.ideas li{padding:1.75rem;background:var(--paper);border-radius:2px;display:grid;gap:.6rem;align-content:start}
.ideas li:nth-child(1){background:var(--blue);color:var(--on-blue)}
.ideas li:nth-child(1) h3{color:var(--sun)}
.ideas li:nth-child(1) .src{color:var(--on-blue-2)}
.ideas h3{font-size:var(--step-2);color:var(--blue);line-height:1}
.ideas .src{font-size:var(--step--1);color:var(--ink-2)}
@media (max-width:820px){.ideas{grid-template-columns:1fr}}

/* Espais */
.espais{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.espais a{display:grid;gap:.5rem;height:100%;padding:1.5rem;border-radius:2px;text-decoration:none;color:var(--ink);background:var(--paper);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.espais a:hover{transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(0,53,112,.35)}
.espais b{font-family:var(--f-display);font-weight:700;font-size:1.6rem;text-transform:uppercase;line-height:1;color:var(--blue)}
.espais span{color:var(--ink-2)}
.espais em{font-style:normal;font-family:var(--f-data);font-weight:600;font-size:var(--step--1);color:var(--sun-ink);margin-top:auto}
@media (max-width:900px){.espais{grid-template-columns:1fr}}

/* Replicar */
.steps-wrap{display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:clamp(2rem,5vw,4rem);align-items:start}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.5rem 1.25rem;padding-block:1.3rem}
.steps li + li{border-top:1px solid var(--rule)}
.steps li::before{content:counter(s);font-family:var(--f-display);font-weight:700;font-size:4rem;line-height:.85;color:var(--sun)}
.steps h3{font-size:var(--step-1);color:var(--blue);margin-bottom:.4rem}
.steps p{max-width:var(--measure);color:var(--ink-2)}
.steps-photo{margin:0;position:sticky;top:5rem}
.steps-photo img{display:block;width:100%;height:auto;border-radius:2px}
.steps-photo figcaption{margin-top:.4rem;color:var(--ink-2);font-size:var(--step--1)}
@media (max-width:820px){.steps-wrap{grid-template-columns:1fr}.steps-photo{position:static;max-width:14rem}.steps li{grid-template-columns:3.5rem minmax(0,1fr)}.steps li::before{font-size:3rem}}

/* Biblioteca */
#biblioteca{background:var(--paper)}
.bib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem)}
.bib h3{font-size:var(--step-1);color:var(--blue);padding-bottom:.5rem;border-bottom:3px solid var(--sun)}
.bib ol{list-style:none;margin:.6rem 0 0;padding:0;display:grid}
.bib h4{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:1.4rem 0 0}
.bib li{padding-block:.55rem;padding-left:1.6rem;text-indent:-1.6rem;overflow-wrap:anywhere;font-size:.97rem}
@media (max-width:820px){.bib{grid-template-columns:1fr}}

/* Peu */
footer{padding-block:3.5rem 4rem;background:var(--blue-deep);color:var(--on-blue-2);font-size:var(--step--1)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem}
footer b{color:var(--on-blue);font-weight:600}
footer a{color:var(--on-blue)}
footer p + p{margin-top:.6rem}
footer .wrap.logos{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;padding:1.25rem 1.5rem;margin-bottom:2.5rem;background:#fff;border-radius:2px;max-width:calc(1240px - 2 * var(--gutter))}
footer .logos img{height:44px;width:auto;max-width:100%}
@media (max-width:820px){footer .wrap{grid-template-columns:1fr}}
@media (max-width:720px){footer .wrap.logos{margin-inline:var(--gutter);gap:1rem 1.5rem}footer .logos img{height:34px}}

/* ===== Centres ===== */
.centres-sec{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule)}
.centres-sec .sec-head{margin-bottom:1.75rem}
.centres-sec .sec-head h2{font-size:var(--step-2)}
.cgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cgrid li{display:grid;grid-template-rows:auto 1fr auto;background:var(--paper);min-width:0}
.cgrid .mark{height:132px;display:grid;place-items:center;padding:1.5rem 1.25rem;border-bottom:1px solid var(--rule)}
.cgrid .mark img{max-height:84px;max-width:100%;width:auto;height:auto}
.cgrid .mark .word{font-family:var(--f-display);font-weight:700;text-transform:uppercase;color:var(--blue);font-size:1.35rem;line-height:.95;text-align:center;letter-spacing:.01em}
.cgrid .mark .word small{display:block;font-size:.72rem;letter-spacing:.14em;color:var(--ink-2);margin-top:.35rem;font-family:var(--f-data);font-weight:600}
.cgrid .info{padding:1.1rem 1.25rem .5rem;display:grid;gap:.35rem;align-content:start}
.cgrid h3{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:1.25rem;line-height:1.05;color:var(--ink)}
.cgrid .meta{color:var(--ink-2);font-size:var(--step--1)}
.cgrid .fecs{font-family:var(--f-data);font-weight:600;font-size:var(--step--1);color:var(--sun-ink)}
.cgrid .acc{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.75rem 1.25rem 1.2rem}
.cgrid .acc a{font-weight:600;font-size:var(--step--1);color:var(--blue);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.cgrid .acc a:hover{color:var(--ink)}
.cgrid .acc .na{font-size:var(--step--1);color:var(--ink-2)}
@media (max-width:1000px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cgrid{grid-template-columns:1fr}.cgrid .mark{height:112px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cgrid .mark img{filter:brightness(0) invert(1);opacity:.88}}
:root[data-theme="dark"] .cgrid .mark img{filter:brightness(0) invert(1);opacity:.88}

/* ===== Espais de treball ===== */
.crumbs{padding-block:1.25rem 0;font-size:var(--step--1);color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}
.e-hero{padding-block:clamp(2rem,5vw,3.5rem);background:var(--blue);color:var(--on-blue)}
.e-hero .e-logo{height:64px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:1.25rem}
.e-hero h1{font-size:var(--step-3);max-width:22ch;color:#fff}
.e-hero .facts{margin-top:1rem;color:var(--on-blue-2)}
.e-hero .facts b{color:var(--sun)}
.e-hero p.lede{max-width:60ch;font-size:var(--step-1);color:var(--on-blue-2)}
.e-grid h2{color:var(--blue)}
.e-grid{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(2rem,5vw,4rem)}
@media (max-width:900px){.e-grid{grid-template-columns:1fr}}
.sessions{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:ses}
.ses{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.5rem 1.5rem;padding-block:1.25rem;border-top:1px solid var(--rule)}
@media (max-width:600px){.ses{grid-template-columns:1fr}}
.ses .d{display:grid;gap:.15rem;align-content:start}
.ses .d b{font-family:var(--f-data);font-weight:500;font-size:1.05rem}
.ses .d span{color:var(--ink-2);font-size:var(--step--1)}
.ses h3{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;margin-bottom:.4rem}
.ses .st{display:inline-block;font-family:var(--f-data);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:.1rem .45rem;border:1px solid currentColor;border-radius:2px;margin-left:.5rem;vertical-align:2px}
.ses .st.done{color:var(--sun-ink)} .ses .st.next{color:var(--blue)} .ses .st.later{color:var(--ink-2)}
.slots{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.slot{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border:1px dashed var(--rule);border-radius:2px;color:var(--ink-2);font-size:var(--step--1)}
.slot.ready{border-style:solid;border-color:var(--blue);color:var(--ink);text-decoration:none;background:var(--paper)}
.slot.ready:hover{background:var(--paper-2)}
.slot svg{width:16px;height:16px;flex:none}
.player{margin-top:.75rem;display:grid;gap:.35rem}
.player audio{width:100%;max-width:34rem}
.resum{margin-top:.75rem;max-width:var(--measure)}
.resum summary{cursor:pointer;font-weight:600}
.resum div{white-space:pre-line;margin-top:.5rem;color:var(--ink)}
.aside{display:grid;gap:1.5rem;align-content:start}
.aside section{padding:0;border:0}
.box{padding:1.1rem 1.2rem;border:1px solid var(--rule);border-radius:2px;display:grid;gap:.6rem}
.box h2{font-size:var(--step-1);font-weight:600}
.box p{color:var(--ink-2);font-size:var(--step--1)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem;margin-top:1.25rem}
.card{perspective:1000px}
.card button{all:unset;box-sizing:border-box;display:grid;width:100%;height:100%;cursor:pointer}
.card .face{grid-area:1 / 1;padding:1.25rem;border-radius:2px;display:flex;flex-direction:column;justify-content:center;gap:.5rem;min-height:11rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card .front{background:var(--blue);color:#fff;font-family:var(--f-display);font-weight:700;font-size:1.3rem;line-height:1.1;text-transform:uppercase}
.card .front small{font-family:var(--f-data);font-weight:600;font-size:.8rem;text-transform:none;color:var(--sun)}
.card .back{background:var(--paper);border:2px solid var(--blue);transform:rotateY(180deg);font-size:.98rem;line-height:1.45}
.card.flip .front{transform:rotateY(180deg)} .card.flip .back{transform:rotateY(0)}
.card button:focus-visible .face{outline:3px solid var(--sun);outline-offset:2px}
.cards-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1rem;color:var(--ink-2);font-size:var(--step--1)}
.cards-bar button{font:inherit;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1rem;padding:.5rem .9rem;border:2px solid var(--blue);background:transparent;color:var(--blue);border-radius:2px;cursor:pointer}
.cards-bar button:hover{background:var(--blue);color:#fff}
.quiz{display:grid;gap:1.25rem;margin-top:1.25rem;max-width:48rem;counter-reset:q}
.q{padding:1.25rem 1.4rem;background:var(--paper);border:1px solid var(--rule);border-radius:2px;counter-increment:q}
.q legend{font-family:var(--f-display);font-weight:700;font-size:1.3rem;line-height:1.15;text-transform:uppercase;color:var(--blue);padding:0;margin-bottom:.75rem}
.q legend::before{content:counter(q) ". ";color:var(--sun-ink)}
.q fieldset{border:0;margin:0;padding:0}
.q label{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .7rem;border-radius:2px;cursor:pointer}
.q label:hover{background:var(--paper-2)}
.q input{margin-top:.3rem;accent-color:var(--blue)}
.q label.ok{background:#E3F1E4;color:#1E5B28}
.q label.ko{background:#FBE5E1;color:#8A2A1A}
.q .fb{margin-top:.6rem;font-size:var(--step--1);color:var(--ink-2)}
.quiz-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.quiz-bar button{font:inherit;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem;padding:.65rem 1.1rem;border:0;background:var(--blue);color:#fff;border-radius:2px;cursor:pointer}
.quiz-bar button.sec{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.quiz-bar output{font-family:var(--f-display);font-weight:700;font-size:1.4rem;color:var(--blue)}
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1.5rem;margin-top:1.25rem;align-items:start}
.media figure{margin:0;display:grid;gap:.6rem;padding:1rem;background:var(--paper);border:1px solid var(--rule);border-radius:2px}
.media video{width:100%;height:auto;max-height:70vh;background:#000;border-radius:2px}
.media audio{width:100%}
.media figcaption b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.25rem;line-height:1.1;text-transform:uppercase;color:var(--blue)}
.media figcaption span{color:var(--ink-2);font-size:var(--step--1)}
.mm-root{margin-top:1.25rem;padding:1.25rem 1.5rem;background:var(--blue);color:#fff;font-family:var(--f-display);font-weight:700;font-size:var(--step-2);line-height:1.05;text-transform:uppercase;border-radius:2px}
.mm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
@media (max-width:1000px){.mm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mm{grid-template-columns:1fr}}
.mm-b{padding:1.1rem 1.2rem;background:var(--paper);border-top:4px solid var(--sun);border-radius:2px}
.mm-b > h3{font-size:1.3rem;color:var(--blue);line-height:1.05;margin-bottom:.35rem}
.mm-b p.n{color:var(--ink-2);font-size:var(--step--1);margin-bottom:.6rem}
.mm-b ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.mm-b li{padding-left:.9rem;position:relative}
.mm-b li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--blue)}
.mm-b li b{font-weight:600}
.mm-b li span{display:block;color:var(--ink-2);font-size:var(--step--1)}
.mm-b li ul{margin-top:.4rem;padding-left:.2rem}
.mm-b li li::before{background:var(--sun)}
.e-sec{padding-block:clamp(2rem,5vw,3.5rem);border-top:1px solid var(--rule)}
.e-sec h2{font-size:var(--step-2);margin-bottom:.5rem}
.e-sec > .wrap > p{color:var(--ink-2);max-width:var(--measure)}
.empty{margin-top:1rem;padding:1.25rem;border:1px dashed var(--rule);border-radius:2px;color:var(--ink-2);max-width:var(--measure)}
/* Tipus de sessió: ponència / formació al centre */
.ses-note{color:var(--ink-2);font-size:var(--step--1);max-width:var(--measure);margin:0 0 .2rem}
.ses.pon .d b{color:var(--blue);font-weight:600}
.ses.pon h3{color:var(--blue)}

/* ===== Portada: bloc per al professorat (01/10/2026) ===== */
.hero{min-height:min(56vh,540px)}
.nav-cta{flex:none;color:#0B1B33;background:var(--sun);padding:.4rem .8rem;border-radius:2px;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.brand span{white-space:nowrap}
.bar .nav{min-width:0}
.nav-cta:hover{background:#CDB43A}
.prof{padding-block:clamp(2rem,4vw,3.25rem) clamp(2.5rem,5vw,4rem);background:var(--paper-2)}
.prof .wrap{display:grid;gap:1.5rem}
.prof-kicker{font-family:var(--f-data);font-size:var(--step--1);font-weight:600;letter-spacing:.08em;color:var(--sun-ink)}
.eina{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 2rem;align-items:center;padding:clamp(1.5rem,3vw,2.25rem);background:var(--blue-deep);color:var(--on-blue);text-decoration:none;border-radius:2px;border-left:8px solid var(--sun);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.eina:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,53,112,.55)}
.eina > span{grid-column:1}
.eina-tag{justify-self:start;font-family:var(--f-data);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#0B1B33;background:var(--sun);padding:.15rem .55rem;border-radius:2px}
.eina-t{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,1.2rem + 2.6vw,3.2rem);line-height:.95;color:#fff}
.eina-p{max-width:60ch;color:var(--on-blue-2);font-size:var(--step-1);line-height:1.45}
.eina-f{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;color:var(--on-blue-2)}
.eina-f span::before{content:"";display:inline-block;width:.45rem;height:.45rem;background:var(--sun);margin-right:.45rem;vertical-align:.1em}
.eina > .eina-go{grid-column:2;grid-row:1 / span 4;display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.6rem;background:var(--sun);color:#0B1B33;font-family:var(--f-display);font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;border-radius:2px;white-space:nowrap}
.eina-go::after{content:"";width:.6rem;height:.6rem;border-right:3px solid currentColor;border-top:3px solid currentColor;transform:rotate(45deg)}
.eina:hover .eina-go{background:#CDB43A}
@media (max-width:760px){.eina{grid-template-columns:1fr}.eina > .eina-go{grid-column:1;grid-row:auto;justify-self:start;margin-top:.5rem}}
.prof-head{display:grid;gap:.5rem;margin-top:1rem}
.prof-head h3{font-size:var(--step-2);color:var(--blue)}
.prof-head p{color:var(--ink-2);max-width:var(--measure)}
.prof .espais a{border:1px solid var(--rule);border-top:4px solid var(--blue)}
.prof .espais small{color:var(--ink-2);font-size:var(--step--1)}
.prof .espais em{font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);border-bottom:3px solid var(--sun);justify-self:start;padding-bottom:1px}
.box.practica{border-color:var(--sun);border-width:2px;background:var(--gold-soft,var(--paper-2))}
.box.practica h2{color:var(--sun-ink)}
.box.practica p{color:var(--ink)}
.cta::after{transform:rotate(-45deg) translate(-1px,-1px)}
.nav{gap:1.1rem}
.ia-ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;margin-right:.4em}
.nav-cta{display:inline-flex;align-items:center}
.eina-t{display:flex;align-items:center;gap:.25em}
.ia-big{width:1em;height:1em;margin-right:.1em;color:var(--sun)}