/* ==========================================================================
   WebMasterOsona V4 — pàgines de servei
   La pàgina que ven disseny web ha de FER disseny web, no explicar-lo.
   ========================================================================== */

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
.sv-hero{position:relative;padding-top:clamp(108px,13vh,150px);overflow:hidden}
.sv-hero__aura{position:absolute;inset:-46% auto auto -14%;width:min(74vw,920px);aspect-ratio:1;
  background:radial-gradient(circle,var(--gold-tint),transparent 62%);filter:blur(16px);
  pointer-events:none;z-index:0}
.sv-hero .container{position:relative;z-index:1}

.sv-crumb{display:flex;align-items:center;gap:.5em;font-size:.8rem;color:var(--ink-3);
  margin-bottom:clamp(18px,2.2vw,28px)}
.sv-crumb a{color:var(--ink-2);border-bottom:1px solid transparent}
.sv-crumb a:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}
.sv-crumb .i{width:.85em;height:.85em;color:var(--line-2)}
.sv-crumb span{color:var(--ink)}

.sv-hero__in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,3.6vw,64px);align-items:center}
.sv-hero__txt{padding-block:clamp(8px,2vh,26px)}
.sv-hero h1{font-size:clamp(2.4rem,4.6vw,4.1rem);letter-spacing:-.035em;line-height:.96;
  max-width:14ch}
.sv-hero h1 .l{display:block;overflow:hidden;padding-bottom:.1em}
.sv-hero h1 .l>span{display:block}
.sv-hero h1 em{font-style:normal;color:var(--gold-ink)}
.sv-hero__lead{margin-top:clamp(18px,2vw,26px);font-size:var(--t-lead);color:var(--ink-2);max-width:50ch}
.sv-hero__lead strong{color:var(--ink)}
.sv-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;
  margin-top:clamp(22px,2.6vw,32px)}

/* ── La maqueta que es dibuixa sola ─────────────────────────────────────── */
/* Finestra sencera i flotant. Provat vessant-la fins a la vora de la
   pantalla i no: sense vora dreta sembla que la imatge estigui tallada. */
.bw-wrap{position:relative;z-index:1}
.bw{margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3)}
.bw__bar{display:flex;align-items:center;gap:6px;padding:.72rem 1rem;
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.bw__bar>i{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.bw__bar>i:first-child{background:#E7A7A0}
.bw__bar>i:nth-child(2){background:#EBD08A}
.bw__url{flex:1;text-align:center;font-size:.78rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden}
.bw__url::after{content:"";display:inline-block;width:1px;height:1em;background:var(--gold-ink);
  margin-left:2px;vertical-align:-.15em;animation:caret .9s steps(2) infinite}
.bw.is-done .bw__url::after{display:none}
@keyframes caret{50%{opacity:0}}
.bw__state{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink);
  background:var(--gold-soft);border-radius:var(--r-pill);padding:.25em .8em;
  opacity:0;transition:opacity .4s var(--ease)}
.bw__state.is-in{opacity:1}
.is-done .bw__state{background:var(--gold);color:#14120F}

.bw__view{position:relative;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.bw__real{width:100%;height:100%;object-fit:cover;object-position:top center}
.bw__wire{position:absolute;inset:0;background:var(--paper-2)}
.wr{position:absolute;background:var(--line-2);border-radius:6px;
  transform-origin:left center}
.wr--nav{left:22%;top:5%;width:56%;height:3.2%}
.wr--logo{left:5%;top:4.4%;width:11%;height:4.4%;border-radius:8px;background:var(--gold)}
.wr--h1{left:12%;top:26%;width:52%;height:9%;background:var(--line-2)}
.wr--h2{left:12%;top:39%;width:38%;height:5%}
.wr--btn{left:12%;top:50%;width:17%;height:6.4%;border-radius:var(--r-pill);background:var(--gold)}
.wr--c1{left:12%;top:68%;width:22%;height:20%}
.wr--c2{left:39%;top:68%;width:22%;height:20%}
.wr--c3{left:66%;top:68%;width:22%;height:20%}
.bw figcaption{padding:.85rem 1.1rem;font-size:.8rem;color:var(--ink-3);
  border-top:1px solid var(--line);background:var(--surface)}

/* ── Les tres dades dures ───────────────────────────────────────────────── */
.sv-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(38px,4.4vw,64px) 0 0;
  border-top:1px solid var(--line)}
.sv-facts>div{padding:clamp(20px,2.2vw,28px) clamp(14px,1.8vw,26px);border-left:1px solid var(--line)}
.sv-facts>div:first-child{border-left:0;padding-left:0}
.sv-facts dt{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sv-facts dd{margin:.4rem 0 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;color:var(--ink);word-spacing:.04em}
/* El peu ha passat a dins del <dd> —un <p> no pot ser germà de dt/dd—,
   així que ara cal desfer la Playfair i el pes que el <dd> li encomana. */
.sv-facts p{margin:.25rem 0 0;font-family:var(--font-body);font-weight:400;
  font-size:.87rem;letter-spacing:normal;word-spacing:normal;color:var(--ink-2)}
@media (max-width:1024px){
  /* minmax(0,1fr) i no 1fr: amb `1fr` el mínim automàtic és el min-content
     i una maqueta amb contingut ample (la llista d'Amazon) estira la
     graella més enllà del contenidor i el text surt de la pantalla. */
  .sv-hero__in{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,46px)}
  .sv-hero h1{max-width:16ch}
}
@media (max-width:760px){
  .sv-facts{grid-template-columns:1fr}
  .sv-facts>div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .sv-facts>div:first-child{border-top:0}
}

/* ═══ L'ESCENA ═══════════════════════════════════════════════════════════
   Columna esquerra enganxada: el mateix aparell canvia d'estat amb cada
   motiu que llegeixes a la dreta. Sense pin de GSAP: sticky pur.        */
.sv-stage{background:var(--paper-2);border-block:1px solid var(--line);
  padding-block:var(--sec-y)}
.stage__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.4vw,80px);
  align-items:start}
/* El visual es queda centrat a la pantalla mentre els passos hi desfilen.
   Sense prou recorregut els estats es trepitgen i sembla que no funcioni. */
.stage__col{position:sticky;top:max(clamp(96px,13vh,130px), calc(50vh - 250px))}
.stage{position:relative}

.stage__device{margin-inline:auto;width:100%;max-width:600px;
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-2);
  transition:max-width .8s var(--ease),border-radius .8s var(--ease)}
.stage__bar{display:flex;gap:5px;padding:.6rem .85rem;background:var(--paper-2);
  border-bottom:1px solid var(--line)}
.stage__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.stage__bar i:first-child{background:#E7A7A0}
.stage__bar i:nth-child(2){background:#EBD08A}
.stage__view{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);
  transition:aspect-ratio .8s var(--ease)}
.stage__view img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(1) contrast(.85);opacity:.35;
  transition:filter .8s var(--ease),opacity .8s var(--ease)}

/* Estat 1 · esbós */
.stage__wire{position:absolute;inset:0;background:var(--paper-2);
  opacity:1;transition:opacity .7s var(--ease)}
/* Estat 3 · etiquetes de SEO */
.stage__seo{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  pointer-events:none}
.tag{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:600;color:#14120F;background:var(--gold);
  padding:.2em .55em;border-radius:5px;box-shadow:0 4px 12px rgba(20,18,15,.18);
  transform:translateY(6px);transition:transform .5s var(--ease)}
/* Les etiquetes van als marges: al centre trepitgen el titular de la
   captura, i cada servei fa servir una captura diferent. */
.tag--1{left:4%;top:30%}
.tag--2{left:4%;top:44%}
.tag--3{right:4%;top:62%}
.tag--4{left:4%;bottom:7%}
/* Estat 4 · en marxa */
.stage__shield{position:absolute;right:14px;bottom:14px;width:44px;height:44px;
  border-radius:50%;background:var(--gold);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:.5s var(--ease);
  box-shadow:0 10px 24px rgba(236,198,0,.5)}
.stage__shield .i{width:22px;height:22px;color:#14120F}

/* Estat 3 · el mateix contingut en una sola columna.
   Fem servir l'esbós, no la captura: encongir una captura d'escriptori
   retalla el titular i sembla una web trencada, no una web responsive. */
.stage__mob{position:absolute;inset:0;background:var(--paper-2);opacity:0;
  transition:opacity .55s var(--ease)}
.mb{position:absolute;background:var(--line-2);border-radius:5px}
.mb--logo{left:6%;top:3.4%;width:30%;height:3.2%;border-radius:7px;background:var(--gold)}
.mb--nav{left:6%;top:9%;width:88%;height:2.4%}
.mb--h1{left:6%;top:16%;width:82%;height:6.6%}
.mb--h2{left:6%;top:25%;width:58%;height:3.6%}
.mb--btn{left:6%;top:32%;width:46%;height:4.8%;border-radius:var(--r-pill);background:var(--gold)}
.mb--c1{left:6%;top:43%;width:88%;height:15%}
.mb--c2{left:6%;top:61%;width:88%;height:15%}
.mb--c3{left:6%;top:79%;width:88%;height:15%}

.stage.is-2 .stage__wire,.stage.is-3 .stage__wire,.stage.is-4 .stage__wire{opacity:0}
.stage.is-2 .stage__view img,.stage.is-4 .stage__view img{filter:none;opacity:1}
.stage.is-2 .stage__seo{opacity:1}
.stage.is-2 .tag{transform:translateY(0)}
.stage--web.is-3 .stage__device{max-width:300px;border-radius:26px}
.stage--web.is-3 .stage__view{aspect-ratio:9/17}
.stage--web.is-3 .stage__mob{opacity:1}
.stage.is-4 .stage__shield{opacity:1;transform:scale(1)}

.stage__tag{margin:1.1rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;
  justify-content:center;min-height:2.6em}
.stage__tag b{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink)}
.stage__tag span{font-size:.9rem;color:var(--ink-2)}

.stage__steps{display:grid}
.stage__step{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,28px);
  align-content:center;min-height:46vh;
  padding:clamp(26px,3.4vw,48px) 0;border-top:1px solid var(--line-2);
  opacity:.42;transition:opacity .5s var(--ease)}
.stage__step:first-child{border-top:0}
.stage__step.is-on{opacity:1}
.stage__n{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3);
  padding-top:.75em;transition:color .5s var(--ease)}
.stage__step.is-on .stage__n{color:var(--gold-ink)}
.stage__step h3{font-size:clamp(1.25rem,2.2vw,1.85rem);max-width:26ch}
.stage__step p{margin-top:.6rem;color:var(--ink-2);max-width:52ch}
/* En una columna, l'escena tenia dos problemes de cop:
   · Es quedava dalt de tot de la secció i, quan llegies els quatre punts,
     ja no la veies: l'animació passava fora de pantalla.
   · Els estats la canvien de forma (el 3 la fa vertical). Amb l'alçada
     lliure, cada canvi movia tot el que hi havia a sota mentre estaves
     llegint: aquells «tropessons» al fer scroll.
   Es resol amb les dues coses alhora: s'enganxa sota la capçalera perquè la
   vegis mentre llegeixes, i l'alçada es fixa perquè cap estat en canviï cap. */
@media (max-width:920px){
  .stage__in{grid-template-columns:1fr;gap:20px}
  .stage__col{position:sticky;top:64px;z-index:3;
    padding-block:12px;background:var(--paper-2);
    /* Una ombra molt curta: n'hi ha prou perquè el text que passa per sota
       s'entengui que passa per sota. */
    box-shadow:0 14px 16px -14px rgba(20,18,15,.28)}
  .stage__device{max-width:100%;margin-inline:auto}
  /* Alçada fixa en comptes de proporció: és el que impedeix el salt. */
  .stage__view{aspect-ratio:auto;height:190px}
  .stage--web.is-3 .stage__view{aspect-ratio:auto;height:190px}
  .stage--web.is-3 .stage__device{max-width:108px}
  .stage__tag{margin-top:.7rem;font-size:.82rem}
  .stage__step{opacity:1;min-height:0;padding-block:clamp(20px,3vw,30px)}
}
@media (max-width:520px){
  .stage__col{top:58px}
  .stage__view{height:160px}
  .stage--web.is-3 .stage__view{height:160px}
  .stage--web.is-3 .stage__device{max-width:92px}
}

/* ═══ DECLARACIÓ ═════════════════════════════════════════════════════════ */
.sv-say{position:relative;overflow:hidden;padding-block:var(--sec-y)}
.sv-say__glow{position:absolute;inset:-40% -18% auto auto;width:min(66vw,760px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(236,198,0,.13),transparent 63%);filter:blur(14px);
  pointer-events:none}
.sv-say__in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(38px,5vw,96px);align-items:start}

/* ── El cartell: la frase és el titular, no el peu ─────────────────────── */
/* Es queda enganxada mentre passa el text del costat: la declaració és el
   que ha de recordar qui llegeix, i així la té davant tota l'estona. */
.sv-say__poster{position:sticky;top:clamp(96px,14vh,146px)}
.sv-say__pull{position:relative;margin:clamp(22px,2.6vw,34px) 0 0}
.sv-say__mark{position:absolute;left:-.06em;top:-.34em;line-height:1;pointer-events:none;
  font-family:var(--font-display);font-size:clamp(6rem,11vw,10rem);color:var(--gold);opacity:.13}
.sv-say__pull p{position:relative;margin:0;color:var(--gold);
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.85rem,3.4vw,2.95rem);line-height:1.14;letter-spacing:-.02em;
  text-wrap:balance}
.sv-say__rule{display:block;width:min(200px,58%);height:4px;color:var(--gold);overflow:visible;
  margin-top:clamp(26px,3vw,40px)}
.sv-say__sign{margin:.95rem 0 0;font-size:.76rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-2)}

/* ── L'article: una sola columna, amb caplletra ────────────────────────── */
.sv-say__h{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.16;letter-spacing:-.02em;
  max-width:20ch;text-wrap:balance}
.sv-say__text p{margin:clamp(18px,2vw,26px) 0 0;color:var(--on-dark-2);
  font-size:clamp(1.02rem,1.15vw,1.14rem);line-height:1.75;max-width:62ch}
/* overflow:hidden per contenir la caplletra: si el primer paràgraf fos
   curt, la lletra flotant es ficaria dins del segon. */
.sv-say__p1{overflow:hidden}
.sv-say__p1::first-letter{float:left;font-family:var(--font-display);font-weight:600;
  font-size:3.3em;line-height:.8;padding:.05em .1em 0 0;color:var(--gold)}

@media (max-width:980px){
  .sv-say__in{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,46px)}
  .sv-say__poster{position:static}
  .sv-say__rule{width:160px}
}

/* ═══ FEINA FETA ═════════════════════════════════════════════════════════
   Un projecte gran amb la fitxa sencera i la resta en files compactes.
   El collage escampat deia poc i s'enduia 1.700 px de pàgina.            */
.sv-proof{padding-block:var(--sec-y);background:var(--paper-2);border-block:1px solid var(--line)}
.sv-proof__head{max-width:none;margin-bottom:clamp(30px,3.4vw,52px)}
.sv-proof__head h2{font-size:var(--t-h2);max-width:16ch;text-wrap:balance}
.sv-proof__head .lead{margin-top:.9rem;max-width:48ch}

.pf-spread{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(24px,3.2vw,54px);align-items:start}

/* El destacat */
.pf-lead{display:block}
.pf-lead__frame{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.pf-lead:hover .pf-lead__frame{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--gold)}
.pf-bar{display:flex;align-items:center;gap:5px;padding:.6rem .9rem;
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.pf-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.pf-bar i:first-child{background:#E7A7A0}
.pf-bar i:nth-child(2){background:#EBD08A}
.pf-bar span{flex:1;text-align:center;font-size:.72rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-lead img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.pf-lead__info{display:grid;gap:.3rem;padding-top:clamp(16px,1.8vw,24px)}
.pf-lead__info em{font-style:normal;font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink)}
.pf-lead__info b{font-family:var(--font-display);font-size:clamp(1.35rem,2.2vw,1.85rem);
  font-weight:600;letter-spacing:-.02em;word-spacing:.05em}
.pf-lead__desc{color:var(--ink-2);max-width:56ch;margin-top:.15rem}
.pf-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.pf-tags i{font-style:normal;font-size:.76rem;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.3em .8em}
.pf-go{margin-top:.9rem;display:inline-flex;align-items:center;gap:.45em;
  font-size:.9rem;font-weight:600;color:var(--gold-ink)}
.pf-go .i{width:1em;height:1em;transition:transform .3s var(--ease)}
.pf-lead:hover .pf-go .i{transform:translate(3px,-3px)}

/* Les altres */
.pf-rest{border-top:1px solid var(--line-2)}
.pf-rest li{border-bottom:1px solid var(--line-2)}
.pf-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(12px,1.4vw,20px);align-items:center;padding:clamp(14px,1.6vw,20px) 0;
  transition:padding-left .4s var(--ease)}
.pf-row::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.pf-row:hover::before{transform:scaleX(1)}
.pf-row:hover{padding-left:clamp(6px,.8vw,12px)}
.pf-row__thumb{display:block;width:clamp(84px,9vw,116px);border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);flex:0 0 auto}
.pf-row__thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  transition:transform .6s var(--ease)}
.pf-row:hover .pf-row__thumb img{transform:scale(1.06)}
.pf-row__body{display:grid;gap:.1rem;min-width:0}
.pf-row__body em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);transition:color .35s var(--ease)}
.pf-row:hover .pf-row__body em{color:var(--gold-ink)}
.pf-row__body b{font-family:var(--font-display);font-size:1.08rem;font-weight:600;word-spacing:.05em}
.pf-row__body span{font-size:.85rem;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-row__go .i{width:17px;height:17px;color:var(--ink-3);
  transition:transform .3s var(--ease),color .3s var(--ease)}
.pf-row:hover .pf-row__go .i{transform:translate(3px,-3px);color:var(--gold-ink)}
.pf-rest__all{padding-top:clamp(14px,1.6vw,20px);border-bottom:0!important}

/* Amb menys de quatre projectes la columna dreta es queda buida: el
   destacat passa a ocupar tota l'amplada i les files van a sota. */
.pf-spread--wide{grid-template-columns:1fr;gap:clamp(30px,3.4vw,50px)}
.pf-spread--wide .pf-lead{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(20px,2.8vw,48px);align-items:center}
.pf-spread--wide .pf-lead__info{padding-top:0}
.pf-spread--wide .pf-lead__desc{max-width:44ch}

@media (max-width:900px){
  .pf-spread--wide .pf-lead{grid-template-columns:1fr;gap:clamp(16px,2.4vw,24px)}
  .pf-spread--wide .pf-lead__info{padding-top:clamp(16px,1.8vw,24px)}
  .pf-spread{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .pf-row__body span{-webkit-line-clamp:1}
}
@media (max-width:520px){
  .pf-row{grid-template-columns:auto 1fr;gap:12px}
  .pf-row__go{display:none}
  .pf-row__thumb{width:76px}
}

/* ═══ FAQ ════════════════════════════════════════════════════════════════ */
.sv-faq__list{display:grid;max-width:1000px;margin-inline:auto;border-top:1px solid var(--line-2)}
.sv-qa{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,40px);
  padding:clamp(24px,2.8vw,38px) 0;border-bottom:1px solid var(--line-2)}
.sv-qa__n{margin:0;font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  color:var(--gold-ink);padding-top:.25em}
.sv-qa h3{font-size:clamp(1.16rem,1.9vw,1.5rem);max-width:34ch}
.sv-qa p{margin-top:.7rem;color:var(--ink-2);max-width:72ch}
@media (max-width:600px){.sv-qa{grid-template-columns:1fr;gap:.5rem}.sv-qa__n{padding-top:0}}

/* ═══ BOTIGUES ONLINE ════════════════════════════════════════════════════
   La pàgina que ven ecommerce ha de VENDRE davant teu. Al hero passa una
   compra sencera sobre la botiga real d'un client; a l'escena es recorre
   el camí del client: catàleg → fitxa → pagament → comanda.
   Cap preu ni cap producte inventat: només el camí.                      */

/* ── Hero · la venda ────────────────────────────────────────────────────── */
.bw--shop .bw__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(20,18,15,0) 46%,rgba(20,18,15,.16) 100%)}
.sh{position:absolute;inset:0;z-index:2;font-size:clamp(.66rem,1.02vw,.84rem)}

.sh__cart{position:absolute;right:3.4%;top:6%;display:inline-flex;align-items:center;gap:.45em;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.42em .8em;box-shadow:var(--sh-1);transform:translateY(-6px);opacity:0}
.sh__cart .i{width:1.25em;height:1.25em;color:var(--ink-2)}
.sh__cart b{font-size:.86em;font-weight:700;min-width:1.5em;height:1.5em;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:#14120F}

.sh__panel{position:absolute;right:3.4%;bottom:6.5%;width:min(54%,300px);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:.95em 1.05em;box-shadow:var(--sh-3);opacity:0;transform:translateY(10px)}
.sh__h{margin:0 0 .7em;font-size:.86em;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.sh__steps{display:grid;gap:.55em}
.sh__step{display:flex;align-items:center;gap:.6em;color:var(--ink-3);
  transition:color .4s var(--ease)}
.sh__step i{width:1.15em;height:1.15em;border-radius:50%;border:1.5px solid var(--line-2);
  flex:0 0 auto;position:relative;transition:.4s var(--ease)}
.sh__step i::after{content:"";position:absolute;inset:.24em;border-radius:50%;
  background:#14120F;transform:scale(0);transition:transform .35s var(--ease)}
.sh__step.is-on{color:var(--ink)}
.sh__step.is-on i{border-color:var(--gold);background:var(--gold)}
.sh__step.is-on i::after{transform:scale(1)}
.sh__done{margin:.85em 0 0;padding-top:.75em;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.5em;font-weight:700;color:var(--gold-ink);opacity:0}
.sh__done .i{width:1.1em;height:1.1em;padding:.12em;border-radius:50%;
  background:var(--gold);color:#14120F}
@media (max-width:560px){
  .bw--shop .bw__view::after{background:linear-gradient(0deg,rgba(20,18,15,.3) 46%,rgba(20,18,15,0) 82%)}
  .sh{font-size:.62rem}
  .sh__cart{top:5%;right:4%;bottom:auto}
  .sh__panel{left:4%;right:4%;bottom:5%;width:auto}
  .sh__steps{grid-auto-flow:column;grid-auto-columns:1fr;gap:.5em}
  .sh__step{flex-direction:column;text-align:center;gap:.35em}
}

/* ── Escena · el camí del client ────────────────────────────────────────── */
.sp{position:absolute;inset:0;background:var(--paper-2);
  font-size:clamp(.6rem,1.15vw,.82rem)}
.sp__top{position:absolute;left:0;right:0;top:0;height:11%;display:flex;align-items:center;
  gap:5%;padding:0 5%;background:var(--surface);border-bottom:1px solid var(--line)}
.sp__logo{width:14%;height:38%;border-radius:5px;background:var(--gold)}
.sp__nav{flex:1;height:24%;border-radius:4px;background:var(--line-2)}
.sp__bag{width:5%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line-2);
  transition:.5s var(--ease)}
.stage--shop.is-2 .sp__bag,.stage--shop.is-3 .sp__bag,.stage--shop.is-4 .sp__bag{
  background:var(--gold);border-color:var(--gold)}

/* Les quatre capes: només n'hi ha una de viva a cada moment */
.sp__grid,.sp__card,.sp__pay,.sp__ord{position:absolute;left:0;right:0;top:11%;bottom:0;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none}
.stage--shop.is-1 .sp__grid,.stage--shop.is-2 .sp__card,
.stage--shop.is-3 .sp__pay,.stage--shop.is-4 .sp__ord{opacity:1;transform:none}
/* 1 · catàleg */
.sp__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;
  gap:4.5% 4%;padding:5%}
.sp__tile{display:flex;flex-direction:column;gap:.42em;min-height:0}
.sp__tile i{flex:1;min-height:0;border-radius:7px;background:var(--line);
  border:1px solid var(--line-2)}
.sp__tile b{height:.45em;border-radius:3px;background:var(--line-2);width:82%;flex:0 0 auto}
.sp__tile em{height:.45em;border-radius:3px;background:var(--gold);width:38%;flex:0 0 auto}

/* 2 · fitxa de producte */
.sp__card{display:grid;place-items:center;padding:5%}
.sp__sheet{display:grid;grid-template-columns:.82fr 1.18fr;gap:6%;align-items:center;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:5% 5.5%;box-shadow:var(--sh-1)}
.sp__ph{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--paper-2),var(--gold-soft));border:1px solid var(--line-2)}
.sp__ph i{width:34%;aspect-ratio:1;border-radius:50%;background:var(--gold);opacity:.6}
.sp__meta{display:grid;gap:.5em;align-content:center}
.sp__l1{height:.85em;border-radius:4px;background:var(--ink-3);width:74%}
.sp__l2{height:.5em;border-radius:3px;background:var(--line-2);width:46%}
.sp__vars{display:flex;gap:.4em;margin-top:.2em}
.sp__vars b{width:1.5em;height:1.5em;border-radius:50%;background:var(--line);
  border:1px solid var(--line-2)}
.sp__vars b:first-child{background:var(--gold);border-color:var(--gold)}
.sp__add{margin-top:.35em;justify-self:start;background:var(--gold);color:#14120F;
  font-weight:700;border-radius:var(--r-pill);padding:.55em 1.1em;box-shadow:var(--sh-1)}

/* 3 · pagament */
.sp__pay{display:grid;gap:.55em;align-content:center;justify-items:center;padding:5% 12%}
.sp__pay-h{margin:0;display:flex;align-items:center;gap:.45em;font-weight:700;color:var(--ink)}
.sp__pay-h .i{width:1.15em;height:1.15em;color:var(--gold-ink)}
.sp__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em;margin-bottom:.3em}
.sp__pills i{font-style:normal;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.3em .75em}
.sp__field{width:100%;height:1.9em;border-radius:7px;background:var(--surface);
  border:1px solid var(--line-2)}
.sp__field--s{width:52%;margin-right:auto}
.sp__btn{margin-top:.35em;width:100%;text-align:center;background:#14120F;color:var(--paper);
  font-weight:700;border-radius:var(--r-pill);padding:.6em 1.1em}

/* 4 · comanda */
.sp__ord{display:grid;place-items:center;padding:5%}
.sp__ord-card{width:min(100%,26em);display:grid;justify-items:center;gap:.55em;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:6% 7%;box-shadow:var(--sh-1)}
.sp__check{width:2.6em;height:2.6em;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;box-shadow:0 10px 24px rgba(236,198,0,.45)}
.sp__check .i{width:1.4em;height:1.4em;color:#14120F}
.sp__ord-h{margin:0;font-weight:700;color:var(--ink)}
.sp__track{display:flex;align-items:center;gap:0;width:100%;margin-top:.5em}
.sp__track li{flex:1;display:grid;justify-items:center;gap:.4em;position:relative;color:var(--ink-2)}
.sp__track li::before{content:"";position:absolute;top:.4em;left:-50%;width:100%;height:2px;
  background:var(--gold)}
.sp__track li:first-child::before{display:none}
.sp__track i{width:.85em;height:.85em;border-radius:50%;background:var(--gold);
  position:relative;z-index:1}
.sp__track li:last-child i{box-shadow:0 0 0 .28em var(--gold-tint)}

/* ═══ LANDING PAGES ══════════════════════════════════════════════════════
   Aquesta pàgina ven conversió, i la conversió no es veu: es prova. El hero
   ensenya el mètode (dues versions competint) i l'escena, l'anatomia d'una
   landing que rendeix. Les barres són relatives i no porten xifres: no
   inventem resultats de ningú.                                            */

/* ── Hero · la prova A/B ────────────────────────────────────────────────── */
.ab{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-3)}
.ab__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 1.1rem;background:var(--paper-2);border-bottom:1px solid var(--line)}
.ab__h{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.ab__state{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink);background:var(--gold-soft);
  border-radius:var(--r-pill);padding:.25em .8em;opacity:0;transition:opacity .4s var(--ease)}
.ab__state.is-in{opacity:1}
.ab.is-done .ab__state{background:var(--gold);color:#14120F}
.ab__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);
  padding:clamp(16px,2vw,26px)}
.ab__v{position:relative;display:grid;gap:.7rem;padding:clamp(10px,1.2vw,16px);
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.ab__v.is-win{border-color:var(--gold);background:var(--surface);box-shadow:var(--sh-2)}
.ab__name{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.ab__v.is-win .ab__name{color:var(--gold-ink)}
.ab__win{position:absolute;right:clamp(10px,1.2vw,16px);top:clamp(8px,1vw,13px);
  display:inline-flex;align-items:center;gap:.35em;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#14120F;background:var(--gold);
  border-radius:var(--r-pill);padding:.25em .7em;opacity:0;transform:scale(.7);
  transition:.45s var(--ease)}
.ab__win .i{width:.95em;height:.95em}
.ab__v.is-win .ab__win{opacity:1;transform:none}

.ab__mock{position:relative;display:block;aspect-ratio:4/5;border-radius:8px;
  background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.ab__mock i{position:absolute;background:var(--line-2);border-radius:4px}
.ab__logo{left:6%;top:5%;width:20%;height:4%;border-radius:5px;background:var(--gold)}
.ab__nav{left:32%;top:5.6%;width:62%;height:2.6%}
.ab__p--s{opacity:.75}
.ab__cta{border-radius:var(--r-pill)!important;background:var(--gold)!important}
.ab__form{background:var(--surface)!important;border:1px solid var(--line-2);border-radius:8px!important}
/* Versió A · el missatge repartit i la crida petita i avall */
.ab__mock--a .ab__h1{left:6%;top:16%;width:70%;height:6%}
.ab__mock--a .ab__p{left:6%;top:26%;width:86%;height:3%}
.ab__mock--a .ab__p--s{left:6%;top:32%;width:66%;height:3%}
.ab__mock--a .ab__b1{left:6%;top:42%;width:41%;height:18%}
.ab__mock--a .ab__b2{left:53%;top:42%;width:41%;height:18%}
.ab__mock--a .ab__cta{left:6%;top:68%;width:26%;height:5.5%}
/* Versió B · una promesa, una crida i el formulari a la vista */
.ab__mock--b .ab__h1{left:6%;top:15%;width:84%;height:9%}
.ab__mock--b .ab__p{left:6%;top:28%;width:72%;height:3.4%}
.ab__mock--b .ab__cta{left:6%;top:37%;width:46%;height:8%}
.ab__mock--b .ab__form{left:6%;top:53%;width:88%;height:36%}

.ab__meter{display:block;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.ab__meter i{display:block;height:100%;border-radius:4px;background:var(--gold-ink);
  transform:scaleX(0);transform-origin:left}
.ab__v.is-win .ab__meter i{background:var(--gold)}
.ab figcaption{padding:.85rem 1.1rem;font-size:.8rem;color:var(--ink-3);
  border-top:1px solid var(--line);background:var(--surface)}
@media (max-width:420px){
  .ab__pair{grid-template-columns:1fr}
  .ab__mock{aspect-ratio:16/9}
}

/* ── Escena · anatomia d'una landing ────────────────────────────────────── */
.lp{position:absolute;inset:0;background:var(--paper-2);
  font-size:clamp(.58rem,1.1vw,.78rem)}
.lp__page,.lp__phone,.lp__data,.lp__flow{transition:opacity .5s var(--ease),
  transform .5s var(--ease),inset .6s var(--ease)}
.lp__phone,.lp__data,.lp__flow{opacity:0;pointer-events:none}
.lp__page{position:absolute;inset:0;padding:6% 7%}
.stage--landing.is-3 .lp__page,.stage--landing.is-4 .lp__page{opacity:0}
.lp__page>i{position:absolute;background:var(--line-2);border-radius:4px;
  transition:opacity .5s var(--ease)}
.lp__logo{left:7%;top:7%;width:22%;height:3.4%;border-radius:5px;background:var(--gold)}
.lp__h1{left:7%;top:16%;width:78%;height:7%}
.lp__h1--s{top:25%;width:52%}
.lp__p{left:7%;top:36%;width:84%;height:3%}
.lp__p--s{top:42%;width:60%}
.lp__cta{position:absolute;left:7%;top:51%;background:var(--gold);color:#14120F;
  font-weight:700;border-radius:var(--r-pill);padding:.5em 1.1em;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.lp__form{left:7%;top:70%;width:86%;height:22%;background:var(--surface)!important;
  border:1px solid var(--line-2);border-radius:8px}

/* Estat 1 · tot apunta a la crida */
.lp__aim{position:absolute;width:9px;height:9px;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);opacity:0;transition:opacity .45s var(--ease)}
.lp__aim--1{left:16%;top:44%;transform:rotate(45deg)}      /* a sobre, cap avall */
.lp__aim--2{left:41%;top:53.5%;transform:rotate(135deg)}   /* a la dreta, cap a l'esquerra */
.lp__aim--3{left:16%;top:62%;transform:rotate(-135deg)}    /* a sota, cap amunt */
.stage--landing.is-1 .lp__page>i{opacity:.4}
.stage--landing.is-1 .lp__logo{opacity:.6}
.stage--landing.is-1 .lp__cta{box-shadow:0 0 0 6px var(--gold-tint);transform:scale(1.04)}
.stage--landing.is-1 .lp__aim{opacity:1}

/* Estat 2 · la mateixa landing al mòbil, al costat */
.stage--landing.is-2 .lp__page{inset:0 46% 0 0;padding:6% 4% 6% 6%}
.stage--landing.is-2 .lp__phone{opacity:1}
.lp__phone{position:absolute;right:5%;top:7%;bottom:7%;width:36%;
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;
  padding:9% 8%;transform:translateY(8px)}
.stage--landing.is-2 .lp__phone{transform:none}
.lp__phone i{display:block;background:var(--line-2);border-radius:4px}
.lp__phone-l{display:block;font-size:.86em;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.7em}
.lp__ph-h1{height:9%;margin-bottom:.5em}
.lp__ph-p{height:4%;width:72%;margin-bottom:.9em}
.lp__ph-cta{display:block;text-align:center;background:var(--gold);color:#14120F;
  font-weight:700;border-radius:var(--r-pill);padding:.45em .6em;margin-bottom:.9em}
.lp__ph-form{height:34%;background:var(--paper-2)!important;border:1px solid var(--line)}

/* Estat 3 · què passa a la pàgina */
.lp__data{position:absolute;inset:0;display:grid;place-items:center;padding:6%}
.stage--landing.is-3 .lp__data{opacity:1}
.lp__data>ul,.lp__data-h{width:min(100%,26em)}
.lp__data-h{margin:0 auto .8em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-size:.86em}
.lp__data>ul{display:grid;gap:.6em;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:5% 6%;box-shadow:var(--sh-1)}
.lp__data li{display:grid;gap:.3em}
.lp__data li span{color:var(--ink-2)}
.lp__data li i{display:block;height:8px;border-radius:4px;background:var(--gold);
  width:var(--w);transition:width .7s var(--ease)}
.lp__data li:last-child i{background:var(--gold-ink)}

/* Estat 4 · d'on ve el clic i on acaba el lead */
.lp__flow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:2.5%;padding:6%}
.stage--landing.is-4 .lp__flow{opacity:1}
.lp__node{display:inline-flex;align-items:center;gap:.4em;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.6em 1em;
  font-weight:600;color:var(--ink-2);white-space:nowrap}
.lp__node--mid{border-color:var(--gold);color:var(--ink)}
.lp__node--end{background:var(--gold);border-color:var(--gold);color:#14120F}
.lp__node--end .i{width:1.1em;height:1.1em}
.lp__link{flex:1;max-width:14%;height:2px;background:var(--line-2);border-radius:2px;
  position:relative}
.lp__link::after{content:"";position:absolute;inset:0;background:var(--gold);
  border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease) .2s}
.stage--landing.is-4 .lp__link::after{transform:scaleX(1)}
@media (max-width:520px){
  .lp__flow{flex-direction:column;gap:.5em}
  .lp__link{max-width:none;width:2px;height:14px}
}

/* ═══ MANTENIMENT WEB ════════════════════════════════════════════════════
   Aquí no s'ensenya una web: es vigila. El hero fa la revisió del dia i
   l'escena és un panell de control. Sense xifres d'uptime ni mètriques
   inventades: només la feina que es fa.                                   */

/* ── Hero · la revisió del dia ──────────────────────────────────────────── */
.mo{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-3)}
.mo__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 1.1rem;background:var(--paper-2);border-bottom:1px solid var(--line)}
.mo__h{display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.mo__h .i{width:1.15em;height:1.15em;color:var(--gold-ink)}
.mo__body{padding:clamp(18px,2.2vw,30px)}
.mo__up-h{margin:0 0 .6rem;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.mo__up{display:flex;gap:2px;height:34px;margin-bottom:clamp(16px,2vw,24px)}
.mo__up i{flex:1;border-radius:3px;background:var(--line);transform:scaleY(.45);
  transform-origin:bottom}

.mo__list{display:grid;border-top:1px solid var(--line)}
.mo__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;
  padding:clamp(9px,1.1vw,13px) 0;border-bottom:1px solid var(--line)}
.mo__spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);
  border-top-color:var(--gold-ink);animation:mospin .9s linear infinite}
@keyframes mospin{to{transform:rotate(360deg)}}
.mo__name{font-size:.94rem;color:var(--ink-2)}
.mo__ok{display:inline-flex;align-items:center;gap:.35em;font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);opacity:0;
  transition:opacity .4s var(--ease)}
.mo__ok .i{width:1.05em;height:1.05em}
.mo__row.is-done .mo__spin{animation:none;border-color:var(--gold);background:var(--gold)}
.mo__row.is-done .mo__name{color:var(--ink)}
.mo__row.is-done .mo__ok{opacity:1}
.mo figcaption{padding:.85rem 1.1rem;font-size:.8rem;color:var(--ink-3);
  border-top:1px solid var(--line);background:var(--surface)}
@media (prefers-reduced-motion: reduce){.mo__spin{animation:none}}

/* ── Escena · el panell de control ──────────────────────────────────────── */
.mt{position:absolute;inset:0;background:var(--paper-2);
  font-size:clamp(.6rem,1.15vw,.82rem)}
.mt__panel{position:absolute;inset:0;padding:6% 7%;display:grid;align-content:center;
  gap:.7em;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stage--care.is-1 .mt__up,.stage--care.is-2 .mt__sp,
.stage--care.is-3 .mt__in,.stage--care.is-4 .mt__bk{opacity:1;transform:none}
.mt__h{margin:0;font-size:.9em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.mt__panel ul{display:grid;gap:.5em;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:4.5% 5%;box-shadow:var(--sh-1)}
.mt__panel li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8em}
.mt__panel li span{color:var(--ink-2)}

/* 1 · actualitzacions */
.mt__pill{display:inline-flex;align-items:center;gap:.3em;font-size:.86em;font-weight:700;
  color:#14120F;background:var(--gold);border-radius:var(--r-pill);padding:.25em .7em}
.mt__pill .i{width:1em;height:1em}

/* 2 · rendiment */
.mt__sp li{grid-template-columns:8em 1fr}
.mt__bar{display:block;height:8px;border-radius:4px;background:var(--line);position:relative}
.mt__bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);
  border-radius:4px;background:var(--gold)}

/* 3 · incidència */
.mt__in{justify-items:center;text-align:center}
.mt__bad{margin:0;display:inline-flex;align-items:center;gap:.5em;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:.4em .9em;text-decoration:line-through;text-decoration-color:var(--line-2)}
.mt__bad i{width:.7em;height:.7em;border-radius:50%;background:#D8836F}
.mt__fix{margin:0;display:inline-flex;align-items:center;gap:.45em;font-weight:700;
  color:#14120F;background:var(--gold);border-radius:var(--r-pill);padding:.5em 1.1em;
  box-shadow:0 8px 20px rgba(236,198,0,.35)}
.mt__fix .i{width:1.1em;height:1.1em}
.mt__time{display:inline-flex;align-items:center;gap:.4em;color:var(--ink-3)}
.mt__time .i{width:1.05em;height:1.05em}

/* 4 · còpies */
.mt__bk{justify-items:center;text-align:center}
.mt__days{display:flex;gap:3px;width:min(100%,24em)}
.mt__days i{flex:1;height:26px;border-radius:4px;background:var(--gold);opacity:.5}
.mt__days i:last-child{opacity:1;box-shadow:0 0 0 3px var(--gold-tint)}
.mt__note{margin:0;color:var(--ink-2)}
.mt__restore{display:inline-flex;align-items:center;gap:.4em;font-weight:600;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:.45em 1em}
.mt__restore .i{width:1em;height:1em;color:var(--gold-ink)}
@media (max-width:520px){.mt__sp li{grid-template-columns:1fr}}

/* ═══ ESQUELETS PROPIS ═══════════════════════════════════════════════════
   Els clients són dissenyadors web: si totes les pàgines de servei tenen
   el mateix ordre de seccions, es nota que és una plantilla. Cada servei
   té el seu hero i les seves seccions.                                   */

/* ── Hero invertit (manteniment) ────────────────────────────────────────── */
.sv-hero--flip{padding-bottom:clamp(44px,5.5vw,88px)}
.sv-hero--flip .sv-hero__in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.sv-hero--flip .sv-hero__txt{padding-block:0}
@media (max-width:1024px){
  /* Aquesta línia hi FALTAVA. La regla de dues columnes de dalt va després
     del media query general del hero i té més especificitat, o sigui que el
     trepitjava: el hero de manteniment es quedava a dues columnes també al
     mòbil. El text anava en 165 px i el titular, que es retalla amb
     `overflow:hidden` per a l'animació de línies, sortia com «Mantenim». */
  .sv-hero--flip .sv-hero__in{grid-template-columns:minmax(0,1fr)}
  .sv-hero--flip .bw-wrap{grid-row:2}
  .sv-hero--flip .sv-hero__txt{grid-row:1}
}

/* ── El camí de la compra (botigues) ────────────────────────────────────── */
.sv-path{padding-block:var(--sec-y);background:var(--paper-2);
  border-block:1px solid var(--line)}
.path{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,64px);
  margin-top:clamp(34px,4vw,60px);counter-reset:p}
.path__step{display:grid;gap:clamp(14px,1.6vw,20px);align-content:start}
.path__shot .stage__device{max-width:none;box-shadow:var(--sh-1)}
.path__shot .sp{font-size:clamp(.55rem,.72vw,.72rem)}
.path__txt{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(12px,1.4vw,20px);
  align-items:start}
.path__n{grid-row:1/4;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  color:var(--gold-ink);padding-top:.35em}
.path__tag{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.path__txt h3{margin-top:.15rem;font-size:clamp(1.15rem,1.8vw,1.5rem);max-width:24ch}
.path__txt>div,.path__txt p:last-child{margin-top:.5rem;color:var(--ink-2);max-width:52ch}
@media (max-width:820px){
  .path{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .path__shot .sp{font-size:clamp(.6rem,1.6vw,.8rem)}
}

/* ── La prova A/B com a secció (landing) ────────────────────────────────── */
.sv-ab{padding-block:var(--sec-y);background:var(--paper-2);
  border-block:1px solid var(--line)}
.sv-ab__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,72px);align-items:center}

.sv-ab h2{font-size:var(--t-h2);max-width:15ch;text-wrap:balance}
.sv-ab__lead{margin-top:1rem;color:var(--ink-2);max-width:46ch;font-size:var(--t-lead)}
.sv-ab__pts{display:grid;gap:.7rem;margin-top:clamp(22px,2.4vw,32px)}
.sv-ab__pts li{display:grid;grid-template-columns:auto 1fr;gap:.7em;color:var(--ink-2)}
.sv-ab__pts .i{width:1.1em;height:1.1em;color:var(--gold-ink);margin-top:.25em}

@media (max-width:900px){.sv-ab__in{grid-template-columns:1fr}}

/* ── L'anatomia retolada (landing) ──────────────────────────────────────── */
.sv-an{padding-block:var(--sec-y)}
.an{display:grid;grid-template-columns:1fr minmax(0,min(42vw,500px)) 1fr;
  grid-template-rows:repeat(4,auto);gap:clamp(18px,2.4vw,34px) clamp(20px,3vw,54px);
  margin-top:clamp(34px,4vw,58px);align-items:center}
.an__mock{grid-column:2;grid-row:1/5;align-self:stretch;margin:0;display:flex;
  flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.an__bar{display:flex;gap:5px;padding:.6rem .85rem;background:var(--paper-2);
  border-bottom:1px solid var(--line)}
.an__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.an__bar i:first-child{background:#E7A7A0}
.an__bar i:nth-child(2){background:#EBD08A}
.an__page{position:relative;flex:1;min-height:340px;background:var(--paper-2)}
.an__page>i{position:absolute;background:var(--line-2);border-radius:4px}
/* Ara la maqueta s'estira a l'alçada dels rètols: la composició es reparteix
   per omplir-la, o la pàgina sembla buida en comptes de llarga. */
.an__logo{left:8%;top:4%;width:22%;height:2.4%;border-radius:5px;background:var(--gold)}
.an__h1{left:8%;top:10%;width:78%;height:5.6%}
.an__h1--s{top:18%;width:52%}
.an__p{left:8%;top:27.5%;width:84%;height:2%}
.an__p--s{top:31.5%;width:60%}
.an__cta{position:absolute;left:8%;top:37.5%;background:var(--gold);color:#14120F;
  font-weight:700;border-radius:var(--r-pill);padding:.45em 1em;font-size:.72rem;
  box-shadow:0 0 0 5px var(--gold-tint)}
.an__form{left:8%;top:49%;width:84%;height:33%;background:var(--surface)!important;
  border:1px solid var(--line-2);border-radius:8px}
.an__foot{left:8%;top:88.5%;width:44%;height:2%}

.an__note{position:relative}
.an__note--1{grid-column:1;grid-row:1;text-align:right}
.an__note--2{grid-column:3;grid-row:2}
.an__note--3{grid-column:1;grid-row:3;text-align:right}
.an__note--4{grid-column:3;grid-row:4}
.an__tag{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink)}
.an__note h3{margin-top:.3rem;font-size:clamp(1.05rem,1.6vw,1.35rem);max-width:22ch}
.an__note--1 h3,.an__note--3 h3{margin-left:auto}
.an__note p{margin-top:.5rem;color:var(--ink-2);font-size:.92rem;max-width:32ch}
.an__note--1 p,.an__note--3 p{margin-left:auto}
.an__line{position:absolute;top:1.1em;height:1px;background:var(--line-2);width:clamp(16px,2.6vw,48px)}
.an__note--1 .an__line,.an__note--3 .an__line{right:calc(-1*clamp(20px,3vw,54px))}
.an__note--2 .an__line,.an__note--4 .an__line{left:calc(-1*clamp(20px,3vw,54px))}
.an__line::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--gold)}
.an__note--1 .an__line::after,.an__note--3 .an__line::after{right:0}
.an__note--2 .an__line::after,.an__note--4 .an__line::after{left:0}
@media (max-width:900px){
  .an{grid-template-columns:1fr;grid-template-rows:none}
  .an__mock{grid-column:1;grid-row:1;width:100%;max-width:380px;justify-self:center;
    align-self:auto}
  .an__page{aspect-ratio:3/4;min-height:0}
  .an__note{grid-column:1!important;grid-row:auto!important;text-align:left!important;
    padding-left:1.1rem;border-left:2px solid var(--gold)}
  .an__note h3,.an__note p{margin-left:0!important;max-width:none}
  .an__line{display:none}
}

/* ── La crida del mig (landing) ─────────────────────────────────────────── */
.sv-mid{padding-block:clamp(40px,5vw,72px);background:var(--gold-soft);
  border-block:1px solid var(--line-2)}
.sv-mid__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vw,40px);text-align:center}
.sv-mid p{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.6vw,2rem);max-width:22ch;text-wrap:balance}
/* Un botó daurat sobre banda daurada desapareix: aquí va fosc. */
.sv-mid .btn--gold{background:var(--ink-bg);color:var(--paper);
  box-shadow:0 10px 26px rgba(20,18,15,.22)}
.sv-mid .btn--gold:hover{background:#241F19;box-shadow:0 14px 32px rgba(20,18,15,.3)}

/* ── El tauler (manteniment) ────────────────────────────────────────────── */
.sv-dash{padding-block:var(--sec-y);background:var(--paper-2);border-block:1px solid var(--line)}
.dash{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(26px,3.6vw,64px);align-items:center;margin-top:clamp(32px,4vw,56px)}
.dash__screen .stage__device{max-width:none}
.dash__tabs{display:grid;border-top:1px solid var(--line-2)}
.dash__tab{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,1.6vw,22px);
  align-items:start;text-align:left;width:100%;background:none;border:0;cursor:pointer;
  padding:clamp(16px,1.9vw,24px) 0;border-bottom:1px solid var(--line-2);
  color:inherit;font:inherit;position:relative}
.dash__tab::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.dash__tab.is-on::before{transform:scaleX(1)}
.dash__n{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3);
  padding-top:.3em;transition:color .4s var(--ease)}
.dash__tab.is-on .dash__n{color:var(--gold-ink)}
.dash__body{display:grid;gap:.35rem}
.dash__body b{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.6vw,1.32rem)}
.dash__body>span{color:var(--ink-2);font-size:.92rem;max-width:48ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease)}
.dash__tab.is-on .dash__body>span{max-height:9em;opacity:1}
.dash__go .i{width:16px;height:16px;color:var(--line-2);margin-top:.35em;
  transition:transform .35s var(--ease),color .35s var(--ease)}
.dash__tab:hover .dash__go .i,.dash__tab.is-on .dash__go .i{color:var(--gold-ink);transform:translateX(3px)}
/* Mateix problema que l'escena: en una columna la pantalla es quedava dalt
   de tot i el tauler anava canviant sol —cada 4,2 s— sense que ningú el
   veiés. S'enganxa a dalt i l'alçada es fixa perquè no salti res. */
@media (max-width:900px){
  .dash{grid-template-columns:1fr;gap:0}
  .dash__screen{position:sticky;top:64px;z-index:3;
    padding-block:12px;background:var(--paper-2);
    box-shadow:0 14px 16px -14px rgba(20,18,15,.28)}
  .dash__screen .stage__view{aspect-ratio:auto;height:196px}
  .dash__tabs{margin-top:14px}
  .dash__body>span{max-height:none;opacity:1}
}
@media (max-width:520px){
  .dash__screen{top:58px}
  .dash__screen .stage__view{height:168px}
}

/* ── Els plans (manteniment) ────────────────────────────────────────────── */
.sv-plans{padding-block:var(--sec-y)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);
  margin-top:clamp(32px,4vw,56px);align-items:start}
.plan{position:relative;display:grid;gap:.6rem;align-content:start;
  padding:clamp(22px,2.6vw,34px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface)}
.plan--pick{border-color:var(--gold);box-shadow:var(--sh-2)}
.plan__flag{position:absolute;top:0;left:clamp(22px,2.6vw,34px);transform:translateY(-50%);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#14120F;background:var(--gold);border-radius:var(--r-pill);padding:.3em .85em}
.plan h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}
.plan__price{display:flex;align-items:baseline;gap:.2em;margin:0}
.plan__price b{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(2rem,3.4vw,2.9rem);word-spacing:.04em}
.plan__price span{color:var(--ink-3);font-size:.95rem}
.plan__d{margin:0;color:var(--ink-2)}
.plan ul{display:grid;gap:.5rem;margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:.6em;font-size:.93rem;color:var(--ink-2)}
.plan li .i{width:1em;height:1em;color:var(--gold-ink);margin-top:.3em}
.plan__go{margin-top:.8rem;display:inline-flex;align-items:center;gap:.45em;font-weight:600;
  color:var(--gold-ink)}
.plan__go .i{width:1em;height:1em;transition:transform .3s var(--ease)}
.plan__go:hover .i{transform:translateX(3px)}
.plans__note{margin-top:clamp(18px,2vw,26px);text-align:center;font-size:.88rem;color:var(--ink-3)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* ── Hero de landings · algú deixa les dades ────────────────────────────── */
.bw--landing .bw__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(20,18,15,0) 44%,rgba(20,18,15,.2) 100%)}
.lf{position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:2;
  width:min(52%,286px);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:1em 1.1em;box-shadow:var(--sh-3);
  font-size:clamp(.66rem,1.02vw,.84rem);opacity:0}
.lf__h{margin:0 0 .8em;font-size:.9em;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.lf__fields{display:grid;gap:.5em}
.lf__f{position:relative;display:flex;align-items:center;height:2.3em;padding:0 .7em;
  border:1px solid var(--line-2);border-radius:8px;color:var(--ink-3);
  transition:border-color .35s var(--ease)}
.lf__f span{position:relative;z-index:1;transition:opacity .3s var(--ease)}
.lf__f i{position:absolute;left:.7em;top:50%;transform:translateY(-50%) scaleX(0);
  transform-origin:left;width:62%;height:.5em;border-radius:3px;background:var(--line-2)}
.lf__f.is-on{border-color:var(--gold)}
.lf__f.is-on span{opacity:0}
.lf__btn{display:block;margin-top:.75em;text-align:center;background:var(--gold);
  color:#14120F;font-weight:700;border-radius:var(--r-pill);padding:.6em 1em;
  transition:opacity .3s var(--ease)}
.lf__done{margin:0;display:none;align-items:center;justify-content:center;gap:.5em;
  padding:.6em 1em;font-weight:700;color:var(--gold-ink)}
.lf__done .i{width:1.15em;height:1.15em;padding:.14em;border-radius:50%;
  background:var(--gold);color:#14120F}
.lf.is-sent .lf__btn{display:none}
.lf.is-sent .lf__done{display:flex}
@media (max-width:560px){
  .bw--landing .bw__view::after{background:linear-gradient(0deg,rgba(20,18,15,.34) 52%,rgba(20,18,15,0) 86%)}
  .lf{left:4%;right:4%;width:auto;top:auto;bottom:5%;transform:none;font-size:.64rem}
}

/* ═══ POSICIONAMENT SEO ══════════════════════════════════════════════════
   El SEO no es pot ensenyar amb una captura maca: es ven amb terminis i
   amb el que Google (i ara la IA) llegeix. Mai amb posicions inventades. */

/* ── Hero · la cerca i el resultat ──────────────────────────────────────── */
.bw--seo .bw__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,18,15,.24),rgba(20,18,15,0) 62%)}
.sr{position:absolute;left:4%;top:50%;transform:translateY(-50%);z-index:2;
  width:min(56%,330px);font-size:clamp(.66rem,1.02vw,.84rem);opacity:0}
.sr__box{margin:0 0 .7em;display:flex;align-items:center;min-height:2.6em;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:0 1em;box-shadow:var(--sh-1);color:var(--ink)}
.sr__box span::after{content:"";display:inline-block;width:1px;height:1em;
  background:var(--gold-ink);margin-left:2px;vertical-align:-.15em;
  animation:caret .9s steps(2) infinite}
.sr.is-found .sr__box span::after{display:none}
.sr__hit{display:grid;gap:.15em;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:.9em 1em;box-shadow:var(--sh-3);
  opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.sr.is-found .sr__hit{opacity:1;transform:none}
.sr__tag{justify-self:start;font-size:.8em;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#14120F;background:var(--gold);
  border-radius:var(--r-pill);padding:.2em .7em;margin-bottom:.35em}
.sr__url{color:var(--ink-3);font-size:.9em}
.sr__t{font-family:var(--font-display);font-weight:600;font-size:1.18em;
  letter-spacing:-.01em;color:var(--gold-ink);word-spacing:.04em}
.sr__d{color:var(--ink-2);line-height:1.45}
@media (max-width:560px){
  .bw--seo .bw__view::after{background:linear-gradient(0deg,rgba(20,18,15,.34) 52%,rgba(20,18,15,0) 88%)}
  .sr{left:4%;right:4%;width:auto;top:auto;bottom:5%;transform:none;font-size:.64rem}
}

/* ── El camí · línia de temps ───────────────────────────────────────────── */
.sv-road{padding-block:var(--sec-y);background:var(--paper-2);border-block:1px solid var(--line)}
.road{position:relative;margin-top:clamp(34px,4vw,60px);padding-left:clamp(28px,4vw,64px)}
.road__rail{position:absolute;left:clamp(6px,1vw,14px);top:.6em;bottom:.6em;width:2px;
  background:var(--line-2);border-radius:2px}
.road__rail i{display:block;width:100%;height:100%;background:var(--gold);border-radius:2px;
  transform:scaleY(0);transform-origin:top}
.road__step{position:relative;display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:clamp(14px,2.4vw,44px);align-items:start;
  padding:clamp(20px,2.6vw,34px) 0;border-top:1px solid var(--line-2)}
.road__step:first-child{border-top:0;padding-top:0}
.road__step:last-child{padding-bottom:0}
.road__dot{position:absolute;left:calc(-1*clamp(28px,4vw,64px) + clamp(1px,1vw,9px));
  top:.55em;width:12px;height:12px;border-radius:50%;background:var(--paper-2);
  border:2px solid var(--line-2);transition:.45s var(--ease)}
.road__step.is-on .road__dot{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 5px var(--gold-tint)}
.road__when{margin:0;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-top:.35em;transition:color .45s var(--ease)}
.road__step.is-on .road__when{color:var(--gold-ink)}
.road__body h3{font-size:clamp(1.2rem,2vw,1.6rem);max-width:26ch}
.road__body p{margin-top:.55rem;color:var(--ink-2);max-width:62ch}
@media (max-width:720px){
  .road__step{grid-template-columns:1fr;gap:.35rem}
  .road__when{padding-top:0}
}

/* ── SEO i IA ───────────────────────────────────────────────────────────── */
.sv-geo{padding-block:var(--sec-y)}
.sv-geo__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,74px);align-items:center}
.sv-geo h2{font-size:var(--t-h2);max-width:16ch;text-wrap:balance}
.sv-geo__lead{margin-top:1rem;color:var(--ink-2);max-width:52ch;font-size:var(--t-lead)}
.sv-geo__pts{display:grid;gap:.7rem;margin-top:clamp(22px,2.4vw,32px)}
.sv-geo__pts li{display:grid;grid-template-columns:auto 1fr;gap:.7em;color:var(--ink-2)}
.sv-geo__pts .i{width:1.1em;height:1.1em;color:var(--gold-ink);margin-top:.25em}
.sv-geo__pts code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--gold-soft);border-radius:5px;padding:.1em .4em;color:var(--ink)}

.geo{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.geo figcaption{display:flex;align-items:center;gap:.55em;padding:.85rem 1.15rem;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:var(--paper-2);border-bottom:1px solid var(--line)}
.geo figcaption .i{width:1.15em;height:1.15em;color:var(--gold-ink)}
.geo ul{display:grid;padding:.4rem 1.15rem 1.15rem}
.geo li{display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:baseline;
  padding:.78rem 0;border-bottom:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem}
.geo li:last-child{border-bottom:0}
.geo li b{color:var(--gold-ink);font-weight:600}
.geo li span{color:var(--ink-2);text-align:right}
@media (max-width:900px){.sv-geo__in{grid-template-columns:1fr}}

/* ═══ CAMPANYES SOCIAL ADS ═══════════════════════════════════════════════
   Aquí el producte és l'anunci: al hero surt, es clica i aterra a la web
   del client; després, la roda que no para i les quatre formes.         */

/* ── Hero · l'anunci i el clic ──────────────────────────────────────────── */
.bw--ads .bw__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,18,15,.26),rgba(20,18,15,0) 60%)}
.adx{position:absolute;inset:0;z-index:2;font-size:clamp(.62rem,.96vw,.8rem)}
.adx__card{position:absolute;left:4%;top:50%;transform:translateY(-50%);
  width:min(48%,268px);display:grid;gap:.55em;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:.85em .9em;
  box-shadow:var(--sh-3);opacity:0}
.adx__top{display:flex;align-items:center;gap:.55em}
.adx__av{width:2.2em;height:2.2em;border-radius:50%;background:var(--gold);flex:0 0 auto}
.adx__who{display:grid;line-height:1.25;min-width:0}
.adx__who b{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adx__who em{font-style:normal;font-size:.88em;color:var(--ink-3)}
.adx__copy{color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.adx__img{display:block;height:4.6em;border-radius:8px;
  background:linear-gradient(135deg,var(--paper-2),var(--gold-soft));
  border:1px solid var(--line-2)}
.adx__btn{justify-self:stretch;text-align:center;background:var(--gold);color:#14120F;
  font-weight:700;border-radius:8px;padding:.5em .9em;transition:filter .2s var(--ease)}
.adx.is-hit .adx__btn{filter:brightness(1.12)}
.adx__cursor{position:absolute;left:4%;top:50%;opacity:0}
.adx__cursor .i{width:22px;height:22px;color:#14120F;
  filter:drop-shadow(0 2px 4px rgba(255,255,255,.9))}
.adx__land{position:absolute;right:4%;bottom:7%;margin:0;display:inline-flex;
  align-items:center;gap:.45em;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.45em .9em;font-weight:600;color:var(--gold-ink);
  box-shadow:var(--sh-2);opacity:0}
.adx__land .i{width:1em;height:1em}
@media (max-width:560px){
  .bw--ads .bw__view::after{background:linear-gradient(0deg,rgba(20,18,15,.36) 56%,rgba(20,18,15,0) 90%)}
  .adx{font-size:.6rem}
  .adx__card{left:4%;right:4%;width:auto;top:auto;bottom:5%;transform:none}
  .adx__land{top:6%;bottom:auto;right:4%}
}

/* ── El cicle ───────────────────────────────────────────────────────────── */
.sv-loop{padding-block:var(--sec-y);background:var(--paper-2);border-block:1px solid var(--line)}
.loop{margin-top:clamp(34px,4vw,58px)}
.loop__row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,44px)}
.loop__step{position:relative;display:grid;gap:.35rem;align-content:start;
  padding-top:clamp(14px,1.6vw,20px);border-top:2px solid var(--gold)}
/* La fletxa que enllaça cada pas amb el següent */
.loop__step::after{content:"";position:absolute;right:calc(-1*clamp(9px,1.3vw,22px));top:-6px;
  width:9px;height:9px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);
  transform:rotate(45deg)}
.loop__step:last-child::after{display:none}
.loop__n{font-size:.76rem;font-weight:700;letter-spacing:.14em;color:var(--gold-ink)}
.loop__tag{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.loop__step h3{margin-top:.1rem;font-size:clamp(1rem,1.45vw,1.22rem);max-width:22ch}
.loop__step p:last-child{margin-top:.45rem;color:var(--ink-2);font-size:.92rem}
/* I la que torna al principi: una campanya no s'acaba mai */
.loop__back{position:relative;margin:0;height:clamp(46px,5vw,74px)}
.loop__hook{position:absolute;left:0;right:0;top:0;bottom:0;
  border:2px solid var(--gold);border-top:0;border-radius:0 0 16px 16px;opacity:.5}
.loop__again{position:absolute;left:50%;bottom:-.9em;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.45em;background:var(--paper-2);
  padding:0 .9em;font-size:.82rem;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.loop__again .i{width:1em;height:1em}
@media (max-width:900px){
  .loop__row{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
  .loop__step:nth-child(2)::after{display:none}
}
@media (max-width:560px){
  .loop__row{grid-template-columns:1fr}
  .loop__step::after{display:none}
}

/* ── Els quatre formats ─────────────────────────────────────────────────── */
.sv-fmt{padding-block:var(--sec-y)}
.fmt{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,38px);
  align-items:end;margin-top:clamp(34px,4vw,58px)}
.fmt__one{display:grid;gap:.5rem;align-content:end}
.fmt__mock{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:8%;display:grid;align-content:start;gap:5%;
  box-shadow:var(--sh-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fmt__one:hover .fmt__mock{transform:translateY(-6px);box-shadow:var(--sh-3)}
.fmt__mock i{display:block;height:6px;border-radius:3px;background:var(--line-2)}
.fmt__l2{width:64%}
.fmt__l3{width:82%}
.fmt__fill{display:block;border-radius:8px;
  background:linear-gradient(135deg,var(--paper-2),var(--gold-soft));border:1px solid var(--line-2)}
.fmt__cta{display:block;height:12px;width:52%;border-radius:var(--r-pill);background:var(--gold)}
.fmt__mock--feed{aspect-ratio:4/5}
.fmt__mock--feed .fmt__fill{aspect-ratio:1}
/* A la vertical la imatge s'ho menja tot: és el que la fa una story. */
.fmt__mock--story{aspect-ratio:9/16;grid-template-rows:1fr auto auto auto}
.fmt__mock--story .fmt__fill{height:100%;min-height:0}
.fmt__mock--wide{aspect-ratio:4/3}
.fmt__mock--wide .fmt__fill{aspect-ratio:1.91}
.fmt__mock--text{aspect-ratio:16/9;align-content:center;gap:8%}
.fmt__ad{justify-self:start;font-size:.64rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#14120F;background:var(--gold);
  border-radius:4px;padding:.15em .5em}
.fmt__mock--text .fmt__l1{background:var(--gold-ink);height:8px}
.fmt__n{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.fmt__d{margin:0;color:var(--ink-2);font-size:.9rem}
@media (max-width:900px){
  .fmt{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,30px);align-items:end}
}
/* Es queden DUES columnes també al mòbil. A una sola, cada maqueta
   ocupava tota l'amplada i, amb les proporcions de xarxes (una story
   és 9/16), sortia una caixa buida de 600 px d'alt: la secció sencera
   passava de 2.271 px. A dues, la story fa 290 px i s'entén igual. */
@media (max-width:520px){
  .fmt{grid-template-columns:1fr 1fr;gap:16px}
  .fmt__n{font-size:.95rem}
  .fmt__d{font-size:.82rem}
}

/* ═══ GESTIÓ DE XARXES SOCIALS ═══════════════════════════════════════════
   El que compra un client no són seguidors: és saber què sortirà i quan.
   Per això aquí manen la graella i el calendari.                        */

/* ── Hero · la publicació que queda programada ──────────────────────────── */
.bw--social .bw__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,18,15,.28),rgba(20,18,15,0) 58%)}
.po{position:absolute;left:4%;top:50%;transform:translateY(-50%);z-index:2;
  width:min(48%,264px);display:grid;gap:.6em;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:.9em;
  box-shadow:var(--sh-3);font-size:clamp(.62rem,.96vw,.8rem);opacity:0}
.po__h{margin:0;display:flex;align-items:center;gap:.45em;font-size:.9em;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.po__h .i{width:1.15em;height:1.15em;color:var(--gold-ink)}
.po__img{display:block;aspect-ratio:4/3;border-radius:8px;
  background:linear-gradient(135deg,var(--paper-2),var(--gold-soft));border:1px solid var(--line-2)}
.po__cap{margin:0;color:var(--ink-2);min-height:2.9em}
.po__cap span::after{content:"";display:inline-block;width:1px;height:1em;
  background:var(--gold-ink);margin-left:2px;vertical-align:-.15em;
  animation:caret .9s steps(2) infinite}
.po.is-set .po__cap span::after{display:none}
.po__tags{display:flex;flex-wrap:wrap;gap:.3em}
.po__tags i{font-style:normal;font-weight:600;color:var(--gold-ink);background:var(--gold-soft);
  border-radius:var(--r-pill);padding:.15em .6em;opacity:0;transform:translateY(4px);
  transition:.35s var(--ease)}
.po.is-set .po__tags i{opacity:1;transform:none}
.po__when{margin:.15em 0 0;padding-top:.6em;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.45em;font-weight:700;color:var(--ink);opacity:0;
  transition:opacity .4s var(--ease)}
.po.is-set .po__when{opacity:1}
.po__when .i{width:1.1em;height:1.1em;color:var(--gold-ink)}
@media (max-width:560px){
  .bw--social .bw__view::after{background:linear-gradient(0deg,rgba(20,18,15,.36) 56%,rgba(20,18,15,0) 90%)}
  .po{left:4%;right:4%;width:auto;top:auto;bottom:4%;transform:none;font-size:.6rem}
  .po__img{aspect-ratio:16/6}
}

/* ── La graella d'un perfil ─────────────────────────────────────────────── */
.sv-feed{padding-block:var(--sec-y);background:var(--paper-2);border-block:1px solid var(--line)}
.sv-feed__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,74px);align-items:center}
.sv-feed h2{font-size:var(--t-h2);max-width:16ch;text-wrap:balance}
.sv-feed__lead{margin-top:1rem;color:var(--ink-2);max-width:52ch;font-size:var(--t-lead)}
.sv-feed__pts{display:grid;gap:.7rem;margin-top:clamp(22px,2.4vw,32px)}
.sv-feed__pts li{display:grid;grid-template-columns:auto 1fr;gap:.7em;color:var(--ink-2)}
.sv-feed__pts .i{width:1.1em;height:1.1em;color:var(--gold-ink);margin-top:.25em}

.grid9{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.9vw,12px)}
.grid9 figcaption{grid-column:1/-1;margin-top:.6rem;font-size:.86rem;color:var(--ink-3);
  text-align:center;text-wrap:balance}
.g9{position:relative;aspect-ratio:1;border-radius:10px;display:grid;place-items:center;
  overflow:hidden;border:1px solid var(--line-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.grid9:hover .g9{transform:scale(.985)}
.g9:hover{transform:scale(1.04)!important;box-shadow:var(--sh-2);z-index:1}
.g9--img{background:linear-gradient(135deg,var(--paper-2),var(--gold-soft))}
.g9--img:nth-of-type(5n){background:linear-gradient(200deg,var(--gold-soft),var(--paper-2))}
.g9--vid{background:linear-gradient(160deg,var(--ink-bg),#3B342A)}
.g9--vid .i{width:26%;height:26%;color:var(--gold)}
.g9--txt{background:var(--surface);align-content:center;gap:12%;padding:18%}
.g9--txt i{display:block;width:100%;height:5px;border-radius:3px;background:var(--line-2)}
.g9--txt i:last-child{width:62%}
.g9--quote{background:var(--gold);font-family:var(--font-display);font-size:3.4rem;
  line-height:1;color:#14120F;padding-top:.35em}
@media (max-width:900px){.sv-feed__in{grid-template-columns:1fr}}

/* ── El calendari ───────────────────────────────────────────────────────── */
.sv-plan{padding-block:var(--sec-y)}
.cal{max-width:900px;margin:clamp(32px,4vw,56px) auto 0}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(6px,.9vw,12px)}
.cal__day{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;padding-bottom:.4rem}
.cal__cell{aspect-ratio:1;border-radius:10px;background:var(--paper-2);
  border:1px solid var(--line);display:grid;place-items:center;
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.cal__cell.is-on{background:var(--surface);border-color:var(--line-2);box-shadow:var(--sh-1)}
.cal__cell.is-on:hover{transform:translateY(-3px);border-color:var(--gold)}
.cal__cell i{width:34%;height:34%;border-radius:50%}
.cal__cell--post i,.cal__chip--post{background:var(--gold)}
.cal__cell--video i,.cal__chip--video{background:var(--gold-ink)}
.cal__cell--story i,.cal__chip--story{background:var(--line-2)}
.cal__cell--com i,.cal__chip--com{background:#14120F}
.cal__key{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.6rem;
  margin-top:clamp(18px,2vw,28px)}
.cal__key li{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;color:var(--ink-2)}
.cal__chip{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.cal__note{margin-top:.9rem;text-align:center;font-size:.86rem;color:var(--ink-3);
  max-width:52ch;margin-inline:auto;text-wrap:balance}
@media (max-width:560px){
  .cal__cell{border-radius:7px}
  .cal__day{font-size:.6rem;letter-spacing:.08em}
}

/* ═══ CREACIÓ DE CONTINGUT ═══════════════════════════════════════════════
   La feina d'aquest servei no es veu en una llista: es veu comparant el
   que entra amb el que surt. I les imatges, aquí, són el contingut.     */

/* ── Hero · l'article s'escriu ──────────────────────────────────────────── */
.bw--content .bw__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,18,15,.3),rgba(20,18,15,0) 58%)}
.wr2{position:absolute;left:4%;top:50%;transform:translateY(-50%);z-index:2;
  width:min(52%,300px);display:grid;gap:.7em;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:1em;
  box-shadow:var(--sh-3);font-size:clamp(.62rem,.96vw,.8rem);opacity:0}
.wr2__h{margin:0;display:flex;align-items:center;gap:.45em;font-size:.9em;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.wr2__h .i{width:1.15em;height:1.15em;color:var(--gold-ink)}
.wr2__t{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
  font-size:1.5em;line-height:1.15;color:var(--ink);min-height:2.3em}
.wr2__t span::after{content:"";display:inline-block;width:2px;height:.9em;
  background:var(--gold-ink);margin-left:2px;vertical-align:-.1em;
  animation:caret .9s steps(2) infinite}
.wr2.is-done .wr2__t span::after{display:none}
.wr2__body{display:grid;gap:.45em}
.wr2__body i{display:block;height:5px;border-radius:3px;background:var(--line-2);
  transform:scaleX(0);transform-origin:left}
.wr2__body i:last-child{width:58%}
.wr2__chips{display:flex;flex-wrap:wrap;gap:.35em;padding-top:.55em;border-top:1px solid var(--line)}
.wr2__chips i{display:inline-flex;align-items:center;gap:.3em;font-style:normal;font-weight:600;
  color:var(--gold-ink);background:var(--gold-soft);border-radius:var(--r-pill);
  padding:.2em .6em;opacity:0;transform:translateY(4px);transition:.35s var(--ease)}
.wr2__chips i .i{width:.9em;height:.9em}
.wr2.is-done .wr2__chips i{opacity:1;transform:none}
@media (max-width:560px){
  .bw--content .bw__view::after{background:linear-gradient(0deg,rgba(20,18,15,.38) 58%,rgba(20,18,15,0) 92%)}
  .wr2{left:4%;right:4%;width:auto;top:auto;bottom:4%;transform:none;font-size:.6rem}
  .wr2__body i:nth-child(n+3){display:none}
}

/* ── D'una nota a un text ───────────────────────────────────────────────── */
.sv-craft{padding-block:var(--sec-y);background:var(--paper-2);border-block:1px solid var(--line)}
.ba{display:grid;grid-template-columns:minmax(0,.82fr) auto minmax(0,1.18fr);
  gap:clamp(16px,2.6vw,40px);align-items:center;margin-top:clamp(34px,4vw,58px)}
.ba figure{margin:0}
.ba figcaption{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.8rem}
.ba__note ul{display:grid;gap:.55rem;background:var(--surface);border:1px solid var(--line-2);
  border-radius:12px;padding:clamp(18px,2.2vw,28px);box-shadow:var(--sh-1);
  transform:rotate(-.8deg)}
.ba__note li{position:relative;padding-left:1.1em;color:var(--ink-2);
  font-size:.98rem;line-height:1.5}
.ba__note li::before{content:"—";position:absolute;left:0;color:var(--line-2)}
.ba__arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--gold);flex:0 0 auto}
.ba__arrow .i{width:19px;height:19px;color:#14120F}
.ba__card{display:grid;gap:.6rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,32px);box-shadow:var(--sh-2)}
.ba__tag{justify-self:start;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink)}
.ba__card h3{font-size:clamp(1.15rem,2vw,1.6rem);max-width:26ch;letter-spacing:-.02em}
.ba__lines{display:grid;gap:.42rem}
.ba__lines i{display:block;height:6px;border-radius:3px;background:var(--line-2)}
.ba__lines i:last-child{width:64%}
.ba__img{display:block;height:clamp(60px,7vw,96px);border-radius:9px;
  background:linear-gradient(135deg,var(--paper-2),var(--gold-soft));border:1px solid var(--line-2)}
.ba__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ba__chips i{display:inline-flex;align-items:center;gap:.35em;font-style:normal;
  font-size:.8rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:.28em .75em}
.ba__chips i .i{width:.9em;height:.9em;color:var(--gold-ink)}
.ba__pts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,32px);
  margin-top:clamp(30px,3.4vw,48px);padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line-2)}
.ba__pts li{display:grid;grid-template-columns:auto 1fr;gap:.6em;color:var(--ink-2);
  font-size:.94rem}
.ba__pts .i{width:1.05em;height:1.05em;color:var(--gold-ink);margin-top:.25em}
@media (max-width:860px){
  .ba{grid-template-columns:1fr;gap:clamp(18px,3vw,26px)}
  .ba__arrow{transform:rotate(90deg);justify-self:center}
  .ba__pts{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.ba__pts{grid-template-columns:1fr}}

/* ── Les imatges ────────────────────────────────────────────────────────── */
.sv-gal{padding-block:var(--sec-y)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,26px);
  margin-top:clamp(32px,4vw,54px)}
.gal li{display:grid;gap:.6rem}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.gal li:hover img{transform:translateY(-6px);box-shadow:var(--sh-3)}
.gal span{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.gal__note{margin-top:clamp(16px,1.8vw,24px);font-size:.88rem;color:var(--ink-3);text-align:center}
@media (max-width:900px){.gal{grid-template-columns:1fr 1fr}}

/* ═══ POSICIONAMENT SEO A AMAZON ═════════════════════════════════════════
   Aquí el client no té web: té una fitxa dins d'un marketplace ple de
   competidors. Tot el que ensenyem és un producte inventat; les posicions
   i les fotos són d'exemple, mai d'un client. */

/* ── Hero · el rànquing que puja ────────────────────────────────────────── */
.bw--amz .bw__bar{gap:.75em;padding:.78rem 1rem}
.bw--amz .bw__bar>.i{width:1.05em;height:1.05em;color:var(--ink-3);flex:0 0 auto}
.mk__q{flex:1;min-width:0;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden}
.mk__q::after{content:"";display:inline-block;width:1px;height:1em;background:var(--gold-ink);
  margin-left:2px;vertical-align:-.15em;animation:caret .9s steps(2) infinite}
.bw.is-done .mk__q::after{display:none}
.mk__go{flex:0 0 auto;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--on-dark);border-radius:var(--r-pill);padding:.34em .95em}

.bw--amz .bw__view{aspect-ratio:auto;background:var(--surface);
  padding:clamp(13px,1.5vw,20px)}
.mk__h{margin:0 0 .75rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.mk__h b{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.mk__list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mk__it{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8em;align-items:center;
  padding:.55rem .7rem;background:var(--surface);
  border:1px solid var(--line);border-radius:12px}
.mk__th{width:clamp(34px,3.2vw,44px);aspect-ratio:1;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--paper-2) 30%,var(--gold-soft));
  border:1px solid var(--line)}
.mk__th--img{object-fit:cover;background:var(--surface)}
.mk__t{font-size:clamp(.73rem,.92vw,.87rem);line-height:1.35;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk__more{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;padding:.45rem 0;border-block:1px dashed var(--line-2)}

/* La nostra fitxa: el número és una posició d'exemple, no la d'un client. */
.mk__it--ours{grid-template-columns:auto auto minmax(0,1fr);background:var(--paper);
  border-color:var(--line-2);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.mk__pos{display:grid;place-items:center;width:2.15em;height:2.15em;border-radius:50%;
  background:var(--ink);color:var(--on-dark);font-size:.82rem;font-weight:700;
  font-variant-numeric:tabular-nums;transition:background .5s var(--ease),color .5s var(--ease)}
.mk__pos i{font-style:normal}
.mk__it--ours .mk__t{color:var(--ink)}
.mk__it--ours .mk__t b{display:block;font-size:.74em;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.2em}
.mk__it--ours.is-up{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-tint)}
.mk__it--ours.is-up .mk__pos{background:var(--gold);color:#14120F}
@media (max-width:560px){
  .mk__t{-webkit-line-clamp:2;font-size:.72rem}
  /* La lupa ja diu que és una cerca: el botó només menja amplada */
  .mk__go{display:none}
}

/* ── La mateixa peça, dues fitxes ───────────────────────────────────────
   La línia només travessa la FOTO. Amb les fitxes senceres superposades
   els dos textos es barrejaven a mitja frase i no s'entenia res. */
.sv-duel{padding-block:var(--sec-y);background:var(--paper-2);border-block:1px solid var(--line)}
.duel-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,3.4vw,58px);align-items:center}

.duel{--split:52%;position:relative;display:grid;margin:0;aspect-ratio:1;
  border-radius:var(--r-lg);box-shadow:var(--sh-3);background:var(--surface);
  touch-action:pan-y;overflow:hidden}
.duel__pane{grid-area:1/1;position:relative;min-width:0}
.duel__pane img{display:block;width:100%;height:100%;object-fit:cover}
.duel__pane--b{clip-path:inset(0 0 0 var(--split))}
.duel__cap{position:absolute;bottom:14px;font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:.36em .9em;white-space:nowrap}
.duel__cap--a{left:14px;background:var(--ink);color:var(--on-dark)}
.duel__cap--b{right:14px;background:var(--gold);color:#14120F}

.duel__grip{position:absolute;top:0;left:0;width:2px;height:100%;z-index:3;
  background:var(--gold);border:0;padding:0;cursor:ew-resize;touch-action:none;border-radius:2px}
.duel__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(40px,4vw,52px);aspect-ratio:1;border-radius:50%;background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--sh-2);display:grid;place-items:center;
  color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.duel__knob .i{width:1.2em;height:1.2em}
.duel__grip:hover .duel__knob,.duel.is-held .duel__knob{background:var(--gold);color:#14120F}
.duel__grip:focus-visible .duel__knob{outline:2px solid var(--ink);outline-offset:3px}
.duel__hint{position:absolute;top:calc(50% + clamp(30px,3.2vw,40px));left:50%;
  transform:translateX(-50%);font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);background:var(--surface);
  border-radius:var(--r-pill);padding:.3em .85em;white-space:nowrap;box-shadow:var(--sh-1);
  transition:opacity .3s var(--ease)}
.duel.is-held .duel__hint{opacity:0}

/* Les dues fitxes, cadascuna sencera i al seu lloc */
.duel__side{display:grid;gap:clamp(16px,1.8vw,24px)}
.lst{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,2.2vw,30px)}
.lst--b{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.lst__label{margin:0 0 .7rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.lst--b .lst__label{color:var(--gold-ink)}
.lst h3{font-family:var(--font-body);font-weight:600;letter-spacing:-.005em;
  font-size:clamp(.95rem,1.25vw,1.1rem);line-height:1.4;text-wrap:pretty}
.lst__bul{display:grid;gap:.34rem;margin-top:.85rem;list-style:none;padding:0}
.lst__bul li{position:relative;padding-left:1.05em;font-size:clamp(.8rem,.98vw,.9rem);
  color:var(--ink-2);line-height:1.45}
.lst__bul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--line-2)}
.lst--b .lst__bul li::before{background:var(--gold)}
.lst__marks{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1rem;padding-top:.85rem;
  border-top:1px solid var(--line);list-style:none}
.lst__marks li{display:grid;grid-template-columns:auto 1fr;gap:.4em;align-items:baseline;
  font-size:.78rem;color:var(--ink-3)}
.lst__marks .i{width:.95em;height:.95em}
.lst__marks--a .i{color:#B4675E}
.lst__marks--b .i{color:var(--gold-ink)}

.duel__legend{margin:clamp(26px,3vw,42px) auto 0;text-align:center;color:var(--ink-2);
  max-width:52ch;text-wrap:pretty}
@media (max-width:900px){
  .duel-in{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .duel{max-width:520px;margin-inline:auto}
}
@media (max-width:620px){
  /* Les dues etiquetes a la mateixa vora es trepitjaven */
  .duel__cap{font-size:.58rem;padding:.3em .7em}
  .duel__cap--b{top:14px;bottom:auto}
}

/* ── Els factors, de costat ─────────────────────────────────────────────── */
/* L'única secció horitzontal del web: la cinta avança mentre baixes i el
   filet d'or de sota es dibuixa al mateix ritme (DrawSVG). Per sota de
   900 px no s'enganxa res i les targetes s'apilen. */
/* El coixí de baix ja el posa .fact: si el duplica la secció, en sortir
   de la cinta queda mig pantalla en blanc abans de la declaració. */
.sv-fact{padding-block:var(--sec-y) 0}
.fact{position:relative;overflow:hidden;padding-bottom:clamp(42px,5vw,74px)}
.fact__track{display:flex;gap:clamp(18px,2vw,32px);padding-inline:var(--gutter);
  padding-block:clamp(8px,1.2vw,16px);will-change:transform}
.fact__card{flex:0 0 min(84vw,420px);display:grid;align-content:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,40px);box-shadow:var(--sh-1);
  min-height:clamp(300px,32vw,392px)}
.fact__n{margin:0;font-family:var(--font-display);line-height:1;color:var(--gold);
  font-size:clamp(2.4rem,3.8vw,3.4rem)}
.fact__k{margin:.55rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.fact__card h3{margin-top:.85rem;font-size:clamp(1.15rem,1.7vw,1.5rem);text-wrap:balance}
.fact__card p:last-child{margin-top:.7rem;color:var(--ink-2);text-wrap:pretty}
/* Sense `vector-effect:non-scaling-stroke`: amb ell, el guionet que fa
   servir DrawSVG es mesura en píxels de pantalla i no en unitats del
   viewBox, i el filet es quedava al 75% per molt que baixessis. */
/* Amplada explícita: un <svg> col·locat amb left+right i width:auto agafa
   l'amplada intrínseca del viewBox (1000 px) i el filet es quedava curt
   sense que res fallés a l'animació. */
.fact__rail{position:absolute;left:var(--gutter);bottom:clamp(20px,2.6vw,36px);
  width:calc(100% - var(--gutter)*2);height:3px;display:block;overflow:visible}
.fact__rail line{stroke-linecap:round}
.fact__rail-bg{stroke:var(--line-2);stroke-width:2}
.fact__rail-fg{stroke:var(--gold);stroke-width:3}
@media (max-width:899px){
  .fact{overflow:visible;padding-bottom:0}
  .fact__track{flex-direction:column;padding-inline:var(--gutter)}
  .fact__card{flex:0 0 auto;min-height:0}
  .fact__rail{display:none}
}

/* ═══ SENSE JAVASCRIPT ═══════════════════════════════════════════════════
   Dos detalls de les maquetes arrenquen a opacity 0 perquè els encén el
   JS. Si no hi ha JS no els encén ningú i quedaven en blanc per sempre. */
html.no-js .adx__land,
html.no-js .po__when,
html.no-js .sc__f,
html.no-js .sc__sum,
html.no-js .ia__m--bot,
html.no-js .ia__go{opacity:1}
/* La venda del hero de botigues: sense JS, l'estat final ja fet. El carret,
   el panell i la confirmació neixen a opacity 0 i els encén la línia de temps. */
html.no-js .sh__cart,
html.no-js .sh__panel{opacity:1;transform:none}
html.no-js .sh__done{opacity:1}
html.no-js .sh__step{color:var(--ink)}
html.no-js .sh__step i{border-color:var(--gold);background:var(--gold)}
html.no-js .sh__step i::after{transform:scale(1)}
/* Barra del navegador sense JS: l'estat ja acabat i el cursor quiet. */
html.no-js .bw__state{opacity:1;background:var(--gold);color:#14120F}
html.no-js .bw__url::after{display:none}
/* I el raig de l'escàner no es queda clavat a dalt de tot */
html.no-js .sc__beam{display:none}
/* El tauler de manteniment és un acordió: sense JS no hi ha pestanya
   activa i els quatre textos quedaven a opacity 0. Que es vegin tots,
   com ja fa la versió estreta. I les etiquetes de la publicació de
   xarxes, igual: les encenia la línia de temps. */
html.no-js .dash__body>span{max-height:9em;opacity:1}
html.no-js .po__tags i{opacity:1;transform:none}

/* ═══ AUDITORIA DIGITAL ══════════════════════════════════════════════════
   Aquí no es ven una web: es ven una revisió i un informe. Per això el
   hero escaneja i la secció del mig ÉS el document. El web que s'analitza
   és un esbós anònim: marcar quatre problemes damunt de la captura d'un
   client seria assenyalar-lo en públic. */

/* ── Hero · l'escàner ───────────────────────────────────────────────────── */
.bw--audit .bw__view{background:var(--paper-2);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(10px,1.4vw,20px);padding:clamp(12px,1.5vw,20px);align-items:stretch}

.sc__page{position:relative;display:grid;gap:clamp(5px,.6vw,9px);
  align-content:start;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:clamp(9px,1.1vw,14px);height:100%}
.sc__b{display:block;border-radius:4px;background:var(--line)}
.sc__b--nav{height:9px;background:var(--line-2)}
.sc__b--hero{height:clamp(38px,4.6vw,64px);border-radius:6px;
  background:linear-gradient(120deg,var(--paper-2),var(--gold-soft))}
.sc__b--t{height:11px;width:62%;background:var(--line-2)}
.sc__b--p{height:6px}
.sc__b--short{width:74%}
.sc__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(5px,.6vw,9px)}
.sc__b--card{height:clamp(24px,2.8vw,38px);border-radius:6px;background:var(--paper-2);
  border:1px solid var(--line)}
.sc__b--foot{height:14px;background:var(--paper-2);border:1px solid var(--line)}

/* El raig que baixa. Viu dins de la pàgina i no del quadre sencer: el que
   s'analitza és el web, no la maqueta. */
.sc__beam{position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  box-shadow:0 0 18px 5px var(--gold-tint);opacity:0;pointer-events:none;z-index:2}
.sc__beam::before{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(0deg,var(--gold-tint),transparent)}

.sc__found{display:grid;gap:clamp(5px,.7vw,9px);align-content:start;margin:0;padding:0;
  list-style:none}
.sc__f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55em;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:.52em .7em;font-size:clamp(.66rem,.86vw,.79rem);line-height:1.35;
  color:var(--ink-2);opacity:0}
.sc__f i{width:8px;height:8px;border-radius:50%;margin-top:.42em;background:var(--ink-3)}
.sc__f--alt i{background:#B4675E}
.sc__f--mig i{background:var(--gold)}
.sc__f--baix i{background:var(--line-2)}
.sc__sum{grid-column:1/-1;display:flex;align-items:center;gap:.5em;margin:0;
  font-size:clamp(.68rem,.88vw,.8rem);font-weight:600;color:var(--gold-ink);opacity:0}
.sc__sum .i{width:1em;height:1em}
@media (max-width:560px){
  .bw--audit .bw__view{grid-template-columns:1fr;gap:10px;align-items:start}
  /* Alçada pròpia i no `height:100%`: en una columna el pare no en té cap
     d'establerta i la maqueta es quedava en una ratlla. */
  .sc__page{height:186px;overflow:hidden}
}

/* ── L'informe, en ventall ──────────────────────────────────────────────── */
.sv-rep{padding-block:var(--sec-y);background:var(--paper-2);
  border-block:1px solid var(--line)}
.rep{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,72px);align-items:start}

/* Els fulls es munten amb marge negatiu i no amb posicionament absolut:
   així l'alçada la reparteix el navegador sola i, sense JavaScript, el
   ventall ja es veu fet. */
/* El `padding-bottom` NO és decoració. Cada full puja amb un marge
   superior negatiu de `--tapa`, i això li resta la mateixa alçada a la
   seva fila. El resultat és que l'ÚLTIM full es pinta `--tapa` píxels
   més avall del que el contenidor diu que mesura, i es plantava a
   sobre del text que ve després. Aquest coixí és exactament el que
   sobresurt. */
.rep__deck{display:grid;--tapa:clamp(108px,11vw,148px);
  padding-bottom:var(--tapa)}
.rep__sheet{position:relative;margin-top:calc(var(--tapa) * -1 + 0px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(18px,2vw,26px);box-shadow:0 -2px 14px rgba(20,18,15,.06);
  min-height:clamp(150px,16vw,200px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rep__sheet:first-child{margin-top:0}
.rep__sheet:nth-child(1){z-index:1}
.rep__sheet:nth-child(2){z-index:2}
.rep__sheet:nth-child(3){z-index:3}
.rep__sheet:nth-child(4){z-index:4}
.rep__sheet:nth-child(5){z-index:5}
.rep__sheet:nth-child(6){z-index:6}
.rep__sheet.is-up{transform:translateX(clamp(8px,1.2vw,16px));
  box-shadow:0 -2px 10px rgba(20,18,15,.05),0 18px 40px rgba(20,18,15,.14)}

.rep__sheet--cover{background:var(--ink);border-color:var(--ink);
  min-height:clamp(170px,18vw,230px)}
.rep__sheet--cover h3{color:var(--on-dark);font-size:clamp(1.05rem,1.5vw,1.32rem);
  margin-top:.5rem;text-wrap:balance}
.rep__k{margin:0;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.rep__who{margin:.9rem 0 0;font-size:.86rem;color:var(--on-dark-2)}
.rep__d{margin:.15rem 0 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold)}
.rep__n{margin:0;font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1;color:var(--gold)}
.rep__tab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7em;
  align-items:baseline;margin:0}
.rep__tab b{font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(1.35rem,1.9vw,1.7rem);color:var(--gold)}
/* Una sola línia: la segona la tapava el full de sobre i es llegia una
   frase tallada a mitges. El títol sencer és aquí al costat, a la llista. */
.rep__tab span{font-size:clamp(.9rem,1.15vw,1.04rem);font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep__sheet h3{font-size:clamp(.95rem,1.25vw,1.1rem);margin-top:.45rem;
  font-family:var(--font-body);font-weight:600;text-wrap:pretty;max-width:30ch}
.rep__rule{display:block;width:clamp(30px,4vw,52px);height:2px;background:var(--line-2);
  margin-top:.9rem}

.rep__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.8vw,26px)}
.rep__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.6vw,24px);
  padding-bottom:clamp(14px,1.8vw,26px);border-bottom:1px solid var(--line-2);cursor:default}
.rep__list li:last-child{border-bottom:0;padding-bottom:0}
.rep__list h3{font-size:clamp(1.05rem,1.5vw,1.32rem);text-wrap:balance}
.rep__list p{margin-top:.45rem;color:var(--ink-2);text-wrap:pretty}
.rep__list li .rep__n{padding-top:.1em;transition:color .3s var(--ease)}
.rep__list li:hover .rep__n{color:var(--gold-ink)}
@media (max-width:900px){
  .rep{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  /* Pestanyes més estretes: amb les de l'escriptori, el dossier sol ja
     ocupava una pantalla i mitja de mòbil abans d'arribar al text. */
  .rep__deck{max-width:460px;margin-inline:auto;width:100%;--tapa:74px}
  .rep__sheet{min-height:120px}
  .rep__sheet--cover{min-height:132px}
}

/* ── El semàfor ─────────────────────────────────────────────────────────── */
.sv-traf{padding-block:var(--sec-y)}
.traf__bar{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  margin-bottom:clamp(26px,3vw,42px)}
.traf__t{font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:.55em 1.1em;transition:.25s var(--ease)}
.traf__t i{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.traf__t--alt i{background:#B4675E}
.traf__t--mig i{background:var(--gold)}
.traf__t--baix i{background:var(--line-2)}
.traf__t b{font-size:.76em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.traf__t:hover{border-color:var(--gold)}
.traf__t.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.traf__t.is-on b{color:var(--gold)}

.traf__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  max-width:920px;margin-inline:auto}
.traf__it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(12px,1.6vw,24px);align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,24px)}
.traf__it--alt{border-left:3px solid #B4675E}
.traf__it--mig{border-left:3px solid var(--gold)}
.traf__it--baix{border-left:3px solid var(--line-2)}
.traf__lv{display:inline-flex;align-items:center;gap:.45em;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  padding-top:.2em;min-width:7.5em}
.traf__lv i{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.traf__it--alt .traf__lv{color:#A8564C}
.traf__it--alt .traf__lv i{background:#B4675E}
.traf__it--mig .traf__lv{color:var(--gold-ink)}
.traf__it--mig .traf__lv i{background:var(--gold)}
.traf__it--baix .traf__lv i{background:var(--line-2)}
.traf__txt h3{font-size:clamp(.98rem,1.25vw,1.12rem);font-family:var(--font-body);
  font-weight:600;text-wrap:pretty}
.traf__txt p{margin-top:.3rem;font-size:.9rem;color:var(--ink-2);text-wrap:pretty}
.traf__area{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--paper-2);border-radius:var(--r-pill);
  padding:.35em .8em;white-space:nowrap}
.traf__note{display:grid;grid-template-columns:auto 1fr;gap:.5em;align-items:start;
  max-width:920px;margin:clamp(20px,2.4vw,32px) auto 0;font-size:.8rem;color:var(--ink-3)}
.traf__note .i{width:1em;height:1em;margin-top:.15em}
@media (max-width:720px){
  .traf__it{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .traf__lv{min-width:0}
  .traf__area{justify-self:start}
}

/* ═══ INTEL·LIGÈNCIA ARTIFICIAL ══════════════════════════════════════════
   És l'única pàgina que pot ensenyar el producte funcionant: la Yara és
   aquí mateix. Per això el hero acaba en un botó que l'obre de veritat i
   no en una altra maqueta. */

/* ── Hero · la conversa ─────────────────────────────────────────────────── */
.bw--ia .bw__bar{gap:.7em}
.ia__ava{border-radius:50%;flex:0 0 auto}
.ia__who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;
  font-size:.7rem;color:var(--ink-3)}
.ia__who b{font-size:.86rem;font-weight:600;color:var(--ink)}

.bw--ia .bw__view{aspect-ratio:auto;background:var(--paper);
  display:grid;align-content:space-between;gap:clamp(16px,2vw,26px);
  padding:clamp(16px,2vw,26px);min-height:clamp(240px,26vw,330px)}
.ia__chat{display:grid;gap:.7rem;align-content:start}
.ia__m{margin:0;font-size:clamp(.8rem,1.02vw,.94rem);line-height:1.5;
  padding:.7em .95em;border-radius:14px;max-width:88%}
.ia__m--tu{justify-self:end;background:var(--gold);color:#14120F;
  border-bottom-right-radius:5px;font-weight:500}
.ia__m--tu span::after{content:"";display:inline-block;width:1px;height:1em;
  background:#14120F;margin-left:2px;vertical-align:-.15em;
  animation:caret .9s steps(2) infinite}
.bw.is-done .ia__m--tu span::after{display:none}
.ia__m--bot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55em;
  align-items:end;justify-self:start;background:var(--surface);
  border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink);
  opacity:0;padding:.7em .95em}
.ia__m--bot img{border-radius:50%;margin-bottom:.1em}
.ia__go{justify-self:center;opacity:0}
.ia__go .i{width:1.05em;height:1.05em}

/* Un botó que ha de semblar l'enllaç fletxat de la resta de la casa */
.link-arrow--btn{font:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ── Els canals ─────────────────────────────────────────────────────────── */
/* Quatre finestres i no quatre targetes iguals: cada canal té el seu color
   a la capçalera, que és exactament el que fa que es reconeguin d'un cop
   d'ull sense haver de llegir el nom. */
.sv-ch{padding-block:var(--sec-y);background:var(--paper-2);
  border-block:1px solid var(--line)}
.chs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,28px)}
.ch{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-1);display:grid;align-content:start}
.ch__top{display:flex;align-items:center;gap:.6em;padding:.75rem 1.1rem;
  border-bottom:1px solid var(--line)}
.ch__dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.ch__n{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ch--wa .ch__top{background:#EAF8EF}   .ch--wa .ch__dot{background:#25D366}
.ch--tg .ch__top{background:#EAF3FB}   .ch--tg .ch__dot{background:#2AABEE}
.ch--dc .ch__top{background:#EDEDF7}   .ch--dc .ch__dot{background:#5865F2}
.ch--we .ch__top{background:var(--gold-soft)} .ch--we .ch__dot{background:var(--gold)}
.ch__body{display:grid;gap:.6rem;padding:clamp(16px,1.8vw,22px)}
.ch__m{margin:0;font-size:clamp(.8rem,1vw,.9rem);line-height:1.5;padding:.62em .85em;
  border-radius:12px;max-width:92%}
.ch__m--tu{justify-self:end;background:var(--paper-2);border-bottom-right-radius:4px;
  color:var(--ink)}
.ch__m--bot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5em;align-items:end;
  justify-self:start;background:var(--ink);color:var(--on-dark);
  border-bottom-left-radius:4px}
.ch__m--bot img{border-radius:50%;margin-bottom:.1em}
.chs__note{display:grid;grid-template-columns:auto 1fr;gap:.5em;align-items:start;
  margin:clamp(20px,2.4vw,32px) 0 0;font-size:.8rem;color:var(--ink-3)}
.chs__note .i{width:1em;height:1em;margin-top:.15em}
@media (max-width:760px){.chs{grid-template-columns:1fr}}

/* ── Munta el teu agent ─────────────────────────────────────────────────── */
.sv-bld{padding-block:var(--sec-y)}
.bld{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,3.6vw,64px);align-items:start}
.bld__opts{display:grid;gap:clamp(20px,2.4vw,34px)}
.bld__gt{margin:0 0 .7rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
/* position:relative perquè la casella amagada es quedi DINS de la seva
   etiqueta: sense això s'ancora al primer avantpassat posicionat i el
   focus del teclat se'n va a saltar a un altre punt de la pàgina. */
.bld__o{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.8em;align-items:start;padding:.7rem 0;border-top:1px solid var(--line);
  cursor:pointer}
.bld__g > .bld__o:first-of-type{border-top:0}
.bld__o input{position:absolute;opacity:0;width:0;height:0}
.bld__box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;color:transparent;margin-top:.1em;
  transition:.22s var(--ease)}
.bld__box .i{width:14px;height:14px}
.bld__o:hover .bld__box{border-color:var(--gold)}
.bld__o input:checked + .bld__box{background:var(--gold);border-color:var(--gold);
  color:#14120F}
.bld__o input:focus-visible + .bld__box{outline:2px solid var(--ink);outline-offset:2px}
.bld__l{color:var(--ink-2);text-wrap:pretty;transition:color .22s var(--ease)}
.bld__o input:checked ~ .bld__l{color:var(--ink)}

.bld__panel{position:sticky;top:96px;background:var(--ink);color:var(--on-dark);
  border-radius:var(--r-lg);padding:clamp(22px,2.4vw,32px);box-shadow:var(--sh-3)}
.bld__panel header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8em;
  align-items:center;padding-bottom:1rem;border-bottom:1px solid rgba(247,244,236,.14)}
.bld__panel header img{border-radius:50%}
.bld__pt{margin:0;font-family:var(--font-display);font-size:1.2rem;font-weight:600}
.bld__pc{margin:.1rem 0 0;font-size:.78rem;color:var(--on-dark-2)}
.bld__pc b{color:var(--gold);font-variant-numeric:tabular-nums}
.bld__got{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.55rem}
.bld__got li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6em;
  align-items:start;font-size:.87rem;line-height:1.45;color:var(--on-dark-2)}
.bld__got li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-top:.55em}
.bld__empty{margin:1.2rem 0;font-size:.87rem;color:var(--on-dark-2)}
.bld__panel .btn{width:100%;margin-top:.4rem}
@media (max-width:900px){
  .bld{grid-template-columns:1fr}
  .bld__panel{position:static}
}

/* ═══ PROGRAMACIÓ AVANÇADA ═══════════════════════════════════════════════
   Aquí no es ven una pantalla bonica: es ven feina que es fa sola. Per això
   el hero és l'editor (quatre línies i el que passa quan s'executen), la
   secció del mig és un quadre de connexions i l'última és una calculadora
   on els números els posa el visitant. Cap xifra nostra enlloc.        */

/* ── Hero · el codi i el que fa ─────────────────────────────────────────── */
/* L'editor a dalt i el que escup a baix, com a la pantalla de veritat.
   Provat amb les dues columnes de costat i no: el codi no hi cabia i
   quedava tallat, i una línia de codi tallada no la llegeix ningú. Aquí
   la finestra no és 16/10 com les altres perquè no és un navegador. */
.bw--code .bw__view{background:var(--paper-2);display:grid;align-content:center;
  aspect-ratio:auto;min-height:clamp(280px,25vw,420px);
  gap:clamp(12px,1.5vw,20px);padding:clamp(14px,1.8vw,26px)}
.bw--code .bw__url{font-family:var(--font-mono);font-size:.74rem}

.cd__code{background:var(--ink-bg);border-radius:var(--r-md);overflow-x:auto;
  padding:clamp(14px,1.7vw,22px) clamp(12px,1.5vw,20px)}
.cd__code ol{counter-reset:ln;margin:0;padding:0}
/* white-space:pre i prou: la sagnia de les línies de dins del bucle és el
   que fa que un no-programador vegi que allò de sota depèn d'allò de dalt. */
.cd__code li{counter-increment:ln;display:flex;align-items:baseline;gap:.95em;
  font-family:var(--font-mono);font-size:clamp(.72rem,.9vw,.86rem);line-height:2;
  color:var(--on-dark);white-space:pre}
.cd__code li::before{content:counter(ln);flex:0 0 auto;min-width:1ch;text-align:right;
  font-size:.85em;color:rgba(185,178,162,.45)}
.cd__code .kw{color:#E7A7A0}
.cd__code .fn{color:var(--gold)}
.cd__code .st{color:#A9C4A2}

.cd__out{min-width:0;padding-inline:clamp(2px,.9vw,14px)}
.cd__ot{margin:0 0 .85rem;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.cd__rows{display:grid;gap:clamp(7px,.9vw,11px)}
.cd__row{display:flex;align-items:center;gap:.7em;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:clamp(8px,1vw,12px) clamp(10px,1.2vw,15px)}
.cd__ok{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--gold)}
.cd__ok .i{width:12px;height:12px;color:#14120F;stroke-width:2.8}
.cd__rb{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .6em;min-width:0}
.cd__rb b{font-size:.85rem;font-weight:600}
.cd__rb>span{font-size:.8rem;color:var(--ink-2)}
.cd__end{margin:clamp(12px,1.4vw,18px) 0 0;font-family:var(--font-display);font-style:italic;
  font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.4;color:var(--gold-ink)}

@media (max-width:720px){
  .bw--code .bw__view{min-height:0}
}

/* ── On encaixa · el quadre de connexions ───────────────────────────────
   El bus vertical, els filets i els punts són pseudoelements: el dibuix es
   refà sol tant si un nom ocupa una línia com si n'ocupa dues, cosa que
   amb un SVG de coordenades fixes no passaria.                         */
.sv-wir{padding-block:var(--sec-y)}
.wir{--wg:clamp(30px,4.4vw,78px);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(215px,25%,300px) minmax(0,1fr);
  gap:var(--wg);align-items:center}
.wir__st{margin:0 0 1rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.wir__side--out{text-align:right}
.wir__bus{position:relative;display:grid;gap:clamp(12px,1.4vw,18px)}

.wir__bus::before,.wir__bus::after{content:"";position:absolute}
.wir__bus::before{top:2.1rem;bottom:2.1rem;width:1px;background:var(--line-2)}
.wir__bus::after{top:calc(50% - 1px);height:2px;background:var(--gold)}
.wir__side--in .wir__bus::before{left:calc(100% + var(--wg)/2)}
.wir__side--in .wir__bus::after{left:calc(100% + var(--wg)/2);width:calc(var(--wg)/2)}
.wir__side--out .wir__bus::before{right:calc(100% + var(--wg)/2)}
.wir__side--out .wir__bus::after{right:calc(100% + var(--wg)/2);width:calc(var(--wg)/2)}

.wir__n{position:relative;display:flex;align-items:center;gap:.85em;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(12px,1.3vw,16px) clamp(13px,1.5vw,18px);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.wir__side--out .wir__n{flex-direction:row-reverse}
.wir__n:hover{border-color:var(--gold);box-shadow:var(--sh-1)}

.wir__n::before,.wir__n::after{content:"";position:absolute;
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.wir__n::after{top:calc(50% - .5px);height:1px;width:calc(var(--wg)/2);background:var(--line-2)}
.wir__n::before{top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;
  background:var(--line-2);z-index:1}
.wir__side--in .wir__n::after{left:100%}
.wir__side--in .wir__n::before{left:calc(100% + var(--wg)/2 - 3px)}
.wir__side--out .wir__n::after{right:100%}
.wir__side--out .wir__n::before{right:calc(100% + var(--wg)/2 - 3px)}
.wir__n:hover::after,.wir__n:hover::before{background:var(--gold)}
.wir__n:hover::before{box-shadow:0 0 0 4px var(--gold-tint)}

.wir__ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--gold-soft)}
.wir__ic .i{width:18px;height:18px;color:var(--gold-ink)}
.wir__b{display:block;min-width:0}
.wir__b b{display:block;font-size:.97rem;font-weight:600;line-height:1.3}
.wir__b span{display:block;margin-top:.15rem;font-size:.82rem;color:var(--ink-2)}

.wir__core{position:relative;overflow:hidden;text-align:center;
  background:var(--ink-bg);color:var(--on-dark);border-radius:var(--r-lg);
  padding:clamp(26px,2.9vw,40px) clamp(20px,2.2vw,28px);box-shadow:var(--sh-3)}
.wir__pulse{position:absolute;inset:-46% -24% auto auto;width:130%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(236,198,0,.22),transparent 62%);pointer-events:none}
.wir__ci{position:relative;display:grid;place-items:center;width:52px;height:52px;
  margin:0 auto clamp(14px,1.6vw,20px);border-radius:50%;background:var(--gold)}
.wir__ci .i{width:24px;height:24px;color:#14120F;stroke-width:2}
.wir__core b{position:relative;display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.01em}
.wir__core p{position:relative;margin:.6rem 0 0;font-size:.92rem;line-height:1.6;
  color:var(--on-dark-2);text-wrap:pretty}
.wir__tag{position:relative;display:inline-block;margin-top:clamp(14px,1.6vw,20px);
  padding:.35em .9em;border:1px solid rgba(236,198,0,.34);border-radius:var(--r-pill);
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.wir__note,.hrs__note{display:flex;align-items:flex-start;gap:.6em;max-width:72ch;
  margin:clamp(30px,3.4vw,46px) auto 0;font-size:.86rem;line-height:1.6;color:var(--ink-3)}
.wir__note .i,.hrs__note .i{flex:0 0 auto;width:16px;height:16px;margin-top:.2em;color:var(--gold-ink)}

@media (max-width:980px){
  .wir{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.4vw,36px)}
  .wir__side--out{text-align:left}
  .wir__side--out .wir__n{flex-direction:row}
  .wir__bus::before,.wir__bus::after,.wir__n::before,.wir__n::after{display:none}
}

/* ── El compte de la vella · les hores que et menja ──────────────────────
   L'única calculadora del web, i a propòsit no diu ni un preu: el temps
   surt dels números del visitant, el pressupost surt d'una conversa.    */
.sv-hrs{background:var(--paper-2);border-block:1px solid var(--line);padding-block:var(--sec-y)}
.hrs{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.4vw,60px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,46px);box-shadow:var(--sh-1)}
.hrs__ctrl{display:grid;gap:clamp(22px,2.6vw,34px)}
.hrs__f{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.35em 1em}
.hrs__f label{font-size:.96rem;font-weight:600}
.hrs__v{font-family:var(--font-display);font-weight:600;font-size:1.55rem;line-height:1;
  color:var(--gold-ink);font-variant-numeric:tabular-nums}

.hrs input[type=range]{grid-column:1/-1;width:100%;height:26px;margin:0;
  appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize}
.hrs input[type=range]:focus{outline:none}
/* Chromium no pinta el tram recorregut de la barra: es fa amb un degradat
   i el percentatge que hi deixa el JS. Sense JS queda la barra grisa i
   ja està: el número de sota segueix sent correcte. */
.hrs input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold) 0 var(--p,0%),var(--line-2) var(--p,0%))}
.hrs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  margin-top:-9px;border-radius:50%;background:var(--gold);border:3px solid var(--surface);
  box-shadow:var(--sh-1)}
.hrs input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
.hrs input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--gold)}
.hrs input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--gold);border:3px solid var(--surface);box-shadow:var(--sh-1)}
.hrs input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--gold-tint)}
.hrs input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--gold-tint)}

.hrs__out{text-align:center;border-left:1px solid var(--line);padding-left:clamp(22px,3vw,50px)}
.hrs__big{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:0}
.hrs__big b{font-family:var(--font-display);font-weight:600;font-size:clamp(3.4rem,7vw,5.6rem);
  line-height:.92;letter-spacing:-.03em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.hrs__big span{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3)}
.hrs__sub{margin:.95rem 0 0;font-size:.94rem;color:var(--ink-2)}
.hrs__sub b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.hrs__out .btn{margin-top:clamp(20px,2.4vw,30px)}

@media (max-width:860px){
  .hrs{grid-template-columns:minmax(0,1fr)}
  .hrs__out{border-left:0;border-top:1px solid var(--line);padding-left:0;
    padding-top:clamp(24px,3vw,34px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   EN RESUM · la caixa que llegeixen les IA
   Comparteix estil amb la de les landings (municipi.css), però aquí va sobre
   el paper clar i just sota el hero, així que només cal l'embolcall.
   ════════════════════════════════════════════════════════════════════════ */
.geo-rapid{ padding: clamp(34px,4vw,56px) 0; background: var(--paper); }
.geo-rapid .mu-rapid{ margin-top: 0; }