/* NOUBAU — full d'estil únic.
   Primer les regles globals (base, retícula, tipografia editorial, botons,
   filets) i després el CSS de cada peça, en l'ordre en què es dibuixa. Ve del
   CSS que abans vivia dins de cada component d'Astro: els selectors no es
   trepitgen entre ells (BEM per peça), així que aquí van tal qual, sense àmbit.
   L'ordre importa: les regles de peça han d'anar DESPRÉS de les globals, perquè
   quan comparteixen especificitat (p. ex. .hdr__cta contra .btn) mani la peça. */

/* ================= Global ================= */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Xarxa de seguretat per a paraules que no hi caben (compostos francesos, correus,
     URLs): abans de desbordar la caixa, es parteixen. */
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 500; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--c-pastel); color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- Retícula ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}

@media (max-width: 899px) {
  .grid { --cols: 6; }
}
@media (max-width: 599px) {
  .grid { --cols: 2; }
}

/* Entre dos blocs hi ha d'haver UN sol --section-y, mai la suma de dos. */
.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }

/* Les bandes a sang (cita i CTA en negre) porten l'aire a dins, perquè el color
   arriba fins a la vora. Si també hi sumessin el de les seccions veïnes sortirien
   forats de 300 px de no res: el veí en posa poc més d'un terç i la banda, la resta. */
.section--band { padding-block: 0; }
.section:has(+ .section--band) { padding-bottom: calc(var(--section-y) * 0.4); }
.section--band + .section { padding-top: calc(var(--section-y) * 0.4); }

/* ---------- Tipografia editorial ---------- */
.kicker {
  display: block;
  margin: 0 0 var(--s-3);
  font-size: var(--t-kicker);
  font-weight: 800;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-muted);
}
.kicker--accent { color: var(--c-terracotta-ink); }
.on-dark .kicker { color: var(--c-pastel); }

.display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  letter-spacing: -0.012em;
  max-width: 34ch;
}

.prose { max-width: 68ch; }
.prose p + p { margin-top: 0; }
.muted { color: var(--c-muted); }

/* ---------- Filets ---------- */
.rule { border: 0; border-top: 1px solid var(--c-rule); margin: 0; }
.on-dark .rule { border-top-color: rgba(255, 255, 255, 0.22); }

/* ---------- Bandes fosques ---------- */
.on-dark {
  background: var(--c-black);
  color: #fff;
}
.on-dark .muted { color: rgba(255, 255, 255, 0.62); }
.on-dark ::selection { background: var(--c-terracotta); color: #fff; }

/* ---------- Motiu diagonal (24,7° respecte la vertical) ---------- */
.diag-br {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--slant)),
    calc(100% - var(--slant-x)) 100%,
    0 100%
  );
}
.diag-tl {
  clip-path: polygon(
    var(--slant-x) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--slant)
  );
}
.diag-bl {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--slant-x) 100%,
    0 calc(100% - var(--slant))
  );
}

/* ---------- Botons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary {
  background: var(--c-terracotta-ink);
  border-color: var(--c-terracotta-ink);
  color: #fff;
}
.btn--primary:hover { background: var(--c-terracotta-deep); border-color: var(--c-terracotta-deep); }
.btn--ghost {
  background: transparent;
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.btn--ghost:hover { background: var(--c-ink); color: #fff; }
.on-dark .btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.on-dark .btn--ghost:hover { background: #fff; color: var(--c-ink); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Enllaç de text amb subratllat fi que s'engreixa amb l'accent */
.link {
  text-decoration: none;
  background-image: linear-gradient(var(--c-terracotta), var(--c-terracotta));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease);
}
.link:hover { background-size: 100% 2px; }

/* ---------- Files de llista amb filet ---------- */
.rows { border-top: 1px solid var(--c-rule); }
.row {
  display: grid;
  gap: var(--s-2);
  padding-block: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--c-rule);
}
.on-dark .rows { border-top-color: rgba(255, 255, 255, 0.22); }
.on-dark .row { border-bottom-color: rgba(255, 255, 255, 0.22); }

/* ---------- Etiqueta / tag ---------- */
.tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--c-pastel-wash);
  border-radius: var(--radius);
  font-size: var(--t-kicker);
  font-weight: 800;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: #7a4a34;
}

/* ---------- Accessibilitat ---------- */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-ink);
  color: #fff;
  font-size: var(--t-small);
  text-decoration: none;
  transition: top 150ms var(--ease);
}
.skip-link:focus { top: var(--s-2); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Aparició suau ----------
   Només s'amaga si hi ha JS (la classe `js` la posa un script en línia del <head>):
   sense JS el contingut es veu sempre.

   Xarxa de seguretat: l'animació `reveal-fallback` torna l'opacitat als 3 s encara que
   l'observador no arribi a disparar mai (mòdul que no carrega, captura de pàgina
   sencera, pestanya en segon pla). Un bloc no pot acabar sent un forat blanc. */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal-fallback 1ms linear 3s forwards;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  animation: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@keyframes reveal-fallback {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ================= Logo ================= */
.logo {
    display: block;
    color: currentColor;
    flex: none;
  }

/* ================= Header ================= */
.hdr {
    --hdr-h: 72px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-rule);
  }

  .hdr__inner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--hdr-h);
  }

  .hdr__brand {
    display: flex;
    align-items: center;
    color: var(--c-ink);
    text-decoration: none;
    margin-right: auto;
  }

  /* La barra completa surt a partir de 1180 px i el telèfon a 1320. Per sota, menú de
     mòbil. El francès té el seu propi llindar, més amunt (al final del full). */
  .hdr__nav { display: none; min-width: 0; }

  .hdr__list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.7vw, 28px);
  }

  .hdr__link {
    display: block;
    padding: 6px 0;
    /* Una entrada de menú no es parteix mai en dues línies: o hi cap sencera o
       la barra no surt (vegeu la regla del francès, més avall). */
    white-space: nowrap;
    font-size: var(--t-small);
    letter-spacing: -0.005em;
    text-decoration: none;
    color: var(--c-ink);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }
  .hdr__link:hover { border-bottom-color: var(--c-pastel); }
  .hdr__link[aria-current='page'] { border-bottom-color: var(--c-terracotta); }

  .hdr__aside {
    display: none;
    align-items: center;
    gap: var(--s-2);
  }

  .hdr__phone {
    display: none;
    font-size: var(--t-small);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--c-ink);
    white-space: nowrap;
  }
  .hdr__phone:hover { color: var(--c-terracotta-ink); }

  .hdr__cta { min-height: 42px; }

  /* Botó del menú mòbil */
  .hdr__burger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 2px;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--t-kicker);
    font-weight: 800;
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
  }
  .hdr__burger-lines {
    display: grid;
    gap: 5px;
    width: 22px;
  }
  .hdr__burger-lines span {
    display: block;
    height: 1.5px;
    background: currentColor;
  }

  /* Panell mòbil */
  .menu {
    position: fixed;
    inset: var(--hdr-h) 0 0;
    z-index: 99;
    background: var(--c-paper);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-block: var(--s-3) var(--s-5);
  }
  .menu__list { border-top: 1px solid var(--c-rule); }
  .menu__row { border-bottom: 1px solid var(--c-rule); }
  .menu__link {
    display: block;
    padding: 18px 0;
    font-size: var(--t-h3);
    letter-spacing: var(--ls-title);
    text-decoration: none;
  }
  .menu__link[aria-current='page'] { color: var(--c-terracotta-ink); }
  .menu__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
  }
  .menu__cta { flex: 1 1 220px; }
  .menu__phone { font-variant-numeric: tabular-nums; }
  .menu__langs { margin-left: auto; }

  @media (min-width: 1180px) {
    .hdr { --hdr-h: 84px; }
    .hdr__inner { gap: var(--s-4); }
    .hdr__nav { display: block; }
    .hdr__aside { display: flex; }
    .hdr__burger { display: none; }
    .menu { display: none; }
  }

  @media (min-width: 1320px) {
    .hdr__phone { display: block; }
  }

  /* El francès porta les etiquetes més llargues («Changement d'usage», «Pourquoi
     noubau»): en una sola línia la barra demana uns 730 px i no n'hi ha prou fins a
     1400. Per sota, menú de mòbil —que hi és i funciona— en comptes d'una barra amb
     les entrades partides. El telèfon, que roba 145 px més, espera a 1600. */
  @media (max-width: 1399px) {
    html[lang='fr'] .hdr__nav,
    html[lang='fr'] .hdr__aside { display: none; }
    html[lang='fr'] .hdr__burger { display: inline-flex; }
    html[lang='fr'] .menu:not([hidden]) { display: block; }
  }
  @media (max-width: 1599px) {
    html[lang='fr'] .hdr__phone { display: none; }
  }

/* ================= LangSwitcher ================= */
.langs {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .langs__item {
    padding: 6px 7px;
    font-size: var(--t-kicker);
    font-weight: 800;
    letter-spacing: var(--ls-kicker);
    text-decoration: none;
    color: var(--c-muted);
    transition: color var(--dur) var(--ease);
  }
  .langs__item:hover { color: var(--c-ink); }
  .langs__item.is-current { color: var(--c-ink); }

/* ================= Footer ================= */
.ft {
    margin-top: var(--section-y);
    padding-block: var(--s-5) var(--s-4);
    border-top: 1px solid var(--c-rule);
  }

  .ft__claim {
    max-width: 18ch;
    margin: 0 0 var(--s-6);
    font-size: var(--t-h2);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-display);
  }

  .ft__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-5) var(--gap);
    padding-bottom: var(--s-5);
  }

  .ft__col ul { display: grid; gap: 10px; }
  .ft__col--contact address { display: grid; gap: 6px; font-style: normal; }

  .ft__link {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }
  .ft__link:hover { border-bottom-color: var(--c-pastel); }

  .ft__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-rule);
    font-size: var(--t-small);
    color: var(--c-muted);
  }
  .ft__mark { color: var(--c-ink); }
  .ft__copy { margin: 0; }
  .ft__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    margin-left: auto;
  }

/* ================= Picture ================= */
.pic { display: block; }
  .pic img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

/* ================= SectionHead ================= */
.shead__title { max-width: 20ch; }
  .shead--wide .shead__title { max-width: 26ch; }

/* ================= Hero ================= */
.hero { padding-top: clamp(48px, 6vw, 96px); }

  .hero__type { align-items: end; row-gap: var(--s-4); }
  .hero__text { grid-column: 1 / span 7; }
  .hero__aside { grid-column: 8 / span 5; }

  .hero__title { max-width: 16ch; }
  .hero--feature .hero__title { max-width: 13ch; }

  .hero__lead { color: var(--c-ink); }
  .hero__cta { margin: var(--s-3) 0 0; }

  .hero__media {
    margin: clamp(40px, 5vw, 80px) 0 0;
  }
  .hero__media .pic { --slant: clamp(64px, 11vw, 190px); }
  .hero__media img {
    width: 100%;
    max-height: min(72vh, 720px);
    object-fit: cover;
    object-position: center 45%;
  }
  .hero__caption { margin-top: var(--s-2); font-size: var(--t-small); }

  @media (max-width: 899px) {
    .hero__text, .hero__aside { grid-column: 1 / -1; }
  }

/* ================= sections/text ================= */
.text__head { grid-column: 1 / span 6; }
  .text__body { grid-column: 8 / span 5; font-size: var(--t-lead); line-height: 1.45; }
  .text__body p + p { margin-top: 1em; }
  .text__cta { margin: var(--s-3) 0 0; }

  @media (max-width: 899px) {
    .text__head { grid-column: 1 / -1; }
    .text__body { grid-column: 1 / -1; margin-top: var(--s-3); font-size: var(--t-body); line-height: var(--lh-body); }
  }

/* ================= sections/split ================= */
.split { align-items: center; row-gap: var(--s-4); }
  .split__media { grid-column: 7 / span 6; margin: 0; }
  .split__text { grid-column: 1 / span 5; grid-row: 1; }
  .split--left .split__media { grid-column: 1 / span 6; }
  .split--left .split__text { grid-column: 8 / span 5; }
  .split__caption { margin-top: var(--s-2); font-size: var(--t-small); }
  .split__body { margin-top: var(--s-3); }
  .split__cta { margin: var(--s-3) 0 0; }

  @media (max-width: 899px) {
    .split__media, .split__text, .split--left .split__media, .split--left .split__text {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .split__text { order: -1; }
  }

/* ================= sections/steps ================= */
.steps { margin-top: var(--s-5); }
  .steps__row {
    grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr);
    align-items: baseline;
    column-gap: var(--gap);
  }
  .steps__num {
    font-size: var(--t-kicker);
    font-weight: 800;
    letter-spacing: var(--ls-kicker);
    color: var(--c-terracotta-ink);
    font-variant-numeric: tabular-nums;
  }
  .steps__title { font-size: var(--t-h3); }
  .steps__body { margin: 0; max-width: 56ch; }

  @media (max-width: 899px) {
    .steps__row { grid-template-columns: 3rem minmax(0, 1fr); }
    .steps__body { grid-column: 2; }
  }

/* ================= sections/cards ================= */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--s-4) var(--gap);
    margin-top: var(--s-5);
  }
  .cards__item { padding-top: var(--s-3); border-top: 1px solid var(--c-ink); }
  .cards__title { font-size: var(--t-h4); margin-bottom: var(--s-1); }
  .cards__link {
    text-decoration: none;
    background-image: linear-gradient(var(--c-terracotta), var(--c-terracotta));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size var(--dur) var(--ease);
  }
  .cards__link:hover { background-size: 100% 1px; }
  .cards__link::after { content: ''; position: absolute; inset: 0; }
  .cards__item { position: relative; }
  .cards__body { margin: 0; max-width: 40ch; font-size: var(--t-small); }

/* ================= sections/stats ================= */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--s-4) var(--gap);
    margin: 0;
    border-top: 1px solid var(--c-rule);
    padding-top: var(--s-4);
  }
  .stats__item { margin: 0; }
  .stats__value {
    margin: 0;
    font-size: var(--t-stat);
    line-height: 0.92;
    letter-spacing: -0.05em;
    color: var(--c-terracotta);
    font-variant-numeric: lining-nums;
    overflow-wrap: anywhere;
  }
  .stats__label {
    margin: var(--s-2) 0 0;
    max-width: 22ch;
    font-size: var(--t-small);
    color: var(--c-muted);
  }

/* ================= sections/quote ================= */
.quote__inner { max-width: var(--max); }
  .quote__fig { margin: 0; }
  .quote__text { margin: 0; max-width: 22ch; }
  .quote__cite { margin: var(--s-4) 0 0; }

  .quote--dark { --slant: clamp(56px, 9vw, 150px); }
  /* El tall diagonal només menja el cantó (uns 60 px d'amplada): el text ja neix
     passat el marge, així que l'aire de dalt no li ha de compensar res. */
  .quote--dark .quote__inner { padding-block: var(--section-y); }

/* ================= sections/values ================= */
.values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--s-5) var(--gap);
    border-top: 1px solid var(--c-rule);
    padding-top: var(--s-4);
  }
  .values__title {
    font-size: var(--t-h2);
    letter-spacing: var(--ls-display);
    margin-bottom: var(--s-2);
  }
  .values__body { margin: 0; max-width: 32ch; font-size: var(--t-small); }

/* ================= sections/faq ================= */
.faq__head { grid-column: 1 / span 5; }
  .faq__list { grid-column: 7 / span 6; }
  .faq__item { gap: 0; }
  .faq__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--t-h4);
    letter-spacing: var(--ls-title);
    cursor: pointer;
    list-style: none;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__sign {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    align-self: center;
  }
  .faq__sign::before,
  .faq__sign::after {
    content: '';
    position: absolute;
    background: var(--c-terracotta);
    transition: transform var(--dur) var(--ease);
  }
  .faq__sign::before { inset: 6px 0; height: 1.5px; }
  .faq__sign::after { inset: 0 6px; width: 1.5px; }
  .faq__item[open] .faq__sign::after { transform: scaleY(0); }
  .faq__a { margin: var(--s-2) 0 0; max-width: 62ch; }

  @media (max-width: 899px) {
    .faq__head, .faq__list { grid-column: 1 / -1; }
    .faq__list { margin-top: var(--s-3); }
  }

/* ================= sections/list ================= */
.list__head { grid-column: 1 / span 5; }
  .list__rows { grid-column: 7 / span 6; }
  .list__row {
    font-size: var(--t-lead);
    letter-spacing: -0.015em;
    line-height: 1.35;
  }

  @media (max-width: 899px) {
    .list__head, .list__rows { grid-column: 1 / -1; }
    .list__rows { margin-top: var(--s-3); }
    .list__row { font-size: var(--t-body); }
  }

/* ================= sections/gallery ================= */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--gap);
    margin-top: var(--s-5);
  }
  .gallery__fig { margin: 0; }
  .gallery__caption { margin-top: var(--s-1); font-size: var(--t-small); }

/* ================= sections/compare ================= */
.cmp { margin-top: var(--s-5); --cmp: 50%; }
  .cmp__stage {
    position: relative;
    overflow: hidden;
    background: #f2f2f2;
  }
  .cmp__layer { position: relative; }
  .cmp__layer--after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--cmp));
  }
  .cmp__layer img { width: 100%; height: 100%; object-fit: cover; }
  .cmp__layer--after .pic { height: 100%; }

  .cmp__tag { position: absolute; left: var(--s-2); bottom: var(--s-2); }
  .cmp__tag--right { left: auto; right: var(--s-2); }

  .cmp__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cmp);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    pointer-events: none;
  }

  .cmp__control { display: block; margin-top: var(--s-2); }
  .cmp__control input {
    width: 100%;
    accent-color: var(--c-terracotta);
  }

  .cmp__body { margin-top: var(--s-3); font-size: var(--t-small); }

/* ================= sections/cta ================= */
.ctablock__inner { align-items: end; row-gap: var(--s-4); }
  .ctablock__text { grid-column: 1 / span 7; }
  .ctablock__action { grid-column: 9 / span 4; justify-self: start; }
  .ctablock__title {
    font-size: var(--t-h2);
    letter-spacing: var(--ls-display);
    max-width: 18ch;
  }
  .ctablock__body { margin: var(--s-3) 0 0; max-width: 46ch; }

  .ctablock--dark { --slant: clamp(56px, 9vw, 150px); }
  .ctablock--dark .ctablock__inner { padding-block: var(--section-y); }

  @media (max-width: 899px) {
    .ctablock__text, .ctablock__action { grid-column: 1 / -1; }
  }

/* ================= PathologyList ================= */
.pat__row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--gap);
  }
  .pat__title { font-size: var(--t-h3); margin-bottom: var(--s-1); }
  .pat__link { text-decoration: none; }
  .pat__link::after { content: ''; position: absolute; inset: 0; }
  .pat__row:hover .pat__title { color: var(--c-terracotta-ink); }
  .pat__summary { margin: 0; max-width: 60ch; }
  .pat__meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-small);
    color: var(--c-muted);
  }

  @media (max-width: 599px) {
    .pat__row { grid-template-columns: minmax(0, 1fr); }
    .pat__more { display: none; }
  }

/* ================= ObresList ================= */
.obres { display: grid; border-top: 1px solid var(--c-rule); }
  .obres__item { padding-block: var(--s-5); border-bottom: 1px solid var(--c-rule); }
  .obres__art {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--s-4) var(--gap);
    align-items: start;
  }
  .obres__title { font-size: var(--t-h3); margin-bottom: var(--s-3); }
  .obres__meta { display: grid; gap: 6px; margin: 0 0 var(--s-3); font-size: var(--t-small); }
  .obres__meta > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-2); }
  .obres__meta dt {
    font-size: var(--t-kicker);
    font-weight: 800;
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--c-muted);
    align-self: center;
  }
  .obres__meta dd { margin: 0; }
  .obres__body { margin: 0; max-width: 52ch; }
  .obres__media { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); }
  .obres__fig { margin: 0; font-size: var(--t-small); }

  @media (max-width: 899px) {
    .obres__art { grid-template-columns: minmax(0, 1fr); }
  }

/* ================= DownloadsList ================= */
.dl__group + .dl__group { margin-top: var(--s-6); }
  .dl__title { font-size: var(--t-h3); margin-bottom: var(--s-3); }
  .dl__row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--gap);
  }
  .dl__link { font-size: var(--t-h4); text-decoration: none; }
  .dl__link::after { content: ''; position: absolute; inset: 0; }
  .dl__row:hover .dl__link { color: var(--c-terracotta-ink); }
  .dl__desc { grid-column: 1; margin: 4px 0 0; max-width: 60ch; font-size: var(--t-small); }
  .dl__format {
    grid-row: 1;
    grid-column: 2;
    font-size: var(--t-kicker);
    font-weight: 800;
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--c-muted);
  }

/* ================= QuoteForm ================= */
.qf__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--gap);
  }
  .qf__field { grid-column: 1 / -1; display: grid; gap: 8px; }
  .qf__alert,
  .qf__hp,
  .qf__consent,
  .qf__submit { grid-column: 1 / -1; }

  .qf__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .qf__label { font-size: var(--t-small); }
  .qf__req { color: var(--c-terracotta-ink); }

  .qf__input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--c-rule);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease);
  }
  .qf__input:hover { border-color: var(--c-pastel); }
  .qf__input:focus { border-color: var(--c-terracotta); }
  .qf__textarea { min-height: 140px; resize: vertical; }
  .qf__input[aria-invalid='true'] { border-color: var(--c-terracotta-ink); }

  .qf__consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-size: var(--t-small);
    color: var(--c-muted);
  }
  .qf__consent input {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--c-terracotta);
  }

  .qf__alert {
    margin: 0;
    padding: 12px 14px;
    border-left: 2px solid var(--c-terracotta);
    background: var(--c-pastel-wash);
    font-size: var(--t-small);
    color: #7a4a34;
  }

  .qf__submit { justify-self: start; margin-top: var(--s-1); }

  .qf__done { border-top: 2px solid var(--c-terracotta); padding-top: var(--s-3); }
  .qf__done-title { font-size: var(--t-h3); margin-bottom: var(--s-2); }
  .qf__done-body { margin: 0; color: var(--c-muted); max-width: 52ch; }

  @media (min-width: 700px) {
    .qf__field--half { grid-column: span 1; }
  }

/* ================= pagina (pressupost) ================= */
.backlink { margin: var(--s-4) 0 0; font-size: var(--t-small); }

  /* La capçalera és enganxada: l'àncora ha de deixar-hi lloc en saltar-hi. */
  .quote-section { scroll-margin-top: 96px; }

  .quote-layout { align-items: start; row-gap: var(--s-5); }
  .quote-layout__form { grid-column: 1 / span 7; }
  .quote-layout__title { font-size: var(--t-h3); margin-bottom: var(--s-3); }
  .quote-layout__aside {
    grid-column: 9 / span 4;
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-ink);
    font-size: var(--t-small);
  }
  .quote-layout__aside-title { font-size: var(--t-h4); margin-bottom: var(--s-2); }
  .quote-layout__phone {
    margin-top: var(--s-3);
    font-size: var(--t-h4);
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 899px) {
    .quote-layout__form, .quote-layout__aside { grid-column: 1 / -1; }
  }

/* ================= 404 ================= */
.nf__title { max-width: 14ch; margin-bottom: var(--s-5); }
  .nf__links { max-width: 32rem; }