/* Binaria — estils de les seccions de la home (assets/home.css).
   Compartit per les quatre versions d'idioma (/, /es/, /fr/, /en/).
   Cada secció té el CSS scopejat sota un root únic (README §5.5). */

/* ---------- Component topo lines (reutilitzable) ---------- */

.topo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.topo svg { width: 100%; height: 100%; display: block; }
.topo svg g { fill: none; stroke-width: 1; }
.topo[data-topo="green"] svg g { stroke: var(--topo-stroke-green); }
.topo[data-topo="grey"] svg g { stroke: var(--topo-stroke-grey); }
/* Per a seccions fosques: el mateix traç, invertit (com al design system) */
.topo.topo-invert { filter: invert(1); opacity: 0.9; }

@media (prefers-reduced-motion: no-preference) {
  .topo svg { animation: binaria-drift 26s var(--ease-in-out) infinite alternate; }
  /* Pausat fora de viewport (ho commuta home.js amb IntersectionObserver) */
  .topo.is-off svg { animation-play-state: paused; }
}

/* ---------- Hero ---------- */

.s-hero {
  position: relative;
  background: var(--surface-page);
  overflow: hidden;
}

/* El mesh viu en un ::before propi per poder-lo animar (drift lent, compositat) */
.s-hero::before {
  content: '';
  position: absolute;
  inset: -6%;
  background: var(--mesh-dawn);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .s-hero::before { animation: binaria-mesh 30s var(--ease-in-out) infinite alternate; }
}
@keyframes binaria-mesh {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.5%, 2%, 0) scale(1.05); }
}

.s-hero__in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(72px, 9vw, 110px);
}

.s-hero__title {
  margin: 0;
  max-width: 820px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.s-hero__lead {
  margin: 0;
  max-width: 560px;
  font-size: var(--text-lead);
  color: var(--text-secondary);
}

.s-hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.s-hero__trust {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.s-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.s-hero__trust i, .s-hero__trust svg { width: 16px; height: 16px; color: var(--forest); flex: none; }

/* ---------- Per a qui ---------- */

.s-perqui { position: relative; padding: var(--section-pad-y) 0; }

.s-perqui__head { max-width: 760px; margin-bottom: var(--space-12); }
.s-perqui__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.s-perqui__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.s-perqui__card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.s-perqui__card:hover { box-shadow: var(--shadow-lift); transform: var(--hover-rise); }

.s-perqui__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--forest-tint);
  color: var(--forest);
  margin-bottom: var(--space-4);
}
.s-perqui__ico i, .s-perqui__ico svg { width: 22px; height: 22px; }

.s-perqui__card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.s-perqui__card p { margin: 0; color: var(--text-secondary); }

.s-perqui__close {
  margin: var(--space-10) 0 0;
  color: var(--text-muted);
  max-width: 640px;
}

@media (max-width: 760px) {
  .s-perqui__grid { grid-template-columns: 1fr; }
}

/* ---------- Serveis (sticky) ---------- */

.s-serveis {
  position: relative;
  background: var(--surface-sunken);
  padding: var(--section-pad-y) 0;
  /* clip i MAI hidden: overflow hidden crea un scroll container i trenca
     tots els position: sticky de dins (README §5.6) */
  overflow: clip;
}

.s-serveis__in {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-16);
  align-items: start;
}

.s-serveis__aside {
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.s-serveis__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.s-serveis__stack { display: flex; flex-direction: column; gap: var(--space-8); }

/* Pila de targetes "estil Apple": totes les targetes amb el MATEIX top i la
   MATEIXA alçada (les iguala home.js amb la més alta), de manera que cada
   targeta nova cobreix EXACTAMENT l'anterior mentre aquella s'encongeix i
   s'atenua (efecte d'arxivat). La pila només s'activa (.is-deck, home.js) si
   la targeta més alta cap sencera sota el navbar: si no hi cap (mòbil,
   portàtils baixos), flux normal i llegible — mai talls ni tops negatius. */
.s-serveis__stack.is-deck > * {
  position: sticky;
  top: 96px; /* el mateix per a totes; home.js el confirma inline */
  transform-origin: 50% 0;
  /* Ombra una mica més profunda quan la pila és activa: la targeta entrant
     se separa clarament de l'arxivada */
  box-shadow: var(--shadow-card);
}

/* El pack (curt) estirat a l'alçada comuna: contingut centrat verticalment */
.s-serveis__stack.is-deck .s-serveis__pack { display: flex; }
.s-serveis__stack.is-deck .s-serveis__packin {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Sense transition ni hover-rise de transform: el transform l'anima el scroll
   (efecte d'arxivat del deck) i una transition el faria anar amb goma */
.s-serveis__card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-10);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.s-serveis__card:hover { box-shadow: var(--shadow-lift); }

.s-serveis__num {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--forest-soft);
  letter-spacing: 0.04em;
}

.s-serveis__card h3 {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-md);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}

.s-serveis__pitch {
  margin: 0 0 var(--space-6);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--text-secondary);
}

.s-serveis__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.s-serveis__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-body); }
.s-serveis__list svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 4px;
  color: var(--forest);
}

.s-serveis__price {
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.s-serveis__price strong { color: var(--text-body); font-weight: var(--weight-semibold); }

/* Preus en files "concepte → preu" (servei 1): sense ambigüitat de lectura */
.s-serveis__price--rows { display: flex; flex-direction: column; gap: var(--space-2); }
.s-serveis__pricerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}
.s-serveis__pricerow > span { color: var(--text-secondary); }
.s-serveis__pricerow strong { white-space: nowrap; color: var(--text-body); font-weight: var(--weight-semibold); }

/* Targeta destacada: el pack, amb vora de gradient alpí (2px) */
.s-serveis__pack {
  background: var(--gradient-alpine);
  border-radius: calc(var(--radius-card) + var(--border-alpine-width));
  padding: var(--border-alpine-width);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.s-serveis__pack:hover { box-shadow: var(--shadow-lift); }

.s-serveis__packin {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: var(--space-10);
}
.s-serveis__packin h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-md);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}
.s-serveis__packin p { margin: 0 0 var(--space-6); color: var(--text-secondary); font-size: var(--text-body-size); }

@media (max-width: 900px) {
  .s-serveis__in { grid-template-columns: 1fr; gap: var(--space-10); }
  .s-serveis__aside { position: static; }
  .s-serveis__card, .s-serveis__packin { padding: var(--space-8); }
}

/* ---------- Qui som ---------- */

.s-quisom { position: relative; padding: var(--section-pad-y) 0; }

.s-quisom__in {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}

.s-quisom__photo { margin: 0; }
.s-quisom__ph {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* el gradient fa de placeholder mentre carrega la foto (lazy) */
  background: linear-gradient(160deg, var(--stone-1), var(--stone-2));
  box-shadow: var(--shadow-card);
}
.s-quisom__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-quisom__txt { display: flex; flex-direction: column; gap: var(--space-5); }
.s-quisom__txt h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.s-quisom__txt p { margin: 0; color: var(--text-secondary); font-size: var(--text-body-size); max-width: 520px; }
.s-quisom__txt strong { color: var(--text-body); font-weight: var(--weight-semibold); }

.s-quisom__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-20);
}

/* Centrades dins de la seva columna: amb text a l'esquerra els buits òptics
   entre xifres quedaven desiguals i la banda semblava descentrada */
.stat { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  max-width: 240px;
}

@media (max-width: 860px) {
  .s-quisom__in { grid-template-columns: 1fr; gap: var(--space-10); }
  .s-quisom__ph { aspect-ratio: 4 / 3; }
  .s-quisom__stats { grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-12); }
}

/* ---------- Testimonis (construït, encara ocult al HTML) ---------- */

.s-testimonis { position: relative; background: var(--surface-sunken); padding: var(--section-pad-y) 0; }

.s-testimonis__head { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.s-testimonis__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.s-testimonis__head p {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--text-small);
}

.s-testimonis__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

.s-testimonis__card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-soft);
}
.s-testimonis__card figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.s-testimonis__card blockquote {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--text-body);
}
.s-testimonis__card figcaption { display: flex; align-items: center; gap: 12px; }
/* Avatar amb la inicial (no tenim foto dels autors; mai fotos falses) */
.s-testimonis__foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--forest);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
}
.s-testimonis__nom { display: flex; flex-direction: column; }
.s-testimonis__nom b { font-size: var(--text-small); font-weight: var(--weight-semibold); }
.s-testimonis__nom span { font-size: var(--text-caption); color: var(--text-muted); }

@media (max-width: 760px) {
  .s-testimonis__grid { grid-template-columns: 1fr; }
}

/* ---------- Preguntes (FAQ) ---------- */
/* El root .faq és a propòsit: l'analítica (ANALYTICS-v5) escolta `.faq details summary`. */

.faq { position: relative; padding: var(--section-pad-y) 0; }

.faq__in { max-width: 820px; }

.faq__head { margin-bottom: var(--space-10); }
.faq__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.faq__list { display: flex; flex-direction: column; }

.faq details {
  border-bottom: 1px solid var(--border-subtle);
}
.faq details:first-child { border-top: 1px solid var(--border-subtle); }

.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  font-size: 19px;
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  transition: color var(--duration-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--forest); }

.faq summary svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--forest);
  transition: transform var(--duration-base) var(--ease-out);
}
.faq details[open] summary svg { transform: rotate(45deg); }

.faq .faq__a { padding: 0 0 var(--space-6); max-width: 680px; }
.faq .faq__a p { margin: 0; color: var(--text-secondary); }

/* ---------- Contacte (CTA final) ---------- */

.s-contacte {
  position: relative;
  background: var(--surface-inverse);
  color: var(--paper);
  padding: var(--section-pad-y) 0;
  overflow: hidden;
}

.s-contacte__in {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* min-width: 0 — que cap fill amb nowrap (el draft) infli la columna del grid */
.s-contacte__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); min-width: 0; }
.s-contacte__form { min-width: 0; }
.s-contacte__txt h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--paper);
}
.s-contacte__txt p {
  margin: 0;
  font-size: var(--text-lead);
  color: rgba(250, 248, 244, 0.7);
  max-width: 480px;
}

.s-contacte__form {
  background: rgba(250, 248, 244, 0.04);
  border: 1px solid rgba(250, 248, 244, 0.14);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.s-contacte__form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: rgba(250, 248, 244, 0.85);
}

.s-contacte__form input,
.s-contacte__form select,
.s-contacte__form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  color: var(--paper);
  background: rgba(250, 248, 244, 0.06);
  border: 1px solid rgba(250, 248, 244, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.s-contacte__form input::placeholder,
.s-contacte__form textarea::placeholder { color: rgba(250, 248, 244, 0.35); }
.s-contacte__form textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.s-contacte__form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F4' stroke-opacity='0.6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.s-contacte__form select option { color: var(--ink); background: var(--paper); }
.s-contacte__form input:focus,
.s-contacte__form select:focus,
.s-contacte__form textarea:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgba(194, 216, 225, 0.25);
}

/* Camp de telèfon: prefix (lada) + número en una fila; el número s'encongeix.
   min-width:0 al número perquè no desbordi en mòbil (anti-scroll horitzontal). */
.s-contacte__form .phone-row { display: flex; gap: 8px; align-items: stretch; }
.s-contacte__form .phone-row select { width: auto; flex: 0 0 130px; padding-right: 32px; background-position: right 12px center; }
.s-contacte__form .phone-row input { width: auto; flex: 1 1 auto; min-width: 0; }
.s-contacte__form .phone-row input::placeholder { color: rgba(250, 248, 244, 0.62); }
@media (max-width: 380px) { .s-contacte__form .phone-row select { flex-basis: 114px; } }

/* Camp trampa per a bots: fora de la vista, mai display:none (alguns bots ho detecten) */
.s-contacte__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile (verificació anti-bot): el contenidor no ha d'ocupar lloc mentre el
   desafiament no demana interacció (appearance: interaction-only) — si no,
   obriria un buit de gap extra entre el consentiment i el botó. Quan Cloudflare
   injecta l'iframe del desafiament, torna al flux. */
#cf-turnstile:not(:has(iframe)) { display: none; }
#cf-turnstile { min-width: 0; }

.s-contacte__form .btn { align-self: flex-start; margin-top: var(--space-2); }

/* Consentiment RGPD: checkbox + text en fila (diferent dels camps normals, que
   són columna i amplada completa). El botó queda bloquejat fins a marcar-lo. */
.s-contacte__form .s-contacte__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: 1.45;
  color: rgba(250, 248, 244, 0.72);
  cursor: pointer;
}
.s-contacte__form .s-contacte__consent input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  flex: none;
  accent-color: var(--forest);
  cursor: pointer;
}
/* Enllaç a la política de privacitat dins del consentiment (llegible sobre fosc) */
.s-contacte__form .s-contacte__consent a { color: var(--ice); text-decoration: underline; }
.s-contacte__form .s-contacte__consent a:hover { color: var(--paper); }

/* Botó bloquejat fins que s'accepta el consentiment (JS commuta `disabled`) */
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; }

.s-contacte__note {
  margin: 0;
  font-size: var(--text-caption);
  color: rgba(250, 248, 244, 0.45);
}

.s-contacte__msg { margin: 0; font-size: var(--text-small); font-weight: var(--weight-medium); }
.s-contacte__msg.is-ok { color: var(--ice); }
/* Error llegible sobre fons fosc, derivat del token --error (mai hex nous) */
.s-contacte__msg.is-err { color: color-mix(in srgb, var(--error) 55%, var(--paper)); }

@media (max-width: 860px) {
  .s-contacte__in { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ============================================================
   Capa de dinamisme (2026-07-12) — interacció i moció FixRiver-like,
   traduïda al to Binaria: sobri, alpí, transform/opacity només.
   Tot pausable (IntersectionObserver) i estàtic amb reduced-motion.
   ============================================================ */

/* ---------- Èmfasi dels titulars: gradient alpí al <em> ---------- */

/* En negreta i SENSE itàlica: la itàlica d'Instrument Serif es llegia malament
   amb el gradient (decisió 2026-07-13; el bold és sintetitzat, la família només té 400) */
.s-hero__title em,
.s-perqui__title em,
.s-serveis__title em,
.s-quisom__txt h2 em,
.faq__head h2 em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(115deg, var(--forest) 0%, var(--slate) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s-contacte__txt h2 em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(115deg, var(--ice) 0%, var(--amber) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Glow que segueix el punter (targetes) ---------- */
/* --mx/--my els posa home.js; només en dispositius amb hover real */

@media (hover: hover) {
  .s-perqui__card, .s-serveis__card, .s-serveis__packin { position: relative; overflow: hidden; }
  .s-perqui__card::after, .s-serveis__card::after, .s-serveis__packin::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--forest) 10%, transparent), transparent 65%);
  }
  .s-perqui__card:hover::after, .s-serveis__card:hover::after, .s-serveis__packin:hover::after {
    opacity: 1;
  }
  .s-perqui__card:hover .s-perqui__ico { transform: translateY(-2px) scale(1.05); }
  .s-perqui__ico { transition: transform var(--duration-base) var(--ease-out); }
}

/* ---------- Serveis: scrollytelling ---------- */

/* Índex de passos al costat sticky */
.s-serveis__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-6);
  padding-left: 18px;
}
.s-serveis__steps::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--border-subtle);
}
/* Barra de progrés de la secció (l'escala la posa home.js) */
.s-serveis__progress {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.s-serveis__progress i {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--forest), var(--slate));
  transform: scaleY(0);
  transform-origin: top;
}
.s-serveis__steps a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.s-serveis__steps a span {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--forest-soft);
  min-width: 20px;
}
.s-serveis__steps a:hover { color: var(--text-body); text-decoration: none; }
.s-serveis__steps a.is-current {
  color: var(--text-body);
  font-weight: var(--weight-semibold);
  transform: translateX(4px);
}
.s-serveis__steps a.is-current span { color: var(--forest); }

/* Targeta activa mentre creua el centre del viewport */
.s-serveis__card.is-current {
  border-color: color-mix(in srgb, var(--forest) 35%, transparent);
  box-shadow: var(--shadow-card);
}

/* Targeta de servei en dues columnes: text + visual animat */
.s-serveis__card { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: center; }
.s-serveis__txt { min-width: 0; }
.s-serveis__visual { min-width: 0; }

@media (max-width: 1100px) {
  .s-serveis__card { grid-template-columns: 1fr; }
}

/* ---------- Mockups animats (dins de cada servei) ---------- */
/* Estat base = estat final (sense JS o amb reduced-motion es veu complet);
   l'animació només corre amb .is-live (la commuta home.js amb IO) */

.mock {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: 12.5px;
  line-height: 1.35;
  user-select: none;
}

/* Web que es construeix */
.mock-web__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
.mock-web__dots { display: inline-flex; gap: 4px; }
.mock-web__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-2); }
.mock-web__url {
  flex: 1;
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}
.mock-web__stage { display: flex; flex-direction: column; gap: 8px; }
.mock-web__h {
  height: 14px;
  width: 62%;
  border-radius: 4px;
  background: linear-gradient(115deg, var(--forest), var(--slate));
  transform-origin: left;
}
.mock-web__img {
  height: 52px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--stone-1), var(--ice-tint));
}
.mock-web__l { height: 8px; border-radius: 4px; background: var(--stone-2); transform-origin: left; }
.mock-web__l1 { width: 92%; }
.mock-web__l2 { width: 74%; }
.mock-web__btn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: var(--weight-semibold);
  font-size: 11.5px;
}
@media (prefers-reduced-motion: no-preference) {
  .mock-web.is-live .mock-web__h   { animation: mockGrow .5s var(--ease-out) .2s both; }
  .mock-web.is-live .mock-web__img { animation: mockPop .45s var(--ease-out) .65s both; }
  .mock-web.is-live .mock-web__l1  { animation: mockGrow .4s var(--ease-out) 1s both; }
  .mock-web.is-live .mock-web__l2  { animation: mockGrow .4s var(--ease-out) 1.15s both; }
  .mock-web.is-live .mock-web__btn { animation: mockPop .4s var(--ease-out) 1.45s both; }
}

/* Xat de WhatsApp */
.mock-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
.mock-chat__avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--forest);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 16px;
  display: grid;
  place-items: center;
}
.mock-chat__who { display: flex; flex-direction: column; line-height: 1.2; }
.mock-chat__who b { font-size: 12.5px; }
.mock-chat__status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-muted); }
.mock-chat__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--forest); }
.mock-chat__body { display: flex; flex-direction: column; gap: 8px; }
.mock-chat__bubble {
  max-width: 88%;
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
}
.mock-chat__bubble.in { align-self: flex-start; border-bottom-left-radius: 4px; }
.mock-chat__bubble.out {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--forest-tint);
  border-color: color-mix(in srgb, var(--forest) 18%, transparent);
}
.mock-chat__ticks { margin-left: 6px; font-size: 10px; color: var(--slate); letter-spacing: -1px; }
.mock-chat__typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 9px 12px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  opacity: 0; /* només es veu durant la seqüència animada */
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.mock-chat__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--stone-3); }
@media (prefers-reduced-motion: no-preference) {
  .mock-chat.is-live .mock-chat__bubble.in { animation: mockPop .4s var(--ease-out) .3s both; }
  .mock-chat.is-live .mock-chat__typing    { animation: mockTyping 1.5s var(--ease-out) .8s both; }
  .mock-chat.is-live .mock-chat__typing i  { animation: mockDot 1s var(--ease-in-out) infinite; }
  .mock-chat.is-live .mock-chat__typing i:nth-child(2) { animation-delay: .15s; }
  .mock-chat.is-live .mock-chat__typing i:nth-child(3) { animation-delay: .3s; }
  .mock-chat.is-live .mock-chat__bubble.out { animation: mockPop .4s var(--ease-out) 2.3s both; }
  .mock-chat.is-live .mock-chat__ticks     { animation: mockTicks .3s var(--ease-out) 3s both; }
}

/* Flux d'automatització */
.mock-flow { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 26px; }
.mock-flow__line {
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}
.mock-flow__line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--forest), var(--slate));
  transform-origin: top;
}
.mock-flow__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.mock-flow__node::before {
  content: '';
  position: absolute;
  left: -18.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--forest);
  border: 2px solid var(--surface-sunken);
}
.mock-flow__lbl { flex: 1; color: var(--text-body); font-weight: var(--weight-medium); }
.mock-flow__chk {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--forest-tint);
  color: var(--forest-deep);
  font-size: 10px;
  display: grid;
  place-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .mock-flow.is-live .mock-flow__line i { animation: mockFill 1.9s var(--ease-out) .2s both; }
  .mock-flow.is-live .mock-flow__node:nth-child(2) { animation: mockNode .45s var(--ease-out) .3s both; }
  .mock-flow.is-live .mock-flow__node:nth-child(3) { animation: mockNode .45s var(--ease-out) .95s both; }
  .mock-flow.is-live .mock-flow__node:nth-child(4) { animation: mockNode .45s var(--ease-out) 1.6s both; }
  .mock-flow.is-live .mock-flow__node:nth-child(2) .mock-flow__chk { animation: mockPop .3s var(--ease-out) .75s both; }
  .mock-flow.is-live .mock-flow__node:nth-child(3) .mock-flow__chk { animation: mockPop .3s var(--ease-out) 1.4s both; }
  .mock-flow.is-live .mock-flow__node:nth-child(4) .mock-flow__chk { animation: mockPop .3s var(--ease-out) 2.05s both; }
}

/* IA connectada amb les eines del negoci (targeta 01) */
/* Sense finestra: hub central que reparteix cap a les eines. El disc ple i el
   cercle puntejat fan eco del símbol "Pilar B" (Biná + Daat). */
.mock-ia {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
}
.mock-ia__core {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
}
.mock-ia__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--forest-tint);
}
.mock-ia__orbit {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed var(--forest-soft);
}
.mock-ia__core span {
  position: relative;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--forest-deep);
}
.mock-ia__stem {
  position: relative;
  width: 2px;
  height: 18px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}
.mock-ia__stem i {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--forest), var(--slate));
  transform-origin: top;
}
.mock-ia__tools {
  position: relative;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
/* Rail de repartiment (fons + farcit que creix des del centre) */
.mock-ia__tools::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 2px;
  background: var(--border-subtle);
}
.mock-ia__tools::after {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--forest), var(--slate));
  transform-origin: center;
}
.mock-ia__tool {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  color: var(--text-body);
  white-space: nowrap;
}
.mock-ia__tool::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--border-subtle);
}
@media (prefers-reduced-motion: no-preference) {
  .mock-ia.is-live .mock-ia__halo { animation: iaBreathe 3.2s var(--ease-in-out) infinite alternate; }
  .mock-ia.is-live .mock-ia__orbit { animation: iaSpin 12s linear infinite; }
  .mock-ia.is-live .mock-ia__stem i { animation: mockFill .4s var(--ease-out) .25s both; }
  .mock-ia.is-live .mock-ia__tools::after { animation: mockGrow .5s var(--ease-out) .6s both; }
  .mock-ia.is-live .mock-ia__tool:nth-child(1) { animation: mockPop .4s var(--ease-out) 1.05s both; }
  .mock-ia.is-live .mock-ia__tool:nth-child(2) { animation: mockPop .4s var(--ease-out) 1.25s both; }
  .mock-ia.is-live .mock-ia__tool:nth-child(3) { animation: mockPop .4s var(--ease-out) 1.45s both; }
}
@keyframes iaBreathe { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes iaSpin { to { transform: rotate(360deg); } }

/* Keyframes compartits dels mockups */
@keyframes mockGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mockPop  { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mockFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mockNode { from { opacity: .25; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mockDot  { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes mockTicks { from { opacity: 0; } to { opacity: 1; } }
@keyframes mockTyping {
  0% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
  12% { opacity: 1; height: 23px; padding-top: 9px; padding-bottom: 9px; }
  85% { opacity: 1; height: 23px; padding-top: 9px; padding-bottom: 9px; }
  100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
}

/* ---------- FAQ: obertura animada ---------- */

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__a { animation: binaria-fade-up var(--duration-base) var(--ease-out); }
}

/* ---------- Contacte: esborrany que s'escriu + pols de llum ---------- */

.s-contacte__draft {
  display: flex;
  align-items: center;
  width: min(440px, 100%);
  background: rgba(250, 248, 244, 0.06);
  border: 1px solid rgba(250, 248, 244, 0.2);
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  font-size: var(--text-small);
  color: rgba(250, 248, 244, 0.85);
  min-height: 44px;
}
/* flex: 1 + min-width: 0 — sense això el nowrap impedeix encongir la píndola (min-width auto) */
.s-contacte__draftxt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-contacte__draft::after {
  content: '';
  flex: none;
  width: 1.5px;
  height: 15px;
  margin-left: 3px;
  background: var(--ice);
}
@media (prefers-reduced-motion: no-preference) {
  .s-contacte__draft::after { animation: draftCaret 1.1s step-end infinite; }
}
@keyframes draftCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Punts de llum flotant (decoratius, molt subtils) */
.s-contacte__dust { position: absolute; inset: 0; pointer-events: none; }
.s-contacte__dust i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ice);
  opacity: .22;
}
.s-contacte__dust i:nth-child(1) { left: 8%;  top: 22%; }
.s-contacte__dust i:nth-child(2) { left: 26%; top: 74%; width: 3px; height: 3px; }
.s-contacte__dust i:nth-child(3) { left: 44%; top: 16%; width: 3px; height: 3px; }
.s-contacte__dust i:nth-child(4) { left: 61%; top: 82%; }
.s-contacte__dust i:nth-child(5) { left: 78%; top: 30%; width: 5px; height: 5px; opacity: .16; }
.s-contacte__dust i:nth-child(6) { left: 92%; top: 62%; width: 3px; height: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .s-contacte__dust i { animation: dustFloat 9s var(--ease-in-out) infinite alternate; }
  .s-contacte__dust i:nth-child(2) { animation-duration: 7s;  animation-delay: -2s; }
  .s-contacte__dust i:nth-child(3) { animation-duration: 11s; animation-delay: -5s; }
  .s-contacte__dust i:nth-child(4) { animation-duration: 8s;  animation-delay: -3s; }
  .s-contacte__dust i:nth-child(5) { animation-duration: 12s; animation-delay: -7s; }
  .s-contacte__dust i:nth-child(6) { animation-duration: 10s; animation-delay: -1s; }
}
@keyframes dustFloat { from { transform: translateY(0); } to { transform: translateY(-22px); } }

/* ---------- Testimonis: marquee automàtic amb la resta de missatges ---------- */
/* Fila contínua de xips (2 còpies del set; la 2a és aria-hidden). Pausa amb
   hover i fora de viewport (is-off, home.js). Amb reduced-motion: estàtic i
   desplaçable a mà. */

.s-testimonis__marquee {
  margin-top: var(--space-8);
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.s-testimonis__track { display: flex; width: max-content; }

.s-testimonis__set {
  display: flex;
  gap: var(--space-4);
  padding-right: var(--space-4); /* el buit entre còpies = el gap intern (loop net) */
}

.s-testimonis__chip {
  margin: 0;
  width: 320px;
  flex: none;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.s-testimonis__chip blockquote {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-body);
}
.s-testimonis__chip figcaption { display: flex; flex-direction: column; line-height: 1.35; }
.s-testimonis__chip b { font-size: var(--text-caption); font-weight: var(--weight-semibold); }
.s-testimonis__chip figcaption span { font-size: 12px; color: var(--text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .s-testimonis__track { animation: testimonis-scroll 60s linear infinite; }
  .s-testimonis__marquee:hover .s-testimonis__track,
  .s-testimonis__marquee.is-off .s-testimonis__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .s-testimonis__marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@keyframes testimonis-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .s-testimonis__chip { width: 260px; }
}