/* dcmargentona.com — sistema visual.
 *
 * ⚠️ TOT el CSS viu aquí. La CSP porta `style-src 'self'`: ni <style> ni
 *    style="...". Si la pàgina es veu trencada, la reparació NO és afegir
 *    'unsafe-inline' a la CSP: és treure l'estil de línia.
 *
 * La paleta surt de la web d'avui, mesurada el 2026-09-04 amb
 * `magick ... -colors 8 -unique-colors`. Contrast calculat sobre --fons:
 *   --tinta      7,6:1   ✔ text de cos
 *   --cuir-text  5,0:1   ✔ text secundari
 *   --cuir-fosc  4,0:1   ✘ MAI per a text: només accents i decoració
 *   --cuir       3,1:1   ✘ només elements no textuals (els punts de la cronologia)
 *   --pedra 1,6:1 · --sorra 1,7:1   ✘ només vores i fons
 *   --fons-atenuat  4,9:1 sobre --tinta  ✔ text secundari NOMÉS sobre la capçalera
 *                   (1,6:1 sobre --fons: mai sobre crema; ho vigila el test)
 *
 * Els colors del B2B (redisseny del 2026-09-28; calculats amb la fórmula de test_contrast.py). NOMÉS
 * els fa servir b2b.css: la web i el DAM no en pinten res.
 *   --superficie    #FFFFFF  targetes i panells: --tinta hi fa 8,53:1, --cuir-text 5,58:1
 *   --verd-text     6,58:1 sobre --verd-fons · 7,87:1 sobre blanc · 7,05:1 sobre --fons   ✔ text
 *   --ambre-text    6,64:1 sobre --ambre-fons · 7,93:1 sobre blanc · 7,10:1 sobre --fons  ✔ text
 *   --vermell-text  6,68:1 sobre --vermell-fons · 8,51:1 sobre blanc · 7,62:1 sobre --fons ✔ text (i fons del botó destructiu)
 *   --gris-text     6,19:1 sobre --gris-fons · 7,56:1 sobre blanc · 6,77:1 sobre --fons    ✔ text
 *   --verd-fons · --ambre-fons · --vermell-fons · --gris-fons     ✘ només fons d'etiqueta
 *   --verd-vora 5,13:1 · --ambre-vora 4,05:1 · --vermell-vora 5,94:1 · --gris-vora 3,68:1 sobre blanc
 *                                                                   ✘ només vores (≥ 3:1), MAI text
 *
 * ⚠️ Ho guarda tests/test_contrast.py. El 2026-09-04 vaig escriure aquest avís
 *    i tot seguit vaig fer servir --cuir-fosc per als països, els subtítols de
 *    la cronologia i el correu. El test hi és perquè no torni a passar.
 */

:root {
  --fons:      #F5F2ED;
  --tinta:     #574A41;
  --pedra:     #CCC4B7;
  --sorra:     #C7B8A5;
  --cuir:      #9A8876;
  --cuir-fosc: #8B725F;   /* 4,0:1 — NOMÉS accents i decoració, MAI text */
  --cuir-text: #796453;   /* 5,0:1 — el mateix to, apte per a text petit */
  --fons-atenuat: #CCC4B7; /* 4,9:1 sobre --tinta — els idiomes inactius de la capçalera */

  --superficie:   #FFFFFF;
  --verd-text:    #2E5B37;  --verd-fons:    #E2EEE1;  --verd-vora:    #3F7A4A;
  --ambre-text:   #6E4A0E;  --ambre-fons:   #F6EAD0;  --ambre-vora:   #A8741C;
  --vermell-text: #8C2A20;  --vermell-fons: #F6DFDA;  --vermell-vora: #B23A2E;
  --gris-text:    #5A534D;  --gris-fons:    #ECE8E2;  --gris-vora:    #8C847C;

  /* ⚠️ Pila de sistema, provisional. La tipografia de marca està pendent de
     decisió d'Andreu; el logotip ja no en depèn perquè és un SVG. */
  --serif: Georgia, "Times New Roman", "Liberation Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pas: 1.5rem;
  --ample: 68rem;
  --ample-text: 34rem;
}

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

/* Peu al fons de la finestra encara que la pàgina sigui curta: sense això,
   /entrar/ i l'avís legal deixen el peu surant al mig de la pantalla. */
html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fons);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.1em; }

:focus-visible { outline: 3px solid var(--cuir-fosc); outline-offset: 3px; }

/* ── Tipografia de titular ─────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0 0 0.6em; }

h2 {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.3;
}
h3 { font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Utilitats ─────────────────────────────────────────────────────── */
.visualment-ocult {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: -100vw; top: 0; z-index: 10;
  background: var(--tinta); color: var(--fons); padding: 0.75rem 1.25rem;
}
.salta:focus { left: 0; }

/* ── Capçalera ─────────────────────────────────────────────────────── */
.capcalera {
  display: flex; align-items: center; gap: var(--pas);
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  background: var(--tinta); color: var(--fons);
}
.marca { display: block; margin-right: auto; color: var(--fons); line-height: 0; }
.logotip { display: block; height: 2.1rem; width: auto; }

.idiomes { display: flex; gap: 0.85rem; }
/* ⚠️ Sense `opacity` (A1, auditoria 2026-09-06): amb 0.6, el text de 12,5 px
   quedava a 3,94:1 i cap test ho veia, perquè una opacitat no és un color.
   L'atenuació és un to documentat que sí que es pot calcular. */
.idiomes a {
  text-decoration: none; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--fons-atenuat);
}
.idiomes a[aria-current] { color: var(--fons); text-decoration: underline; text-underline-offset: 0.3em; }
.idiomes a:hover { color: var(--fons); }

.entrar {
  border: 1px solid currentColor; padding: 0.45rem 1.15rem; text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.entrar:hover { background: var(--fons); color: var(--tinta); }

/* ── Contenidors i ritme ───────────────────────────────────────────── */
main { flex: 1; }   /* empeny el peu al fons en pàgines curtes */

/* Missatges d'una acció (base.html, A4 del 06/09). --pedra de fons amb --tinta
   a sobre fa 4,9:1 (afirmat a test_contrast); la vora és decoració.
   ⚠️ La MATEIXA amplada i el MATEIX encoixinat que `main > section` amb
   `.portal`/`.entrada` (--ample-text), que és on surten: amb --ample, la franja
   feia el doble que la columna de text i no s'hi alineava (revisió 06/09). */
.missatges { list-style: none; max-width: var(--ample-text); margin: 0 auto; padding: var(--pas) clamp(1rem, 3vw, 2.5rem) 0; }
.missatge { background: var(--pedra); color: var(--tinta); border-left: 3px solid var(--cuir-fosc); padding: 0.7rem 1rem; margin: 0 0 0.5rem; }
.missatge.error, .missatge.warning { border-left-color: var(--tinta); font-weight: 600; }
main > section { padding: clamp(2.5rem, 5.5vw, 5rem) clamp(1rem, 3vw, 2.5rem); }
main > .hero, main > .foto-ampla { padding: 0; }

.hero img, .foto-ampla img { width: 100%; }

/* ── Lema ──────────────────────────────────────────────────────────── */
.lema { text-align: center; }
.lema h1 {
  margin: 0 auto; max-width: 30rem;
  font-weight: 400; text-transform: none;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.6rem);
  letter-spacing: 0.14em; line-height: 1.8;
}

/* ── Qui som ───────────────────────────────────────────────────────── */
.about { max-width: var(--ample); margin: 0 auto; }
.about h2 { margin-bottom: 2rem; }
.columnes { columns: 2; column-gap: 3rem; }
.columnes p { break-inside: avoid; }

/* ── Cronologia ────────────────────────────────────────────────────── */
.cronologia { max-width: var(--ample); margin: 0 auto; }
.cronologia-cos { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cronologia-foto { min-width: 0; }

.fites { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 1px solid var(--pedra); min-width: 0; }
.fites li { position: relative; padding: 0 0 1.9rem; }
.fites li::before {
  content: ""; position: absolute; left: -1.8rem; top: 0.55rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cuir);
}
.fites .any {
  display: block; font-family: var(--serif); font-size: 1.15rem;
  letter-spacing: 0.1em; color: var(--cuir-text);
}
.fites h3 { font-size: 0.95rem; margin: 0.15rem 0 0.2rem; }
.fites p { margin: 0; font-size: 0.92rem; font-style: italic; color: var(--cuir-text); }

/* ── Fites 2026 ────────────────────────────────────────────────────── */
.highlights {
  max-width: var(--ample); margin: 0 auto;
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.highlights-text, .highlights-foto { min-width: 0; }
.any-gran { display: block; font-size: 0.6em; letter-spacing: 0.3em; color: var(--cuir-text); }
.destacat { font-size: 1.1rem; max-width: var(--ample-text); }
.paisos { max-width: var(--ample-text); color: var(--cuir-text); }

.xifres { margin: 2rem 0 1.5rem; }
.xifres dt { font-family: var(--serif); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; }
.xifres dt strong { font-size: 1.5rem; letter-spacing: 0; }
.xifres dd { margin: 0 0 1.2rem; color: var(--cuir-text); }

.marketplaces { font-size: 0.92rem; }
.canals { display: block; font-family: var(--serif); letter-spacing: 0.16em; margin-top: 0.3rem; }

/* ── Missió, visió, valors ─────────────────────────────────────────── */
.mvv {
  max-width: var(--ample); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.mvv-foto, .mvv-text { min-width: 0; }
.mvv article + article { margin-top: 2.2rem; }
.mvv p { max-width: var(--ample-text); }

/* ── Arquitectura de marca ─────────────────────────────────────────── */
.linies { max-width: var(--ample); margin: 0 auto; }
.linies-text { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.linies-text .subtitol {
  display: block; font-size: 0.55em; font-style: italic;
  letter-spacing: 0.2em; text-transform: none; color: var(--cuir-text); margin-top: 0.4em;
}
.graella-linies {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.graella-linies li { min-width: 0; }
.graella-linies img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ── Oficines ──────────────────────────────────────────────────────── */
.oficines {
  max-width: var(--ample); margin: 0 auto;
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.oficines-foto, .oficines-text { min-width: 0; }
.seu { font-size: 1.05rem; }
.correu a { color: var(--cuir-text); text-underline-offset: 0.25em; }

/* ── Avís legal ───────────────────────────────────────────────────── */
.legal { max-width: 46rem; margin: 0 auto; }
.legal h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.legal h2 { font-size: 1rem; margin-top: 2.5rem; }
.legal dt { font-family: var(--serif); letter-spacing: 0.1em; text-transform: uppercase;
            font-size: 0.85rem; color: var(--cuir-text); margin-top: 1.1rem; }
.legal dd { margin: 0.15rem 0 0; }

.legal-enllac { margin-top: 0.6rem; }
.legal-enllac a { text-underline-offset: 0.25em; }

/* ── Peu ───────────────────────────────────────────────────────────── */
.peu {
  background: var(--tinta); color: var(--fons);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  font-size: 0.85rem;
}
.peu p { margin: 0; }

/* ── Mòbil i tauleta ───────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .cronologia-cos, .highlights, .mvv, .oficines { grid-template-columns: 1fr; }

  /* Les fotos verticals, en una sola columna, s'estirarien a tota l'amplada:
     a 768 px la pàgina passava de 7.037 a 8.835 px d'alçada i les imatges
     decoratives es menjaven la pantalla. Acotades i centrades. */
  .cronologia-foto, .mvv-foto, .highlights-foto {
    max-width: 24rem;
    margin-inline: auto;
  }
  .columnes { columns: 1; }
  .about p, .destacat, .paisos, .mvv p { max-width: none; }
}

@media (max-width: 40rem) {
  .capcalera { flex-wrap: wrap; row-gap: 0.9rem; }
  .marca { margin-right: 0; width: 100%; }
  .logotip { height: 1.8rem; }
  .graella-linies { grid-template-columns: repeat(2, 1fr); }
  h2 { letter-spacing: 0.16em; }
}

/* ── Entrada ───────────────────────────────────────────────────────── */
/* ⚠️ La classe és `.entrada` i NO `.entrar`: `.entrar` és el BOTÓ de la
 *    capçalera (`white-space: nowrap`, majúscules, `letter-spacing`, vora).
 *    Posant-la a la <section> de la pàgina, tot allò s'aplicava a la pàgina
 *    SENCERA: caixa amb vora, tot en majúscules i el text d'ajuda sense
 *    poder tallar línia (scrollWidth 891px en una finestra de 390).
 *    Va sortir així a producció el 2026-09-06 amb 336 tests verds. NO ho va
 *    trobar la suite: ho va trobar `verifica-responsive.js` i mirar la
 *    captura. Abans d'inventar un nom de classe, mira si ja és al CSS.
 *
 * ⚠️ Els colors respecten la paleta del capdamunt: `--cuir-text` (5,0:1) per
 *    a text petit i `--sorra` NOMÉS com a vora, mai com a fons de text.
 */
.entrada { max-width: var(--ample-text); margin: 0 auto; }
.entrada form p { margin: 0 0 var(--pas); }
.entrada label {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cuir-text);
}
.entrada input {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit;
  /* Vora amb --cuir-fosc (A2): és l'únic que distingeix el camp del paper
     (el fons és el mateix) i l'1.4.11 demana 3:1; amb --sorra feia 1,74:1. */
  color: var(--tinta); background: var(--fons); border: 1px solid var(--cuir-fosc);
}
.entrada input:focus-visible { outline: 2px solid var(--cuir-text); outline-offset: 1px; }
.entrada button {
  padding: 0.7rem 1.6rem; font: inherit; font-size: 0.8rem; cursor: pointer;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta); background: transparent; border: 1px solid currentColor;
}
.entrada button:hover { background: var(--tinta); color: var(--fons); }
.entrada .error { margin-bottom: var(--pas); padding-left: 0.75rem;
                  border-left: 3px solid var(--cuir-fosc); color: var(--tinta); }
/* Els errors DE CAMP (C11): la llista que pinta Django sota el camp, amb el
   mateix aspecte que l'error de conjunt de dalt. */
.entrada .errorlist { list-style: none; margin: 0.4rem 0 0; padding-left: 0.75rem;
                      border-left: 3px solid var(--cuir-fosc); color: var(--tinta);
                      font-size: 0.9rem; }
/* «Recorda'm» (fase 4, T10): la casella va DINS de l'etiqueta. `.entrada label` (bloc) i
   `.entrada input` (amplada 100 %, farciment i vora) són per als camps de text: sense
   això, la casella s'estiraria a tota l'amplada i quedaria en una línia a part del text. */
.entrada .recorda label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.entrada .recorda input { width: auto; margin: 0; padding: 0; }

/* ── Portal ────────────────────────────────────────────────────────── */
/* T23 (2026-10-27, punts #6 i #7 del document de la Mar): el portal és una pàgina de TRES BLOCS (B2B, DAM,
 * Documents), «alineada amb el disseny de la B2B», amb una imatge de fons que es canvia des del DAM
 * (`comptes/fons.py`). Abans: una llista de botons sota «Hola, {nom}» (el portal es va lliurar sense CAP regla,
 * Ruling 43 / S2 del 04/09; ho va trobar la captura).
 *
 * ⚠️ La lletra i els colors són els del B2B (`b2b.css`: `--b2b-lletra`, `--b2b-principal` #1c1c1c del botó «Entrar»
 *    del vell, `--b2b-text`, `--b2b-text-2`, `--b2b-fila`, `--b2b-caixa`), però `--b2b-*` NO existeix fora del B2B
 *    (és un altre full): aquí en van els equivalents amb nom propi (`--portal-*`), definits NOMÉS dins de la pàgina.
 *    Contrasts (calculats): text sobre blanc 13,0:1; text-2 sobre blanc 6,1:1 i sobre --portal-fila 5,5:1; text-2 sobre
 *    --portal-caixa 5,0:1; blanc sobre el botó negre 17,4:1. Cap `opacity` sobre text (`test_contrast`).
 * ⚠️ Tot el text va sobre una CAIXA BLANCA (o gris molt clar si és apagat): sobre la foto, MAI. Per això el títol i el
 *    «Hola» també van a la seva caixa. L'única cosa que toca la foto és l'ombra de les caixes.
 * ⚠️ `body.portal-cos` (només aquesta pàgina: `atributs_cos` de la plantilla) fa de `main` una columna perquè
 *    `.portal-pagina` en ompli l'alçada: sense això el fons acabava on acabava el contingut i el peu quedava amb un
 *    tros de crema a sobre. Un `min-height` en `vh` hauria hagut d'endevinar l'alçada de la capçalera i del peu.
 */
.portal-cos main { display: flex; flex-direction: column; }
.portal-pagina {
  --portal-lletra: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --portal-boto: #1c1c1c;
  --portal-text: #303133;
  --portal-text-2: #606266;
  --portal-fila: #f2f2f2;
  --portal-caixa: #ebeef5;
  --portal-radi: 12px;
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem);
  font-family: var(--portal-lletra); color: var(--portal-text);
}
/* El fons: una <img> (i no un `background-image` en línia, que la CSP no deixa) a tot el contenidor, `cover` i
   centrada, com al vell (`background-size: cover`). `z-index: -1` dins de l'`isolation: isolate` del contenidor. */
.portal-fons { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ⚠️ `.portal` SOL és la columna estreta de TOTA pàgina de missatge (`404.html`, `403.html`, `500.html`, `dam/zip_refusat.html`: tots
 *    fan servir `<section class="portal">` fora de `.portal-pagina`): la regla és EXACTAMENT la d'abans de la T23 (34rem, `--ample-text`).
 *    L'ample de 62rem per a tres blocs és NOMÉS de la pàgina del portal i va escopat (`.portal-pagina .portal`, més específic). La T23
 *    l'havia posat a `.portal` sol i eixamplava aquelles pàgines (revisió de la T23, I1). Ho fixa `test_portal_t23.py`. */
.portal { max-width: var(--ample-text); margin: 0 auto; }
.portal-pagina .portal { position: relative; width: 100%; max-width: 62rem; margin: 0 auto; }
.portal-cap {
  margin: 0 auto var(--pas); max-width: 40rem; padding: 1.5rem 2rem; text-align: center;
  background: var(--superficie); border-radius: var(--portal-radi); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.portal-cap h1 {
  margin: 0; font-family: var(--portal-lletra); font-weight: 700; color: var(--portal-text);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem); line-height: 1.25;
  letter-spacing: 0.12em; text-transform: uppercase; overflow-wrap: anywhere;
}
.portal-cap .salutacio { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--portal-text-2); overflow-wrap: anywhere; }

/* Els blocs: en fila a partir de 48rem (tres per fila; el quart, si n'hi ha, baixa i es queda al mig), apilats a mòbil. */
.eines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pas); }
.eina { display: flex; flex: 1 1 100%; }
@media (min-width: 48rem) {
  .eina { flex: 0 1 calc((100% - 2 * var(--pas)) / 3); }
}
/* El bloc sencer és UN sol element (<a>, o <span> si és apagat): tot ell és clicable. */
.eina .boto {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  min-height: 11rem; padding: 1.5rem; text-align: center; text-decoration: none; color: var(--portal-text);
  background: var(--superficie); border-radius: var(--portal-radi); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.eina-titol {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; overflow-wrap: anywhere;
}
/* L'acció és el botó negre del vell («Entrar»): text blanc sobre #1c1c1c, àrea de toc >= 44 px. */
.eina-accio {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.5rem;
  font-size: 0.9rem; letter-spacing: 0.08em; color: var(--superficie); background: var(--portal-boto); border-radius: 4px;
}
.eina a.boto:hover .eina-accio { background: var(--portal-text); }
/* Focus visible per a qui navega amb el teclat: contorn negre amb un anell blanc a dins, que es veu sobre la foto. */
.eina a.boto:focus-visible { outline: 3px solid var(--portal-boto); outline-offset: 3px; box-shadow: 0 0 0 3px var(--superficie); }
/* Un bloc APAGAT (<span role="button" aria-disabled>): gris, sense mà i sense hover. Segueix sent llegible. */
.eina .boto.apagat { background: var(--portal-fila); color: var(--portal-text-2); cursor: default; }
.eina .boto.apagat .eina-accio { background: var(--portal-caixa); color: var(--portal-text-2); }
/* La llista buida (`{% empty %}`): un text, no un buit mut, sobre la seva caixa. */
.eines .cap-eina {
  flex: 0 1 auto; padding: 1rem 1.5rem; color: var(--portal-text-2); font-style: italic;
  background: var(--superficie); border-radius: var(--portal-radi);
}

/* ⚠️ El formulari de sortir viu FORA de la <section> (però dins de `.portal-pagina`): al mateix lloc que abans, i ara
 *    centrat sota els blocs. Cal que `.portal-pagina .sortir` sigui més específic que `.sortir` de sempre. */
.sortir {
  max-width: var(--ample-text);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 5.5vw, 5rem);
}
.sortir button {
  padding: 0.6rem 1.4rem; font: inherit; font-size: 0.78rem; cursor: pointer;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta); background: transparent; border: 1px solid currentColor;
}
.sortir button:hover { background: var(--tinta); color: var(--fons); }
.portal-pagina .sortir { margin: var(--pas) 0 0; padding: 0; max-width: none; text-align: center; }
.portal-pagina .sortir button {
  min-height: 2.75rem; padding: 0 1.6rem; font-family: var(--portal-lletra);
  color: var(--portal-text); background: var(--superficie); border: 1px solid var(--portal-text); border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.portal-pagina .sortir button:hover { background: var(--portal-text); color: var(--superficie); }