/* La web pública d'obrima (docs/170). Els colors, les mides i les lletres, del sistema de disseny OBRIMA
   (src/estils/tokens.css): aquí no s'hi escriu cap color. Archivo per a tot; Space Grotesk, només el logotip;
   Architects Daughter, només el lema. */

*, *::before, *::after { box-sizing: border-box; }
/* El que està amagat, amagat: encara que la seva classe digui display. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--brand-orange-ink); }
h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; color: var(--ink-secondary); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Els botons: el principal, un per pantalla. */
.boto-pri {
  font: 600 13px/1 Archivo, system-ui, sans-serif;
  color: var(--surface-card);
  background: var(--brand-orange);
  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 22px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- la portada (W3) */
.portada { min-height: 100vh; display: flex; flex-direction: column; }
.menu { display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding: 24px 72px; flex-wrap: wrap; }
.menu a { font-size: 13px; color: var(--ink-secondary); text-decoration: none; }
.menu a:hover { color: var(--ink); text-decoration: underline; }
.portada__marca { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.marca {
  margin: 0;
  display: inline-block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.marca--gran { font-size: clamp(88px, 15vw, 210px); }
/* La i sense punt, i el quadrat taronja a sobre (sistema de disseny, Wordmark): el costat, un 24% de l'alçada de la
   lletra (la x de Space Grotesk fa 0,5 em: 0,12 em), i a un 12% (0,06 em) per sobre de la ı. Mesurat amb la lletra: en
   una caixa d'alçada 1 em, la línia de base és a 0,154 em del peu. */
.marca__i { position: relative; display: inline-block; line-height: 1; }
.marca__quadre { position: absolute; left: 50%; width: 0.12em; height: 0.12em; margin-left: -0.06em; bottom: 0.714em; background: var(--brand-orange); }
.portada__peu { display: flex; align-items: flex-end; gap: 40px; padding: 0 72px 60px; flex-wrap: wrap; }
.lema { font-family: 'Architects Daughter', cursive; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.45; color: var(--ink-secondary); }
.baixa { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-muted); text-decoration: none; }
.baixa svg { color: var(--brand-orange); }

/* ---------------------------------------------------------------- les seccions */
.seccio { max-width: 1296px; margin: 0 auto; padding: 56px 72px 0; display: flex; flex-direction: column; gap: 22px; }
.seccio--final { flex-direction: row; gap: 20px; padding-bottom: 72px; }
.seccio__cap { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.seccio__cap > div { max-width: 660px; }
.xip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--brand-orange-ink);
  background: var(--surface-item);
  border: 1px solid var(--brand-orange-soft);
  border-radius: var(--radius-pill, 999px);
  padding: 6px 14px;
  white-space: nowrap;
}
.xip__punt { width: 6px; height: 6px; border-radius: 999px; background: var(--brand-orange); }
.etiqueta { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.targeta { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md, 12px); }

/* Les tasques suggerides: en clicar-ne una, la graella hi va. */
.tasques { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tasques__inici { font-family: 'Architects Daughter', cursive; font-size: 17px; color: var(--ink-secondary); margin-right: 6px; }
.tasca {
  font: 12px/1 Archivo, system-ui, sans-serif;
  color: var(--ink-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill, 999px);
  padding: 9px 16px;
  cursor: pointer;
}
.tasca[aria-pressed="true"] { background: var(--surface-item); border-color: var(--brand-orange-soft); color: var(--brand-orange-ink); font-weight: 600; }
.pista { font-size: 13px; color: var(--brand-orange-ink); }

/* La graella, dins d'un marc: té la seva pantalla, les seves dreceres i els seus estils. */
.demo { border: 1px solid var(--border-strong); border-radius: var(--radius-md, 12px); overflow: hidden; background: var(--surface-card); }
.demo__marc { display: block; width: 100%; height: min(860px, 88vh); border: 0; }

/* L'anotació feta a mà sobre el que s'ha de tocar: es dibuixa en mig segon i no captura el ratolí. */
.anotacio { position: absolute; z-index: 50; pointer-events: none; }
.anotacio svg { display: block; overflow: visible; }
.anotacio__traç {
  fill: none;
  stroke: var(--brand-orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dibuixar 0.5s ease-out forwards;
}
.anotacio__nota {
  position: absolute;
  left: 70px;
  top: 64px;
  white-space: nowrap;
  font-family: 'Architects Daughter', cursive;
  font-size: 17px;
  /* Sobre les files de la graella: amb un fons taronja suau i la vora de marca, perquè destaqui (Josep, 03/10/2026). */
  color: var(--ink);
  background: var(--brand-orange-soft);
  border: 1.5px solid var(--brand-orange);
  border-radius: 10px;
  padding: 4px 12px;
  opacity: 0;
  animation: apareixer 0.3s 0.35s ease-out forwards;
}
/* L'«1» dibuixat, amb el palet: el de la lletra feta a mà sembla una «I». */
.anotacio .anotacio__un { display: inline-block; width: 0.5em; height: 0.82em; margin: 0 0.04em; vertical-align: -0.04em; overflow: visible; }
.anotacio__un path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* La nota a l'esquerra del cercle, a l'altura de la fletxa. */
.anotacio__nota--esquerra { left: auto; right: calc(100% + 62px); }
@keyframes dibuixar { to { stroke-dashoffset: 0; } }
@keyframes apareixer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .anotacio__traç { animation: none; stroke-dashoffset: 0; }
  .anotacio__nota { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------- el comparatiu, per mirar */
.comparatiu { overflow: hidden; }
.comparatiu__cap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 14px; font-size: 12px; color: var(--ink-secondary);
  background: var(--surface-muted); border-bottom: 1px solid var(--border-soft); border-left: 4px solid var(--brand-orange);
}
.comparatiu__cap b { color: var(--ink); }
.comparatiu__mirar { margin-left: auto; color: var(--ink-muted); }
.taula-marc { overflow-x: auto; }
.taula { width: 100%; border-collapse: collapse; font-size: 12px; }
.taula th { padding: 6px 10px; background: var(--surface-muted); color: var(--ink-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.taula th.num { text-align: right; }
.taula td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.taula__grups th { text-align: center; }
.taula .grup { border-left: 2px solid var(--rule-grid); }
.taula .grup--millor { background: var(--surface-item); color: var(--brand-orange-ink); }
.taula td.grup--millor { color: inherit; }
.fila-capitol td { background: var(--surface-chapter); font-weight: 600; }
.fila-capitol td:first-child { box-shadow: inset 4px 0 0 var(--brand-orange); }
.fila-partida td { background: var(--surface-item); }
.fila-partida td:first-child { box-shadow: inset 4px 0 0 var(--brand-orange-soft); padding-left: 24px; }
.taula tfoot td { background: var(--surface-muted); border-top: 2px solid var(--border-strong); font-weight: 600; }
.preu-descompost, .taula td.preu-descompost { color: var(--price-decomposed); font-weight: 600; }
.positiu { color: var(--state-positive); font-weight: 600; }
.negatiu { color: var(--state-negative); }

/* ---------------------------------------------------------------- Cómo funciona (W7) */
/* La lletra a mà és la veu humana: el rètol, les notes al marge i la frase de tancament. Res més. */
.ma { font-family: 'Architects Daughter', cursive; color: var(--ink-secondary); }
.ma--retol { font-size: 19px; margin-bottom: 8px; }
.com-funciona { gap: 46px; }
.com-funciona__cap h2 { font-size: 34px; max-width: 760px; }
.com-funciona__cap > p:last-child { max-width: 720px; margin-top: 10px; }
.bloc { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 40px; align-items: center; }
.bloc--invers .bloc__text { order: 2; }
.bloc--invers .captura { order: 1; }
.bloc__pas { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pas { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--brand-orange); color: var(--surface-card); font-size: 13px; font-weight: 600; }
.bloc__etiqueta { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-orange-ink); }
.bloc h3 { font-size: 25px; margin: 0; }
.bloc__text > p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; }
.llista { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-secondary); }
.llista li { display: flex; gap: 9px; align-items: flex-start; }
.tick { flex-shrink: 0; margin-top: 3px; color: var(--state-positive); }
.nota {
  display: inline-block;
  margin-top: 18px;
  transform: rotate(-1.4deg);
  font-family: 'Architects Daughter', cursive;
  font-size: 15px;
  color: var(--brand-orange-ink);
  background: var(--surface-item);
  border: 1px solid var(--brand-orange-soft);
  border-radius: 10px;
  padding: 8px 14px;
}
.captura { overflow: hidden; }
.captura .taula { font-size: 11.5px; }
.captura__pestanyes { display: flex; gap: 18px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); font-size: 11.5px; color: var(--ink-muted); }
.captura__pestanyes .on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-orange); padding-bottom: 4px; }
.fila-descompost td { color: var(--ink-secondary); }
.fila-descompost td:first-child { padding-left: 40px; }
.taula td.oferta { background: var(--surface-editable); }
.comparatiu__dreta { margin-left: auto; }
.tancament { display: flex; align-items: center; gap: 20px; padding-top: 30px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.tancament .ma { font-size: 18px; }
.tancament__dreta { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tancament__condicions { font-size: 12.5px; color: var(--ink-muted); }
@media (max-width: 980px) {
  .bloc { grid-template-columns: 1fr; }
  .bloc--invers .bloc__text, .bloc--invers .captura { order: 0; }
  .captura { overflow-x: auto; }
}

/* ---------------------------------------------------------------- El circuito completo (W8) */
/* L'esquema és un SVG de 1.320 × 830: s'encongeix sencer amb la pàgina. Per sota de 1.060 px la lletra quedaria massa
   petita (menys de 10 px), i surt el mateix en vertical (.circuit-m). Les caixes, en Archivo; els rètols i les notes, a mà. */
.circuit { gap: 26px; }
.circuit__cap h2 { font-size: 34px; }
.circuit__cap > p:last-child { margin-top: 8px; font-size: 14.5px; max-width: 820px; }
.circuit__esquema { display: block; width: 100%; height: auto; overflow: visible; }
.ci-caixa rect { fill: var(--surface-card); stroke: var(--border-strong); stroke-width: 1; }
.ci-caixa text { font: 600 14px Archivo, system-ui, sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.ci-caixa--final rect { fill: var(--surface-muted); }
.ci-caixa--final text { fill: var(--ink-secondary); font-weight: 500; }
.ci-caixa--inici rect { fill: var(--surface-chapter); stroke: var(--brand-orange-soft); }
.ci-caixa--inici rect.ci-barra { fill: var(--brand-orange); stroke: none; }
.ci-caixa--inici text, .ci-caixa--panell text { font-size: 16px; }
.ci-caixa--panell rect { fill: var(--surface-item); stroke: var(--brand-orange); stroke-width: 2; }
.ci-caixa--panell .ci-panell__sub { font-size: 12px; font-weight: 500; fill: var(--brand-orange-ink); }
.ci-obra circle { fill: var(--surface-card); stroke: var(--border-strong); }
.ci-obra text { font-family: Archivo, system-ui, sans-serif; fill: var(--ink-secondary); text-anchor: middle; dominant-baseline: central; }
.ci-mes { font: 12px Archivo, system-ui, sans-serif; fill: var(--ink-muted); }
.ci-fletxa { fill: none; stroke: var(--ink-secondary); stroke-width: 1.8; stroke-linecap: round; }
.ci-fletxa--panell { stroke: var(--brand-orange); stroke-width: 2.2; }
.ci-fletxa--obres { stroke: var(--brand-orange); }
.ci-punta { fill: var(--ink-secondary); }
.ci-punta--taronja { fill: var(--brand-orange); }
.ci-ma { font-family: 'Architects Daughter', cursive; font-size: 15px; fill: var(--brand-orange-ink); }
.ci-ma--circuit, .ci-ma--frase { font-size: 17px; }
.ci-ma--frase { fill: var(--ink-secondary); }

.circuit-m { display: none; flex-direction: column; align-items: center; gap: 6px; }
.cm-circuit { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 4px; }
.cm-retol { font-size: 17px; color: var(--brand-orange-ink); margin-bottom: 4px; }
.cm-caixa {
  width: min(100%, 280px);
  padding: 12px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md, 12px);
}
.cm-caixa--final { background: var(--surface-muted); color: var(--ink-secondary); font-weight: 500; }
.cm-caixa--inici { font-size: 16px; background: var(--surface-chapter); border-color: var(--brand-orange-soft); box-shadow: inset 4px 0 0 var(--brand-orange); }
.cm-caixa--panell { display: flex; flex-direction: column; gap: 4px; font-size: 16px; background: var(--surface-item); border: 2px solid var(--brand-orange); padding: 18px 14px; }
.cm-caixa--panell small { font-size: 12px; font-weight: 500; color: var(--brand-orange-ink); }
.cm-fletxa { fill: none; stroke: var(--ink-secondary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-fletxa--panell { stroke: var(--brand-orange); stroke-width: 2.2; }
.cm-obres { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.cm-obra { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--border-strong); font-size: 11.5px; color: var(--ink-secondary); }
.cm-obra--g { width: 74px; height: 74px; font-size: 13px; }
.cm-obra--m { width: 62px; height: 62px; font-size: 12px; }
.cm-mes { font-size: 12px; color: var(--ink-muted); }
.cm-nota { font-size: 15px; color: var(--brand-orange-ink); text-align: center; margin-top: 4px; }
.cm-frase { font-size: 17px; text-align: center; margin-top: 14px; }
@media (max-width: 1060px) {
  .circuit__esquema { display: none; }
  .circuit-m { display: flex; }
}

/* ---------------------------------------------------------------- Lo que cuesta (W9) i /planes (W6) */
/* El botó secundari: blanc amb vora. A la web només hi ha un botó taronja per pantalla. */
.boto-sec {
  display: inline-block;
  font: 13px/1 Archivo, system-ui, sans-serif;
  color: var(--ink-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 22px;
  text-decoration: none;
  cursor: pointer;
}
.boto-sec:hover { border-color: var(--ink-muted); color: var(--ink); }
a.boto-pri { display: inline-block; text-decoration: none; }
.preus-curt { display: flex; align-items: center; gap: 48px; padding: 44px 48px; flex-wrap: wrap; }
.preus-curt__text { max-width: 620px; }
.preus-curt__text h2 { font-size: 32px; margin-bottom: 12px; }
.preus-curt__text > p:last-child { font-size: 15px; }
.preus-curt__accio { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-size: 12px; color: var(--ink-muted); }

/* La capçalera de les pàgines que no són la portada: el logotip petit i el mateix menú. */
.cap-web { display: flex; align-items: center; gap: 28px; padding: 0 0 0 72px; background: var(--surface-muted); border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.cap-web .menu { margin-left: auto; padding: 18px 72px 18px 0; }
.cap-web__marca { text-decoration: none; }
.marca--petita { font-size: 22px; }
/* Petit, el quadrat a la proporció no es veuria: 5 px, com a l'artboard W9. */
.marca--petita .marca__quadre { width: 5px; height: 5px; margin-left: -2.5px; }
.menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.planes { padding-bottom: 72px; gap: 24px; }
.planes__cap { display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.planes__cap > div:first-child { max-width: 640px; }
.planes__cap h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.planes__cap p { font-size: 15px; }
.planes__pagament { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.planes__commutador { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.planes__condicions { font-size: 11.5px; color: var(--ink-muted); }
.commutador { display: inline-flex; background: var(--surface-chapter); border: 1px solid var(--brand-orange-soft); border-radius: var(--radius-sm, 8px); padding: 3px; gap: 3px; }
.commutador button { font: 12px/1 Archivo, system-ui, sans-serif; color: var(--brand-orange-ink); background: none; border: 0; border-radius: 6px; padding: 8px 14px; cursor: pointer; }
.commutador .on { background: var(--brand-orange); color: var(--surface-card); font-weight: 600; }
.estalvi { font-size: 11px; font-weight: 600; color: var(--state-positive); background: var(--band-certified); border: 1px solid var(--band-certified-rule); border-radius: 999px; padding: 5px 12px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pla { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md, 12px); padding: 24px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.pla--destacat { border-color: var(--brand-orange-soft); box-shadow: 0 0 0 3px var(--surface-item); }
.pla__fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pla__nom { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-orange-ink); }
.pla__xip { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--surface-card); background: var(--brand-orange); border-radius: 999px; padding: 3px 9px; }
.pla__desc { font-size: 13px; line-height: 1.5; min-height: 39px; }
.pla__nota, .pla__peu { font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); }
.pla__peu { text-align: center; margin-top: -4px; }
.preu { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.preu--base { font-size: 30px; }
.pla__mes { font-size: 13px; color: var(--ink-muted); }
.pla__alt { font-size: 12px; color: var(--ink-muted); }
.pla__usuaris { font-size: 14px; }
.pla .llista { margin: 0; font-size: 12.5px; gap: 7px; }
.pla .llista strong { font-weight: 600; color: var(--ink); }
/* L'espai de cada pla porta a la pregunta de què ocupa (Josep, 04/10/2026); en arribar-hi, la pregunta es marca. */
.pla__enllac { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.pla__enllac:hover { color: var(--brand-orange-ink); text-decoration-style: solid; }
.faq:target { background: var(--surface-item); box-shadow: 0 0 0 8px var(--surface-item); border-radius: 2px; }
.pla__boto { margin-top: auto; width: 100%; text-align: center; padding: 11px 18px; }
.pla__botons { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.trams { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.trams th { background: var(--surface-muted); color: var(--ink-muted); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border-strong); }
.trams th.num { text-align: right; }
.trams td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); color: var(--ink-secondary); }
.exemples { display: flex; flex-direction: column; gap: 6px; }
.exemple { background: var(--surface-muted); border: 1px solid var(--border-soft); border-radius: var(--radius-sm, 8px); padding: 9px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.exemple b { color: var(--ink); font-weight: 600; }
.planes__mes { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; padding-top: 26px; border-top: 1px solid var(--border-soft); }
.planes__mes .etiqueta { margin-bottom: 12px; }
.serveis { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.serveis td { padding: 8px 0; border-bottom: 1px solid var(--border-soft); color: var(--ink-secondary); }
.serveis td:last-child { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.serveis__op { color: var(--ink-muted); }
.serveis__nota { margin-top: 12px; font-size: 12px; line-height: 1.55; }
.serveis__nota b { color: var(--ink); }
.faqs { column-count: 2; column-gap: 28px; }
.faq { break-inside: avoid; margin-bottom: 16px; font-size: 12.5px; line-height: 1.55; }
.faq strong { display: block; color: var(--ink); margin-bottom: 3px; }
@media (max-width: 1060px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .planes__mes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cap-web { padding: 14px 16px 0; justify-content: center; }
  .cap-web .menu { margin-left: 0; padding: 10px 0 14px; }
  .preus-curt { padding: 28px 22px; gap: 22px; }
  .preus-curt__accio { margin-left: 0; align-items: flex-start; }
  .planes__pagament { margin-left: 0; align-items: flex-start; }
  .faqs { column-count: 1; }
}

/* ---------------------------------------------------------------- el manual i el final */
.manual { flex: 1 1 auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.manual__cerca { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 8px); padding: 10px 14px; font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.manual__cerca:hover { border-color: var(--ink-muted); color: var(--ink-secondary); }
.manual__preguntes { display: flex; gap: 8px; flex-wrap: wrap; }
.manual__preguntes span, .manual__preguntes a { font-size: 12px; color: var(--ink-secondary); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 8px); padding: 9px 14px; text-decoration: none; }
.manual__preguntes a:hover { border-color: var(--brand-orange-soft); color: var(--brand-orange-ink); }
.final { width: 340px; flex: 0 0 auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.final p { font-size: 13px; }
.final .boto-pri { margin-top: auto; }

/* ---------------------------------------------------------------- Para quién es (W10) */
.per-a-qui { gap: 32px; }
.per-a-qui__cap h2 { font-size: 34px; }
.per-a-qui__cap > p:last-child { margin-top: 10px; font-size: 14.5px; max-width: 760px; }
.per-a-qui__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.qui { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md, 12px); padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.qui--destacat { border-color: var(--brand-orange-soft); box-shadow: 0 0 0 3px var(--surface-item); }
.qui__etiqueta { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-orange-ink); }
.qui h3 { margin: 0; font-size: 23px; }
.qui > p { font-size: 14px; }
.qui .llista { margin-top: 4px; gap: 9px; }
.qui__nota { font-size: 15px; color: var(--brand-orange-ink); margin-top: 4px; }
.qui__boto { margin-top: auto; align-self: flex-start; padding: 11px 18px; }
@media (max-width: 860px) {
  .per-a-qui__cols { grid-template-columns: 1fr; }
  .qui { padding: 24px 22px; }
}

/* ---------------------------------------------------------------- el peu (W10), a totes les pàgines */
/* Fons de tinta i text clar. Els grisos surten de barrejar els dos tokens: aquí tampoc s'hi escriu cap color. */
.peu {
  --peu-text: var(--surface-page);
  --peu-enllac: color-mix(in srgb, var(--surface-page) 88%, var(--ink));
  --peu-apagat: color-mix(in srgb, var(--surface-page) 62%, var(--ink));
  --peu-ratlla: color-mix(in srgb, var(--surface-page) 12%, var(--ink));
  background: var(--ink);
  color: var(--peu-text);
  padding: 52px 72px 34px;
}
.peu__cols { max-width: 1296px; margin: 0 auto; display: grid; grid-template-columns: 330px repeat(3, minmax(0, 1fr)) 280px; gap: 36px; }
.peu__marca a { text-decoration: none; }
.marca--peu { font-size: 24px; color: var(--peu-text); }
.peu__marca p { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--peu-apagat); }
.peu__col h2 { margin: 0 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--peu-apagat); }
.peu__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--peu-enllac); }
.peu__col a { color: var(--peu-enllac); text-decoration: none; }
.peu__col a:hover { color: var(--peu-text); text-decoration: underline; }
.peu__baix { max-width: 1296px; margin: 38px auto 0; padding-top: 18px; border-top: 1px solid var(--peu-ratlla); display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--peu-apagat); flex-wrap: wrap; }
.peu__baix a { color: inherit; text-decoration: none; }
.peu__baix a:hover { color: var(--peu-text); text-decoration: underline; }
.peu__servidors { margin-left: auto; }
@media (max-width: 1060px) {
  .peu__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peu__marca { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .peu { padding: 40px 16px 28px; }
  .peu__servidors { margin-left: 0; }
}

/* ---------------------------------------------------------------- Solicita una demostración (/planes) */
.dialeg {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-card);
  color: var(--ink);
}
.dialeg::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.dialeg__form { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.dialeg__cap { display: flex; align-items: flex-start; gap: 16px; }
.dialeg__cap h2 { margin: 0; font-size: 22px; }
.dialeg__tancar { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -10px; margin-right: -12px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; border-radius: var(--radius-sm, 8px); }
.dialeg__tancar:hover { color: var(--ink); background: var(--surface-muted); }
.dialeg__entrada { font-size: 13.5px; }
.camps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.camp { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.camp small { font-weight: 400; color: var(--ink-muted); }
.camp--ample { grid-column: 1 / -1; }
.camp input, .camp select, .camp textarea {
  font: 14px/1.4 Archivo, system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
  min-height: 44px;
}
.camp textarea { resize: vertical; }
.camp input:focus, .camp select:focus, .camp textarea:focus { outline: 2px solid var(--brand-orange-soft); border-color: var(--brand-orange); }
.parany { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dialeg__privacitat { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ink-secondary); }
.dialeg__privacitat input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand-orange); }
.dialeg__peu { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dialeg__estat { flex: 1 1 200px; font-size: 13px; color: var(--brand-orange-ink); }
.dialeg__peu .boto-pri { margin-left: auto; }
.dialeg__peu .boto-pri:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 560px) {
  .camps { grid-template-columns: 1fr; }
  .dialeg__form { padding: 22px 18px 20px; }
}

/* ---------------------------------------------------------------- el manual (/manual, W11) */
.cap-web__seccio { font-size: 13px; color: var(--ink-muted); padding-left: 14px; border-left: 1px solid var(--border-strong); }
.manual-pagina { padding-bottom: 64px; }
.manual-inici { gap: 36px; }
.manual-inici__cap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.manual-inici h1 { margin: 0 0 10px; font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.manual-inici__entrada { font-size: 14.5px; max-width: 620px; margin-bottom: 20px; }
.cerca { position: relative; }
.cerca__camp { display: flex; align-items: center; gap: 12px; padding: 4px 18px; color: var(--ink-muted); }
.cerca__camp input { flex: 1 1 auto; min-width: 0; font: 15px/1.4 Archivo, system-ui, sans-serif; color: var(--ink); background: none; border: 0; padding: 12px 0; outline: none; }
.cerca:focus-within { border-color: var(--brand-orange); box-shadow: 0 0 0 3px var(--surface-item); }
.cerca__tecla { font-size: 11px; white-space: nowrap; }
kbd { display: inline-block; font: 10.5px/1.4 Archivo, system-ui, sans-serif; color: var(--ink-secondary); background: var(--surface-muted); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.cerca__resultats { list-style: none; margin: 0; padding: 4px 0; border-top: 1px solid var(--border-soft); }
.cerca__resultats a { display: flex; align-items: baseline; gap: 9px; padding: 10px 18px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.cerca__resultats a small { color: var(--ink-muted); font-size: 12px; }
.cerca__resultats a:hover, .cerca__resultats [aria-selected="true"] a { background: var(--surface-item); }
.cerca__resultats [aria-selected="true"] a { font-weight: 600; }
.cerca__res { padding: 12px 18px; border-top: 1px solid var(--border-soft); font-size: 13px; }
.cerca__ajuda { margin-top: 10px; font-size: 12px; color: var(--ink-muted); }
.mes-buscat { padding: 22px 24px; }
.mes-buscat .etiqueta { margin-bottom: 14px; }
.mes-buscat__llista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.mes-buscat__llista a { color: var(--ink-secondary); text-decoration: none; }
.mes-buscat__llista a:hover { color: var(--brand-orange-ink); text-decoration: underline; }
.mes-buscat__peu { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 12.5px; }
.seccions-manual { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.seccio-manual { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.seccio-manual h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.seccio-manual__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-item); border: 1px solid var(--brand-orange-soft); color: var(--brand-orange-ink); font-size: 11px; font-weight: 600; }
.seccio-manual ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.seccio-manual a { color: var(--ink-secondary); text-decoration: none; }
.seccio-manual a:hover { color: var(--brand-orange-ink); text-decoration: underline; }
.seccio-manual--preparacio li { color: var(--ink-muted); }
.seccio-manual__en-preparacio { color: var(--ink-muted); }
.seccio-manual__preparacio { font-size: 11px; color: var(--ink-muted); font-weight: 500; margin-left: auto; }
.seccio-manual__descripcio { font-size: 12.5px; color: var(--ink-muted); margin-top: -2px; }
/* Para administradores: a part, a tota l'amplada i amb les entrades en dues columnes. */
.seccio-manual--apart { grid-column: 1 / -1; background: var(--surface-muted); }
.seccio-manual--apart ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 28px; }
@media (max-width: 760px) { .seccio-manual--apart ul { grid-template-columns: 1fr; } }

.manual-article { gap: 18px; }
.manual-article__tornar { font-size: 13px; color: var(--ink-secondary); text-decoration: none; }
.manual-article__tornar:hover { color: var(--ink); text-decoration: underline; }
.manual-article__cos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.article { padding: 30px 34px; min-width: 0; }
.article__ruta { font-size: 12px; color: var(--ink-muted); margin-bottom: 10px; }
.article h1 { margin: 0 0 8px; font-size: 25px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.article__resum { font-size: 14.5px; }
.article__blocs h2 { margin: 24px 0 0; font-size: 15px; font-weight: 600; }
.article__blocs p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.65; }
.article__blocs strong { color: var(--ink); font-weight: 600; }
.article__blocs ol, .article__blocs ul { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-secondary); }
.article__blocs .article__nota { margin-top: 22px; padding: 14px 16px; background: var(--surface-item); border: 1px solid var(--brand-orange-soft); border-radius: 10px; font-family: 'Architects Daughter', cursive; font-size: 15px; color: var(--brand-orange-ink); }
.tecles { margin: 14px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-secondary); }
.tecles dt { text-align: right; }
.tecles dd { margin: 0; }
.article .captura { margin-top: 18px; position: relative; overflow: visible; }
/* Les captures del programa de debò (docs/321): la imatge sencera, amb la vora de les targetes. */
.captura-imatge { margin: 18px 0 0; }
.captura-imatge img { display: block; width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: 10px; }
.article .captura td { white-space: nowrap; }
.article__prova { margin-top: 24px; }
.article__peu { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-secondary); }
.article__opinio { padding: 7px 14px; font-size: 12px; }
.article__gracies { font-size: 12.5px; color: var(--state-positive); }
.article__data { margin-left: auto; font-size: 12px; color: var(--ink-muted); }
.manual-article__costat { display: flex; flex-direction: column; gap: 10px; }
.relacionats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.relacionats a { display: block; font-size: 13px; color: var(--ink-secondary); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 8px); padding: 9px 12px; text-decoration: none; }
.relacionats a:hover { border-color: var(--brand-orange-soft); color: var(--brand-orange-ink); }
.article-demo { margin-top: 14px; padding: 16px 18px; font-size: 13px; line-height: 1.6; }
.article-demo a { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--brand-orange-ink); }

/* Les captures del manual: el cercle a mà sobre el que s'ha de tocar, i el que hi ha al voltant. */
.encerclat { position: relative; display: inline-block; }
.encerclat__traç { position: absolute; left: -14px; top: -9px; width: calc(100% + 28px); height: calc(100% + 18px); overflow: visible; pointer-events: none; }
.encerclat__traç path { fill: none; stroke: var(--brand-orange); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.captura--menu { padding-bottom: 150px; }
.captura .cel-activa { box-shadow: inset 0 0 0 2px var(--brand-orange-soft); }
.menu-captura { position: absolute; left: 120px; top: 96px; display: flex; flex-direction: column; min-width: 170px; padding: 5px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 8px); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 14%, transparent); font-size: 12.5px; }
.menu-captura .encerclat { display: flex; flex-direction: column; }
.menu-captura__item { padding: 6px 12px; color: var(--ink-secondary); }
.fila-desti td { box-shadow: inset 0 2px 0 var(--brand-orange); }
.avis-captura { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); }
.avis-captura .encerclat { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; color: var(--ink-secondary); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent); white-space: nowrap; }
.avis-captura__roda { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--border-strong); border-top-color: var(--brand-orange); }

@media (max-width: 1060px) {
  .manual-inici__cap, .manual-article__cos { grid-template-columns: 1fr; }
  .seccions-manual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .seccions-manual { grid-template-columns: 1fr; }
  .article { padding: 22px 18px; }
  .article .captura { overflow-x: auto; }
  .cerca__tecla { display: none; }
  .tecles { grid-template-columns: 1fr; gap: 2px 0; }
  .tecles dt { text-align: left; margin-top: 8px; }
  .menu-captura { left: 70px; }
  .captura--menu { padding-bottom: 175px; }
}

/* ---------------------------------------------------------------- els textos legals (/legal/...) */
.legal { max-width: 920px; padding-bottom: 64px; gap: 18px; }
.legal__esborrany { padding: 12px 16px; font-size: 13px; color: var(--brand-orange-ink); background: var(--surface-item); border: 1px solid var(--brand-orange-soft); border-left: 4px solid var(--brand-orange); border-radius: var(--radius-sm, 8px); }
.legal__esborrany strong { color: var(--ink); }
.legal__text { padding: 34px 40px; }
.legal__text h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.legal__text h2 { margin: 28px 0 0; font-size: 17px; }
.legal__text h3 { margin: 24px 0 0; font-size: 15px; }
.legal__text .legal__annex { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border-soft); font-size: 21px; }
.legal__text p, .legal__text li { font-size: 14px; line-height: 1.7; }
.legal__text p { margin: 12px 0 0; }
.legal__text ul, .legal__text ol { margin: 12px 0 0; padding-left: 22px; color: var(--ink-secondary); display: flex; flex-direction: column; gap: 6px; }
.legal__text strong { color: var(--ink); }
.legal__text .taula-marc { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm, 8px); }
.legal__taula td, .legal__taula th { vertical-align: top; font-size: 12.5px; line-height: 1.5; }
.legal__taula th { white-space: normal; }
/* El que falta, entre claudàtors, es veu de lluny. */
mark.pendent { background: var(--surface-editable); color: var(--ink); border-bottom: 1px solid var(--surface-editable-rule); padding: 0 2px; }
.dialeg__privacitat a { color: var(--brand-orange-ink); }
@media (max-width: 760px) {
  .legal__text { padding: 22px 18px; }
}

/* ---------------------------------------------------------------- al mòbil */
@media (max-width: 760px) {
  .menu, .portada__peu, .seccio { padding-left: 16px; padding-right: 16px; }
  .menu { justify-content: center; gap: 18px; }
  .seccio--final { flex-direction: column; }
  .final { width: auto; }
  .xip { margin-left: 0; white-space: normal; }
  .demo__marc { height: 80vh; }
}

/* Fins a l'obertura (docs/270, 8): el comptador del bloc final. */
.final .obertura__falten { font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.obertura__botons { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.final.obertura .boto-pri { margin-top: 0; }

/* Conectar tu IA (artboard W12): un bloc a part dels tres passos, sobre el fons de les capçaleres i amb vora. */
.bloc-ia { background: var(--surface-muted); border: 1px solid var(--border-strong); border-radius: 14px; padding: 36px 40px; display: flex; flex-direction: column; gap: 26px; }
.bloc-ia .bloc { align-items: start; grid-template-columns: 480px minmax(0, 1fr); }
.bloc-ia__icona { color: var(--brand-orange); }
.bloc-ia__xat { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bloc-ia__xat .xat { width: 100%; overflow: hidden; }
.xat__pregunta { display: flex; justify-content: flex-end; padding: 16px 18px 6px; }
.xat__pregunta span { background: var(--brand-orange); color: var(--surface-card); font-size: 13.5px; line-height: 1.5; border-radius: 12px 12px 3px 12px; padding: 10px 15px; max-width: 72%; }
.xat__resposta { margin: 0; padding: 8px 18px 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.xat .taula tfoot td { font-weight: 600; }
.bloc-ia__garanties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.garantia { display: flex; gap: 11px; align-items: flex-start; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: 10px; padding: 13px 15px; }
.garantia > svg { flex-shrink: 0; margin-top: 1px; color: var(--state-positive); }
.garantia strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.garantia span span { font-size: 12.5px; line-height: 1.5; color: var(--ink-secondary); }
.bloc-ia__peu { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .bloc-ia { padding: 24px 18px; }
  .bloc-ia .bloc, .bloc-ia__garanties { grid-template-columns: 1fr; }
}