/* =============================================================================
   GUBIMCat — full d'estils unic del lloc
   -----------------------------------------------------------------------------
   PROPOSIT
     Font unica de veritat per a tota la presentacio. Cap regla de color ni de
     maquetacio ha de viure dins d'un fitxer .html (D-018). La CSP de D-019
     bloqueja els <style> i els atributs style: la regla ja no depen de la
     disciplina, la imposa el navegador.

   SISTEMA DE COLOR
     Tema fosc per BANDES (D-020). La pagina es una successio de seccions, cada
     una amb fons propi d'una mateixa familia blava. Substitueix el degradat
     continu de D-014, que impedia distingir seccions perque no te talls.
     Els colors es declaren com a tokens a :root i no s'usen mai valors
     literals fora d'aqui.

   REGLA CRITICA 1 — zones de tema invers
     Una zona clara dins del tema fosc (la capcalera, la banda blanca) NO es fa
     amb regles de color per element, sino REDEFININT ELS TOKENS dins del seu
     contenidor (D-016). Els descendents els hereten sols.

   REGLA CRITICA 2 — contrast
     Tot color nou s'ha de verificar contra LES TRES bandes fosques, no contra
     una. El cas dolent es sempre --banda-clara, la mes clara.

   REGLA CRITICA 3 — text sobre fotografia
     Sobre imatge el cos de text va amb --text, MAI amb --text-sec: el to
     secundari no arriba a AA per molt que s'enfosqueixi la fotografia. I el
     vel ha de ser opac sobre TOTA la columna de text, no un degradat que ja
     s'ha aclarit a mitja columna: llavors les primeres linies es llegeixen i
     les ultimes no, i el defecte passa desapercebut.

   ESTRUCTURA
     tokens · base · bandes · capcalera · hero · fets · targetes · peu ·
     responsive · accessibilitat · menu mobil
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── TOKENS ─── */
:root {
    /* Components del blau mes fosc, per derivar-ne transparencies sense repetir
       el valor: rgb(var(--fosc-rgb) / .88). Si el color canvia, el vel el
       segueix sol. */
    --fosc-rgb:    11 20 28;

    /* Les tres bandes fosques. Son els tres valors que ja existien a D-014 i
       D-016, amb noms que ara diuen el seu paper: han deixat de ser extrems
       d'un degradat i son fons de seccio. */
    --banda-fosca: rgb(var(--fosc-rgb));  /* #0b141c */
    --banda-mitja: #102a3d;
    --banda-clara: #1d374c;
    /* El lila que D-016 ja havia verificat com a alternativa per a la banda de
       xifres. Es l'unica banda que se separa de les altres per to i no nomes
       per valor, i lliga amb la gamma violeta de les fotografies. */
    --banda-lila:  #2b2b40;

    /* Contrast de cada token contra les quatre bandes fosques
       (fosca / lila / mitja / clara). Cap parella per sota d'AA; el cas dolent
       es sempre la banda clara. */
    --text:        #e8edf4;   /* 15.78 · 11.73 · 12.57 · 10.48 */
    --text-sec:    #a3b2c4;   /*  8.60 ·  6.39 ·  6.84 ·  5.71 */
    --accent:      #7fb6e3;   /*  8.58 ·  6.37 ·  6.83 ·  5.70 */
    --accent-mid:  #a8cef0;   /* hover: mes clar que l'accent */
    --sobre-clar:  #0b141c;   /* text quan el fons es clar (botons): 8.58:1 */

    /* Superficie i vora de targeta. Son decoracio, no limits de control:
       marquen la caixa, no cal que arribin a 3:1. */
    --superficie:  rgb(255 255 255 / 0.06);
    --border:      rgb(255 255 255 / 0.14);

    /* Vora de camp de formulari (D-022): a diferencia de --border, aquesta SI
       es un limit de control i ha d'arribar a 3:1 contra el fons de la banda
       on seu. --border (0.14 alfa) nomes dona 1.49-1.57:1 a les bandes
       fosques: la previsio que ja deixava D-014 escrita. Verificat contra les
       quatre bandes fosques: pitjor cas (--banda-clara) 3.82:1. */
    --camp-vora:   rgb(255 255 255 / 0.45);

    /* Fons de la barra de menus. El desplegable del menu mobil i la banda
       blanca l'han de compartir: si es desincronitzen, deixen de semblar la
       mateixa superficie. */
    --barra-fons:  #ffffff;

    /* L'anell de focus te token propi i no reaprofita --accent: ha de ser
       visible i reconeixible alla on caigui, no prendre el color de la zona. */
    --focus:       #7fb6e3;

    /* Vel de la banda amb fotografia. L'opacitat es constant fins al replà i
       nomes despres s'esvaeix: veure REGLA CRITICA 3. */
    --vel-opac:    0.88;
    --vel-clar:    0.12;
    --vel-repla:   52%;
    --vel-fi:      84%;

    --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Serifa de sistema per als titulars. Provisional i deliberadament sense
       fitxer propi: no afegeix pes ni obliga a tocar font-src a la CSP. La
       tipografia definitiva es P-02 i encara no esta decidida. */
    --font-titol:  Georgia, 'Times New Roman', serif;
    --wrap:        1100px;

    /* Informa el navegador que el tema es fosc, perque controls de formulari
       i barres de desplacament no es pintin en clar. */
    color-scheme:  dark;
}

/* ─── BASE ─── */
body {
    font-family: var(--font);
    color: var(--text);
    line-height: 1.6;
    /* Fons de reserva: cada banda pinta el seu, pero el peu i qualsevol espai
       sobrant han de caure sobre el blau fosc, no sobre el blanc del navegador. */
    background: var(--banda-fosca);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; height: auto; }

/* ─── BANDES ─── */
/* Cada seccio de la portada es una banda amb fons propi. El ritme el marquen
   els talls entre bandes, no un degradat. */
.banda { padding: 4.5rem 1.5rem; }

.banda-inner { max-width: var(--wrap); margin: 0 auto; }

.banda--fosca { background: var(--banda-fosca); }
.banda--lila  { background: var(--banda-lila); }
.banda--mitja { background: var(--banda-mitja); }
.banda--clara { background: var(--banda-clara); }

/* Banda amb fotografia a sang. El degradat va ABANS de la imatge a la llista:
   en CSS la primera capa es la de dalt. */
.banda--imatge {
    background-color: var(--banda-fosca);
    background-image:
        linear-gradient(90deg,
            rgb(var(--fosc-rgb) / var(--vel-opac)) 0 var(--vel-repla),
            rgb(var(--fosc-rgb) / var(--vel-clar)) var(--vel-fi)),
        url('../img/banda-gubimclass.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

/* Segona banda amb fotografia de fons (Fer-se soci). Mateixa fórmula de vel
   que .banda--imatge, imatge diferent: es repeteix la regla en lloc de
   generalitzar-la amb una custom property perquè només hi ha dos casos i cap
   previst a curt termini; si n'apareix un tercer, val la pena parametritzar-ho. */
.banda--imatge-soci {
    background-color: var(--banda-fosca);
    background-image:
        linear-gradient(90deg,
            rgb(var(--fosc-rgb) / var(--vel-opac)) 0 var(--vel-repla),
            rgb(var(--fosc-rgb) / var(--vel-clar)) var(--vel-fi)),
        url('../img/fer-se-soci.jpg');
    background-size: cover;
    background-position: center;
}

/* Sobre fotografia el cos de text puja a --text i l'etiqueta tambe: --accent i
   --text-sec no arriben a AA contra el pixel mes clar de sota el text. */
.banda--imatge p,
.banda--imatge .etiqueta,
.banda--imatge-soci .banda-lead,
.banda--imatge-soci .etiqueta { color: var(--text); }

/* La columna secundària (llista de badges) és translúcida sobre un fons pla,
   però aquí el fons és una fotografia: cal la mateixa opacitat ja verificada
   del vel (--vel-opac, 10.35:1 contra --text) perquè el requadre es llegeixi
   com una superfície pròpia i no deixi transparentar la imatge. */
.banda--imatge-soci .columna-secundaria {
    background: rgb(var(--fosc-rgb) / var(--vel-opac));
    border-color: rgb(255 255 255 / 0.16);
}

/* Banda blanca: tall dur que tanca el relat. Comparteix els tokens invertits
   amb la capcalera, declarats una sola vegada mes avall. */
.banda--blanc { background: var(--barra-fons); }

/* Etiqueta de banda: majuscules petites i espaiades. Es el que diu al lector
   en quina seccio es; el color del fons nomes ho reforca. */
.etiqueta {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--accent);
    margin-bottom: 0.9rem;
}

.banda h2 {
    font-family: var(--font-titol);
    font-size: clamp(1.55rem, 3.2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    max-width: 20ch;
    margin-bottom: 1.5rem;
}

.banda-lead {
    font-size: 1rem;
    color: var(--text-sec);
    max-width: 58ch;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.enllac-seccio { font-weight: 600; }

/* ─── ZONES DE TEMA INVERS ─── */
/* Capcalera i banda blanca comparteixen exactament els mateixos tokens. Es
   declaren un sol cop: duplicar-los seria tenir dos llocs on mantenir el
   mateix tema clar (D-016). */
header,
.banda--blanc {
    --text:     #16181d;   /* 17.76:1 sobre blanc */
    --text-sec: #4a5261;   /*  7.86:1 sobre blanc */
    --accent:   #14496f;   /*  9.49:1 sobre blanc */
    --border:   #d8dde6;
    --focus:    #1d6fb8;   /* 5.23:1 sobre blanc, i clarament diferent de
                              l'anell per defecte del navegador */
    /* --sobre-clar es el text que va DAMUNT de l'accent. En tema fosc l'accent
       es clar i el text hi ha d'anar fosc; aqui l'accent es fosc i s'inverteix.
       Sense aixo el boto principal de la banda blanca seria #0b141c sobre
       #14496f: 1.3:1, illegible. 9.49:1 amb blanc. */
    --sobre-clar: #ffffff;
    /* Mateixa lògica que --camp-vora fosca: 3:1 mínim contra el fons blanc.
       #748291 dona 3.93:1. */
    --camp-vora:  #748291;
}

/* ─── HEADER ─── */
/* Capcalera repetida a totes les pagines.
   Per canviar el menu: cerca «INICI HEADER» a tots els .html */
header {
    /* Es sticky sobre bandes de colors diferents: necessita fons opac propi o
       el contingut s'hi veuria a traves en desplacar. */
    background: var(--barra-fons);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    line-height: 1.2;
    flex-shrink: 0;
}

/* El logo diu «BIMcat», no «GUBIMCat»: el text del costat es l'unica cosa que
   aporta el nom complet de l'associacio a la capcalera. */
.logo img { height: 40px; width: auto; }

.logo span {
    font-size: 0.72rem;
    color: var(--text-sec);
    letter-spacing: 0.2px;
    /* Dues linies a proposit: el bloc de marca queda mes estret que quan era
       text sol, i la barra no desborda en afegir-hi el logo. */
    max-width: 16ch;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1.4rem;
    align-items: center;
}

/* nowrap: entre 769 i ~950 px els ítems es partien («Qui / som»). */
nav ul a { font-size: 0.875rem; color: var(--text); white-space: nowrap; }
nav ul a[aria-current="page"] { color: var(--accent); font-weight: 600; }
nav ul a:hover { color: var(--accent); text-decoration: none; }

.lang-selector {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.78rem;
    border-left: 1px solid var(--border);
    padding-left: 1.25rem;
    flex-shrink: 0;
}

.lang-selector a        { color: var(--text-sec); }
.lang-selector a.active { color: var(--accent); font-weight: 700; }
.lang-selector .sep     { color: var(--text-sec); opacity: 0.45; user-select: none; }

/* ─── HERO ─── */
.hero { padding-top: 5rem; padding-bottom: 5rem; }

.hero-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 3.5rem;
    align-items: center;
}

/* Hero de pàgina interior, sense imatge (qui-som.html i les que en seguiran).
   Sense aquesta variant, la columna de 420px es reservaria buida i el text
   quedaria descentrat cap a l'esquerra amb un forat a la dreta. */
.hero-inner--sol { grid-template-columns: 1fr; }
.hero-inner--sol .hero-lead { max-width: 62ch; }

.hero-kicker {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--accent);
    margin-bottom: 1.1rem;
}

.hero h1 {
    font-family: var(--font-titol);
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.18;
    /* En el sistema de bandes el titular va amb --text, no amb --accent: guanya
       contrast i deixa l'accent per a les etiquetes i els enllacos, que es on
       ha de cridar l'atencio. */
    color: var(--text);
    max-width: 16ch;
    margin-bottom: 1.25rem;
}

.hero-lead {
    font-size: 1.05rem;
    color: var(--text-sec);
    max-width: 52ch;
    line-height: 1.75;
    margin-bottom: 2.25rem;
}

.hero-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }

.hero-img { border-radius: 10px; width: 100%; }

/* ─── BOTONS ─── */
.btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn:hover { opacity: 0.87; text-decoration: none; }

/* Sobre fons fosc el boto principal s'omple de clar amb text fosc: blanc sobre
   l'accent clar donaria 1.5:1 i seria illegible. */
.btn-primary { background: var(--accent); color: var(--sobre-clar); }
.btn-outline { border: 1.5px solid var(--accent); color: var(--accent); }

/* ─── FETS CLAU ─── */
/* Nomes dos fets. GuBIMclass n'era el tercer i ha passat a tenir banda propia:
   repetir-lo aqui hauria estat dir dues vegades el mateix a mig metre. */
.fets-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.fet-val {
    font-family: var(--font-titol);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.35rem;
    line-height: 1.1;
}

.fet-desc { font-size: 0.9rem; color: var(--text-sec); line-height: 1.6; }

/* ─── DUES COLUMNES ─── */
/* Contingut principal a l'esquerra, complementari a la dreta (per exemple
   Fer-se soci: condicions d'alta + llista de reconeixements). No confondre
   amb .graella: aqui les dues columnes tenen un paper diferent, no son
   targetes intercanviables. */
.dues-columnes {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.columna-secundaria {
    background: var(--superficie);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.75rem;
}

.columna-secundaria h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.6rem;
}

.columna-secundaria > p {
    font-size: 0.9rem;
    color: var(--text-sec);
    line-height: 1.65;
    margin-bottom: 1.1rem;
}

/* Llista de reconeixements: descriptiva, no la fitxa amb verificacio i dades
   personals que preveu la proposta de continguts (P-14, encara pendent). */
.llista-badges {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Cada títol és un requadre de color propi, no una línia amb pic davant.
   Els 8 tons són la mateixa gamma violeta (H 265-300, L 22-36%), cadascun
   verificat contra --text: el pitjor cas (el més clar dels 8) dona 6.42:1,
   molt per sobre d'AA. */
.llista-badges li {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
}

.llista-badges li:nth-child(1) { background: #342150; }
.llista-badges li:nth-child(2) { background: #3d2357; }
.llista-badges li:nth-child(3) { background: #47265e; }
.llista-badges li:nth-child(4) { background: #512965; }
.llista-badges li:nth-child(5) { background: #5d2c6d; }
.llista-badges li:nth-child(6) { background: #682f74; }
.llista-badges li:nth-child(7) { background: #75327b; }
.llista-badges li:nth-child(8) { background: #823582; }

/* ─── GALERIA DE FOTOS ─── */
/* Reunions i BIM Beer: fotografies reals, en fila. A diferencia de
   .banda-foto (un sol banner ample), aqui son diverses imatges petites amb
   la mateixa retallada. */
.galeria-fotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.galeria-fotos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

/* ─── IMATGE DE BANDA ─── */
/* Banner contingut i amb cantonades arrodonides, dins d'una banda normal.
   A diferencia de .banda--imatge (a sang, amb vel i text a sobre), aqui la
   imatge es decorativa i acompanya el text, no en fa de fons. */
.banda-foto {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    margin: 2rem 0;
}

/* ─── TARGETES ─── */
.graella {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
}

.targeta {
    background: var(--superficie);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

/* La imatge surt a sang pels tres costats de dalt de la targeta.
   ATENCIO amb aspect-ratio: laterradeningu.png porta text i aquesta proporcio
   li retalla 9.1 px per costat, amb el text comencant als 29 px. Hi cap, pero
   just. Si algu canvia la proporcio, aquella imatge perd paraules. */
.targeta img {
    width: calc(100% + 3.5rem);
    margin: -1.75rem -1.75rem 1.5rem;
    border-radius: 8px 8px 0 0;
    aspect-ratio: 76 / 30;
    object-fit: cover;
}

.targeta h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.7rem;
}

.targeta p {
    font-size: 0.9rem;
    color: var(--text-sec);
    line-height: 1.65;
    margin-bottom: 1.1rem;
}

/* Empeny l'enllac al peu de la targeta: amb textos de llargada desigual, si no,
   cada enllac queda a una alcada i la fila es veu desendrecada. */
.targeta a { margin-top: auto; font-size: 0.9rem; font-weight: 600; }

/* Quatre columnes fixes, dues a tauleta, una a mòbil. Per a conjunts de 4 o 8
   targetes, on auto-fit deixava files òrfenes (3+1, 3+3+2). */
.graella--quatre { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* Text que segueix una graella: sense això queda enganxat a les targetes. */
.graella + .banda-lead { margin-top: 2rem; }

/* Dues columnes per a targetes amb molt text (Avís legal). */
.graella--dues { grid-template-columns: repeat(2, 1fr); }

/* Galeria amb dues fotos (EUBIM 2026). */
.galeria-fotos--dues { grid-template-columns: repeat(2, 1fr); }

/* Llista de noms en columnes (coautors de GuBIMclass). */
.llista-noms {
    list-style: none;
    columns: 3 12rem;
    column-gap: 2rem;
    margin: 0.5rem 0 2rem;
    color: var(--text-sec);
}
.llista-noms li { padding: 0.2rem 0; break-inside: avoid; }

/* Estat d'una crida (Oberta / Tancada). Reaprofita la forma de .font-tag. */
.estat-crida { align-self: flex-start; }
.estat-crida--tancada { opacity: 0.6; }

/* Bloc dins d'una banda amb subtítol propi (Crides: reunions / voluntariat). */
.bloc + .bloc { margin-top: 3.5rem; }
.bloc h3.bloc-titol {
    font-family: var(--font-titol);
    font-size: 1.35rem;
    color: var(--text);
    margin-bottom: 0.75rem;
}

/* ─── LINIA DE TEMPS ─── */
/* Trajectoria (qui-som.html#trajectoria). Vora esquerra continua amb un punt
   per fet: llegible com a seqüencia, no com una graella de targetes que aqui
   no aporta res perque cada fet es una sola frase. */
.linia-temps {
    list-style: none;
    border-left: 2px solid var(--border);
    max-width: 68ch;
}

.linia-temps li {
    position: relative;
    padding: 0 0 1.75rem 1.75rem;
}

.linia-temps li:last-child { padding-bottom: 0; }

.linia-temps li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

.lt-any {
    font-family: var(--font-titol);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.lt-fet {
    font-size: 0.9rem;
    color: var(--text-sec);
    line-height: 1.65;
}

/* ─── ETIQUETA DE FONT (recurs propi / de tercers) ─── */
/* Repositori BIM: cal distingir a cop d'ull el que és nostre del que allotgem
   per utilitat (D-006, secció «Repositori BIM Catalunya»). */
.font-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-sec);
    margin-bottom: 0.9rem;
}

.font-tag--propi { color: var(--accent); border-color: var(--accent); }

/* ─── TAULA DE FITXERS ─── */
/* Fitxa per fitxer (versió, idioma, format), tal com demana la proposta de
   continguts per a les descàrregues de GuBIMclass. Taula real, no una graella
   de targetes: aquí cada fila és una dada comparable amb les altres files,
   no un bloc autònom. */
.taula-fitxers {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin: 1.5rem 0;
}

.taula-fitxers th,
.taula-fitxers td {
    text-align: left;
    padding: 0.65rem 1rem 0.65rem 0;
    border-bottom: 1px solid var(--border);
}

.taula-fitxers th {
    color: var(--text);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.taula-fitxers td { color: var(--text-sec); }

/* Nota curta sota un botó (per exemple "s'obre en una pestanya nova").
   Mateix to que .banda-lead pero mes petita i sense el marge inferior gran
   pensat per a paragrafs llargs. */
.nota-enllac {
    font-size: 0.82rem;
    color: var(--text-sec);
    margin-top: 0.75rem;
}

/* ─── UTILITAT D'ACCESSIBILITAT ─── */
/* Text present per a lectors de pantalla, ocultat visualment. No fer servir
   display:none ni visibility:hidden: aleshores tampoc el llegiria un lector. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── FOOTER ─── */
/* Peu de pagina repetit a totes les pagines.
   Per canviar el peu: cerca «INICI FOOTER» a tots els .html */
footer {
    /* Amb el degradat de D-014 el peu no necessitava fons propi. Amb bandes si:
       ve just despres de la banda blanca. */
    background: var(--banda-fosca);
    color: var(--text-sec);
    /* Iniciatives i Contacte acaben amb una banda fosca, del mateix color que
       el peu: sense aquesta vora el contingut i el peu es fonien. */
    border-top: 1px solid var(--border);
}

.footer-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
}

.footer-brand strong {
    display: block;
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.6rem;
}

.footer-brand p { font-size: 0.85rem; line-height: 1.7; }
.footer-brand a { color: var(--accent); }
.footer-brand a:hover { color: var(--accent-mid); }

footer h3 {
    color: var(--text);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 1rem;
}

footer ul { list-style: none; }
footer ul li { margin-bottom: 0.5rem; }
footer ul a { color: var(--text-sec); font-size: 0.85rem; }
footer ul a:hover { color: var(--text); text-decoration: none; }

.footer-bottom {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ─── FORMULARI ─── */
/* Contacte (D-022). Sense backend: no hi ha res a protegir amb rate limiting
   ni honeypot perque no hi ha cap servidor que processi l'enviament — el
   "submit" nomes construeix un mailto: en el navegador de qui l'envia. */
.formulari {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    max-width: 32rem;
}

.camp { display: flex; flex-direction: column; gap: 0.4rem; }

.camp label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.camp input,
.camp textarea {
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--superficie);
    border: 1px solid var(--camp-vora);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
}

.camp textarea { resize: vertical; min-height: 8rem; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    /* La imatge del hero passa a sota del text abans que el titular s'estrenyi
       massa. */
    .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero h1 { max-width: 22ch; }

    /* Mateixa lògica que el hero: la columna secundària passa a sota abans
       que les dues es quedin sense espai per llegir-se. */
    .dues-columnes { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
    .banda { padding: 3.25rem 1.25rem; }

    /* A aquesta amplada el text ocupa tota l'amplada de la pantalla i un vel
       horitzontal deixa de protegir-lo: passa a vel pla i opac sobre tota la
       fotografia. Es el punt on aquest disseny es trencaria si no es vigila. */
    .banda--imatge {
        background-image:
            linear-gradient(rgb(var(--fosc-rgb) / 0.9), rgb(var(--fosc-rgb) / 0.9)),
            url('../img/banda-gubimclass.jpg');
    }

    /* Mateix problema, mateixa solucio, per a la banda de fons de Fer-se soci. */
    .banda--imatge-soci {
        background-image:
            linear-gradient(rgb(var(--fosc-rgb) / 0.9), rgb(var(--fosc-rgb) / 0.9)),
            url('../img/fer-se-soci.jpg');
    }

    .fets-inner { grid-template-columns: 1fr; gap: 2rem; }

    /* Fotos de Reunions i BIM Beer: en una columna, cadascuna es llegeix
       millor que aixafades a un terç d'amplada de pantalla. */
    .galeria-fotos { grid-template-columns: 1fr; }

    /* A aquesta amplada el logo i el subtitol no hi caben junts amb el selector
       d'idioma; el logo sol ja identifica l'associacio. */
    .logo span { display: none; }

    .footer-inner { grid-template-columns: 1fr; }

}

/* ─── MENÚ MÒBIL (fins a 960 px) ───
   El punt de tall era 768 px, però entre 769 i ~950 px la barra no hi cabia.
   Sense JS (botó amb hidden) la llista queda dins del flux, a sota del logo,
   i la capçalera deixa de ser sticky: abans quedava flotant i tapava ~280 px
   de pàgina de manera permanent. Amb JS, desplegable absolut com sempre. */
@media (max-width: 960px) {
    .header-inner { flex-wrap: wrap; height: auto; min-height: 64px; row-gap: 0; }
    /* La fila del logo manté els 64 px quan la llista (sense JS) passa a sota. */
    .logo { min-height: 64px; }
    header:has(.menu-toggle[hidden]) { position: static; }

    nav { order: 3; flex-basis: 100%; }
    nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 0.75rem;
    }
    nav ul a {
        display: block;
        padding: 0.65rem 0;
        border-top: 1px solid var(--border);
    }

    .menu-toggle:not([hidden]) { display: inline-block; margin-left: auto; }
    .menu-toggle:not([hidden]) + nav ul {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--barra-fons);
        border-bottom: 1px solid var(--border);
        padding: 0.25rem 1.5rem 0.75rem;
    }
    /* nav ul porta display:flex, que guanyaria a l'atribut hidden. */
    nav ul[hidden] { display: none; }

    .graella--quatre { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .graella--quatre,
    .graella--dues,
    .galeria-fotos--dues { grid-template-columns: 1fr; }
}


/* ─── AVÍS I «ARA MATEIX» (2026-09-24) ───
   Crides visibles d'entrada. Accent sobre fosc / fosc sobre accent: 8.58:1. */
.avis-barra {
    background: var(--accent);
    text-align: center;
    padding: 0.55rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.avis-barra a { color: var(--sobre-clar); text-decoration: none; }
.avis-barra a:hover { text-decoration: underline; }

.ara-mateix {
    max-width: var(--wrap);
    margin: 3.5rem auto 0;
}
.hero .ara-titol {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
    font-family: inherit;
}
.ara-llista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.ara-peca {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: 1.25rem 1.25rem 1.4rem;
    border: 2px solid var(--accent);
    border-radius: 10px;
    background: var(--superficie);
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.ara-peca:hover { background: rgb(127 182 227 / 0.14); transform: translateY(-2px); }
.ara-estat {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sobre-clar);
    background: var(--accent);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}
.ara-nom { color: var(--text); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.ara-desc { color: var(--text-sec); font-size: 0.9rem; }
.ara-desc::after { content: " →"; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .ara-peca { transition: none; }
    .ara-peca:hover { transform: none; }
}

/* Tauleta: dues columnes. Mòbil: fila lliscant amb el dit, i la peça
   següent treu el cap perquè s'entengui que n'hi ha més. */
@media (max-width: 960px) {
    .ara-llista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ara-mateix { margin-top: 2.5rem; }
    .ara-llista {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        margin: 0 -1.25rem;
        padding: 0 1.25rem 0.75rem;
        scroll-padding: 0 1.25rem;
    }
    .ara-llista li { flex: 0 0 82%; scroll-snap-align: start; }
    /* A la portada, la imatge decorativa del bloc d'entrada (alt buit) empenyia
       les crides ~400 px avall. Al mòbil les crides tenen prioritat. */
    .hero:has(.ara-mateix) .hero-img { display: none; }
}

/* ─── ACCESSIBILITAT ─── */
/* Anell de focus per a qui navega amb teclat. Com que --focus es redefineix
   dins de la capcalera i de la banda blanca, l'anell hi agafa sol el to fosc
   sobre blanc. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ─── MENU MOBIL ─── */
/* Millora progressiva: el boto neix amb l'atribut hidden i nomes el JS l'hi
   treu. Sense JS no hi ha boto i la llista es mostra desplegada, que es
   preferible a quedar-se sense cap navegacio. */
.menu-toggle {
    display: none;
    font: inherit;
    font-size: 0.875rem;
    color: var(--text);
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
}

.menu-toggle[hidden] { display: none; }