/* forma_part.css — Pàgina "Forma'n part" (/forma-part), selector Paradista /
   Gestor del mercat.

   Reutilitza els tokens globals ja definits a styles.css (--color-forest,
   --color-evergreen, --color-pine, --color-fog, .btn-pill i variants) i
   només defineix el que és propi d'aquesta pàgina. Duplica deliberadament
   les ~15 línies del topbar en lloc de carregar index.css sencer, per no
   arrossegar regles del carrusel de mercats / CTA de la home que no
   apliquen aquí (vegeu docs/forma-part/SPRINT-1-IMPLEMENTATION.md).
*/

/* ---------- Topbar (equivalent visual del .hero-topbar de la landing) ---------- */
.fp-topbar {
  background: var(--color-forest);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
}
.fp-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.fp-brand:hover { color: #fff; }

/* ---------- Selector de pestanyes (ARIA Tabs) ---------- */
.fp-tabs-header {
  padding-top: 1.75rem;
  padding-bottom: 0.25rem;
}
.fp-tablist {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  max-width: 520px;
  margin-inline: auto;
  border-bottom: 1px solid color-mix(in srgb, var(--color-pine) 25%, transparent);
}
.fp-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  /* #4a544d (not opacity on --color-evergreen) so the inactive label still
     meets WCAG AA (4.5:1) against --color-fog — opacity:0.55 measured at
     only ~2.6:1, a real contrast failure caught in the Sprint 3 audit. */
  color: #4a544d;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fp-tab.is-active { color: var(--color-evergreen); border-color: var(--color-pine); }
.fp-tab:hover { color: var(--color-evergreen); }
.fp-tab:focus-visible { outline: 2px solid var(--color-pine); outline-offset: 2px; }

/* Sota 360px "Gestor del mercat" trenca a dues línies i, com que els dos
   tabs són flex-1 dins una fila (stretch per defecte), "Paradista" queda
   estirat a la mateixa alçada amb un buit visual innecessari — trobat a
   l'auditoria de Sprint 4 (mesurat: trenca de 320 a 359px, ja cap en una
   línia des de 360px). Només s'ajusta aquí (mida/padding), no es toca res
   més del component. */
@media (max-width: 359px) {
  .fp-tab { font-size: 0.82rem; padding-left: 0.5rem; padding-right: 0.5rem; }
}

.fp-panel[hidden] { display: none; }

/* ---------- Hero de pestanya ----------
   Sprint 6: el títol (fp-hero-heading) ara viu FORA de .fp-hero-row, com a
   element d'amplada completa que precedeix Imatge+Text — vegeu la macro
   fp_hero() i SPRINT-5-VISUAL-AUDIT.md secció 4.1. Aquí només calen mides
   de marge noves per a aquesta posició; res més del bloc canvia.

   Sprint 8 (SPRINT-7-VISUAL-REAUDIT.md secció B): padding-bottom és ara
   l'ÚNIC mecanisme que separa el hero de la secció següent — les seccions
   ja no aporten el seu propi padding-top (vegeu .fp-section més avall), així
   que aquest valor ha de ser per si sol el "aire" complet de la transició,
   no la meitat d'un doble padding com abans. */
.fp-hero { padding: 2.25rem 0 2rem; }
.fp-hero-media {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-fog);
}
.fp-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-hero-heading {
  font-size: clamp(1.85rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--color-evergreen);
  line-height: 1.15;
  max-width: 46rem;
  margin-bottom: 1.25rem;
}
.fp-hero-lead {
  color: #4a544d;
  font-size: 1.08rem;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

/* ---------- Seccions genèriques ----------
   Sprint 8 — P0, correcció del sistema d'espaiat vertical (SPRINT-7-VISUAL-
   REAUDIT.md secció B): abans `.fp-section { padding: 2.5rem 0 }` posava
   padding-top I padding-bottom a CADA secció, de manera que dues seccions
   germanes sumaven 40px+40px=80px mecànics a cada transició, independentment
   del contingut. Ara cada secció només aporta padding-BOTTOM (l'espai cap a
   "el que ve després" el decideix qui precedeix, no qui segueix) — un únic
   mecanisme de separació, no dos que se sumen. El valor base (2.5rem/40px)
   correspon al nivell 3 de la jerarquia d'espaiat demanada ("espacio entre
   módulos"); els nivells 1 (intern d'un mòdul: padding de .fp-surface,
   .fp-direction-item, etc.) i 2 (entre elements relacionats: gap de
   checklist, margin-bottom de heading) ja estaven correctament resolts i no
   es toquen aquí. El nivell 4 ("grans moments narratius") s'aplica de manera
   selectiva més avall, secció per secció, no com a valor per defecte. */
.fp-section { padding: 0 0 2.5rem; }

/* Transicions que són un "gran moment narratiu" (canvi de veu/registre, no
   només pas d'una idea a la següent) — una mica més d'aire que el valor base:
   Paradista, dels pensaments (veu) a la targeta de solució (fets/valor). */
.fp-section-pains { padding-bottom: 3.25rem; }
/* Gestor, del bloc de les dues direccions (targeta) a les dades/KPIs. */
.fp-section-directions { padding-bottom: 3.25rem; }

/* Seccions que precedeixen directament un bloc .fp-cta-section (CTA/tancament):
   cedeixen tot el control de l'espai al padding-top propi d'aquell bloc
   (vegeu .fp-cta-section més avall) per no duplicar-lo — únic mecanisme,
   com exigeix l'objectiu d'aquest sprint. */
.fp-section-objections { padding-bottom: 0; }
.fp-section-contacte { padding-bottom: 0; }
/* Sprint 9 (Regla global 4 — jerarquia d'espaiat): abans 0.5rem (8px) entre
   heading i el contingut immediatament relacionat (llista, mòdul) — per
   sota del mínim de 16px que el brief demana per a "elements directament
   relacionats". Pujat a 1rem (16px), el mínim exigit. */
.fp-section-heading {
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--color-evergreen);
  margin-bottom: 1rem;
  /* Sprint 9: styles.css defineix `main h2 { padding-inline: 12px }` per a
     headings que viuen directament a <main> sense contenidor propi — aquí
     sempre viuen dins de .container/.fp-surface, que ja aporten el seu
     propi padding. Sense aquesta anul·lació, el text del heading queda 12px
     més a la dreta que el body just a sota (mateixa capsa, padding intern
     diferent) — trobat en un dispositiu real, no reproduïble només amb
     getBoundingClientRect() perquè aquest mesura la capsa, no el text. */
  padding-inline: 0;
}
.fp-section-subtitle {
  color: #4a544d;
  font-size: 1.02rem;
  margin-bottom: 1.5rem;
}

/* ---------- Sistema de superfícies (SPRINT-5-VISUAL-AUDIT.md secció 7) ----------
   FOG (fons de pàgina, ja existent, sense classe pròpia) = conversa/context/
   problema. BLANC (.fp-surface) = solució/valor/acció. S'aplica de manera
   selectiva (bloc de solució i CTA a Paradista; direction cards i formulari
   a Gestor) — mai com a fons general nou. Mateix radi (16px) que la resta
   del sistema visual del projecte, cap valor nou introduït. */
.fp-surface {
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
}
@media (min-width: 992px) {
  .fp-surface { padding: 2.25rem 2.5rem; }
}

/* ---------- Pensaments del Paradista (identificació — veu, no llista) ----------
   Sprint 6 (SPRINT-5-VISUAL-AUDIT.md secció 4.4): cursiva + sense icona,
   en lloc del checklist amb bi-dot que es llegia com a inventari de
   bullets.

   Sprint 9 (brief punt "BLOQUE 2"): s'afegeix el filet vertical fi que el
   Sprint 7 va proposar i el Sprint 8 va deixar deliberadament fora — és
   el mecanisme que fa llegir el bloc com a "veu/testimoni". El text dels
   pensaments queda deliberadament indentat respecte al filet (no comparteix
   la columna editorial amb H1/H2/checklist — excepció explícita del brief
   per a aquest bloc concret, igual que les superfícies blanques).

   Sprint 9 (petició posterior): la cometa única "de capçalera" per a tot
   el bloc s'ha eliminat — ara cada pensament porta la seva pròpia cometa
   d'obertura/tancament (vegeu fp_thoughts() al macro), com una cita
   individual en lloc d'un bloc de veu genèric. */
/* Excepció confirmada i deliberada a la regla d'alineació horitzontal
   (auditoria posterior: "H1/H2, paràgrafs, llistes i imatges amb el mateix
   marge lateral, 0px de diferència") — aquest bloc queda ~20px més a la
   dreta que la resta de contingut de la pàgina perquè el tractament de cita
   (border-left + padding-left) és intencionat, no un descuit d'alineació. */
.fp-thoughts {
  position: relative;
  max-width: 640px;
  padding-left: 1.15rem;
  border-left: 2px solid color-mix(in srgb, var(--color-pine) 32%, transparent);
}
.fp-thoughts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fp-thoughts-item {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #4a544d;
}

/* ---------- Checklist genèric (beneficis / objeccions / fricció) ----------
   Sprint 8 (SPRINT-7-VISUAL-REAUDIT.md secció A / SPRINT-8 brief punt 4):
   s'ha eliminat la icona ✓ — a Sprint 6 s'havia intentat un "hanging indent"
   (icona absolute penjada al gutter) que reduïa el desfasament respecte al
   heading (de ~30px a ~21px) però no l'eliminava, per manca d'espai real al
   voltant (.container només té 12px de padding a tot arreu). En lloc de
   continuar complicant el CSS per salvar una icona que no aportava prou
   valor, es treu del tot: sense icona ni padding-left, el text de cada
   ítem queda EXACTAMENT a la mateixa columna que el heading (0px de
   diferència, verificat amb getBoundingClientRect()). La diferenciació
   respecte al text normal ve només de l'estructura de llista + l'espaiat
   entre ítems, no de cap marca visual. S'aplica igual a totes les
   instàncies (Paradista solució/eliminar-por, Gestor direction-items/
   eliminar-fricció). NO toca fp_point_list (Gestor), que mai va tenir
   aquest problema. */
.fp-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 640px;
}
.fp-checklist-item {
  font-size: 1.05rem;
  color: var(--color-evergreen);
  line-height: 1.45;
}

/* Sprint 9: variant amb check ✓, demanada explícitament només per al bloc
   "Solució" de Paradista (fp_checklist(..., icon=true)). La icona (no el
   text) és la que queda flush amb el heading — el text de l'ítem es
   desplaça una mica a la dreta, excepció deliberada a la columna única. */
.fp-checklist--icon {
  /* Petició explícita: els 4 beneficis del bloc "Per això existeix
     MercatDigital" (Paradista) separats per un gap vertical uniforme de
     16px dins la mateixa superfície blanca — sobreescriu el gap compartit
     de .fp-checklist (0.85rem) només per aquesta variant. */
  gap: 16px;
}
.fp-checklist--icon .fp-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
/* Petició explícita: als blocs "I sense afegir més feina" (Gestor) i "És
   molt més senzill del que sembla" (Paradista), l'espai entre l'H2 i el
   primer element de la llista, i entre els elements de la llista entre si,
   ha de ser uniformement 12px — sobreescriu tant el gap compartit de
   .fp-checklist--icon (16px, bloc "Solució" de Paradista) com el
   margin-bottom global de .fp-section-heading (16px, resta de seccions),
   només per a aquests dos blocs concrets. */
.fp-section-friccio .fp-section-heading,
.fp-section-objections .fp-section-heading {
  margin-bottom: 12px;
}
.fp-section-friccio .fp-checklist--icon,
.fp-section-objections .fp-checklist--icon {
  gap: 12px;
}
.fp-checklist-icon {
  flex: 0 0 auto;
  color: var(--color-pine);
  font-size: 1.05rem;
  line-height: 1.45;
  margin-top: 0.05rem;
}

/* ---------- Imatge comuna 16:9 (compartida Paradista / Gestor) ---------- */
.fp-shared-media {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-fog);
}
.fp-shared-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Tancament (Gestor: text pla; Paradista: targeta — CTA) ----------
   Sprint 6 (SPRINT-5-VISUAL-AUDIT.md 4.9/4.10): .fp-cta-inner és sempre al
   marcat (macro fp_cta_section), però només porta l'aparença de targeta
   blanca quan la secció té la classe --surface (Paradista). Gestor tanca en
   text pla sobre fog, amb més aire per sobre en compensació (no té cap
   targeta que li doni pes visual) — cap targeta blanca aquí, deliberadament,
   perquè el seu moment d'acció ja és el formulari, no aquest tancament.

   Sprint 8: padding-top (3.5rem) és ara l'ÚNIC mecanisme d'espai entre el
   formulari/mailto de Gestor i aquest tancament (.fp-section-contacte té
   padding-bottom:0, més amunt) — no se suma a cap altre padding.

   Sprint 9 (Regla global 4): 3.5rem (56px) superava el límit de 52px sense
   una raó visual prou clara (era text pla → text pla, no una superfície
   nova) — reduït a 3rem (48px), dins del nivell "canvi narratiu important". */
.fp-cta-section { padding: 3rem 0 3rem; text-align: center; }
.fp-cta-section .fp-section-heading { margin-bottom: 0.25rem; }
.fp-cta-section .fp-cta-lead { color: #4a544d; margin-bottom: 1.75rem; }
.fp-cta-section .btn-pill { padding-inline: 2rem; }

/* padding-top 3rem: ara és l'ÚNIC mecanisme d'espai entre "Eliminar por" i
   la targeta CTA (.fp-section-objections té padding-bottom:0, més amunt) —
   ha de portar per si sol el pes d'un "gran moment narratiu".

   Sprint 9: padding-bottom baixat de 4rem (64px) a 3rem (48px) — superava
   el límit de 52px de la Regla global 4 sense cap raó documentada més
   enllà de "donar aire abans del footer". */
.fp-cta-section--surface { padding: 3rem 0 3rem; }
.fp-cta-section--surface .fp-cta-inner {
  background: #fff;
  border-radius: 16px;
  padding: 3rem 1.5rem;
  box-shadow: 0 4px 24px rgba(4, 32, 44, 0.06);
}
@media (min-width: 992px) {
  .fp-cta-section--surface .fp-cta-inner { padding: 3.5rem 4rem; }
}

/* ---------- Punts lleugers (identificació Gestor) ----------
   Obert sobre el fog, sense fons ni divisors propis. Petició explícita
   posterior: cada punt és únicament títol + text, sense cap bullet ni icona
   (s'ha retirat el punt "·" penjat que hi havia abans) — gap vertical
   uniforme de 24px (1.5rem) entre punts. */
.fp-point-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 780px;
}
/* Sprint 8 — P2 (SPRINT-7-VISUAL-REAUDIT.md secció H): abans .fp-point-title
   no tenia `font-size` propi — heretava la mida del body i només es
   diferenciava per `font-weight`, és a dir, era literalment "text en
   negreta", no un títol amb la seva pròpia escala. Ara comparteix
   explícitament el mateix graó tipogràfic que .fp-direction-title (1,15rem)
   — un tercer nivell entre H2 (clamp 1,4-1,9rem) i el cos (1,05rem),
   perceptible però sense competir amb els headings de secció. */
.fp-point-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-evergreen);
  margin-bottom: 0.15rem;
}
.fp-point-text { color: #4a544d; margin-bottom: 0; }

/* ---------- Dues direccions (Cap a les parades / Cap a l'Ajuntament) ----------
   Sprint 8 — P1 (SPRINT-7-VISUAL-REAUDIT.md secció E): abans .fp-directions
   només era un grid amb `gap` entre dues .fp-direction-card independents
   (cadascuna amb el seu propi fons/vora/ombra) — es llegien com "dues
   targetes", no com "un mòdul, dues direccions". Ara .fp-directions ÉS la
   superfície (un sol fons blanc, un sol radi, una sola ombra) i cada
   .fp-direction-item és només una subsecció interna sense fons/ombra
   pròpia, separada per un divisor prim (border-top en mòbil, border-left
   en desktop via la media query més avall). */
.fp-directions {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(4, 32, 44, 0.05);
  overflow: hidden;
}
.fp-direction-item { padding: 1.5rem; }
.fp-direction-item + .fp-direction-item {
  border-top: 1px solid color-mix(in srgb, var(--color-pine) 12%, transparent);
}
.fp-direction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-pine);
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}
.fp-direction-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-evergreen);
  margin-bottom: 0.15rem;
}
.fp-direction-subtitle {
  font-weight: 600;
  color: #4a544d;
  margin-bottom: 0.6rem;
}
.fp-direction-text { color: #4a544d; margin-bottom: 1rem; }
.fp-direction-item .fp-checklist { max-width: none; gap: 0.5rem; }
.fp-direction-item .fp-checklist-item { font-size: 0.98rem; }

/* ---------- Impacte del mercat (KPIs il·lustratius) ---------- */
.fp-kpi-note {
  display: inline-block;
  font-size: 0.85rem;
  font-style: italic;
  /* #4a544d, not #5b6660: at this size directly on --color-fog, #5b6660
     measured 3.82:1 (fails WCAG AA 4.5:1) — Sprint 3 contrast audit. */
  color: #4a544d;
  margin-bottom: 1.25rem;
}
/* Sprint 8 — P1 (SPRINT-7-VISUAL-REAUDIT.md secció F): abans 4 .fp-kpi-tile
   independents (fons/vora pròpies) + 1 targeta insight, separades per `gap`
   de fons fog — es llegien com "5 targetes en una graella", no com "un únic
   panell de dades". Ara .fp-kpi-grid ÉS la superfície (un sol fons, un sol
   radi, una sola ombra) i cada .fp-kpi-tile és una cel·la interna sense fons
   propi, separada per divisors prims (border-right/border-bottom) — mateix
   patró "contenidor + divisors interns" que .fp-directions, perquè la pàgina
   reconegui aquest llenguatge com el seu propi sistema per a "grups de dades
   relacionades". Regles de vora per `nth-child` perquè no calen canvis de
   marcat: mòbil és una graella de 2 columnes (dret desapareix a la 2a
   columna), desktop passa a 4 columnes (dret desapareix a la 4a, es
   reinstaura a la 2a i 3a) — vegeu la media query per al cas desktop. */
.fp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(4, 32, 44, 0.05);
  overflow: hidden;
}
.fp-kpi-tile {
  padding: 1.1rem 1rem;
  border-right: 1px solid color-mix(in srgb, var(--color-pine) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-pine) 12%, transparent);
}
.fp-kpi-tile:nth-child(2n) { border-right: none; }
.fp-kpi-tile--insight { border-right: none; border-bottom: none; }
.fp-kpi-number {
  display: block;
  /* Bumped from clamp(1.5rem, 4vw, 1.9rem) — Sprint 6, SPRINT-5-VISUAL-AUDIT.md
     secció 4.7: més pes visual perquè es llegeixin com a dades reals. */
  font-size: clamp(1.75rem, 4.5vw, 2.2rem);
  font-weight: 700;
  color: var(--color-evergreen);
  line-height: 1.1;
}
/* La targeta --insight mostra un títol curt, no una xifra: mateix pes
   tipogràfic que la resta però a mida de text normal (abans un style
   inline al template — moguda aquí, Sprint 6). */
.fp-kpi-number--insight { font-size: 1.05rem; }
.fp-kpi-label {
  display: block;
  font-size: 0.88rem;
  color: #5b6660;
  margin-top: 0.25rem;
}
.fp-kpi-tile--insight {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.fp-kpi-tile--insight i { color: var(--color-pine); font-size: 1.3rem; flex: 0 0 auto; margin-top: 0.15rem; }
.fp-kpi-tile--insight .fp-kpi-label { margin-top: 0.15rem; }

/* ---------- Contacte (formulari + mailto) ----------
   Sprint 6 (SPRINT-5-VISUAL-AUDIT.md secció 4.8): el <form> sencer (camps +
   botó) passa a superfície blanca — abans eren inputs solts directament
   sobre el fons fog. La capçalera de la secció ("Parlem del teu mercat...")
   es queda FORA, en zona de conversa; el mailto alternatiu també es queda
   FORA, sota la targeta, reforçant per superfície que és la via secundària.
   Cap canvi de marcat, camps, validació ni comportament. */
.fp-form {
  max-width: 560px;
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
}
@media (min-width: 992px) {
  .fp-form { padding: 2rem; }
}
.fp-field { margin-bottom: 1.1rem; }
.fp-field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-evergreen);
  margin-bottom: 0.35rem;
}
.fp-optional { font-weight: 400; color: #4a544d; }
.fp-field input,
.fp-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-pine) 30%, transparent);
  background: #fff;
  color: var(--color-evergreen);
  font-family: inherit;
  font-size: 1rem;
}
.fp-field input:focus,
.fp-field textarea:focus {
  outline: 2px solid var(--color-pine);
  outline-offset: 1px;
}
.fp-field textarea { min-height: 120px; resize: vertical; }
.fp-form-submit { margin-top: 0.25rem; }
.fp-contact-alt {
  margin-top: 1.5rem;
  /* Sprint 8: sense això, el `<p>` hereta el margin-bottom:1rem per defecte
     de Bootstrap (Reboot) — 16px de marge "no controlat" per cap regla
     d'aquest full d'estils, que se sumava per sorpresa al padding-top de
     .fp-cta-section (el mecanisme únic que hauria de governar aquest espai
     — vegeu la secció "Seccions genèriques" més amunt). Trobat en mesurar
     el gap real amb getBoundingClientRect() durant la verificació d'aquest
     sprint: sortia 16px en lloc dels 56px esperats. */
  margin-bottom: 0;
  color: #4a544d;
}
.fp-contact-alt a { color: var(--color-pine); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  /* justify-content-start (no "center"): amb el títol ara fora de la fila,
     la columna de text només conté 1-2 paràgrafs curts — centrar-la contra
     l'alçada completa de la imatge (molt alta, 4:5) el deixava flotant en
     un buit. Top-align + una mica de padding perquè no quedi enganxat a la
     vora superior. Trobat i corregit durant la verificació visual del
     Sprint 6 (no anticipat al document d'auditoria del Sprint 5). */
  .fp-hero-text { padding-top: 0.5rem; }
  .fp-hero-row { align-items: flex-start; }
  /* Sprint 8: en 2 columnes, el divisor entre les dues direccions passa de
     ratlla horitzontal (mòbil) a vertical (desktop) — segueix sent un sol
     mòdul amb un sol fons/radi/ombra, només canvia l'orientació del tall. */
  .fp-directions { grid-template-columns: 1fr 1fr; }
  .fp-direction-item + .fp-direction-item {
    border-top: none;
    border-left: 1px solid color-mix(in srgb, var(--color-pine) 12%, transparent);
  }
  /* KPI: 4 columnes en lloc de 2 — la vora dreta ha de desaparèixer només a
     la 4a columna, no a la 2a (reinstaurar la regla mòbil primer). */
  .fp-kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .fp-kpi-tile:nth-child(2n) { border-right: 1px solid color-mix(in srgb, var(--color-pine) 12%, transparent); }
  .fp-kpi-tile:nth-child(4n) { border-right: none; }
  .fp-kpi-tile--insight { border-right: none; }
}