/* Anton auto-allotjada. Sense CDN de Google: evita transferir IPs de les
   families a tercers (criteri RGPD del club, com a /escoleta/). */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-400-2686.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-400-1354.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
   CB GRUP BARNA · Sistema visual compartit
   Full d'estil de les pàgines interiors (campus, 3x3, blog).
   Mateix ADN que la portada: paper blanc, tinta negra i el
   vermell del club com a únic accent.
   ============================================================ */
:root {
  /* Tokens de l'artefacte «Franges i Extensa». Aquests valors manen a tot el
     lloc: el vermell és el mostrejat de l'escut i la tinta, la crema i el gris
     són els de la portada. Els dos jocs de noms conviuen com a àlies perquè el
     codi que ve de /partits/ no s'hagi de traduir a mà. */
  --ink: #10100E;
  --ink-2: #46433f;
  --muted: #6B6560;
  --line: rgba(16, 16, 14, 0.14);
  --line-dark: rgba(255, 255, 255, 0.15);
  --paper: #ffffff;
  /* Blanc pur, el del logo. La crema #FFFFFF va quedar retirada el 25/08/2026
     («Estètica definitiva», decisió 1: sense crema enlloc). Els noms es
     conserven perquè hi ha 503 var() repartits pel lloc que hi apunten, i
     perquè segueixen dient QUÈ és cada superfície; el valor, però, és un de
     sol. De retruc el vermell de l'escut hi guanya contrast: sobre crema es
     quedava en 4,36:1 i sobre blanc arriba a 4,92:1. */
  --paper-2: #ffffff;
  --red: #E20613;
  --red-dark: #A8040E;
  /* Sobre fons fosc el vermell de l'escut es queda en 3,87:1 i no arriba al
     minim per a text petit. El sistema ja preveu aclarir-lo a #FF3B41, que hi
     dona 5,4:1. Nomes per a text sobre tinta, mai per a fons ni filets. */
  --red-light: #FF3B41;
  --red-glow: #FF3B41;
  /* El groc de la campanya d'Escoleta. Regla tancada: va SEMPRE a la lletra i
     MAI al fons. Sobre tinta dona 17,9:1 i sobre el vermell 5,4:1; sobre blanc
     es queda en 1,1:1, o sigui que sobre paper no s'hi pot escriure mai. Només
     als dos punts d'entrada a la campanya: el ticker i el seu CTA. */
  --yel: #EEFF00;
  /* Àlies del joc de /partits/ i de l'artefacte */
  --cream: #ffffff;
  --red-ink: #A8040E;
  --panel: #ffffff;
  --ground: #ffffff;
  --shadow: 0 24px 60px -28px rgba(16, 16, 14, 0.34);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body); font-weight: 300; line-height: 1.75;
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.narrow { max-width: 780px; margin: 0 auto; }
.section { padding: clamp(44px, 6.5vw, 96px) 0; }
/* Sense crema, una banda alterna ja no es distingeix pel fons: la separa un
   filet, que és el mateix gest que separa les franges de la portada. */
.band-soft { background: var(--paper-2); border-block: 1px solid var(--line); }
.band-soft + .band-soft { border-top: 0; }
.center { text-align: center; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.04; }
.eyebrow { font-family: var(--body); font-size: 9.5px; font-weight: 400; letter-spacing: 0.36em; text-transform: uppercase; color: var(--muted); }
/* L'etiqueta va a 9,5-10 px: amb --red sobre crema es queda en 4,37:1, just per
   sota del minim. --red-ink es el token que el sistema reserva per a text
   vermell sobre fons clar (6,93:1 sobre crema, 7,81:1 sobre blanc). */
.eyebrow.red { color: var(--red-ink); }
/* I sobre les superficies fosques, el vermell aclarit. */
.foot .eyebrow.red, .comunitat .eyebrow.red, .franja--ink .eyebrow.red,
.e-lema .eyebrow.red, .ticker .eyebrow.red { color: var(--red-light); }
.rule { width: 1px; height: clamp(26px, 4vw, 44px); background: var(--line); margin: 18px auto; }

/* ==== CAPÇALERA ==== */
.head { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px); height: 68px; }
/* flex-shrink:0: el nom del club porta white-space:nowrap, i si la caixa
   s'encongeix el text en surt per la dreta i se solapa amb el menú. Qui ha
   de cedir espai és .head-nav, que sap fer scroll. */
.head-brand { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; gap: 11px; }
.head-brand img { width: 30px; height: 30px; object-fit: contain; }
.head-brand span { font-family: var(--body); font-size: clamp(10px, 1.5vw, 12.5px); letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap; }
/* min-width:0 desfà el mínim per defecte d'un fill de flex (min-width:auto),
   que amb .head-nav a en white-space heretat es fixa a la suma de l'amplada
   de tots els enllaços i no es pot encongir mai per sota. Sense això, a les
   pàgines amb un .head-nav llarg (deu enllaços, com /partits/), la capçalera
   no cap entre ~1080 i 1280px i «CB Grup Barna» s'encavalca amb el primer
   enllaç. Ara, en lloc d'encavalcar-se, el menú fa scroll horitzontal —
   igual que ja feia per sota de 1080px, però sense esperar-hi. */
.head-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.head-nav::-webkit-scrollbar { display: none; }
.head-nav a { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; padding: 10px 0; font-family: var(--body); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; }
.head-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: var(--red); transition: right 0.4s var(--ease); }
.head-nav a:hover::after { right: 0; }
@media (max-width: 1080px) { .head-nav a.opt { display: none; } }
@media (max-width: 1080px) { .head-in { flex-wrap: nowrap; } }

/* A mòbil, la capçalera no hi cabia: el nom del club («CB GRUP BARNA») té
   white-space: nowrap i el menú s'hi encavalcava a sobre, lletra sobre
   lletra, a totes les pàgines que porten selector d'idioma. El nom no és
   informació —l'escut ja hi és, i és enllaç a l'inici— així que per sota de
   560px es retira i el menú recupera l'espai. .head-nav necessita min-width:0
   perquè un fill flexible amb overflow-x pugui encongir de veritat. */
@media (max-width: 1080px) { .head-nav { min-width: 0; } }
@media (max-width: 560px) { .head-brand span { display: none; } }

/* ==== SELECTOR D'IDIOMA ====
   Fins ara cada pàgina que el duia es repintava aquest bloc a dins del seu
   <style>, i les que no el copiaven el treien sense estil. Ara viu aquí una
   sola vegada: qualsevol pàgina que carregui barna.css el té ben pintat.
   Les caselles fan 24px d'amplada mínima perquè un dit hi arribi: amb el
   text sol («CA») feien 15-17px i incomplien la mida mínima de diana de la
   WCAG 2.2. Els separadors són decoratius i no es poden tocar. */
.lang-switch { display: flex; align-items: center; gap: 2px; font-family: var(--body); font-size: 9.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; flex-shrink: 0; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 7px 4px; color: var(--muted); text-decoration: none; transition: color 0.3s var(--ease); }
.lang-switch a.active { color: var(--ink); font-weight: 600; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--red); }
.lang-switch .sep { color: var(--line); pointer-events: none; }
.lang-switch.light a { color: rgba(255, 255, 255, 0.62); }
.lang-switch.light a.active { color: #fff; }
@media (max-width: 480px) { .lang-switch { gap: 0; font-size: 8.5px; } .lang-switch a { min-width: 24px; padding: 7px 2px; } }

/* ==== BOTONS ==== */
.cta { display: inline-block; font-family: var(--body); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid currentColor; transition: color 0.35s var(--ease), border-color 0.35s var(--ease); }
.cta:hover { color: var(--red); border-color: var(--red); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 15px clamp(20px, 3vw, 32px); font-family: var(--body); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; background: var(--ink); color: #fff; border: 1px solid var(--ink); transition: background 0.35s var(--ease), border-color 0.35s var(--ease); }
.btn:hover { background: var(--red); border-color: var(--red); }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.red:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 560px) { .btn-row .btn { flex: 1 1 100%; } }

/* ==== FIL D'ARIADNA ==== */
.crumb { font-family: var(--body); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); padding: 22px 0 0; }
.crumb a { border-bottom: 1px solid transparent; transition: border-color 0.3s, color 0.3s; }
.crumb a:hover { color: var(--red); border-color: var(--red); }

/* ==== CAPÇAL DE PÀGINA ==== */
.phead { padding: clamp(30px, 5vw, 62px) 0 clamp(34px, 5vw, 60px); }
.phead h1 { font-size: clamp(24px, 4vw, 44px); margin: 16px 0 0; max-width: 20ch; }
.phead .lede { margin-top: 22px; font-size: clamp(14px, 1.6vw, 16.5px); color: var(--ink-2); max-width: 62ch; }
.phead-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-2); margin-top: clamp(26px, 4vw, 46px); }
.phead-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 640px) { .phead-media { aspect-ratio: 4 / 3; } }

/* ==== COS DE TEXT ==== */
.prose h2 { font-size: clamp(16px, 2.1vw, 22px); margin: clamp(34px, 4.5vw, 56px) 0 18px; }
.prose h3 { font-size: clamp(13px, 1.6vw, 15px); letter-spacing: 0.14em; margin: 30px 0 12px; }
.prose p { font-size: 15px; color: var(--ink-2); }
.prose p + p { margin-top: 15px; }
.prose strong { font-weight: 500; color: var(--ink); }
/* .prose a (0,1,1) guanyava a .btn (0,1,0): qualsevol boto dins d'un article
   es quedava amb el text en tinta —3,87:1 sobre el vermell del boto— i amb un
   subratllat que no li tocava. Els botons queden fora de la regla. */
.prose a:not(.btn):not(.cta) { color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 1px; transition: color 0.3s; }
.prose a:not(.btn):not(.cta):hover { color: var(--red); }
.prose ul, .prose ol { margin: 16px 0 16px 20px; }
.prose li { font-size: 15px; color: var(--ink-2); margin-bottom: 9px; }
.prose blockquote { margin: 28px 0; padding: 22px 26px; border-left: 2px solid var(--red); background: var(--paper-2); font-size: 15.5px; color: var(--ink); }
.prose figure { margin: clamp(26px, 4vw, 44px) 0; }
.prose figure img { width: 100%; }
.prose figcaption { margin-top: 12px; font-family: var(--body); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }

/* ==== FITXA DE DADES ==== */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: clamp(26px, 4vw, 44px) 0; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts div { padding: clamp(16px, 2.4vw, 26px) 12px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 3vw, 32px); letter-spacing: 0.05em; }
.facts b em { font-style: normal; color: var(--red); }
.facts span { display: block; margin-top: 8px; font-family: var(--body); font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }

/* ==== FRANGES · altres portes del club, en rectangles apilats ====
   Mateix component que a la portada (index.html): el vermell fa de
   superfície, no només d'accent. Veure la skill web-cbgb. */
.franges { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: clamp(34px, 5vw, 60px) 0; }
.franja { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: stretch; background: var(--paper); min-height: 108px; overflow: hidden; transition: background 0.35s var(--ease); }
/* Sense foto, la columna de 190px no s'ha de reservar: el text s'hi comprimia. */
.franja--red:not(:has(.franja-ph)), .franja--ink:not(:has(.franja-ph)) { grid-template-columns: minmax(0, 1fr) auto; }
.franja:nth-child(even):not(.franja--red):not(.franja--ink) { background: var(--paper-2); }
.franja:hover { background: var(--ink); }
.franja:hover .franja-t, .franja:hover .franja-go em { color: #fff; }
.franja:hover .franja-s { color: rgba(255,255,255,0.7); }
.franja:hover .franja-go i { background: var(--red); width: 46px; }
.franja-ph { position: relative; overflow: hidden; background: var(--paper-2); }
.franja-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.7s var(--ease); }
.franja:hover .franja-ph img { transform: scale(1.05); }
.franja-tx { padding: 20px 26px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.franja-t { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(18px, 2.4vw, 27px); letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.98; transition: color 0.3s; }
.franja-s { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; max-width: 46ch; }
.franja-go { padding: 0 26px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.franja-go em { font-style: normal; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.franja-go i { display: block; width: 22px; height: 1px; background: var(--ink); transition: width 0.35s var(--ease), background 0.35s var(--ease); }

/* A 390 px la franja conservava les tres columnes fixes —190 px d'imatge, el
   text, i la crida de la dreta, que porta white-space: nowrap i no encongeix—:
   al text li quedaven vint píxels i queia una paraula per línia. És la primera
   cosa que es veu des del mòbil, que és per on entra gairebé tothom. Per sota
   de 700 px la crida baixa sota el text i la foto es fa petita. */
@media (max-width: 700px) {
  .franja { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "ph tx" "ph go"; }
  .franja-ph { grid-area: ph; }
  .franja-tx { grid-area: tx; padding: 16px 18px 2px; }
  .franja-go { grid-area: go; padding: 4px 18px 16px; align-items: center; }
  .franja--red:not(:has(.franja-ph)), .franja--ink:not(:has(.franja-ph)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tx" "go"; }
}

.franja--red { background: var(--red); }
.franja--red .franja-t, .franja--red .franja-s, .franja--red .franja-go em { color: #fff; }
.franja--red .franja-s { color: rgba(255,255,255,0.82); }
.franja--red .franja-go i { background: #fff; }
.franja--red:hover { background: var(--red-dark); }
.franja--ink { background: var(--ink); }
.franja--ink .franja-t { color: #fff; }
.franja--ink .franja-s, .franja--ink .franja-go em { color: rgba(255,255,255,0.7); }
.franja--ink .franja-go i { background: #fff; }
.franja--ink:hover { background: #000; }
/* La franja que obre la pila, calcada de la guia: més alta, la foto més ampla,
   fons crema i el filet vermell a l'esquerra. */
.franja--lead { grid-template-columns: 300px minmax(0, 1fr) auto; min-height: 210px; background: var(--paper-2); border-left: 6px solid var(--red); }
.franja--lead .franja-tx { padding: 26px; }
.franja--lead .franja-t { font-size: clamp(26px, 4vw, 46px); }
@media (max-width: 640px) {
  .franja { grid-template-columns: 92px minmax(0, 1fr); min-height: 90px; }
  .franja--lead { grid-template-columns: 120px minmax(0, 1fr); min-height: 130px; }
  .franja--lead .franja-tx { padding: 14px 16px; }
  .franja--red:not(:has(.franja-ph)), .franja--ink:not(:has(.franja-ph)) { grid-template-columns: minmax(0, 1fr); }
  .franja-go { display: none; }
  .franja-tx { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .franja, .franja-ph img, .franja-go i { transition: none; } }

/* ==== PREMSA · galeria de pàgines i cita de l'article ==== */
.press-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 18px; border: 1px solid var(--line); font-family: var(--body); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.press-badge b { color: var(--ink); font-weight: 500; }
.press-grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); margin: clamp(28px, 4vw, 46px) 0; }
@media (min-width: 680px) { .press-grid.two { grid-template-columns: 1fr 1fr; } }
.press-grid figure { margin: 0; }
.press-grid img { width: 100%; border: 1px solid var(--line); }
.press-quote { position: relative; margin: clamp(28px, 4vw, 46px) 0; padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-left: 3px solid var(--red); background: var(--paper-2); }
.press-quote .eyebrow { margin-bottom: 16px; }
.press-quote p { font-size: 15px; color: var(--ink); }
.press-quote p + p { margin-top: 14px; }
.press-quote-by { display: block; margin-top: 22px; font-family: var(--body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.press-quote-by b { color: var(--ink); }

/* ==== CALENDARIS PER EQUIP · targetes descarregables ==== */
.cal-group { margin-bottom: clamp(40px, 6vw, 72px); }
.cal-group h2 { font-size: clamp(15px, 2vw, 19px); padding-bottom: 14px; margin-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--ink); }
.cal-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 620px) { .cal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cal-grid { grid-template-columns: repeat(3, 1fr); } }
.cal-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); transition: border-color 0.3s; }
.cal-card:hover { border-color: var(--ink); }
.cal-card img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line); }
.cal-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cal-card-tag { font-family: var(--body); font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--red); }
.cal-card h3 { font-family: var(--display); font-size: 13.5px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400; }
.cal-card-meta { font-family: var(--body); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cal-card .btn { margin-top: 10px; width: 100%; }
.cal-notice { display: none; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border: 1px solid rgba(226,6,19,0.35); background: rgba(226,6,19,0.06); font-size: 11px; line-height: 1.5; color: var(--ink); }
.cal-notice.on { display: flex; }
.cal-notice a { border-bottom: 1px solid var(--red); white-space: nowrap; }
.cal-pending { border-style: dashed; opacity: 0.6; }
.cal-pending .cal-card-body { align-items: flex-start; }

/* ==== CAPÇAL FOSC (proposta B) ====
   Un phead sobre tinta amb el vermell aclarit, per a les pàgines del
   calendari que volen lligar visualment amb /partits/. Es fa servir a
   /partits/, /partits/calendaris/ i les pàgines d'equip que genera
   .github/scripts/generate-team-pages.py — d'aquí surt perquè cap
   d'aquestes pàgines generades porta <style> propi. */
.p-dark { position: relative; background: var(--ink); overflow: clip; }
.p-dark-court { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.p-dark-court svg { position: absolute; top: 50%; right: -8%; width: min(46vw, 460px); height: auto; transform: translateY(-50%); }
.p-dark-in { position: relative; z-index: 1; }
.p-dark .crumb { color: rgba(255,255,255,0.45); }
.p-dark .crumb a:hover { color: var(--red-light); border-color: var(--red-light); }
.p-dark .eyebrow.red { color: var(--red-light); }
.p-dark .phead h1 { color: #fff; }
.p-dark .phead .lede { color: rgba(255,255,255,0.68); }
.p-dark .phead .lede strong { color: #fff; }
.p-dark .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.32); }
.p-dark .btn.ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ==== PORTES OBERTES · tria de dissabte ====
   El calendari desplegat: en lloc d'un desplegable, els dissabtes es veuen
   tots alhora com a targetes grans, amb les places que queden a cadascuna.
   La disponibilitat la mana el servidor (scripts/apps-script-portes-obertes.gs);
   això només la pinta. */
.po-cal { border: 0; padding: 0; margin: 0 0 clamp(20px, 3vw, 30px); }
.po-cal legend { font-family: var(--body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); padding: 0; margin-bottom: 6px; }
.po-dies { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.po-dia { position: relative; display: block; cursor: pointer; }
.po-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.po-dia-in { display: block; border: 2px solid var(--line); padding: 18px 20px 16px; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); }
.po-dia:hover .po-dia-in { border-color: var(--ink); }
.po-dia input:focus-visible + .po-dia-in { outline: 3px solid var(--red); outline-offset: 3px; }
.po-dia input:checked + .po-dia-in { border-color: var(--red); background: rgba(226, 6, 19, 0.04); }
.po-dia-n { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5vw, 46px); line-height: 0.9; color: var(--ink); }
.po-dia input:checked + .po-dia-in .po-dia-n { color: var(--red); }
.po-dia-m { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); margin-top: 6px; }
.po-dia-h { display: block; font-family: var(--body); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
/* Les places que queden. En vermell quan en queden poques: és una dada
   real que ve del servidor, no un adorn. */
.po-dia-p { display: block; font-family: var(--body); font-size: 10.5px; letter-spacing: 0.08em; margin-top: 8px; color: var(--muted); }
.po-dia-p.poques { color: var(--red-ink); font-weight: 650; }
.po-dia-p.ple { color: var(--muted); }
/* Un torn ple no es pot triar: es desactiva de veritat, no només a la vista. */
.po-dia input:disabled + .po-dia-in { opacity: 0.5; cursor: not-allowed; border-style: dashed; }
.po-dia:has(input:disabled) { cursor: not-allowed; }

/* Barra d'ocupació: el mateix número, en forma. */
.po-barra { display: block; height: 4px; background: var(--line); margin-top: 9px; overflow: hidden; }
.po-barra i { display: block; height: 100%; background: var(--red); transition: width 0.5s var(--ease); }

.po-tria { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.po-op { position: relative; }
.po-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.po-op span { display: inline-block; border: 2px solid var(--line); padding: 11px 18px; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: border-color 0.25s, color 0.25s; }
.po-op input:checked + span { border-color: var(--red); color: var(--ink); font-weight: 600; }
.po-op input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }

.form-row--parell { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .form-row--parell { grid-template-columns: 1fr; } }

/* ==== TAULA DE DADES ==== */
.dl { border-top: 1px solid var(--ink); margin: clamp(24px, 3.4vw, 40px) 0; }
.dl-row { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.dl-row dt { flex: 0 0 190px; font-family: var(--body); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.dl-row dd { flex: 1 1 220px; font-size: 14.5px; color: var(--ink); }

/* ==== TARGETES ==== */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); }
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards.c3 { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.card:hover { border-color: var(--ink); transform: translateY(-3px); }
.card-media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.4s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 11px; flex: 1; }
.card-tag { font-family: var(--body); font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); }
.card h3 { font-family: var(--display); font-size: clamp(13px, 1.5vw, 15.5px); letter-spacing: 0.02em; line-height: 1.6; }
.card p { font-size: 13.5px; color: var(--ink-2); }
.card .cta { margin-top: auto; padding-top: 8px; align-self: flex-start; }
.card-body ul { margin: 2px 0 0 18px; }
.card-body li { font-size: 13px; color: var(--ink-2); margin-bottom: 7px; }

/* ==== MUR DE PARTNERS · graella de logos ==== */
.partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; margin: clamp(20px, 3vw, 32px) 0; }
.partner-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 14px; border: 1px solid var(--line); background: var(--paper); transition: border-color 0.3s var(--ease); }
.partner-logo img { max-width: 100%; max-height: 42px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); }
a.partner-logo:hover { border-color: var(--red); }
a.partner-logo:hover img { filter: none; opacity: 1; }

/* ==== FAQ ==== */
.faq { border-top: 1px solid var(--line); margin-top: clamp(26px, 4vw, 44px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 14px 44px 14px 0; font-family: var(--body); font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 1px; background: var(--red); transform: translateY(-50%); }
.faq summary::before { content: ''; position: absolute; right: 13.5px; top: 50%; width: 1px; height: 12px; background: var(--red); transform: translateY(-50%); transition: opacity 0.3s; }
.faq details[open] summary::before { opacity: 0; }
.faq p { padding: 0 0 22px; font-size: 14.5px; color: var(--ink-2); }
.faq p a { border-bottom: 1px solid var(--red); }

/* ==== CRIDA FINAL ==== */
.closer { border: 1px solid var(--line); padding: clamp(28px, 4.5vw, 56px); text-align: center; }
.closer h2 { font-size: clamp(17px, 2.3vw, 25px); margin-bottom: 16px; }
.closer p { font-size: 14.5px; color: var(--ink-2); max-width: 52ch; margin: 0 auto 26px; }
.closer .btn-row { justify-content: center; }

/* ==== CRIDA DE COMUNITAT · a totes les pàgines, just abans del peu ====
   Dues portes i prou: seguir el club a Instagram i apuntar-se al correu. Van
   partides pel mig, com la franja de paritat, i el vermell hi fa de superfície
   perquè la segona porta pesi tant com la primera. */
.comunitat { background: var(--ink); color: #fff; }
.comunitat-in { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.18); padding: 0; max-width: none; }
@media (max-width: 700px) { .comunitat-in { grid-template-columns: 1fr; } }
.comunitat-porta { display: block; background: var(--ink); padding: clamp(24px, 3.4vw, 38px) clamp(20px, 5vw, 60px); transition: background 0.35s var(--ease); }
.comunitat-porta:hover { background: #000; }
.comunitat-porta--red { background: var(--red); }
.comunitat-porta--red:hover { background: var(--red-dark); }
.comunitat-t { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 2.6vw, 28px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.comunitat-s { display: block; margin-top: 9px; font-size: 12.5px; letter-spacing: 0.02em; color: rgba(255,255,255,0.74); }
.comunitat-porta--red .comunitat-s { color: rgba(255,255,255,0.86); }
.comunitat .foot { margin-top: 0; }

/* ==== PEU ==== */
.foot { background: var(--ink); color: #fff; padding: clamp(44px, 6.5vw, 80px) 0 32px; margin-top: clamp(40px, 6vw, 80px); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(24px, 4vw, 48px); padding-bottom: clamp(30px, 5vw, 54px); border-bottom: 1px solid var(--line-dark); }
.foot-col h3 { font-size: 8.5px; letter-spacing: 0.3em; color: rgba(255,255,255,0.45); margin-bottom: 15px; }
.foot-col a, .foot-col p { display: block; padding: 7px 0; font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.72); }
.foot-col a { display: flex; align-items: center; min-height: 44px; }
.foot-col a:hover { color: var(--red-light); }
.foot-btm { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.foot-mark { font-family: var(--body); font-size: clamp(12px, 2vw, 15px); letter-spacing: 0.4em; text-transform: uppercase; }
.foot-mark em { font-style: normal; color: var(--red-light); }
.foot-legal { font-family: var(--body); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.4); }

/* ==== ACCESSIBILITAT ==== */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; }
.skip:focus { left: 50%; transform: translateX(-50%); top: 8px; background: var(--ink); color: #fff; padding: 12px 22px; font-family: var(--body); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; }
@media (max-width: 900px) { .cta { padding: 12px 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==== FOTOGRAFIA DEL BLOG ====
   Cada marc té una amplada màxima fixa: és la meitat dels píxels de l'original,
   de manera que cap foto no es mostra mai més gran del que és, ni en pantalla
   retina. Les mides les calcula scripts/build-blog-images.py; si un original no
   hi arriba, el script avisa i no genera el fitxer.
   El retall va des de dalt: el que es perd és el terra, mai un cap. */
figure.ph { margin: clamp(28px, 4vw, 48px) 0; }
.ph-set { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ph-f { display: block; position: relative; overflow: hidden; background: var(--paper-2); }
figure.ph .ph-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ph-32 { aspect-ratio: 3 / 2; }
.ph-34 { aspect-ratio: 3 / 4; }
.ph-169 { aspect-ratio: 16 / 9; }
.ph-w375, .ph-w450, .ph-w540, .ph-w600 { margin-left: auto; margin-right: auto; }
.ph-w375 { max-width: 375px; }
.ph-w450 { max-width: 450px; }
.ph-w540 { max-width: 540px; }
.ph-w600 { max-width: 600px; }
/* Apilades en vertical continuen limitades a la seva amplada honesta. */
.ph-set.duo > .ph-f { width: 100%; max-width: 375px; margin-left: auto; margin-right: auto; }
@media (min-width: 620px) {
  .ph-set.duo { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ph-set.duo > .ph-f { max-width: none; }
}

/* ==== GRÀFICS DEL BLOG ====
   Fets amb HTML i CSS, no amb imatges: el text d'un gràfic s'ha de llegir igual
   de gran en un mòbil que en un portàtil, s'ha de poder seleccionar i l'ha de
   poder llegir un lector de pantalla. Un sol accent, el vermell de l'escut; la
   resta són tinta i grisos. Cap dada no es distingeix només pel color: sempre
   porta el número o l'etiqueta al costat. */
.chart { margin: clamp(30px, 4.5vw, 54px) 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); background: var(--paper); }
.chart p.chart-t { display: block; font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); }
.chart p.chart-s { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.chart-b { margin-top: clamp(20px, 3vw, 28px); }
.chart figcaption { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 9px; letter-spacing: 0.2em; line-height: 1.9; text-transform: uppercase; color: var(--muted); }
.chart ul, .chart ol { margin: 0; padding: 0; list-style: none; }
.chart li { font-size: inherit; color: inherit; margin-bottom: 0; }

/* Barres horitzontals · magnitud comparada */
.bars { display: grid; gap: 16px; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 14px; }
.bar-k { font-family: var(--display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.bar-v { font-family: var(--display); font-weight: 300; font-size: 16px; letter-spacing: 0.04em; color: var(--ink); text-align: right; }
.bar-t { grid-column: 1 / -1; height: 10px; background: rgba(16,16,14, 0.09); }
.bar-f { display: block; height: 100%; background: var(--ink-2); }
.bar-n { grid-column: 1 / -1; font-size: 12px; line-height: 1.6; color: #6B6560; }
.bar.on .bar-f { background: var(--red); }
.bar.on .bar-k, .bar.on .bar-v, .bar.on .bar-n { color: var(--red-dark); }

/* Escala · trams proporcionals en una tira (edats, mesos, setmanes) */
.scale { display: flex; flex-direction: column; gap: 2px; }
.scale li { position: relative; padding: 13px 13px 15px; background: var(--paper-2); border-top: 3px solid var(--line); }
.scale li.on { border-top-color: var(--red); }
.scale-a { display: block; font-family: var(--display); font-weight: 300; font-size: 15px; letter-spacing: 0.04em; color: var(--ink); }
.scale-n { display: block; margin-top: 7px; font-family: var(--display); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.scale li.on .scale-n { color: var(--red-dark); }
@media (min-width: 680px) {
  .scale { flex-direction: row; align-items: stretch; }
  .scale li { flex: var(--y, 1) 1 0; min-width: 0; }
  .scale-a { font-size: clamp(12px, 1.5vw, 15px); }
}

/* Ràtio · quantes persones per adult, comptades una a una */
.ratio { display: grid; gap: clamp(22px, 3vw, 30px); }
@media (min-width: 620px) { .ratio { grid-template-columns: 1fr 1fr; } }
.chart p.ratio-h { font-family: var(--display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.dots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; max-width: 210px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.dot.ad { width: 18px; height: 18px; background: var(--red); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px rgba(226, 6, 19, 0.35); }
.chart p.ratio-v { margin-top: 16px; font-family: var(--display); font-weight: 300; font-size: 20px; letter-spacing: 0.04em; color: var(--ink); }
.chart p.ratio-v em { font-style: normal; color: var(--red); }
.chart p.ratio-n { margin-top: 6px; font-size: 12px; line-height: 1.6; color: #6B6560; }

/* Repartiment · una sola barra partida en dos trams que sumen el total */
.split { display: flex; gap: 2px; height: 16px; }
.split span { display: block; }
.split .f { background: var(--red); }
.split .m { background: var(--ink-2); }
.chart p.split-k { display: flex; justify-content: space-between; gap: 14px; margin-top: 13px; font-family: var(--display); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.chart p.split-k b { font-weight: 400; color: var(--red-dark); }
.chart p.split-k i { font-style: normal; color: var(--ink); }

/* Llindar · una escala amb la franja on la cosa es trenca */
.gauge { margin-top: 6px; }
.gauge-t { position: relative; height: 16px; background: rgba(16,16,14, 0.09); }
.gauge-z { position: absolute; top: -7px; bottom: -7px; background: rgba(226, 6, 19, 0.12); border-left: 2px solid var(--red); border-right: 2px solid var(--red); }
.gauge-x { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--display); font-size: 9px; letter-spacing: 0.18em; color: var(--muted); }
.chart p.gauge-n { margin-top: 20px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.chart p.gauge-n b { font-weight: 500; color: var(--ink); }

/* Pista · l'única peça que és geometria pura, i per això va en SVG */
.court { display: block; width: 100%; height: auto; margin-top: 6px; }
.court-out { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.court-in { fill: none; stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.court-zone { fill: rgba(226, 6, 19, 0.10); stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.court-hoop { fill: none; stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* Comparativa · taula de dues columnes enfrontades */
table.vs { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.vs th, table.vs td { padding: 11px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.vs thead th { font-family: var(--display); font-weight: 400; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
table.vs thead th.a { color: var(--red-dark); }
table.vs tbody th { font-family: var(--display); font-weight: 400; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
table.vs td { font-size: 13.5px; color: var(--ink-2); }
table.vs td.a { color: var(--red-dark); }

/* ==== PORTADA · EXTENSA ====================================================
   El mateix joc de peces que la portada (index.html) i que la guia visual
   «Franges i Extensa»: filets de secció amb el nom a l'esquerra i la dada a la
   dreta, peces de mitjà, targetes de text i la franja de paritat partida pel
   mig. Aquí hi viuen perquè una pàgina interior no hagi de reinventar-les:
   si es canvien, es canvien als dos llocs alhora. */

/* Filet de secció · és el que fa que la pàgina llegeixi com un diari. */
.e-sech-wrap { padding-top: clamp(20px, 3vw, 34px); }
.e-sech { border-top: 2px solid var(--red); padding: 14px 0 12px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.e-sech h2 { font-family: var(--display); font-weight: 400; font-size: clamp(15px, 2vw, 20px); letter-spacing: 0.02em; text-transform: uppercase; }
.e-sech em { font-style: normal; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* Els títols de secció d'un article porten el mateix filet vermell: és el
   gest que lliga una pàgina interior amb la portada extensa sense afegir cap
   color nou ni tocar el marcatge de cada pàgina. */
.prose h2 { border-top: 2px solid var(--red); padding-top: clamp(14px, 2vw, 18px); }

/* Peça gran i dues targetes · la graella d'una secció d'un mitjà. */
.e-feat { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 34px); padding: clamp(30px, 4.5vw, 54px) 0; }
@media (min-width: 860px) { .e-feat { grid-template-columns: 1.4fr 1fr 1fr; } }
.e-art { display: block; }
.e-art .im { display: block; position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 3 / 4; }
.e-art .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.7s var(--ease); }
.e-art:hover .im img { transform: scale(1.04); }
.e-art .cap { display: block; padding: 14px 2px 0; }
.e-art .kick { font-family: var(--body); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); }
.e-art h3 { font-size: clamp(17px, 2.1vw, 24px); letter-spacing: 0.02em; text-transform: none; font-weight: 500; margin: 8px 0 6px; line-height: 1.15; }
.e-art.wide h3 { font-size: clamp(20px, 2.8vw, 32px); }
.e-art p { font-size: 13px; color: var(--ink-2); }

/* Guies · targetes de text, sense foto. */
.e-guides { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(30px, 4.5vw, 54px); }
@media (min-width: 760px) { .e-guides { grid-template-columns: repeat(3, 1fr); } }
.e-guide { display: block; background: var(--paper); padding: clamp(20px, 2.6vw, 28px); transition: background 0.3s var(--ease); }
.e-guide:hover { background: var(--paper-2); }
.e-guide .kick { font-family: var(--body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); }
.e-guide h3 { font-size: 15.5px; font-weight: 500; text-transform: none; letter-spacing: 0.01em; margin: 9px 0 8px; line-height: 1.25; }
.e-guide p { font-size: 12.5px; color: var(--ink-2); margin: 0; }

/* Paritat · la meitat exacta de la franja per a cada línia: ho diu
   l'estructura, no la xifra. */
.e-par { background: var(--red); color: #fff; margin: clamp(24px, 3.5vw, 40px) 0; }
.e-par .halves { display: grid; grid-template-columns: 1fr 1px 1fr; }
@media (max-width: 640px) { .e-par .halves { grid-template-columns: 1fr; } }
.e-par .rule { background: rgba(255,255,255,0.4); width: auto; height: auto; margin: 0; }
@media (max-width: 640px) { .e-par .rule { height: 1px; } }
.e-par .h { padding: clamp(22px, 3.2vw, 32px) clamp(20px, 4vw, 40px); }
.e-par .h span { display: block; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.82; }
.e-par .h b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 2.8vw, 30px); text-transform: uppercase; line-height: 1; margin-top: 10px; }
.e-par .foot { border-top: 1px solid rgba(255,255,255,0.4); padding: 16px clamp(20px, 4vw, 40px); font-size: 13px; }
.e-par .foot a { color: #fff; }

/* Bloc sobre tinta · el vermell s'hi aclareix, que sobre negre el de l'escut
   perd contrast. */
.e-lema { background: var(--ink); color: #fff; text-align: center; padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 50px); margin: clamp(24px, 3.5vw, 40px) 0; }
.e-lema .eyebrow { color: rgba(255,255,255,0.6); }
.e-lema h2 { color: #fff; margin-top: 10px; }
.e-lema h2 em { font-style: normal; color: #FF3B41; }
.e-lema p { color: rgba(255,255,255,0.8); max-width: 58ch; margin: 18px auto 0; }
.e-lema .cta { color: #fff; margin-top: 20px; }
.e-lema .cta:hover { color: #FF3B41; }

/* Barra de novetats · lliga qualsevol pàgina amb la portada. */
.ticker { position: relative; z-index: 120; height: 32px; background: var(--ink); display: flex; align-items: center; overflow: hidden; }
.tk-lab { flex-shrink: 0; height: 100%; padding: 0 clamp(12px, 3vw, 20px); background: var(--red); color: #fff; display: flex; align-items: center; gap: 9px; font-family: var(--body); font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase; }
.tk-trk { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.tk-cnt { display: inline-flex; gap: clamp(30px, 6vw, 60px); white-space: nowrap; animation: tkScroll 46s linear infinite; }
.ticker:hover .tk-cnt { animation-play-state: paused; }
.tk-it { font-family: var(--body); font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
@keyframes tkScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* ============================================================
   Formularis · component compartit
   Newsletter, bústia de suggeriments i canal de protecció.
   Alçada mínima de 48 px als camps i al botó: mida de dit.
   ============================================================ */
.form { margin-top: 26px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 7px; }
.form-row .hint { display: block; font-size: 13px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--ink-2); margin-top: -3px; margin-bottom: 8px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 13px 14px;
  /* 16px, no 15px: per sota d'això Safari a iOS fa zoom en sol tocar el camp. */
  font-family: var(--body); font-size: 16px; font-weight: 300; line-height: 1.5;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.form textarea { min-height: 160px; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink-2); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.form input::placeholder, .form textarea::placeholder { color: #6B6560; }

/* Casella de consentiment: el text ha de ser llegible, no una etiqueta petita */
.form-check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px; }
.form-check input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--red); cursor: pointer; }
.form-check label { font-size: 14px; font-weight: 300; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--ink-2); margin: 0; cursor: pointer; }
.form-check a { color: var(--red-dark); }

/* Estat obligatori i error */
.form .req { color: var(--red-dark); }
.form-err { display: none; margin-top: 7px; font-size: 13.5px; color: var(--red-dark); }
.form-err.on { display: block; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--red-dark); }

/* Resposta després d'enviar */
.form-done { display: none; padding: 26px; background: var(--paper-2); border-left: 3px solid var(--red); }
.form-done.on { display: block; }
.form-done h3 { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 9px; }
.form-done p { font-size: 15px; color: var(--ink-2); }
.form.sent { display: none; }

/* Avís destacat dins d'un formulari (vies d'urgència, nota legal) */
.form-note { padding: 18px 20px; background: var(--paper-2); border-left: 3px solid var(--ink); margin: 22px 0; }
.form-note p { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.form-note p + p { margin-top: 9px; }
.form-note strong { color: var(--ink); font-weight: 500; }
.form-note.urgent { border-left-color: var(--red); }

/* Un .btn amb text llarg desbordava a 390 px: és inline-flex i no s'encongia.
   Que no passi mai de l'ample disponible i que el text pugui partir. */
.btn { max-width: 100%; text-align: center; text-wrap: balance; }

/* ==== PORTADA D · «L'EDICIÓ» ================================================
   La quarta portada del 30/08/2026. Va a la newsletter setmanal, que és la
   premsa escrita del club: filets gruixuts, titular de tabloide i les tres
   peces fixes de cada número.

   Es fa servir a /newsletter/ i les seves dues traduccions, i la plantilla de
   correu (docs/newsletter/) en repeteix la forma amb taules perque el correu
   no entén el grid.

   Els tres colors de sempre. La foto entra en duotò vermell —una sola tinta,
   com un risògraf—, que és «tres colors i prou, la foto fa de quart» portat
   fins on arriba. El groc no hi surt.
   ========================================================================== */

.ed { border-top: 4px solid var(--ink); background: var(--paper); }

/* La cinta de dalt: qui som, quin número és i cada quan surt. */
.ed-bar {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px clamp(14px, 3vw, 22px);
  border-bottom: 3px solid var(--ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.ed-bar .r { color: var(--red-dark); }

/* El masthead. */
.ed-mast {
  position: relative;
  padding: clamp(24px, 4vw, 46px) clamp(16px, 4vw, 52px) clamp(16px, 3vw, 32px);
  border-bottom: 3px solid var(--ink);
}
.ed-mast h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(46px, 9vw, 132px); line-height: .86;
  color: var(--ink); letter-spacing: .01em; margin: 0;
  text-transform: uppercase;
}
/* La segona línia buidada. Sense el suport de -webkit-text-stroke es queda
   plena i negra, que segueix sent correcta: mai un titular invisible. */
.ed-mast h1 .out { color: var(--ink); }
@supports (-webkit-text-stroke: 2px black) {
  .ed-mast h1 .out { color: transparent; -webkit-text-stroke: 2.5px var(--red); }
}
.ed-mast .stamp {
  position: absolute; right: clamp(12px, 4vw, 52px); top: clamp(18px, 3vw, 40px);
  border: 3px solid var(--red); color: var(--red-dark); background: var(--paper);
  padding: 9px 13px; transform: rotate(6deg);
  font-weight: 800; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  text-align: center; line-height: 1.5;
}
@media (max-width: 640px) { .ed-mast .stamp { position: static; display: inline-block; transform: none; margin-top: 16px; } }

/* El teletip dels partits de la jornada. */
.ed-marq { overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--ink); color: #fff; white-space: nowrap; }
.ed-marq .in { display: inline-block; padding: 9px 0; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ed-marq b { color: var(--red-light); margin: 0 14px; }
@media (prefers-reduced-motion: no-preference) { .ed-marq .in { animation: ed-scroll 30s linear infinite; } }
@keyframes ed-scroll { to { transform: translateX(-50%); } }
@media print { .ed-marq { display: none; } }

/* La primera plana: obertura gran a l'esquerra, sumari a la dreta. */
.ed-grid { display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 3px solid var(--ink); }
.ed-main { padding: clamp(18px, 3vw, 36px); border-right: 3px solid var(--ink); }
.ed-duo { background: var(--red); overflow: hidden; }
/* Duotò: la foto en gris multiplicada sobre el vermell de l'escut. Una tinta. */
/* El contrast puja fins a 1,35: la foto de la grada te el public de fons
   molt cla, i amb el multiply per sota del 1,3 les cares es perdien en
   una taca vermella plana. */
.ed-duo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 22%; filter: grayscale(1) contrast(1.35) brightness(0.94); mix-blend-mode: multiply; display: block; }
.ed-main h2 { font-size: clamp(26px, 3.6vw, 50px); line-height: .94; margin: 18px 0 10px; }
.ed-main .stand { font-size: 15px; color: var(--ink-2); max-width: 60ch; margin: 0; }
.ed-main .folio { margin-top: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--red-dark); }

.ed-side { display: flex; flex-direction: column; }
.ed-side .hd { padding: 12px 20px; border-bottom: 3px solid var(--ink); font-family: var(--display); font-weight: 400; font-size: 19px; text-transform: uppercase; background: var(--paper-2); }
.ed-brief { padding: 15px 20px; border-bottom: 1px solid var(--line); }
.ed-brief:last-of-type { border-bottom: none; }
.ed-brief b { display: block; font-weight: 800; font-size: 14px; color: var(--ink); }
.ed-brief span { font-size: 12.5px; color: var(--muted); }
.ed-brief .pg { float: right; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--red-dark); }
.ed-num { margin-top: auto; padding: 18px 20px; border-top: 3px solid var(--ink); display: flex; align-items: baseline; gap: 14px; }
.ed-num .n { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 6vw, 90px); line-height: .9; color: var(--red); }
.ed-num span { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

/* El peu: la crida, amb la foto en duotò al costat. */
.ed-foot { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; align-items: stretch; }
.ed-foot .duo { background: var(--red); overflow: hidden; }
.ed-foot .duo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.35) brightness(0.94); mix-blend-mode: multiply; display: block; }
.ed-foot .say { background: var(--ink); color: #fff; padding: clamp(22px, 4vw, 46px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ed-foot .say h2 { color: #fff; font-size: clamp(24px, 3.4vw, 46px); line-height: .94; margin: 0; }
.ed-foot .say h2 em { font-style: normal; color: var(--red-light); }
.ed-foot .say p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.72); max-width: 50ch; }

/* El colofó, com el peu d'impremta d'un diari. */
.ed-colo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px clamp(14px, 3vw, 18px); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-top: 3px solid var(--ink); }

@media (max-width: 860px) {
  .ed-grid { grid-template-columns: 1fr; }
  .ed-main { border-right: none; border-bottom: 3px solid var(--ink); }
  .ed-foot { grid-template-columns: 1fr; }
  .ed-foot .duo img { aspect-ratio: 16 / 9; height: auto; }
}

/* ==== FITXES D'EQUIP · files de partit amb escuts =========================
   Les pinta .github/scripts/generate-team-pages.py a /partits/equips/.
   Cada fila és qui juga contra qui: l'escut del Barna i el del rival,
   resolt per scripts/escuts_partits.py. Quan un club no té escut a
   l'inventari, hi va un cercle amb les seves inicials — mai l'escut d'un
   altre i mai un forat. */

.vsq { list-style: none; margin: 0; padding: 0; }
.vsq > li {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr auto;
  gap: 8px clamp(10px, 2vw, 20px);
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.vsq-quan { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.4; }
.vsq-quan b { display: block; color: var(--ink); font-weight: 650; }

.vsq-duel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 13.5px; }
.vsq-duel .nom { font-weight: 650; color: var(--ink); }
.vsq-duel .contra { font-family: var(--display); font-size: 10.5px; color: var(--muted); letter-spacing: .12em; flex-shrink: 0; }
.vsq-escut { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
/* El substitut de qui no té escut: les inicials, no un forat. */
.vsq-sense {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: var(--muted);
}
.vsq-fi { text-align: right; font-size: 12.5px; color: var(--muted); }
.vsq-fi strong { display: block; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.vsq-fi .guany { color: var(--red-dark); }

@media (max-width: 560px) {
  .vsq > li { grid-template-columns: 1fr auto; }
  .vsq-quan { grid-column: 1 / -1; display: flex; gap: 8px; }
  .vsq-quan b { display: inline; }
}