/* ─────────────────────────────────────────────────────────────────────────
 * SISTEMA JOAN SANFELIU · components compartits · v3 (24/09/2026)
 * Original: sanfeliu-agencia/marca/sistema/sistema.css — no editar les còpies.
 *
 * Les peces que han de ser idèntiques a joansanfeliu.com, agencia. i
 * formacio.:
 *
 *   0. la caixa,
 *   1. el logotip (bloqueig nom + filet + descriptor),
 *   2. la capçalera i el menú (barra flotant, desplegable, calaix del mòbil),
 *   3. els botons i les bandes,
 *   4. el peu (negre, amb el logotip a tot l'ample),
 *   5. el vocabulari de la v2: titulars de dues línies, marcador de secció,
 *      índex mono, etiquetes, graella de filets, targeta, plecs (FAQ), cinta,
 *   6. les xifres.
 *
 * Depèn de `tokens.css`, que s'ha d'importar abans.
 *
 * Es manté de la v1: cap animació d'entrada (res arrenca a opacitat 0, ni en
 * carregar ni en fer scroll), cap degradat, cap foto de banc, res centrat.
 * Canvia: controls en píndola, blocs de cantonada gran, una sola ombra (la
 * de les peces que suren) i el vidre de la barra.
 * ───────────────────────────────────────────────────────────────────────── */

/* L'atribut `hidden` ha de guanyar sempre: les peces del sistema porten
   `display: grid|flex` i, sense això, un panell amagat es continuaria veient. */
[hidden] { display: none !important; }

/* ═══ 0 · La caixa ═══════════════════════════════════════════════════════
 * L'amplada de tot. La primera lletra del titular cau sota la primera del
 * logotip: la barra flotant surt per fora de la caixa (vegeu 2), no la caixa
 * per dins de la barra.
 */
.caixa {
  width: 100%;
  max-width: var(--caixa);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* ═══ 1 · Logotip ═════════════════════════════════════════════════════════
 * Un sol logotip: SANFELIU en Bodoni Moda, caixa alta, tracking +140. El
 * descriptor (Consultoria · Formació) va darrere d'un filet vertical, en
 * Archivo petit. joansanfeliu.com, que és l'arrel, no en porta.
 * El logotip no baixa mai d'1rem: el Bodoni és de traç fi.
 */
.logotip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.logotip:hover { text-decoration: none; }

.logotip__nom {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-logotip);
  /* El tracking deixa un buit a la dreta de l'última lletra; això el retalla
     perquè el filet quedi a la mateixa distància que a l'esquerra. */
  margin-right: calc(var(--ls-logotip) * -1);
}
.logotip__filet {
  width: 1px;
  height: 1.15em;
  background: var(--filet-fort);
  flex: none;
}
.logotip__desc {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--gris);
}

/* Al peu, a tot l'ample: el moment de marca de cada pàgina. Amb tracking
   0,1em, «SANFELIU» fa 5,53 vegades el cos de la lletra; a 18 cqi de la caixa
   del peu (container) les vuit lletres omplen la línia sense tallar-se. */
.logotip--gran { display: block; }
.logotip--gran .logotip__nom {
  display: block;
  font-size: 16.4vw;
  line-height: .8;
  letter-spacing: .1em;
  margin-right: -.1em;
}
.peu > .caixa { container-type: inline-size; }
.peu .logotip--gran .logotip__nom { font-size: 18cqi; }

@media (max-width: 480px) {
  .capcalera .logotip__filet, .capcalera .logotip__desc,
  .calaix .logotip__filet, .calaix .logotip__desc { display: none; }
  .capcalera .logotip__nom, .calaix .logotip__nom { font-size: 1rem; }
}

/* ═══ 2 · Capçalera i menú ════════════════════════════════════════════════
 * Una barra que sura. A dalt de tot és transparent i sense contorn, com si
 * fos part de la pàgina; en fer scroll es converteix en una píndola de paper
 * amb vidre, filet i l'ombra de les peces flotants. La píndola s'eixampla
 * per fora de la caixa (margin negatiu) perquè el logotip continuï caient a
 * sobre de la primera lletra del contingut.
 *
 * El canvi el fa una animació lligada al scroll (CSS, sense JS). Als
 * navegadors que no la tenen, la píndola hi és sempre: mai no queda a mitges.
 */
.capcalera {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: .625rem;
  pointer-events: none;
}
.capcalera > .caixa { pointer-events: auto; }
.capcalera__barra {
  --pindola-dins: clamp(.85rem, 1.6vw, 1.35rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--capcalera-alt);
  pointer-events: auto;
  position: relative;
  isolation: isolate;
}
/* La cara de la píndola va en un pseudoelement: així el vidre no converteix
   la barra en el bloc contenidor dels fills fixos (el calaix, els menús). */
.capcalera__barra::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc(var(--marge) - var(--pindola-dins));
  border-radius: var(--r-pindola);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--filet);
  box-shadow: var(--ombra-flota);
}
@supports (animation-timeline: scroll()) {
  .capcalera__barra::before {
    animation: capcalera-sura linear both;
    animation-timeline: scroll(root);
    animation-range: 0 5rem;
  }
  @keyframes capcalera-sura {
    from {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}
.capcalera .logotip { margin-right: auto; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav > a:not(.boto),
.nav > button:not(.boto),
.nav .desplegable > summary,
.nav .desplegable__disparador {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--gris-fort);
  background: none;
  border: 0;
  padding: .55rem .85rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--r-pindola);
  transition: color var(--transicio), background-color var(--transicio), box-shadow var(--transicio);
}
.nav > a:not(.boto):hover,
.nav > button:not(.boto):hover,
.nav .desplegable > summary:hover,
.nav .desplegable__disparador:hover {
  color: var(--tinta);
  background: var(--paper-2);
}
/* La pàgina actual: una píndola de filet, sense color. */
.nav > a:not(.boto)[aria-current='page'],
.nav > button:not(.boto)[aria-current='page'],
.nav .desplegable > summary[aria-current='page'] {
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--filet-fort);
}
.nav .boto { margin-left: .6rem; }
.nav__separador { width: 1px; height: 1.25rem; background: var(--filet-fort); margin-inline: .4rem; flex: none; }

/* Desplegable. Amb <details> funciona sense JS; amb un botó + [data-obert]
   funciona igual a React. */
.desplegable { position: relative; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after,
.desplegable__disparador::after {
  content: '';
  width: .38em;
  height: .38em;
  margin-left: .1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform var(--transicio);
}
.desplegable[open] > summary::after,
.desplegable__disparador[aria-expanded='true']::after { transform: translateY(.05em) rotate(-135deg); }
/* El `.nav` va davant a posta: la regla base `.nav > button:not(.boto)` pesa
   (0,2,1) i sense el `.nav` aquesta en pesaria (0,2,0). */
.desplegable[open] > summary,
.nav .desplegable__disparador[aria-expanded='true'],
.desplegable__disparador[aria-expanded='true'] {
  color: var(--tinta);
  background: var(--paper-2);
}
.desplegable__llista {
  position: absolute;
  top: calc(100% + .75rem);
  left: 0;
  width: 26rem;
  max-width: calc(100vw - 2 * var(--marge));
  z-index: 40;
}
.desplegable__llista--estret { width: 15rem; }

/* La cara del panell. Va a part de la posició perquè també la puguin fer
   servir els menús que un component porta a un portal (Radix). */
.desplegable__llista,
.menu-flotant {
  background: var(--paper);
  border: 1px solid var(--filet);
  border-radius: var(--r-targeta);
  box-shadow: var(--ombra-flota);
  padding: .45rem;
  margin: 0;
  list-style: none;
}
.desplegable__llista a,
.desplegable__llista button,
.menu-flotant a,
.menu-flotant button {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .5rem;
  align-items: baseline;
  width: 100%;
  font: inherit;
  font-size: .9375rem;
  line-height: 1.35;
  text-align: left;
  color: var(--tinta);
  background: none;
  border: 0;
  cursor: pointer;
  padding: .6rem .75rem;
  text-decoration: none;
  border-radius: calc(var(--r-targeta) - .45rem);
  transition: background-color var(--transicio);
}
.desplegable__llista--estret a,
.menu-flotant--pla a,
.menu-flotant--pla button { grid-template-columns: 1fr; }
.menu-flotant--icona a,
.menu-flotant--icona button { grid-template-columns: 1.15rem 1fr; align-items: center; }
.desplegable__llista a:hover,
.desplegable__llista button:hover,
.menu-flotant a:hover,
.menu-flotant button:hover,
.menu-flotant [data-highlighted],
.desplegable__llista a[aria-current='page'] { background: var(--paper-2); outline: none; }
.desplegable__llista .num,
.menu-flotant .num { font-size: 1rem; color: var(--gris); }
.desplegable__llista small,
.menu-flotant small { display: block; color: var(--gris); font-size: .8125rem; margin-top: .1rem; }

/* Sumari compacte: la llista numerada del calaix. Files reglades. */
.sumari { list-style: none; margin: 0; padding: 0; }
.sumari li { margin: 0; border-top: 1px solid var(--filet); }
.sumari a {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .5rem;
  align-items: baseline;
  padding: .6rem 0;
  text-decoration: none;
  font-size: .9375rem;
}
.sumari a:hover { color: var(--terra); }
.sumari .num { font-size: 1rem; color: var(--gris); }
.sumari small { display: block; color: var(--gris); font-size: .8125rem; margin-top: .1rem; }

/* Botó del calaix: un cercle amb dues barres. */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--filet-fort);
  background: var(--paper);
  cursor: pointer;
  border-radius: 50%;
  flex: none;
  transition: background-color var(--transicio);
}
.burger:hover { background: var(--paper-2); }
.burger__l {
  display: block;
  width: 16px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--tinta);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.burger--tanca .burger__l:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger--tanca .burger__l:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: flex; }
}

/* Calaix lateral, amb les cantonades de dins arrodonides. */
.calaix {
  position: fixed;
  inset: .5rem .5rem .5rem auto;
  z-index: 60;
  width: min(23rem, calc(100vw - 1rem));
  display: flex;
  flex-direction: column;
  padding: .75rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border: 1px solid var(--filet);
  border-radius: var(--r-targeta);
  box-shadow: var(--ombra-flota);
  transform: translateX(calc(100% + 1rem));
  transition: transform .34s cubic-bezier(.2,.7,.3,1);
  overflow-y: auto;
  visibility: hidden;
}
.calaix[data-obert] { transform: translateX(0); visibility: visible; }
.calaix__cap { display: flex; align-items: center; justify-content: space-between; min-height: var(--capcalera-alt); }
.calaix__cap .burger { display: flex; }
.calaix__nav { margin-top: 1rem; }
.calaix__titol { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--gris-suau); margin: 0 0 .6rem; }
.calaix__llista { display: flex; flex-direction: column; margin-top: 1.5rem; border-top: 1px solid var(--filet); }
.calaix__llista a,
.calaix__llista button {
  font: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.02em;
  text-align: left;
  text-decoration: none;
  color: var(--tinta);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet);
  cursor: pointer;
  padding: .75rem 0;
}
.calaix__llista a[aria-current='page'],
.calaix .sumari a[aria-current='page'] { color: var(--terra); }
.calaix__peu { margin-top: auto; padding-top: 2rem; }
.calaix__peu .boto { width: 100%; }
.calaix__idioma { margin: 1rem 0 0; font-size: .875rem; }
.calaix__idioma a { color: var(--gris); }

.fosc {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--tinta) 32%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.fosc[data-obert] { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .calaix, .fosc, .burger__l { transition: none; }
}

/* ═══ 3 · Botons ══════════════════════════════════════════════════════════
 * v3 (24/09/2026): simples. Un rectangle de cantonada suau, text i prou: en
 * Joan va trobar els de la v2 (píndola amb cercle i fletxa) «calcats» de
 * northscale. El principal és tinta plena; el secundari, contorn. El terra no
 * omple mai un botó.
 */
.boto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .7rem 1.35rem;
  font: inherit;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  border-radius: var(--r-control);
  border: 1px solid var(--filet-fort);
  background: var(--paper);
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transicio), color var(--transicio), border-color var(--transicio);
}
.boto:hover { text-decoration: none; border-color: var(--tinta); }
.boto--principal { background: var(--tinta); color: var(--paper); border-color: var(--tinta); }
.boto--principal:hover { background: color-mix(in srgb, var(--tinta) 84%, var(--paper)); border-color: transparent; }
.boto--secundari:hover { background: var(--paper-2); }
.boto--discret { border-color: var(--filet); color: var(--gris-fort); }
.boto--discret:hover { background: var(--paper-2); color: var(--tinta); border-color: var(--filet-fort); }
.boto--petit { min-height: 2.5rem; padding: .5rem 1rem; font-size: .875rem; }
.boto--gran { min-height: 3.25rem; padding: .8rem 1.6rem; font-size: 1rem; }
.boto--nu { }
.boto[disabled], .boto[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }

/* ── Bandes ───────────────────────────────────────────────────────────────
 * La banda fosca és quasi negra, de vora a vora, i hi s'inverteix tot. El
 * terra NO hi va: l'èmfasi el fa el to (blanc ple contra blanc al 62 %).
 */
.banda { background: var(--grafit); color: var(--sobre-fosc); }
/* Doble classe a posta: el minificador de Docusaurus (cssnano, mergeRules)
   ajunta regles i pot deixar `.banda` DARRERE d'aquesta; amb més
   especificitat, la banda clara guanya sigui quin sigui l'ordre. */
.banda--paper2, .banda.banda--paper2 { background: var(--paper-2); color: var(--tinta); }
.banda ::selection { background: var(--paper); color: var(--tinta); }

.banda:not(.banda--paper2) .boto { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); }
.banda:not(.banda--paper2) .boto:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.banda:not(.banda--paper2) .boto--principal { background: var(--paper); color: var(--tinta); border-color: var(--paper); }
.banda:not(.banda--paper2) .boto--principal:hover { background: color-mix(in srgb, var(--paper) 88%, var(--grafit)); }

.botonera { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Enllaç de text amb fletxa, per a «Veure →». */
.fletxa { text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap; }
.fletxa::after { content: '→'; display: inline-block; margin-left: .3em; transition: transform var(--transicio); }
.fletxa:hover::after { transform: translateX(3px); }

/* Fila-enllaç: la llista de destinacions amb un cercle de fletxa a la
   dreta (northscale ho fa amb «Serveis» i «Com treballem»). */
.files-enllac { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.files-enllac li { margin: 0; border-bottom: 1px solid var(--filet); }
.files-enllac a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em;
  text-decoration: none; color: inherit;
}
.files-enllac a::after {
  content: '→'; flex: none; font-size: 1.1rem; color: var(--gris);
  transition: transform var(--transicio), color var(--transicio);
}
.files-enllac a:hover::after { transform: translateX(3px); color: var(--tinta); }
.files-enllac small { display: block; font-size: .875rem; font-weight: 400; color: var(--gris); letter-spacing: 0; margin-top: .15rem; }
.banda .files-enllac, .banda .files-enllac li { border-color: var(--sobre-fosc-filet); }
.banda .files-enllac a::after { color: var(--sobre-fosc-gris); }
.banda .files-enllac a:hover::after { color: var(--paper); }
[dir='rtl'] .files-enllac a::after { content: '←'; }

/* ═══ 4 · Peu ═════════════════════════════════════════════════════════════
 * Negre, de vora a vora. A dalt, el logotip a tot l'ample (`.logotip--gran`);
 * a sota, el mapa del lloc en columnes i la línia legal.
 */
.peu {
  background: var(--grafit);
  color: var(--sobre-fosc);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.25rem);
}
.peu ::selection { background: var(--paper); color: var(--tinta); }
.peu .logotip--gran { color: var(--paper); }
.peu a { text-decoration: none; color: var(--sobre-fosc); transition: color var(--transicio); }
.peu a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.peu__graella {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--sobre-fosc-filet);
}
.peu__titol {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--sobre-fosc-gris);
  font-weight: 400;
  margin: 0 0 1rem;
}
.peu__graella ul { list-style: none; padding: 0; margin: 0; }
.peu .gris-fort, .peu .discret { color: var(--sobre-fosc-gris); }
@media (max-width: 720px) { .peu__graella { grid-template-columns: 1fr 1fr; } }

/* ═══ 5 · El vocabulari de la v2 ══════════════════════════════════════════ */

/* Titulars. Archivo 500, molt grans i atapeïts. La segona línia (`.segona`)
   baixa a pes 400, en itàlica i en gris fort: és la frase que matisa. */
.titol-portada,
.titol-seccio {
  font-family: var(--sans);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.titol-portada { font-size: var(--t-display); line-height: .92; letter-spacing: var(--ls-display); }
.titol-seccio { font-size: var(--t-titular); line-height: var(--t-titular-lh); letter-spacing: var(--ls-titular); }
.segona {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--gris-fort);
  /* L'itàlica cau cap a la dreta: amb el tracking negatiu, sense aquest
     marge l'última lletra toca el límit de la caixa. */
  padding-right: .06em;
}
.banda:not(.banda--paper2) .segona, .peu .segona { color: var(--sobre-fosc-gris); }
/* v3: el color de la marca, una sola vegada per pantalla: la segona línia del
   titular de portada (l'«una paraula en itàlica» del manual). Mai sobre banda fosca. */
.segona--terra { color: var(--terra); }

/* Marcador de secció: xifra en Bodoni + etiqueta en caixa baixa + filet.
   Substitueix les etiquetes en majúscules amb tracking, que són el clixé. */
.marcador {
  display: flex; align-items: baseline; gap: .75rem;
  font-size: .9375rem; color: var(--gris);
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}
.marcador .num { font-size: 1.375rem; color: var(--tinta); }
.marcador::after { content: ''; flex: 1; border-top: 1px solid var(--filet); align-self: center; }
.banda:not(.banda--paper2) .marcador { color: var(--sobre-fosc-gris); }
.banda:not(.banda--paper2) .marcador .num { color: var(--paper); }
.banda:not(.banda--paper2) .marcador::after { border-color: var(--sobre-fosc-filet); }

/* Índex i dades tècniques en mono: «01», «eu-west-1», «SAP B1 → API». */
.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  color: var(--gris-suau);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.banda:not(.banda--paper2) .mono { color: var(--sobre-fosc-gris); }

/* Etiquetes: píndoles de filet amb text mono en caixa alta. */
.etiquetes { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.etiqueta, .etiquetes > li, .etiquetes > span {
  display: inline-flex; align-items: center;
  margin: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: .38rem .75rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pindola);
  color: var(--gris-fort);
  white-space: nowrap;
}
.banda:not(.banda--paper2) .etiqueta,
.banda:not(.banda--paper2) .etiquetes > li,
.banda:not(.banda--paper2) .etiquetes > span { border-color: color-mix(in srgb, var(--paper) 20%, transparent); color: var(--sobre-fosc-gris); }

/* Graella de filets: un bloc de cantonada gran partit en cel·les per filets
   d'1 px. És la targeta del sistema: cap targeta solta amb ombra. */
.quadricula {
  --quadricula-col: 3;
  display: grid;
  grid-template-columns: repeat(var(--quadricula-col), minmax(0, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--r-bloc);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.quadricula > * {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  min-width: 0;
}
.quadricula--1 { --quadricula-col: 1; }
.quadricula--2 { --quadricula-col: 2; }
.quadricula--4 { --quadricula-col: 4; }
.banda--paper2 .quadricula > * { background: var(--paper); }
.banda:not(.banda--paper2) .quadricula { background: var(--sobre-fosc-filet); border-color: var(--sobre-fosc-filet); }
.banda:not(.banda--paper2) .quadricula > * { background: var(--grafit); }
@media (max-width: 900px) { .quadricula, .quadricula--4 { --quadricula-col: 2; } }
@media (max-width: 600px) { .quadricula, .quadricula--2, .quadricula--4 { --quadricula-col: 1; } }

/* Cel·la que és un enllaç sencer: el cercle de fletxa a dalt a la dreta. */
.cella-enllac { position: relative; display: flex; flex-direction: column; gap: .75rem; text-decoration: none; color: inherit; transition: background-color var(--transicio); }
.cella-enllac::after {
  content: '→'; position: absolute; top: clamp(1.25rem, 2.6vw, 2.25rem); right: clamp(1.25rem, 2.6vw, 2.25rem);
  font-size: 1.1rem; color: var(--gris); transition: transform var(--transicio), color var(--transicio);
}
.cella-enllac:hover { background: var(--paper-2); }
.cella-enllac:hover::after { transform: translateX(3px); color: var(--tinta); }
.banda:not(.banda--paper2) .cella-enllac::after { color: var(--sobre-fosc-gris); }
.banda:not(.banda--paper2) .cella-enllac:hover { background: color-mix(in srgb, var(--paper) 4%, var(--grafit)); }
[dir='rtl'] .cella-enllac::after { right: auto; left: clamp(1.25rem, 2.6vw, 2.25rem); content: '←'; }

/* Targeta solta (quan no hi ha graella): filet i cantonada, sense ombra. */
.targeta { border: 1px solid var(--filet); border-radius: var(--r-targeta); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper); }
.banda:not(.banda--paper2) .targeta { border-color: var(--sobre-fosc-filet); background: transparent; }

/* Plecs (preguntes freqüents): <details> amb un cercle «+» que gira a «×».
   El text de la resposta és al DOM encara que estigui tancat. */
.plecs { border-top: 1px solid var(--filet); margin: 0; }
.plec { border-bottom: 1px solid var(--filet); }
.plec > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.15rem, 2.4vw, 1.6rem) 0;
  list-style: none; cursor: pointer;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.35rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3;
}
.plec > summary::-webkit-details-marker { display: none; }
.plec > summary::after {
  content: '+'; flex: none; font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--gris);
  transition: transform var(--transicio), color var(--transicio);
}
.plec > summary:hover::after { color: var(--tinta); }
.plec[open] > summary::after { transform: rotate(45deg); }
.plec__resposta { padding: 0 0 clamp(1.25rem, 2.6vw, 1.75rem); max-width: 68ch; color: var(--gris); }
.plec__resposta > :last-child { margin-bottom: 0; }
.banda:not(.banda--paper2) .plecs, .banda:not(.banda--paper2) .plec { border-color: var(--sobre-fosc-filet); }
.banda:not(.banda--paper2) .plec > summary::after { color: var(--sobre-fosc-gris); }
.banda:not(.banda--paper2) .plec__resposta { color: var(--sobre-fosc-gris); }

/* Cinta: una fila que passa, per a logotips o noms tècnics. És moviment
   continu, no una entrada: el contingut hi és des del primer fotograma. El
   contingut va DUES vegades (la segona amb aria-hidden) perquè el bucle no
   salti. Amb «reduir moviment», s'atura i es pot desplaçar amb el dit. */
.cinta {
  --cinta-durada: 60s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cinta__pista { display: flex; width: max-content; animation: cinta var(--cinta-durada) linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__grup { display: flex; align-items: center; flex: none; gap: clamp(2rem, 4vw, 3.5rem); padding-right: clamp(2rem, 4vw, 3.5rem); list-style: none; margin: 0; padding-left: 0; }
.cinta__grup > li { margin: 0; flex: none; }
@keyframes cinta { to { transform: translateX(-50%); } }
[dir='rtl'] .cinta__pista { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; }
  .cinta__pista { animation: none; }
}

/* ═══ 5b · Formulari ══════════════════════════════════════════════════════
 * Un sol formulari per a les tres webs (v3, 24/09/2026, en Joan: «vull els
 * formularis unificats»). Marcatge:
 *
 *   <form class="formulari">
 *     <div class="camp--doble"> <label class="camp"><span>Nom</span><input …></label> … </div>
 *     <fieldset class="camp"><legend>Què necessiteu?</legend>
 *       <div class="xips"><label><input type="radio" …><span>Una web</span></label> …</div>
 *     </fieldset>
 *     <label class="camp"><span>Missatge</span><textarea …></textarea></label>
 *     <label class="check"><input type="checkbox" …><span>Accepto…</span></label>
 *     <div class="formulari__peu"><button class="boto boto--principal">Enviar</button>
 *       <p class="formulari__estat" aria-live="polite"></p></div>
 *     <p class="formulari__legal">…</p>
 *   </form>
 */
.formulari { display: grid; gap: 1.1rem; max-width: 46rem; }
.camp { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.camp > span, .camp > legend {
  font-size: .875rem; font-weight: 500; letter-spacing: -.005em; color: var(--tinta); padding: 0;
}
.camp > span small, .camp > legend small { font-weight: 400; color: var(--gris); }
.camp input, .camp textarea, .camp select {
  width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--paper); border: 1px solid var(--filet-fort); border-radius: var(--r-control);
  padding: .75rem .95rem; min-height: 3rem; outline: none; appearance: none;
  transition: border-color var(--transicio), box-shadow var(--transicio);
}
.camp textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.camp select {
  padding-right: 2.6rem; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1rem center;
}
.camp input::placeholder, .camp textarea::placeholder { color: var(--gris-suau); }
.camp input:focus, .camp textarea:focus, .camp select:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 9%, transparent); }
.camp[data-error] input, .camp[data-error] textarea { border-color: var(--terra); }
.camp--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.camp--doble > * { min-width: 0; }
@media (max-width: 560px) { .camp--doble { grid-template-columns: 1fr; } }

/* Opcions en xips: ràdio o casella, amb la cara d'una etiqueta que es tria. */
.xips { display: flex; flex-wrap: wrap; gap: .45rem; }
.xips label { position: relative; cursor: pointer; }
.xips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.xips span {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem .95rem;
  border: 1px solid var(--filet-fort); border-radius: var(--r-pindola);
  font-size: .9375rem; color: var(--gris-fort); background: var(--paper);
  transition: background-color var(--transicio), color var(--transicio), border-color var(--transicio);
}
.xips label:hover span { border-color: var(--tinta); color: var(--tinta); }
.xips input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--paper); }
.xips input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }

/* Casella de consentiment. */
.check { display: grid; grid-template-columns: 1.15rem 1fr; gap: .7rem; align-items: start; font-size: .875rem; color: var(--gris-fort); cursor: pointer; max-width: 62ch; }
.check input { appearance: none; margin: .15rem 0 0; width: 1.1rem; height: 1.1rem; border: 1px solid var(--tinta); border-radius: 4px; display: grid; place-content: center; cursor: pointer; }
.check input::before { content: ''; width: .55rem; height: .55rem; border-radius: 2px; background: var(--tinta); transform: scale(0); transition: transform .12s ease; }
.check input:checked::before { transform: scale(1); }

.formulari__peu { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .4rem; }
.formulari__estat { margin: 0; font-size: .9375rem; min-height: 1.4em; }
.formulari__estat[data-tipus='error'] { color: var(--terra); }
.formulari__estat[data-tipus='ok'] { color: var(--ok); font-weight: 500; }
.formulari__legal { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--gris); max-width: 68ch; }
.formulari__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* La resposta quan s'ha enviat: substitueix el formulari. */
.formulari__fet { display: grid; gap: .75rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--filet); border-radius: var(--r-targeta); background: var(--paper-2); max-width: 46rem; }
.formulari__fet strong { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.formulari__fet p { margin: 0; color: var(--gris-fort); }

.banda:not(.banda--paper2) .camp > span, .banda:not(.banda--paper2) .camp > legend { color: var(--paper); }

/* ═══ 6 · Xifres ══════════════════════════════════════════════════════════
 * L'únic lloc, a part del logotip, on es veu el Bodoni. Sempre més grans del
 * que caldria. Només xifres: si el que destaques és un nom, és un titular.
 */
.xifra, .num {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.xifra { display: block; font-size: var(--t-xifra); }
.num { display: inline-block; }

/* ═══ Enllaç de salt ══════════════════════════════════════════════════════ */
.salta { position: absolute; left: -9999px; background: var(--tinta); color: var(--paper); padding: .75rem 1rem; z-index: 99; border-radius: var(--r-pindola); }
.salta:focus { left: 1rem; top: 1rem; }