/* ==========================================================================
   DERIVA — heroi
   Ve de 00-Agencia/web/provatures/direccio-a-2.html, combinació escollida:
   fons «horitzó corregit» × motors «filets». Les altres dues variants de
   fons, les altres quatre de motors i la barra de selecció s'han tret; el
   que queda no s'ha tocat.
   ========================================================================== */

@font-face { font-family:'Schibsted Grotesk'; src:url('../fonts/schibsted-grotesk.woff2') format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('../fonts/instrument-sans-regular.woff2') format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root{
  --paper:#fbfaf8; --paper-2:#f2eee9; --paper-3:#e9e3dc; --ink:#14100f;
  --ink-2:#57504c; --ink-3:#6e655f; --rule:#e3ddd6;
  --magenta:#f4417e; --magenta-ink:#c0184f;
  /* El negre de la referencia de Linear. Mes fred i mes fosc que la tinta
     calida de la marca, i es el que arrenca el degradat dels serveis. */
  --linear:#08090a;
  /* El mateix gris de les etiquetes, però pensat per anar sobre la banda de
     tinta: 6,3:1 sobre #14100f. Sense això, tot el que el fa servir queda
     sense color vàlid i cau al negre del navegador. */
  --ink-3-fosc:#9d938c;
  --display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --e:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
/* Declarat: fa que els controls natius i la barra de desplaçament es pintin
   en clar encara que el sistema vagi en fosc. */
/* El coixi ha de ser mes alt que la barra flotant (90 px), o en saltar a
   una ancora el titular queda mig tapat per la barra. */
html{color-scheme:light; scroll-behavior:smooth; scroll-padding-top:6.75rem}
/* Els botons no hereten ni la lletra ni el color: el navegador els posa els
   seus. Sobre la banda de tinta això treu el text de les píndoles en negre. */
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* Treu el retard de 300 ms del doble toc i el rectangle blau d'Android: el
   ressaltat el gestionem nosaltres amb :active. */
a,button,summary,label,input{touch-action:manipulation; -webkit-tap-highlight-color:transparent}

/* No hi havia cap regla de focus a tota la fulla. Amb teclat no es veia on
   eres. :focus-visible i no :focus, per no pintar l'anell en clicar. */
:focus-visible{outline:2px solid var(--magenta-ink); outline-offset:3px; border-radius:2px}
.sistema :focus-visible{outline-color:var(--magenta)}

/* Xifres que canvien: amplada fixa perquè el número no salti mentre puja. */
.mobil__hora,.peu-peca .xifra,.filet__n{font-variant-numeric:tabular-nums}

.salta{position:absolute; left:-9999px; top:0; z-index:99; padding:.75rem 1rem;
  background:var(--magenta-ink); color:#fff; text-decoration:none}
.salta:focus{left:0}
body{font-family:var(--body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}

.escena{position:relative; min-height:100svh; overflow:hidden}
.fons{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block}

/* El gra: el que fa que el paper sembli imprès i no un degradat de pantalla. */
.gra{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* La zona neta: la columna dreta on viuen els Motors, sempre llegible. */
.zonaneta{position:absolute; z-index:2; top:0; bottom:0; right:0; width:52%; pointer-events:none;
  background:linear-gradient(90deg, rgba(251,250,248,0) 0%, rgba(251,250,248,.62) 26%, rgba(251,250,248,.9) 55%, rgba(251,250,248,.94) 100%)}
@media (max-width:980px){ .zonaneta{width:100%; top:auto; height:62%; bottom:0;
  background:linear-gradient(180deg, rgba(251,250,248,0) 0%, rgba(251,250,248,.9) 30%)} }

/* Les insercions segures: a un telèfon amb osca en horitzontal, sense això
   el text se'n va sota la mossa. */
.contenidor{width:min(1180px,calc(100% - 3rem)); margin-inline:auto;
  padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right))}
/* La barra deixa de viure dins de l'heroi: va fixa i acompanya tota la
   pàgina. Es queda de color paper encara que passi per damunt de la banda
   de tinta, així que el color del text s'ha de dir aquí — abans l'heretava
   de l'escena i sobre el negre hauria desaparegut. */
.nav{position:fixed; inset-inline:0; top:0; z-index:20; padding:1rem 0; font-size:.875rem}
.nav__inner{display:flex; align-items:center; gap:2rem;
  padding:.7rem .8rem .7rem 1.35rem; border-radius:100px;
  background:rgb(251 250 248 / .92); color:var(--ink);
  border:1px solid var(--rule);
  box-shadow:0 .7rem 2rem -.9rem rgb(20 16 15 / .32)}
@supports (backdrop-filter:blur(1px)){
  .nav__inner{background:rgb(251 250 248 / .78); backdrop-filter:blur(16px) saturate(1.5)}
}
.nav__marca{display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:1.0625rem}
/* El logo de veritat: rombe calat, no un quadrat massis girat. La barra i
   el peu comparteixen classe, aixi que es canvia aqui i prou. */
.nav__rombe{width:15px;height:15px;background:url('../img/deriva.svg') center/contain no-repeat;
  transform:none;border-radius:0}
.nav__enllacos{display:flex; align-items:center; gap:1.5rem; margin-left:auto}
.nav__enllacos a{text-decoration:none; color:var(--ink-2);
  transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){ .nav__enllacos a:hover{color:var(--ink)} }
.nav__cta{padding:.5rem 1.05rem; border-radius:100px;
  background:var(--ink); color:var(--paper) !important; font-weight:600}
/* Al mòbil cauen els tres enllaços de text, però no el botó: la barra flota
   per tota la pàgina i ha de dur sempre la manera de contactar. */
@media (max-width:900px){
  .nav__enllacos a:not(.nav__cta){display:none}
  .nav__inner{gap:1rem}
}

/* El relleu era fix (7rem/8,5rem) i en un mòbil de 390 això són 248 px de
   pàgina en blanc. Lligat a l'alçada de la finestra, el pes de dalt i de baix
   s'ajusta sol i el primer motor queda just sota el plec, convidant a baixar. */
.heroi{position:relative; z-index:3; min-height:100svh; display:flex; align-items:center;
  padding:clamp(5.5rem,12vh,7rem) 0 clamp(3.5rem,10vh,8.5rem)}
.reixa{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:3.5rem; align-items:center}
@media (max-width:980px){ .reixa{grid-template-columns:1fr} }

.cella{font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.75rem; color:var(--magenta-ink)}
.cella::before{content:''; width:26px; height:1px; background:currentColor; opacity:.5}
.titol{font-family:var(--display); font-weight:400; font-size:clamp(2.5rem,5.2vw,4.5rem);
  line-height:.99; letter-spacing:-.038em; margin:0 0 1.6rem; text-wrap:balance}
.entrada{font-size:clamp(1.0625rem,.9vw + .85rem,1.25rem); line-height:1.55; max-width:31em; margin:0 0 2.25rem; color:var(--ink-2)}
.accions{display:flex; flex-wrap:wrap; gap:.85rem}
.boto{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; padding:.95rem 1.5rem;
  border-radius:100px; font-weight:600; font-size:.9375rem; border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--e), box-shadow .35s var(--e), border-color .3s}
.boto--ple{background:var(--ink); color:var(--paper)}
.boto--ple:hover{transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(20,16,15,.55)}
.boto--fantasma{border-color:var(--rule)}
.boto--fantasma:hover{border-color:var(--ink); transform:translateY(-2px)}
.boto__fletxa{transition:transform .35s var(--e)}
.boto:hover .boto__fletxa{transform:translateX(4px)}
.peuheroi{display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; margin:2.5rem 0 0; padding-top:1.25rem;
  border-top:1px solid var(--rule); max-width:33rem; font-size:.8125rem; color:var(--ink-3); font-family:var(--mono)}
.peuheroi span:not(:last-child)::after{content:'·'; margin-left:1.25rem; opacity:.5}

.mot{position:relative; display:inline-block; width:var(--w,7ch); height:1em; overflow:hidden; transition:width .62s var(--e)}
.mot__item{position:absolute; left:0; top:0; white-space:nowrap; font-weight:700; color:var(--magenta-ink);
  transform:translateY(105%); opacity:0; transition:transform .62s var(--e), opacity .35s linear}
.mot__item.is-on{transform:translateY(0); opacity:1}
.mot__item.is-fora{transform:translateY(-105%); opacity:0}

/* ==========================================================================
   ELS MOTORS · filets
   Els mou un rellotge únic: un motor s'activa cada 2,2 s.
   ========================================================================== */
.costat{position:relative; min-height:23rem; display:flex; align-items:center}
.variant{position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; transition:opacity .45s var(--e)}
.variant.is-on{opacity:1; visibility:visible}
/* Els quatre filets fan 15,25rem. A l'escriptori la reserva de 23rem centra
   la columna dreta contra el text; al mòbil, apilada, només afegeix buit. */
@media (max-width:980px){ .costat{min-height:16rem; margin-top:2.5rem} }

.filets{width:100%}
.filet{display:flex; align-items:center; gap:1rem; padding:1.05rem .25rem; border-top:1px solid var(--rule)}
.filet:last-child{border-bottom:1px solid var(--rule)}
.filet__i{width:26px;height:26px;flex:none;border:1px solid var(--rule);border-radius:50%;
  display:grid;place-items:center; transition:background .45s var(--e), border-color .45s, transform .45s var(--e)}
.filet__i svg{opacity:0; transition:opacity .3s}
.filet.is-fet .filet__i{background:var(--magenta); border-color:var(--magenta)}
.filet.is-fet .filet__i svg{opacity:1}
.filet.is-actiu .filet__i{transform:scale(1.14)}
.filet__t{flex:1; font-size:.9375rem; transition:font-weight .3s}
.filet.is-actiu .filet__t{font-weight:600}
.filet__n{font-family:var(--mono); font-size:.6875rem; color:var(--ink-3); opacity:0; transition:opacity .45s}
.filet.is-fet .filet__n{opacity:1}

/* ==========================================================================
   EL SISTEMA · l'explorador
   Banda de tinta. Els tons de dins es deriven de la tinta, no són grisos
   nous. Sobre tinta el magenta arriba a 5,4:1 i es pot fer servir per a
   text; sobre paper no (3,4:1) i cal --magenta-ink.
   ========================================================================== */
:root{
  /* El paper apagat, per a text secundari SOBRE la banda de tinta. Venia de
     la fulla antiga de font/ i aquí no hi era: sense això tot el text
     secundari de la banda queia a negre sobre negre. 6,3:1 sobre tinta. */
  --ink-3-fosc:#9D938C;
  --ink-sup:#1E1917;
  --ink-sup-2:#272120;
  --ink-rule:#332C29;
  --ink-rule-2:#453B37;
  /* Corbes. Les de CSS són massa fluixes: no tenen el cop que fa que una
     animació sembli intencionada. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-full:cubic-bezier(.32,.72,0,1);
}

/* El fons ja no es pla: baixa del negre de la referencia fins al paper de
   l heroi. Es un degradat i no dues franjes perque s ha d estirar sol sigui
   quina sigui l alcada del contingut. El tram fosc arriba fins al 38 % perque
   el titular hi ha de caure sencer. */
.sistema{background:linear-gradient(180deg,
    var(--linear) 0%, var(--linear) 38%, var(--paper) 100%);
  color:var(--paper); padding-block:clamp(4.5rem,9vw,8rem); position:relative}

.sistema__cap{max-width:34rem; margin-bottom:clamp(2.5rem,5vw,4rem)}
.cella--fosc{color:var(--magenta)}
.cella--fosc::before{background:currentColor}
.sistema__titol{font-family:var(--display); font-weight:400; font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.03; letter-spacing:-.035em; margin:0; text-wrap:balance}

.sistema__reixa{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center}

/* --------------------------------------------------------------------------
   Les píndoles
   S'ajusten al seu text i en obrir-se es converteixen en targeta. Perquè
   l'amplada i l'alçada puguin animar han de ser dos valors en píxels, no
   «fit-content» i «auto»: els mesura el JavaScript. El detall va absolut
   perquè el seu text no infli l'amplada de la píndola tancada.
   -------------------------------------------------------------------------- */
.pastilles{display:flex; flex-direction:column; align-items:flex-start; gap:.85rem}

.past{
  position:relative; overflow:hidden; max-width:100%;
  width:var(--w-t,fit-content);
  height:var(--h-t,auto);
  background:rgb(251 250 248 / .06);
  border:1px solid rgb(251 250 248 / .10);
  border-radius:100px;
  transition:width 260ms var(--ease-full), height 260ms var(--ease-full),
             border-radius 240ms var(--ease-full), background-color 200ms ease,
             border-color 200ms ease;
}
.past[data-obert]{
  width:var(--w-o,100%); height:var(--h-o,auto);
  border-radius:18px;
  background:var(--ink-sup-2); border-color:rgb(251 250 248 / .16);
}
/* Estat de mesura: obert, sense transició i amb el detall en flux. */
.past.mesurant{transition:none !important; width:var(--w-o,100%); height:auto; border-radius:18px}
.past.mesurant .past__detall{position:static; opacity:1; margin-top:.55rem}

.past__cap{margin:0; font-size:inherit; font-weight:inherit; letter-spacing:normal}
.past__boto{display:flex; align-items:center; gap:.8rem; height:var(--h-boto);
  padding:0 1.5rem 0 .75rem; white-space:nowrap;
  transition:transform 140ms var(--ease-out)}
/* Oberta, la píndola segueix ajustada al seu text. */
.past[data-obert] .past__boto{width:fit-content}
.past__boto:active{transform:scale(.98)}

/* El «+» dins d'un cercle. En obrir-se gira i es converteix en «−». */
.past__mes{position:relative; flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid rgb(251 250 248 / .28);
  transition:border-color 200ms ease, background-color 200ms ease, transform 260ms var(--ease-full)}
.past__mes::before,.past__mes::after{content:''; position:absolute; inset:50% 7px auto;
  height:1px; background:var(--ink-3-fosc); transform:translateY(-.5px);
  transition:transform 260ms var(--ease-full), background-color 200ms ease}
.past__mes::after{transform:translateY(-.5px) rotate(90deg)}

.past__nom{font-size:1rem; font-weight:600; letter-spacing:-.012em; color:var(--ink-3-fosc);
  transition:color 200ms ease}

@media (hover:hover) and (pointer:fine){
  .past:hover{background:rgb(251 250 248 / .10)}
  .past:hover .past__nom{color:var(--paper)}
  .past:hover .past__mes{border-color:rgb(251 250 248 / .45)}
}

.past[data-obert] .past__nom{color:var(--paper)}
.past[data-obert] .past__mes{border-color:var(--magenta); background:var(--magenta); transform:rotate(180deg)}
.past[data-obert] .past__mes::before,
.past[data-obert] .past__mes::after{background:#fff}
.past[data-obert] .past__mes::after{transform:translateY(-.5px) rotate(0deg)}

/* A la referència la píndola oberta i el seu text són DUES caixes, no una:
   la píndola es queda com una píndola i el text baixa a un requadre propi.
   Per això el contenidor .past es torna transparent en obrir-se — segueix
   sent ell qui anima l'amplada i l'alçada, però ja no es veu. */
.past__detall{position:absolute; left:0; top:calc(var(--h-boto) + .55rem); width:100%;
  padding:1.05rem 1.25rem; border-radius:18px;
  opacity:0; pointer-events:none; transition:opacity 160ms ease}
.past[data-obert] .past__detall{opacity:1; pointer-events:auto; transition:opacity 240ms ease 140ms}
.past__detall p{font-size:.9375rem; line-height:1.6; color:var(--ink-3-fosc); margin:0}
.past__detall p+p{margin-top:.7rem}

/* Sobre la superfície elevada de la píndola oberta el magenta es queda a
   4,5:1 just per sota. Sobre la tinta pura sí que hi arriba (5,3:1), i per
   això la cella de la secció sí que és magenta i aquesta etiqueta no. */
.past__detall .dins b{color:var(--paper); font-weight:600}

/* --------------------------------------------------------------------------
   L'escenari
   Les peces s'apilen a la mateixa cel·la: en canviar, res es mou de lloc.
   La sortida és més ràpida que l'entrada.
   -------------------------------------------------------------------------- */
/* container-type perquè les peces reaccionin a l'espai que tenen i no a
   l'amplada de la finestra: quan la reixa es trenca als 980 px, l'escenari
   passa de 663 px a tot el contenidor sense que la finestra hi tingui res a
   veure. És l'únic número que els importa. */
.escenari{position:relative; display:grid; align-items:center; justify-items:center;
  container-type:inline-size; min-height:clamp(24rem,42vw,32rem);
  transition:height 340ms var(--ease-full)}
.peca{grid-area:1/1; width:100%; display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  opacity:0; visibility:hidden; transform:scale(.97) translateY(6px);
  transition:opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s linear 180ms}
/* Les peces que no es veuen surten del flux. Si no, la fila de la reixa la
   segueix marcant la més alta —el telèfon, 740 px— i la peça activa es
   quedava centrada dins d aquella alçada, sortint-se per baix del seu propi
   escenari i xocant amb el bloc de sota. */
.peca:not(.actiu){position:absolute; left:0; right:0; top:0}
.peca.actiu{opacity:1; visibility:visible; transform:none;
  transition:opacity 260ms ease 60ms, transform 340ms var(--ease-out) 60ms, visibility 0s}

/* Els passos del relat. Només s'amaguen si el JS ha pres el control: si no
   arriba, tot es veu al seu estat final i no es perd cap frase. */
[data-preparat] [data-t]{opacity:0; transform:translateY(8px) scale(.985);
  transition:opacity 380ms var(--ease-out), transform 420ms var(--ease-out)}
[data-preparat] [data-t].vist{opacity:1; transform:none}
[data-preparat] [data-t-fi]{transition:opacity 240ms ease, transform 300ms var(--ease-out)}
[data-preparat] [data-t-fi].fora{opacity:0; transform:translateY(-5px) scale(.97); pointer-events:none}

.peu-peca{font-size:.875rem; line-height:1.55; color:var(--ink-3-fosc); text-align:center; max-width:26rem; margin:0}
.peu-peca .xifra{color:var(--paper); font-weight:600}

.pendent{display:flex; flex-direction:column; gap:.6rem; text-align:center;
  font-family:var(--mono); font-size:.75rem; color:var(--ink-3-fosc);
  padding:3rem 2rem; border:1px dashed var(--ink-rule-2); border-radius:10px; margin:0}
.pendent b{font-family:var(--display); font-size:1.5rem; font-weight:700;
  letter-spacing:-.03em; color:var(--paper)}

/* --------------------------------------------------------------------------
   PEÇA 1 · El mòbil
   L'objecte lluminós sobre el teatre fosc: la pantalla va en paper i és
   l'únic clar de tota la banda.
   -------------------------------------------------------------------------- */
/* El xat: el color de la bombolla de sortida és el magenta de la marca, no
   el blau d'Apple. El gris és el client i el magenta ets tu contestant.
   Blanc sobre --magenta-ink dona 6:1; sobre --magenta es quedaria a 3,6:1. */
:root{
  --xat-fons:#ffffff;
  --bafa-entra:#e9e9eb;
  --bafa-surt:var(--magenta-ink);
}

.mobil{position:relative; width:min(20rem,100%); padding:7px; border-radius:3rem;
  background:linear-gradient(150deg,#d8d9df,#8f929c 22%,#e8e9ee 48%,#84878f 78%,#cfd1d8);
  box-shadow:0 2.5rem 5rem -1.5rem rgb(0 0 0 / .75)}

/* Els botons del lateral: silenci i volum a l'esquerra, engegada a la dreta. */
.mobil__rail{position:absolute; top:5.5rem; display:flex; flex-direction:column; gap:.55rem}
.mobil__rail i{display:block; width:2px; border-radius:2px; background:#7e818a}
.mobil__rail--e{left:-2px}
.mobil__rail--e i:nth-child(1){height:1.1rem}
.mobil__rail--e i:nth-child(2){height:1.9rem}
.mobil__rail--e i:nth-child(3){height:1.9rem}
.mobil__rail--d{right:-2px; top:7rem}
.mobil__rail--d i{height:3rem}

/* Proporció real d'un telèfon. El xat s'estira per omplir el que sobra
   després de la barra d'estat, la capçalera, el camp i la barra d'inici. */
.mobil__pantalla{position:relative; border-radius:2.6rem; overflow:hidden;
  background:var(--xat-fons); display:flex; flex-direction:column;
  aspect-ratio:9 / 19.5}

.mobil__illa{position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
  width:5rem; height:1.4rem; border-radius:100px; background:#000; z-index:4}
.mobil__estat{display:flex; justify-content:space-between; align-items:center;
  padding:.65rem 1.35rem .35rem; font-size:.6875rem; font-weight:600; color:#000}
.mobil__icones{display:flex; align-items:center; gap:.3rem}
.ic-senyal{display:flex; gap:1.5px; align-items:flex-end}
.ic-senyal b{display:block; width:2.5px; background:#000; border-radius:.5px}
.ic-senyal b:nth-child(1){height:3px}
.ic-senyal b:nth-child(2){height:5px}
.ic-senyal b:nth-child(3){height:7px}
.ic-senyal b:nth-child(4){height:9px}
.ic-wifi{width:11px; height:8px; background:#000;
  clip-path:polygon(50% 100%,0 38%,12% 26%,50% 62%,88% 26%,100% 38%)}
.ic-bat{width:19px; height:9px; border:1px solid rgb(0 0 0 / .4); border-radius:2.5px; position:relative}
.ic-bat::before{content:''; position:absolute; inset:1.5px; background:#000; border-radius:1px}
.ic-bat::after{content:''; position:absolute; right:-3px; top:50%; transform:translateY(-50%);
  width:1.5px; height:3px; border-radius:0 1px 1px 0; background:rgb(0 0 0 / .4)}

/* La capçalera d'iMessage: fletxa a l'esquerra, contacte al centre amb el
   seu nom a sota, i la càmera a la dreta. */
.xat__cap{position:relative; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:.35rem .9rem .5rem;
  background:linear-gradient(180deg,#eef1f6,#f7f8fa); border-bottom:1px solid #dcdde1}
.xat__enrere{width:9px; height:9px; border-left:2px solid var(--magenta-ink);
  border-bottom:2px solid var(--magenta-ink); transform:rotate(45deg); border-radius:1px}
.xat__contacte{display:flex; flex-direction:column; align-items:center; gap:.15rem}
.avatar{position:relative; width:2.35rem; height:2.35rem; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(150deg,var(--magenta),var(--magenta-ink));
  color:#fff; font-family:var(--display); font-size:.75rem; font-weight:700; letter-spacing:.01em}
.xat__nom{display:flex; align-items:center; gap:.2rem; font-size:.625rem; color:#000}
.xat__nom i{width:4px; height:4px; border-top:1px solid #8a8a8e; border-right:1px solid #8a8a8e;
  transform:rotate(45deg)}
.xat__video{justify-self:end; width:17px; height:11px; border-radius:3px; background:var(--magenta-ink);
  position:relative}
.xat__video::after{content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-right-color:var(--magenta-ink); border-left:0}

/* Alçada fixa i contingut arrapat a baix: els missatges nous empenyen els
   vells cap amunt i se'n van per la vora, com qualsevol conversa oberta pel
   final. La màscara evita el tall recte. */
.xat__cos{position:relative; flex:1; min-height:0; overflow:hidden;
  padding:.8rem .7rem .5rem; background:var(--xat-fons);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%)}

/* La pista: la conversa creix cap avall i, quan no hi cap, es desplaça cap
   amunt. És el scroll del telèfon, fet amb transform perquè vagi per la
   targeta gràfica i no per disseny i pintura. */
.xat__pista{display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  transition:transform 620ms var(--ease-out); will-change:transform}

/* Els missatges que encara no han arribat no ocupen lloc: si no, empenyen
   els que sí que hi són i la conversa arrenca des de baix en comptes de
   des de dalt. El JS els torna al flux just abans d'ensenyar-los. */
[data-preparat] .xat__pista [data-t]{display:none}
[data-preparat] .xat__pista [data-t].posat{display:block}

/* L'indicador d'«escrivint» gastat es tornava invisible però es quedava
   ocupant el seu lloc, i això obria un forat gros just abans de cada
   resposta: la separació entre bombolles sortia desigual. Quan marxa, marxa
   del tot. A un xat de veritat el missatge també el substitueix de cop. */
[data-preparat] .xat__pista .bafa--escriu.fora{display:none}

.xat__dia{align-self:center; flex:none; margin:0 0 .35rem; font-size:.5625rem; color:#8a8a8e}
.xat__dia b{color:#8a8a8e; font-weight:600}

.bafa{position:relative; max-width:78%; flex:none; padding:.4rem .7rem .45rem;
  border-radius:1.1rem; font-size:.8125rem; line-height:1.32; z-index:1}

/* La cua de la bombolla: una peça del color de la bombolla i una altra del
   color del fons que la retalla. És el que la fa semblar iMessage i no una
   caixa rodona qualsevol. */
.bafa--entra,.bafa--surt{margin-bottom:.05rem}
.bafa--entra::before,.bafa--surt::before,
.bafa--entra::after,.bafa--surt::after{content:''; position:absolute; bottom:0; width:.85rem; height:1.1rem}

.bafa--entra{background:var(--bafa-entra); color:#000; transform-origin:0 100%}
.bafa--entra::before{left:-.4rem; background:var(--bafa-entra); border-bottom-right-radius:1rem; z-index:-1}
.bafa--entra::after{left:-.85rem; background:var(--xat-fons); border-bottom-right-radius:.6rem; z-index:-1}

.bafa--surt{align-self:flex-end; background:var(--bafa-surt); color:#fff; transform-origin:100% 100%}
.bafa--surt::before{right:-.4rem; background:var(--bafa-surt); border-bottom-left-radius:1rem; z-index:-1}
.bafa--surt::after{right:-.85rem; background:var(--xat-fons); border-bottom-left-radius:.6rem; z-index:-1}

.bafa--escriu{display:flex; gap:4px; align-items:center; padding:.6rem .75rem;
  background:var(--bafa-entra)}
.bafa--escriu i{width:6px; height:6px; border-radius:50%; background:#8a8a8e;
  animation:bategar 1.15s var(--ease-out) infinite}
.bafa--escriu i:nth-child(2){animation-delay:.16s}
.bafa--escriu i:nth-child(3){animation-delay:.32s}
@keyframes bategar{0%,64%,100%{opacity:.35; transform:translateY(0)} 32%{opacity:1; transform:translateY(-2px)}}

.segell{align-self:center; flex:none; margin:.45rem 0 0; padding:.3rem .7rem; border-radius:100px;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.02em;
  color:var(--magenta-ink); background:#fbe4ec}

.xat__peu{padding:.4rem .7rem .3rem; background:var(--xat-fons)}
.xat__camp{display:block; padding:.4rem .8rem; border-radius:100px;
  /* El gris del iOS de veritat es #8a8a8e i es queda a 3,44:1. Aqui es text
     de debo dins d una il lustracio, aixi que baixa a #6b6b70 i arriba a 5,1. */
  border:1px solid #dcdde1; font-size:.75rem; color:#6b6b70}
.mobil__barra{display:block; width:35%; height:4px; border-radius:100px;
  background:#000; margin:.35rem auto .5rem}

/* --------------------------------------------------------------------------
   Tancament
   -------------------------------------------------------------------------- */
/* Aquest bloc queda al final de la seccio, o sigui sobre el paper on acaba el
   degradat. Abans anava en blanc sobre tinta; alla ara hi ha paper i s hauria
   quedat invisible. Per aixo passa a tinta, filet i gris de paper. */
.a-mida{margin-top:clamp(3rem,6vw,5rem); padding-top:1.75rem; border-top:1px solid var(--rule);
  color:var(--ink);
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(1rem,4vw,3.5rem)}
.a-mida h3{font-family:var(--display); font-size:1.15rem; font-weight:700; letter-spacing:-.025em; margin:0}
.a-mida p{font-size:.875rem; line-height:1.6; color:var(--ink-2); max-width:34rem; margin:0}

/* --------------------------------------------------------------------------
   Sense JavaScript: el text es llegeix sencer.
   -------------------------------------------------------------------------- */
html:not(.js) .past{width:100%; height:auto; border-radius:18px; background:var(--ink-sup-2)}
html:not(.js) .past__detall{position:static; opacity:1; padding-top:0}
html:not(.js) .past__mes{display:none}
html:not(.js) .past__boto{padding-left:1.15rem; cursor:default}
html:not(.js) .escenari{display:none}

/* --------------------------------------------------------------------------
   Mòbil
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .sistema__reixa,.a-mida{grid-template-columns:minmax(0,1fr)}
  /* L'escenari baixa al flux i el JS el col·loca just sota la píndola
     oberta. Així el telèfon hi cap sencer i no cal retallar-lo per encabir-lo
     en una franja enganxada a dalt. */
  .escenari{min-height:0; margin:1.25rem 0 .5rem}
  .pastilles{align-items:stretch}
  /* L'amplada del mòbil no fa créixer l'alçada —el xat la té fixa— així que
     es pot eixamplar per donar aire a les bombolles sense que l'escenari
     passi de la meitat de la pantalla. */
  /* Amb l'escenari al flux, el telèfon ja no compateix per l'alçada de la
     pantalla: va a proporció real, igual que a l'escriptori. */
  .mobil{width:min(17rem,100%); padding:6px; border-radius:2.5rem}
  .mobil__pantalla{border-radius:2.1rem}
  .mobil__illa{width:4.4rem; height:1.2rem; top:.45rem}
  .mobil__estat{padding:.5rem 1rem .3rem; font-size:.625rem}
  .avatar{width:1.9rem; height:1.9rem; font-size:.625rem}
  .xat__pista{gap:.25rem}
  .bafa{font-size:.75rem; max-width:82%}
  .peca{gap:.9rem}
  .peu-peca{font-size:.8125rem}
  .pendent{padding:2rem 1.25rem}
  .pendent b{font-size:1.15rem; overflow-wrap:break-word}
}

@media (max-width:520px){
  .sistema__titol{font-size:1.75rem}
  .past__detall p{padding-left:1.35rem}
}

/* La regla de pantalles curtes ja no cal: l'escenari va al flux i no
   competeix per l'alçada de la finestra. */

@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important} }

/* ==========================================================================
   LES PECES 2, 3 i 4 DE L EXPLORADOR
   Ve de provatures/peces.html, aprovat al banc de proves. Les regles
   compartides dels passos (data-t / data-t-fi) i el moviment reduit ja
   son mes amunt en aquest mateix fitxer i no es dupliquen.
   ========================================================================== */
/* --------------------------------------------------------------------------
   EL PANELL — base compartida de les peces 2, 3 i 4
   La peça 1 és un telèfon perquè és la banda del client. Aquestes són la
   teva. Es queden clares, com la pantalla del mòbil: l'objecte lluminós
   sobre el teatre fosc és el que uneix tot l'escenari.
   -------------------------------------------------------------------------- */
.panell{width:min(40rem,100%); background:#fff; color:var(--ink); border-radius:14px;
  overflow:hidden; text-align:left;
  box-shadow:0 1.5rem 3.5rem -1rem rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .07)}

.panell__cap{display:flex; align-items:baseline; gap:.6rem;
  padding:.75rem .9rem; border-bottom:1px solid var(--rule)}
.panell__titol{font-family:var(--display); font-weight:700; font-size:.9375rem;
  letter-spacing:-.02em; margin:0; text-wrap:balance}
.panell__sub{font-size:.75rem; color:var(--ink-3); margin:0 0 0 auto;
  font-variant-numeric:tabular-nums}

/* Tota columna de xifres va amb amplada de dígit fixa: si no, les hores i els
   desfasaments ballen d'una fila a l'altra i es nota encara que no se sàpiga
   per què. */
.ag__hores span,.ag__ev .h,.ag__xip,.ag__dia-cap b,
.fx__fila span,.sg__quan{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   PEÇA 2 · L'agenda s'omple sola
   Una setmana de dilluns a divendres, de 9 a 16. El llenguatge de color ve
   de material web/Agenda crm.png: bloc tenyit, punt, hora en mono.
   -------------------------------------------------------------------------- */
.ag{--fila:44px; --gutt:34px; padding:.7rem .8rem .9rem}

.ag__dies{display:grid; grid-template-columns:var(--gutt) repeat(5,minmax(0,1fr));
  margin-bottom:.3rem}
.ag__dia-cap{text-align:center; font-size:.75rem; color:var(--ink-3); line-height:1.35}
.ag__dia-cap b{display:block; font-family:var(--display); font-size:.8125rem;
  font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}

.ag__cos{display:grid; grid-template-columns:var(--gutt) repeat(5,minmax(0,1fr))}

.ag__hores{display:grid; grid-template-rows:repeat(8,var(--fila))}
.ag__hores span{font-family:var(--mono); font-size:.75rem; color:var(--ink-3);
  text-align:right; padding-right:.4rem; transform:translateY(-.4em)}

/* Cada dia és una columna amb les seves ratlles pintades al fons: 8 divs
   buits per columna serien 40 elements que no diuen res. */
.ag__col{position:relative; height:calc(8 * var(--fila));
  border-left:1px solid var(--rule);
  background-image:repeating-linear-gradient(to bottom,
    var(--rule) 0 1px, transparent 1px var(--fila))}
.ag__col:last-child{border-right:1px solid var(--rule)}

/* Els blocs. --h és l'hora comptada des de les 9. */
.ag__ev{position:absolute; left:2px; right:2px; top:calc(var(--h) * var(--fila) + 2px);
  height:calc(var(--fila) - 5px); border-radius:6px; padding:.25rem .4rem;
  overflow:hidden; line-height:1.25}
.ag__ev .h{display:block; font-family:var(--mono); font-size:.75rem; color:var(--ink-3)}
.ag__ev .q{display:block; font-size:.75rem; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* El que ja tenies. Gris de paper: és el fons de la teva setmana, no el tema. */
.ag__ev--teu{background:var(--paper-2); border-left:2px solid var(--paper-3)}

/* L'hora que s'apunta a mà. Mateix gris, però amb el punt buit, perquè es
   noti que no ve del sistema. */
.ag__ev--ma{background:var(--paper-2); border-left:2px dashed var(--ink-3)}

/* La cita que entra sola: l'únic magenta ple de tot el panell. Ocupa hora i
   mitja, que és el que dura una visita, i per això té lloc per a tres línies. */
.ag__ev--nova{height:calc(var(--fila) * 1.5 - 5px); background:var(--magenta-ink);
  color:#fff; border-left:2px solid var(--magenta);
  transform-origin:50% 0; z-index:2}
/* .8 donava 4,28:1 i .82 donava 4,44:1 — tots dos per sota del 4,5 que
   demana AA a 12 px. A .88 es queda a 4,9 i encara es llegeix com a segon
   nivell respecte del nom, que va en blanc ple. */
.ag__ev--nova .h{color:rgb(255 255 255 / .88)}

/* Els forats que el sistema veu lliures. */
.ag__lliure{position:absolute; left:2px; right:2px; top:calc(var(--h) * var(--fila) + 2px);
  height:calc(var(--fila) - 5px); border-radius:6px;
  border:1px dashed var(--magenta); background:rgb(244 65 126 / .07)}

/* La posició de cada cita a la graella és fixa i no la mou cap animació, així
   que és una classe i no un style="--h:N" inline: la CSP del lloc publicat no
   permet style-src 'unsafe-inline'. */
.h0{--h:0} .h1{--h:1} .h2{--h:2} .h3{--h:3}
.h4{--h:4} .h5{--h:5} .h6{--h:6}

/* L'avís que s'enganxa a la cita: tercera línia de dins del bloc, perquè
   recordar-la és una propietat de la cita, no una nota que hi va al costat.
   És la primera fila de la cua de la peça 4. */
.ag__avis{display:block; font-size:.75rem; color:rgb(255 255 255 / .88);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Aquí les <i> no volen dir cursiva: unes són formes dibuixades (el rombe, el
   punt) i les altres serveixen per amagar paraules al mòbil. El navegador les
   inclina pel seu compte, i això no ho detecta cap mesura d'amplada. */
.ag__avis i,.fx__rombe,.fx__punt,.fx__estat i,.sg__xip i{font-style:normal}

/* Les hores ofertes, sota la graella. */
.ag__ofertes{margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--rule)}
.ag__ofertes-cap{margin:0 0 .45rem; font-size:.75rem; color:var(--ink-3)}
.ag__xips{display:flex; flex-wrap:wrap; gap:.35rem}
.ag__xip{font-family:var(--mono); font-size:.75rem; padding:.28rem .5rem;
  border:1px solid var(--rule); border-radius:99px; color:var(--ink-2);
  transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease}
.ag__xip.triat{background:var(--magenta-ink); border-color:var(--magenta-ink); color:#fff}
.ag__xip.mort{text-decoration:line-through; color:var(--ink-3); opacity:.55}

/* --------------------------------------------------------------------------
   PEÇA 3 · Gestiona els teus clients — la fitxa
   No és el tauler sencer: és una fitxa a mida real. I els sis camps que
   s'omplen sols són, literalment, les respostes de la conversa de la peça 1.
   -------------------------------------------------------------------------- */
.fx{padding:.9rem 1rem 1rem}

.fx__cap{display:flex; align-items:center; gap:.7rem; padding-bottom:.85rem;
  border-bottom:1px solid var(--rule)}
.fx__avatar{flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--paper-2); display:grid; place-items:center}
/* El mateix rombe de la marca que hi ha a la barra de dalt de la web. */
.fx__rombe{width:15px; height:15px; background:var(--magenta-ink);
  transform:rotate(45deg); border-radius:3px}
.fx__qui{flex:1; min-width:0}
.fx__nom{display:block; font-family:var(--display); font-size:1rem; font-weight:700;
  letter-spacing:-.02em; line-height:1.25}
.fx__sub{display:block; font-size:.75rem; color:var(--ink-3); line-height:1.45}

/* El xip d'estat canvia de paraula sense canviar de mida: «Qualificat» va en
   flux i marca l'amplada, «Nou» s'hi superposa. Si no, el xip fa un salt just
   quan l'ull hi és a sobre. */
.fx__estat{flex:none; position:relative; font-size:.75rem; padding:.24rem .6rem;
  border-radius:99px; background:var(--paper-2); color:var(--ink-2);
  transition:background-color 240ms ease, color 240ms ease}
.fx__estat i{font-style:normal; transition:opacity 220ms ease}
.fx__estat .b{opacity:0}
.fx__estat .a{position:absolute; inset:0; display:grid; place-items:center}
.fx__estat.ok{background:var(--magenta-ink); color:#fff}
.fx__estat.ok .a{opacity:0}
.fx__estat.ok .b{opacity:1}

.fx__dades{display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.2rem;
  margin:.9rem 0 0; padding:0}
.fx__camp{min-width:0}
.fx__camp dt{font-size:.75rem; color:var(--ink-3); line-height:1.3; margin-bottom:.2rem}
/* El valor va en flux encara que no es vegi: així la fitxa ja té la seva
   alçada definitiva des del primer fotograma i res no salta en omplir-se. */
.fx__camp dd{position:relative; margin:0; font-size:.8125rem; font-weight:600;
  line-height:1.3; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* El buit: una ratlla de punts a la línia de base. És l'esquelet de tota la
   vida, i diu «aquí hi anirà una cosa» sense dir quina. */
.fx__buit{position:absolute; left:0; right:12%; bottom:.22em; height:2px;
  background:repeating-linear-gradient(to right,
    var(--paper-3) 0 5px, transparent 5px 9px)}

.fx__hist{margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--rule)}
.fx__hist-cap{margin:0 0 .5rem; font-size:.75rem; color:var(--ink-3)}
.fx__fila{display:flex; align-items:baseline; gap:.55rem; padding:.3rem 0}
.fx__punt{flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--paper-3); transform:translateY(-1px)}
.fx__fila--ara .fx__punt{background:var(--magenta-ink)}
.fx__fila b{font-size:.8125rem; font-weight:600; letter-spacing:-.01em}
.fx__fila span{margin-left:auto; padding-left:.5rem; font-family:var(--mono);
  font-size:.75rem; color:var(--ink-3); white-space:nowrap}

/* --------------------------------------------------------------------------
   PEÇA 4 · Seguiment automàtic — la cua
   Cinc missatges penjats de tres ancoratges. L'eix de temps no és un element
   que viatja: és el filet de l'esquerra de cada fila, que s'encén quan el
   temps hi arriba. Discret, i es pot parar a qualsevol instant.
   -------------------------------------------------------------------------- */
.sg{padding:.85rem 1rem 1rem}

.sg__ancora{display:flex; align-items:center; gap:.6rem; margin:.85rem 0 .3rem;
  font-size:.75rem; color:var(--ink-3)}
.sg__ancora:first-child{margin-top:.15rem}
.sg__ancora::after{content:''; flex:1; height:1px; background:var(--rule)}

.sg__fila{position:relative; display:grid; gap:.15rem .7rem; padding:.45rem 0 .45rem .75rem;
  grid-template-columns:5.5rem minmax(0,1fr) auto; align-items:baseline}
/* El segment d'eix d'aquesta fila. */
.sg__fila::before{content:''; position:absolute; left:0; top:2px; bottom:2px; width:2px;
  border-radius:2px; background:var(--paper-3); transition:background-color 300ms ease}
.sg__fila.enviat::before{background:var(--magenta-ink)}
/* La fila aturada NO s'apaga amb opacitat. Abaixar l'opacitat de tota la fila
   barreja el text amb el blanc de sota i el contrast cau a 2,6:1 — i el
   missatge que no surt és justament el que ha d'entendre's. Es recula amb
   color explícit, que es queda a 5,7:1, i amb la ratlla i el xip. */

.sg__quan{font-family:var(--mono); font-size:.75rem; color:var(--ink-3)}
.sg__que{min-width:0}
/* La ratlla hi és des del principi, en transparent: així el tatxat es pot
   animar de color en comptes d'aparèixer de cop, que és el que passa si
   s'afegeix text-decoration-line a mitja transició. */
.sg__text{display:block; font-size:.8125rem; line-height:1.4; letter-spacing:-.01em;
  text-decoration-line:line-through; text-decoration-thickness:1px;
  text-decoration-color:transparent;
  transition:text-decoration-color 260ms ease, color 260ms ease}
.aturat .sg__text{text-decoration-color:var(--ink-3); color:var(--ink-3)}
.sg__motiu{display:block; font-family:var(--mono); font-size:.75rem;
  color:var(--ink-3); margin-top:.15rem}

/* Tres estats en un xip que no canvia d'amplada: «Programat» és el més llarg
   i va en flux; els altres dos s'hi superposen. */
.sg__xip{position:relative; justify-self:end; font-size:.75rem; padding:.2rem .55rem;
  border-radius:99px; border:1px solid var(--rule); color:var(--ink-3);
  transition:background-color 260ms ease, border-color 260ms ease, color 260ms ease}
.sg__xip i{font-style:normal; transition:opacity 220ms ease}
.sg__xip .b,.sg__xip .c{position:absolute; inset:0; display:grid; place-items:center; opacity:0}
.enviat .sg__xip{background:var(--magenta-ink); border-color:var(--magenta-ink); color:#fff}
.enviat .sg__xip .a,.aturat .sg__xip .a{opacity:0}
.enviat .sg__xip .b{opacity:1}
.aturat .sg__xip .c{opacity:1}

/* La resposta del client, amb la mateixa bombolla grisa de la peça 1. */
.sg__resposta{margin:.5rem 0 .2rem .75rem; padding-left:.75rem;
  border-left:2px solid var(--paper-3)}
.sg__resposta b{display:block; font-size:.75rem; color:var(--ink-3); font-weight:400;
  margin-bottom:.28rem}
.sg__bafa{display:inline-block; margin:0; max-width:100%; padding:.4rem .65rem;
  border-radius:14px 14px 14px 4px; background:var(--bafa-entra);
  font-size:.8125rem; line-height:1.35; color:var(--ink)}

/* --------------------------------------------------------------------------
   Al mòbil la setmana es queda en tres dies. La història no en depèn:
   passa tota entre dimecres i dijous.
   -------------------------------------------------------------------------- */
/* Consulta de contenidor i no de finestra: la peça ha de reaccionar a
   l'espai que té, no a l'amplada del navegador. A l'escriptori l'escenari
   fa 663 px; quan la reixa es trenca als 980 px, es queda a l'amplada del
   contenidor. Aquest és l'únic número que li importa. */
@container (max-width:420px){

  .ag{--fila:42px; --gutt:28px}
  .ag__dies,.ag__cos{grid-template-columns:var(--gutt) repeat(3,minmax(0,1fr))}
  .ag__dia-cap[data-fora],.ag__col[data-fora]{display:none}

  /* La fitxa: els camps a una columna. Dos de 12 px no hi caben. */
  .fx__dades{grid-template-columns:minmax(0,1fr); gap:.65rem}

  /* La cua: l'hora puja a la mateixa línia que el xip, i el missatge ocupa
     tota l'amplada a sota. Amb tres columnes, el text es quedava en 100 px. */
  .sg__fila{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'quan xip' 'que que'; gap:.3rem .6rem}
  .sg__quan{grid-area:quan}
  .sg__xip{grid-area:xip}
  .sg__que{grid-area:que}
  /* Amb columnes de 70 px l'avís sencer no hi cap. Es queda amb el que
     importa —quan— i perd les paraules que ja s'endevinen. */
  .ag__avis i{display:none}
}

/* A 320 px falten set píxels perquè hi càpiga «Marta Puig», i el nom del
   client és justament el que no es pot tallar. Es guanyen estrenyent els
   marges de dins, que a aquesta amplada ja no fan cap falta. */
@container (max-width:300px){
  .ag{--gutt:22px; padding-inline:.5rem}
  .ag__ev,.ag__lliure{left:1px; right:1px}
  .ag__ev{padding-inline:.25rem}
}

/* La cita nova no entra des d'avall com la resta: creix des del seu forat.
   L'origen ja el fixa .ag__ev--nova; això és el punt de partida. */
[data-preparat] .ag__ev--nova{transform:translateY(-6px) scale(.94)}

/* ==========================================================================
   LA PECA 5 DE L EXPLORADOR - la web on aterra tot
   Ve de provatures/peces.html, aprovada al banc.
   ========================================================================== */
/* --------------------------------------------------------------------------
   PEÇA 5 · La web on aterra tot
   La cinquena silueta: una finestra de navegador. A dins NO hi ha un esquema,
   hi ha la demo de fusteria tal com és — foto a sangre, vel fosc, or i la
   targeta de promeses. Els colors d'aquí dins són els del client, no els de
   Deriva: és la seva web, i ha de semblar-ho.

   Les fotos venen de la demo (banc d'imatges Pexels, ús comercial permès i
   sense atribució obligatòria), retallades i recomprimides: 304 kB → 59 kB.

   L'única cosa que no és igual és la tipografia dels titulars: la demo fa
   servir Montserrat i aquí es fa servir la Schibsted Grotesk, que ja està
   carregada. A 13 px no es distingeixen i estalvia una font sencera.
   -------------------------------------------------------------------------- */
.web{
  --d-os:#faf9f7; --d-linia:#e6e4e0; --d-negre:#111; --d-tinta:#222;
  --d-tinta-2:#54595f; --d-or:#d09a40; --d-or-clar:#f6efe2; --d-or-fosc:#8a6318;
  padding:0; background:var(--d-os)
}

.web__barra{display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem;
  background:var(--paper-2); border-bottom:1px solid var(--rule)}
.web__punts{display:flex; gap:.3rem; flex:none}
.web__punts i{width:8px; height:8px; border-radius:50%; background:var(--paper-3)}
.web__url{flex:1; min-width:0; display:flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--rule); border-radius:99px;
  padding:.18rem .6rem; font-family:var(--mono); font-size:.75rem; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.web__pany{flex:none; width:7px; height:6px; border-radius:1px;
  background:var(--ink-3); position:relative; margin-top:3px}
.web__pany::before{content:''; position:absolute; left:1px; right:1px; bottom:5px;
  height:4px; border:1px solid var(--ink-3); border-bottom:0; border-radius:3px 3px 0 0}

.web__finestra{position:relative; height:21.5rem; overflow:hidden; background:var(--d-os)}
/* El tall de dalt cauria enmig d'una línia i es llegiria com un error. El
   degradat el converteix en el que és: que la pàgina continua amunt. */
.web__finestra::before{content:''; position:absolute; top:0; left:0; right:0;
  height:2.2rem; z-index:2; pointer-events:none;
  background:linear-gradient(var(--d-os) 18%, rgb(250 249 247 / 0))}
/* Els percentatges de translate van sobre la mida del propi element: això
   encaixa el peu de la pàgina amb el peu de la finestra sigui quina sigui
   l'alçada del text. Al mòbil, on tot embolica més línies, segueix caient bé. */
.web__pagina{transition:transform 1010ms var(--ease-full)}
.web__pagina.avall{transform:translateY(calc(21.5rem - 100%))}

/* ---- La barra de navegació del client ---- */
.web__nav{display:flex; align-items:center; gap:.55rem; padding:.5rem .8rem;
  border-bottom:1px solid var(--d-linia); background:#fff}
.web__marca{font-family:var(--display); font-size:.75rem; font-weight:700;
  letter-spacing:.06em; color:var(--d-negre); text-transform:uppercase}
.web__menu{display:flex; gap:.6rem; margin-left:auto; font-size:.75rem;
  color:var(--d-tinta-2)}

/* ---- L'heroi: foto a sangre i vel fosc, com a la demo ---- */
.web__heroi{position:relative; padding:1.1rem .8rem 1.2rem; overflow:hidden;
  color:#fff; isolation:isolate}
.web__fons{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2}
/* El vel. La zona densa arriba fins al 55 % perquè és fins on estira el
   titular: el text va sobre una fotografia, i el contrast d una fotografia
   no es pot calcular. Amb .82 el pitjor cas (una foto quasi blanca a sota)
   deixa l or a 5:1 i el blanc molt per sobre. */
.web__vel{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgb(17 17 17 / .82) 0 55%, rgb(17 17 17 / .34) 100%)}

.web__reixa{display:grid; gap:.7rem; align-items:start}
.web__sobre{display:block; font-size:.75rem; letter-spacing:.04em; color:var(--d-or);
  margin-bottom:.3rem}
.web__h1{font-family:var(--display); font-size:1.0625rem; font-weight:700;
  letter-spacing:-.022em; line-height:1.2; margin:0 0 .4rem; text-wrap:balance}
.web__h1 em{display:block; font-style:normal; color:var(--d-or)}
.web__lede{font-size:.75rem; line-height:1.5; color:#d8d5d0; margin:0 0 .7rem}
.web__accions{display:flex; gap:.4rem; flex-wrap:wrap; margin:0}

/* La targeta de promeses de la demo. */
.web__targeta{background:rgb(255 255 255 / .95); color:var(--d-tinta);
  border-radius:6px; padding:.6rem .7rem}
.web__targeta h5{font-family:var(--display); font-size:.8125rem; font-weight:700;
  letter-spacing:-.015em; color:var(--d-negre); margin:0 0 .4rem}
.web__targeta ul{list-style:none; margin:0; padding:0; display:grid; gap:.3rem}
.web__targeta li{display:flex; gap:.35rem; font-size:.75rem; line-height:1.35;
  color:var(--d-tinta-2)}
.web__tic{flex:none; width:11px; height:11px; margin-top:2px; color:var(--d-or)}

/* ---- Els serveis, amb les seves fotos ---- */
.web__serveis{padding:.9rem .8rem 1rem; background:#fff;
  border-bottom:1px solid var(--d-linia)}
.web__sec-cap{font-family:var(--display); font-size:.9375rem; font-weight:700;
  letter-spacing:-.02em; color:var(--d-negre); margin:0 0 .55rem}
.web__cartes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem}
.web__carta{min-width:0}
.web__carta img{display:block; width:100%; height:3.1rem; object-fit:cover;
  border-radius:5px; margin-bottom:.3rem}
.web__carta span{display:block; font-size:.75rem; font-weight:600; color:var(--d-tinta);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- El formulari ---- */
.web__form{padding:.9rem .8rem 3.5rem; background:var(--d-os)}
.web__camp{position:relative; border:1px solid var(--d-linia); border-radius:6px;
  padding:.36rem .55rem; margin:0 0 .35rem; font-size:.75rem; line-height:1.3;
  background:#fff; color:var(--d-tinta);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color 240ms ease}
.web__ajuda{position:absolute; inset:.36rem auto auto .55rem; color:var(--d-tinta-2);
  font-style:normal}
.web__camp.ple{border-color:var(--d-or)}

/* El rebut ocupa el lloc exacte del botó: tots dos dins de la mateixa caixa,
   el rebut en flux marcant l'alçada i el botó a sobre. Així no hi ha cap salt. */
.web__final{position:relative}
.web__final .web__accions{position:absolute; inset:0; transition:opacity 260ms ease}
.web__rebut{padding:.6rem .7rem; border-radius:6px; background:var(--d-or-clar);
  border-left:2px solid var(--d-or); font-size:.75rem; line-height:1.4;
  color:var(--d-or-fosc); margin:0}
.web__rebut b{display:block; color:var(--d-negre); font-size:.8125rem; margin-bottom:.1rem}

/* ---- Els botons del client ---- */
.web__btn{position:relative; font-size:.75rem; font-weight:600; padding:.34rem .7rem;
  border-radius:4px; white-space:nowrap}
.web__btn--or{background:var(--d-or); color:var(--d-negre)}
.web__btn--clar{background:rgb(255 255 255 / .92); color:var(--d-negre)}
.web__btn--vora{border:1px solid var(--d-linia); background:#fff; color:var(--d-tinta)}
/* El cèrcol NO és del client: és Deriva assenyalant. Per això va en magenta i
   no en or, i per això apareix a totes tres alhora i s'hi queda. */
.web__btn::after{content:''; position:absolute; inset:-3px; border-radius:6px;
  border:2px solid var(--magenta); opacity:0; transition:opacity 300ms ease}
.web__btn.crida::after{opacity:1}

/* La barra enganxada a baix. */
.web__peu{position:absolute; left:0; right:0; bottom:0; display:flex; gap:.4rem;
  padding:.5rem .65rem; background:#fff; border-top:1px solid var(--d-linia); z-index:1}

/* El tancament del cercle: el que surt d'aquí és, literalment, la primera
   bombolla de la peça de la conversa. */
.web__cap-avall{display:flex; flex-direction:column; align-items:center; gap:.35rem;
  margin-top:.15rem}
.web__fil{width:1px; height:1.2rem; background:var(--ink-rule-2)}
.web__aterra{display:flex; align-items:center; gap:.5rem; max-width:100%}
.web__aterra .avatar{flex:none; width:1.75rem; height:1.75rem; font-size:.625rem}
.web__missatge{margin:0; padding:.45rem .7rem; border-radius:14px 14px 14px 4px;
  background:var(--bafa-entra); color:var(--ink); font-size:.8125rem; line-height:1.35}

@container (min-width:421px){
  .web__reixa{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}

/* --------------------------------------------------------------------------
   La peça de la web, en estret. Va al final del fitxer a propòsit: les seves
   regles base són just aquí sobre, i una consulta de contenidor no guanya per
   ser-ho — guanya per ordre. Posada més amunt, no s aplicava cap d aquestes.
   -------------------------------------------------------------------------- */
@container (max-width:420px){
  .web__reixa{grid-template-columns:minmax(0,1fr)}
  .web__cartes{gap:.35rem}
  .web__carta img{height:2.9rem}
  /* A tres columnes de 100 px, «Armaris i vestidors» no hi cap en una línia.
     Val més que baixi de línia que no pas retallar-la amb punts suspensius. */
  .web__carta span{white-space:normal}
}


/* --------------------------------------------------------------------------
   EL PLAFÓ — el rectangle negre que encercla les píndoles i l'escenari
   La banda de tinta es queda com és; el plafó hi va a sobre. Els tons de
   dins són els neutres de la referència d'Apple i no els càlids de la marca:
   és una caixa d'aparell, i el que hi ha a dins ha de semblar-ho. L'única
   cosa que segueix sent de Deriva és el magenta de la píndola oberta.
   -------------------------------------------------------------------------- */
.plafo{
  --pl-past:#1d1d1f;
  --pl-past-obert:#2c2c2e;
  --pl-text:#f5f5f7;
  --pl-text-2:#a1a1a6;
  background:#000; border-radius:clamp(16px,1.6vw,24px);
  padding:clamp(1.25rem,2.6vw,2.5rem);
}

/* La columna de les fletxes s'afegeix a l'esquerra de les píndoles. */
.plafo .sistema__reixa{grid-template-columns:auto minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1rem,2.4vw,2rem)}

.fletxes{display:flex; flex-direction:column; gap:.55rem; align-self:center}
.fletxa{width:40px; height:40px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:var(--pl-text);
  background:var(--pl-past);
  transition:background-color 180ms ease, transform 150ms var(--ease-out)}
.fletxa:active{transform:scale(.94)}
.fletxa svg{width:15px; height:15px; display:block}
@media (hover:hover) and (pointer:fine){
  .fletxa:hover{background:var(--pl-past-obert)}
}

/* Les píndoles, amb la paleta del plafó. */
.plafo .past{background:var(--pl-past); border-color:transparent}
.plafo .past[data-obert]{background:var(--pl-past-obert); border-color:transparent}
.plafo .past__nom{color:var(--pl-text-2)}
.plafo .past[data-obert] .past__nom{color:var(--pl-text)}
.plafo .past__mes{border-color:rgb(255 255 255 / .32)}
.plafo .past__mes::before,.plafo .past__mes::after{background:var(--pl-text-2)}
.plafo .past__detall p{color:var(--pl-text-2)}
.plafo .past__detall .dins b{color:var(--pl-text)}
@media (hover:hover) and (pointer:fine){
  .plafo .past:hover{background:var(--pl-past-obert)}
  .plafo .past:hover .past__nom{color:var(--pl-text)}
  .plafo .past:hover .past__mes{border-color:rgb(255 255 255 / .5)}
}
html:not(.js) .plafo .past{background:var(--pl-past-obert)}

/* Sobre negre pur el filet de la peça i el peu necessiten el gris neutre. */
.plafo .peu-peca{color:var(--pl-text-2)}
.plafo .web__fil{background:#48484a}

@media (max-width:980px){
  /* Amb una sola columna les fletxes es posen en fila, alineades a la dreta,
     just sobre la llista. Amagar-les seria treure una manera de navegar. */
  .plafo .sistema__reixa{grid-template-columns:minmax(0,1fr)}
  .fletxes{flex-direction:row; justify-content:flex-end; align-self:auto;
    order:-1; margin-bottom:.2rem}
}


/* --------------------------------------------------------------------------
   EL PLAFÓ, SEGONA PASSADA
   Tres coses que demanava la referència i que abans no s'hi assemblaven:
   el requadre és més ample que la barra i la sobrepassa, no canvia d'alçada
   segons el servei, i el text obert va en una caixa separada de la píndola.
   -------------------------------------------------------------------------- */

/* Surt del contenidor de 1180 px a propòsit: el requadre ha de sobresortir
   per sota de la barra flotant, no quadrar-hi. */
.plafo-fora{width:min(1400px,calc(100% - 2rem)); margin-inline:auto}

.plafo{ --h-boto:54px; padding:clamp(1.5rem,3.2vw,3.25rem) }

/* Acotada a escriptori a proposito: escrita sense consulta, guanyava tambe
   en estret —per ordre al fitxer— i alla l escenari es quedava en 67 px. */
@media (min-width:981px){
  .plafo .sistema__reixa{grid-template-columns:auto minmax(0,.72fr) minmax(0,1.28fr);
    gap:clamp(1.25rem,3vw,2.75rem)}
}

/* La píndola oberta: el contenidor desapareix i deixa veure les dues caixes. */
.plafo .past[data-obert]{background:transparent; border-color:transparent; border-radius:22px}
.plafo .past[data-obert] .past__boto{background:var(--pl-past-obert); border-radius:100px}
.plafo .past__detall{background:var(--pl-past-obert)}

/* L'escenari no s'ajusta a la peça: el JS li dona l'alçada de la més alta i
   s'hi queda. Així el requadre no fa cap salt en canviar de servei — que és
   justament el que passava abans i el que s'ha demanat treure. */
.plafo .escenari{align-items:center}

@media (max-width:980px){
  .plafo{padding:.75rem}
  .plafo-fora{width:calc(100% - 1.5rem)}
}

/* ==========================================================================
   CREIXEM JUNTS - la fitxa de Google
   Ve de provatures/creixem.html. Les regles dels passos (data-t) i el
   moviment reduit son mes amunt en aquest fitxer i no es dupliquen: si
   anessin aqui, per ordre guanyarien i canviarien tambe l explorador.
   ========================================================================== */
/* --------------------------------------------------------------------------
   CREIXEM JUNTS
   La fitxa de Google NO és un bloc: és una constel·lació de bombolles. Cada
   dada de la fitxa va a la seva, amb la seva mida, i les sis fotos del negoci
   fan mosaic a la dreta. El fons és el negre pla de la referència, sense cap
   desvaniment, perquè el degradat ja el fa la secció de sobre.
   -------------------------------------------------------------------------- */
.creixem{
  --c-sup:#141416;
  --c-sup-2:#1c1c1f;
  --c-vora:rgb(255 255 255 / .09);
  --c-text:#f5f5f7;
  --c-text-2:#a1a1a6;
  --c-estrella:#fbbc04;
  background:#08090a; color:var(--c-text);
  padding-block:clamp(4.5rem,9vw,8rem); position:relative
}

/* ---- La capçalera, amb l'enllaç a la dreta ---- */
.creixem__cap{display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:1.5rem; margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.creixem__titol{font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.03; letter-spacing:-.035em;
  margin:.9rem 0 .9rem; text-wrap:balance; max-width:18em}
.creixem__entrada{font-size:clamp(1rem,.6vw + .85rem,1.0625rem); line-height:1.55;
  color:var(--c-text-2); margin:0; max-width:34em}
/* El segon paragraf: que hi fem. Seguit del primer serien sis linies d un tirn. */
.creixem__entrada + .creixem__entrada{margin-top:.85rem}
.creixem__enllac{display:inline-flex; align-items:center; gap:.5rem;
  font-size:.875rem; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--c-text); transition:gap 200ms var(--ease-out)}
.creixem__enllac svg{width:14px; height:14px}
@media (hover:hover) and (pointer:fine){
  .creixem__enllac:hover{gap:.8rem}
}

/* ---- La reixa: bombolles a l'esquerra, mosaic a la dreta ---- */
.creixem__reixa{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(1.5rem,3.5vw,3.5rem); align-items:stretch}

/* --------------------------------------------------------------------------
   LES BOMBOLLES
   Cada una és una dada de la fitxa i viu sola. No estan alineades a una
   graella rígida: cada fila té la seva sagnia, i això és el que fa que
   sembli una constel·lació i no una llista.
   -------------------------------------------------------------------------- */
.bombolles{display:flex; flex-direction:column; align-items:flex-start;
  gap:.7rem}
.bombolla{position:relative; display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1.1rem; border-radius:100px;
  background:var(--c-sup); border:1px solid var(--c-vora);
  box-shadow:0 1rem 2.5rem -1.2rem rgb(0 0 0 / .9)}
/* El toc car: una claror molt fluixa a la vora de dalt, com si la llum vingués
   de sobre. Sense això les bombolles semblen retallades amb tisores. */
.bombolla::before{content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgb(255 255 255 / .055), transparent 42%)}

/* Les sagnies. Són el que trenca la columna. */
.bombolla:nth-child(2){margin-left:clamp(0px,3vw,2.75rem)}
.bombolla:nth-child(3){margin-left:clamp(0px,1vw,.9rem)}
.bombolla:nth-child(4){margin-left:clamp(0px,3.4vw,3.1rem)}
.bombolla:nth-child(5){margin-left:clamp(0px,1.4vw,1.2rem)}
.bombolla:nth-child(6){margin-left:clamp(0px,4vw,3.75rem)}
.bombolla:nth-child(7){margin-left:clamp(0px,2vw,1.75rem)}

/* La bombolla gran: la identitat del negoci. */
.bombolla--cap{border-radius:20px; padding:1rem 1.35rem; gap:.9rem}
.bombolla__marca{flex:none; width:2.6rem; height:2.6rem; border-radius:12px;
  background:var(--c-sup-2); border:1px solid var(--c-vora);
  display:grid; place-items:center; overflow:hidden}
.bombolla__marca img{width:100%; height:100%; object-fit:cover; display:block}
.bombolla__nom{display:block; font-family:var(--display); font-size:1.125rem;
  font-weight:700; letter-spacing:-.025em; line-height:1.2}
.bombolla__sota{display:flex; align-items:center; gap:.4rem; margin-top:.2rem;
  font-size:.8125rem; color:var(--c-text-2)}
.bombolla__nota{color:var(--c-text); font-weight:600; font-variant-numeric:tabular-nums}
.estrelles{display:flex; gap:1px; color:var(--c-estrella)}
.estrelles svg{width:12px; height:12px; display:block}

/* La bombolla de la categoria: el moviment de tota la secció. Els dos estats
   se superposen perquè no canviï de mida en canviar de paraula. */
.bombolla__etiq{font-size:.8125rem; color:var(--c-text-2)}
.categoria{position:relative; display:inline-block; font-size:.875rem;
  font-weight:600; padding:.3rem .8rem; border-radius:100px;
  background:var(--c-sup-2); color:var(--c-text-2);
  border:1px dashed var(--c-vora);
  transition:background-color 340ms ease, color 340ms ease, border-color 340ms ease}
.categoria i{font-style:normal; transition:opacity 280ms ease}
.categoria .b{opacity:0}
.categoria .a{position:absolute; inset:0; display:grid; place-items:center}
.categoria.fet{background:var(--magenta-ink); color:#fff;
  border-style:solid; border-color:var(--magenta-ink)}
.categoria.fet .a{opacity:0}
.categoria.fet .b{opacity:1}

/* La bombolla del número gran. */
.bombolla--xifra{border-radius:20px; padding:.85rem 1.35rem}
.bombolla__gran{font-family:var(--display); font-size:1.75rem; font-weight:700;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.bombolla__peu{display:block; font-size:.8125rem; color:var(--c-text-2); margin-top:.15rem}

/* Les bombolles de comprovat. */
.bombolla__tic{flex:none; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--c-vora); display:grid; place-items:center;
  transition:background-color 320ms ease, border-color 320ms ease}
.bombolla__tic svg{width:10px; height:10px; opacity:0; transition:opacity 280ms ease}
.bombolla.fet .bombolla__tic{background:var(--magenta-ink); border-color:var(--magenta-ink)}
.bombolla.fet .bombolla__tic svg{opacity:1}
.bombolla__text{font-size:.875rem; color:var(--c-text-2); transition:color 320ms ease}
.bombolla.fet .bombolla__text{color:var(--c-text)}
/* L'horari sempre és clar, no s'omple com les altres bombolles. */
.bombolla__text--clar{color:var(--c-text)}
.bombolla__num{margin-left:.35rem; font-weight:600; color:var(--c-text);
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   EL MOSAIC
   Sis fotos, cada una a la seva bombolla. La segona columna baixa mig pas
   perquè no quedin dues graelles alineades una al costat de l'altra.
   -------------------------------------------------------------------------- */
.mosaic{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.6rem,1.2vw,1rem)}
.mosaic__b{position:relative; margin:0; overflow:hidden; border-radius:18px;
  border:1px solid var(--c-vora); background:var(--c-sup);
  box-shadow:0 1.4rem 3rem -1.4rem rgb(0 0 0 / .9)}
.mosaic__b img{display:block; width:100%; height:100%; object-fit:cover}
/* La columna del mig baixa mig pas: tres columnes alineades serien un
   catàleg de productes, i el que ha de semblar és un grapat de bombolles. */
.mosaic__b{aspect-ratio:4/5}
.mosaic__b:nth-child(3n+2){margin-top:clamp(1rem,2.4vw,2.25rem)}

/* Dues bombolles en fila: soles ocupaven dues línies per a dos números curts. */
.bombolles__fila{display:flex; gap:.7rem; flex-wrap:wrap;
  margin-left:clamp(0px,1.4vw,1.2rem)}
.bombolles__fila .bombolla{margin-left:0 !important}

/* --------------------------------------------------------------------------
   EL MINI MAPA
   Com a la fitxa de Google, però dibuixat: cap petició a fora, cap tessel·la
   de ningú i cap llicència de mapes. La ubicació és inventada, com la resta
   del negoci. Va al capdavall de la columna perquè el peu quadri amb el del
   mosaic — d'aquí el margin-top:auto.
   -------------------------------------------------------------------------- */
.mapa{position:relative; margin:1.25rem 0 0; margin-top:auto; padding:0;
  overflow:hidden; border-radius:20px;
  background:#101012; border:1px solid var(--c-vora);
  box-shadow:0 1.4rem 3rem -1.4rem rgb(0 0 0 / .9)}
.mapa__llenc{display:block; width:100%; height:auto}

/* El senyal. El cercle de sota és el halo, i per això no batega: una cosa
   que batega sense parar en una pàgina és soroll, no informació. */
.mapa__pin{position:absolute; left:50%; top:47%; width:16px; height:16px;
  margin:-8px 0 0 -8px; border-radius:50%;
  background:var(--magenta); border:2.5px solid #fff;
  box-shadow:0 0 0 6px rgb(244 65 126 / .22), 0 .4rem 1rem rgb(0 0 0 / .6)}

.mapa__peu{display:flex; align-items:center; gap:.55rem;
  padding:.7rem .95rem; border-top:1px solid var(--c-vora);
  font-size:.8125rem; color:var(--c-text-2)}
.mapa__peu b{color:var(--c-text); font-weight:600}
.mapa__marca{flex:none; width:15px; height:15px; color:var(--magenta)}
.mapa__marca svg{display:block; width:100%; height:100%}

/* ---- L'avís i el tancament ---- */
.creixem__avis{margin:clamp(2.5rem,5vw,4rem) 0 0; font-size:.8125rem;
  color:var(--c-text-2); font-family:var(--mono)}

@media (max-width:980px){
  .creixem__cap{grid-template-columns:minmax(0,1fr); align-items:start}
  .creixem__reixa{grid-template-columns:minmax(0,1fr); gap:2.5rem}
  .bombolles{align-items:stretch}
  .bombolla{margin-left:0 !important}
  .bombolles__fila{margin-left:0}
  .mapa{margin-top:1.25rem}
  .bombolla--cap,.bombolla--xifra{border-radius:18px}
}
@media (max-width:520px){
  .mosaic{gap:.5rem}
  .mosaic__b:nth-child(3n+2){margin-top:1rem}
  .bombolla{padding:.65rem .9rem; gap:.6rem}
}


/* ==========================================================================
   LES SECCIONS DE TANCAMENT
   Tornen al paper de l'heroi. Només el peu és fosc, que és el que tanca la
   pàgina; el formulari es queda en clar perquè un formulari fosc costa més
   d'omplir i aquí és l'últim que ha de costar res.
   ========================================================================== */
.tanca{padding-block:clamp(4rem,8vw,7rem)}

/* «Com treballem» baixa de blanc a gris de paper. El número dels passos va
   sobre el fons, així que el seu tap opac ha de ser transparent aquí o es
   veuria un rectangle blanc a mitja pendent. */
/* «Com treballem» baixa de blanc a gris neutre. El gris de paper de la
   marca (#e9e3dc) tira a marró i aquí es notava. */
#com-treballem{background:linear-gradient(180deg,#ffffff 0%, #e7e7ea 100%)}
/* El número del pas porta un tap opac per tapar el filet, i sobre el
   degradat es veuria com un rectangle blanc. */
#com-treballem .pas::before{background:none}

.tanca__cap{max-width:38rem; margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.tanca__titol{font-family:var(--display); font-weight:400;
  font-size:clamp(1.75rem,3.2vw,2.65rem); line-height:1.05; letter-spacing:-.035em;
  margin:.8rem 0 .8rem; text-wrap:balance}
.tanca__entrada{font-size:1.0625rem; line-height:1.55; color:var(--ink-2); margin:0}

/* --------------------------------------------------------------------------
   COM TREBALLEM — quatre passos numerats, sense animació pesada
   -------------------------------------------------------------------------- */
.passos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem); counter-reset:pas}
.pas{position:relative; padding-top:1.6rem; border-top:1px solid var(--rule);
  counter-increment:pas}
.pas::before{content:counter(pas,decimal-leading-zero);
  position:absolute; top:-.75rem; left:0; padding-right:.7rem;
  background:var(--paper); font-family:var(--mono); font-size:.75rem;
  letter-spacing:.1em; color:var(--magenta-ink)}
.pas h3{font-family:var(--display); font-size:1.0625rem; font-weight:700;
  letter-spacing:-.02em; margin:0 0 .5rem; text-wrap:balance}
.pas p{font-size:.9375rem; line-height:1.6; color:var(--ink-2); margin:0}
.pas em{font-style:normal; color:var(--ink-3); font-family:var(--mono);
  font-size:.8125rem; display:block; margin-top:.5rem}



/* --------------------------------------------------------------------------
   PREGUNTES — acordió, només una oberta alhora
   -------------------------------------------------------------------------- */
.preguntes{max-width:52rem; border-top:1px solid var(--rule)}
.pregunta{border-bottom:1px solid var(--rule)}
.pregunta__boto{display:flex; align-items:center; gap:1rem; width:100%;
  padding:1.15rem 0; text-align:left; font-size:1.0625rem; font-weight:600;
  letter-spacing:-.015em;
  transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){ .pregunta__boto:hover{color:var(--magenta-ink)} }
.pregunta__mes{flex:none; margin-left:auto; width:20px; height:20px; position:relative}
.pregunta__mes::before,.pregunta__mes::after{content:''; position:absolute;
  inset:50% 2px auto; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform 260ms var(--ease-full)}
.pregunta__mes::after{transform:rotate(90deg)}
.pregunta[open] .pregunta__mes::after{transform:rotate(0)}
/* L'alçada d'un desplegable no es pot animar de 0 a auto sense mesurar-la, i
   aquí no cal: amb la reixa a 0fr i 1fr el navegador ho fa sol. */
.pregunta__caixa{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 300ms var(--ease-full)}
.pregunta[open] .pregunta__caixa{grid-template-rows:1fr}
.pregunta__cos{overflow:hidden}
.pregunta__cos p{font-size:.9375rem; line-height:1.65; color:var(--ink-2);
  margin:0 0 1.15rem; max-width:44rem}


/* --------------------------------------------------------------------------
   EL PEU
   -------------------------------------------------------------------------- */
.peu{background:#000; color:var(--paper); padding-block:clamp(2.5rem,5vw,4rem)}
.peu__reixa{display:grid; grid-template-columns:auto 1fr auto; align-items:start;
  gap:1.5rem 2.5rem}
.peu__contacte{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; font-size:.875rem}
.peu__contacte a{display:inline-flex; align-items:center; gap:.45rem;
  color:var(--ink-3-fosc); text-decoration:none; transition:color 180ms ease}
.peu__contacte svg{width:15px; height:15px; flex:none}
@media (hover:hover) and (pointer:fine){ .peu__contacte a:hover{color:var(--paper)} }
.peu__marca{display:flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-weight:700; font-size:1.0625rem; letter-spacing:-.01em}
.peu__enllacos{display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.875rem}
.peu__enllacos a{color:var(--ink-3-fosc); text-decoration:none;
  transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){ .peu__enllacos a:hover{color:var(--paper)} }
.peu__final{margin:1.75rem 0 0; padding-top:1.35rem; border-top:1px solid #26262a;
  font-size:.8125rem; color:var(--ink-3-fosc); font-family:var(--mono)}

@media (max-width:980px){
  .peu__reixa{grid-template-columns:minmax(0,1fr)}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 1.25rem}
}
@media (max-width:600px){
  .passos{grid-template-columns:minmax(0,1fr)}
  .peu__reixa{grid-template-columns:minmax(0,1fr)}
}


/* ==========================================================================
   LES PÀGINES LEGALS
   Text i prou. Cap animació, cap canvas: aquí ningú hi ve a mirar res bonic.
   ========================================================================== */
.legal{padding-block:clamp(6rem,10vw,8rem) clamp(3rem,6vw,5rem)}
.legal__cos{max-width:44rem}
.legal h1{font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.75rem); line-height:1.05; letter-spacing:-.035em;
  margin:.8rem 0 1.5rem; text-wrap:balance}
.legal h2{font-family:var(--display); font-size:1.125rem; font-weight:700;
  letter-spacing:-.02em; margin:2.25rem 0 .6rem}
.legal p,.legal li{font-size:1rem; line-height:1.7; color:var(--ink-2); margin:0 0 .9rem}
.legal ul{margin:0 0 .9rem; padding-left:1.2rem}
.legal a{color:var(--magenta-ink)}
.legal strong{color:var(--ink)}
.legal__tornar{display:inline-flex; align-items:center; gap:.5rem;
  font-size:.875rem; font-weight:600; text-decoration:none; color:var(--ink-2)}
.legal__data{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.8125rem; color:var(--ink-3)}


/* ==========================================================================
   CONTACTE
   Distribució de la referència: un plafó gran, el text i les dades a
   l'esquerra, i la targeta del formulari a la dreta. El plafó és el negre de
   Linear; el que hi ha al darrere, i la targeta, són paper. On la referència
   hi posa una fotografia d'una casa, aquí hi ha la marca: el rombe gran i
   les corbes de l'heroi, molt fluixes. Res de fotos d'estoc.
   ========================================================================== */
/* La secció al negre de Linear i el plafó encara més fosc, com el de
   l explorador: si tots dos fossin el mateix negre, el plafó no existiria. */
#contacte{background:var(--linear)}

.cta{position:relative; overflow:hidden; border-radius:clamp(18px,2vw,28px);
  background:#000; color:#f5f5f7;
  padding:clamp(1.5rem,3.5vw,3.25rem)}
/* El dibuix del fons. Va darrere de tot i no toca res. */
.cta__fons{position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none}
.cta__reixa{position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(1.75rem,4vw,4rem); align-items:start}

.cta__titol{font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.03; letter-spacing:-.035em;
  margin:.9rem 0 1rem; text-wrap:balance}
.cta__entrada{font-size:1rem; line-height:1.6; color:#a1a1a6; margin:0;
  max-width:32em}

/* Els quatre blocs de dades, a baix a l'esquerra com a la referència. */
.cta__dades{display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 2rem;
  margin-top:clamp(2.5rem,6vw,5rem)}
.cta__dada h3{font-family:var(--display); font-size:1rem; font-weight:700;
  letter-spacing:-.02em; margin:0 0 .5rem}
.cta__dada p{font-size:.875rem; line-height:1.6; color:#a1a1a6; margin:0}
.cta__dada a{color:#a1a1a6; text-decoration:none; transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){ .cta__dada a:hover{color:#f5f5f7} }

/* --------------------------------------------------------------------------
   La targeta del formulari: paper sobre el negre, com a la referència
   -------------------------------------------------------------------------- */
.fitxa-form{background:var(--paper); color:var(--ink);
  border-radius:clamp(14px,1.4vw,20px); padding:clamp(1.25rem,2.4vw,2rem)}
/* Esquer antispam: ocult per a persones, visible per als bots. */
.parany{position:absolute; left:-9999px; opacity:0; pointer-events:none}
.fitxa-form h3{font-family:var(--display); font-size:1.25rem; font-weight:700;
  letter-spacing:-.025em; margin:0 0 .4rem}
.fitxa-form > p{font-size:.875rem; line-height:1.55; color:var(--ink-2);
  margin:0 0 1.35rem}

/* Els camps van sense etiqueta visible, com a la referència: el text d'ajuda
   fa d'etiqueta. Per a qui no veu la pantalla, l'etiqueta hi és igualment. */
.ocult{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.fitxa-form input[type=text],.fitxa-form input[type=tel],
.fitxa-form input[type=email],.fitxa-form textarea{
  width:100%; font:inherit; font-size:.9375rem;
  padding:.85rem 1rem; border-radius:100px; border:1px solid var(--rule);
  background:#fff; color:var(--ink);
  transition:border-color 180ms ease, box-shadow 180ms ease}
.fitxa-form textarea{border-radius:16px; min-height:7rem; resize:vertical}
/* Acotat als camps de text. Escrit com «.fitxa-form input:focus» arribava
   també a la casella de consentiment i als botons de radi, i alla no hi ha
   cap vora que substitueixi l anell: qui hi anava amb el tabulador no veia
   res. Aquests dos es queden amb l anell general de :focus-visible. */
.fitxa-form input[type=text]:focus,.fitxa-form input[type=tel]:focus,
.fitxa-form input[type=email]:focus,.fitxa-form textarea:focus{outline:none;
  border-color:var(--magenta-ink); box-shadow:0 0 0 3px rgb(192 24 79 / .14)}
.fitxa-form input::placeholder,.fitxa-form textarea::placeholder{color:var(--ink-3)}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-bottom:.65rem}
.sol{margin-bottom:.65rem}

/* Les píndoles del tipus de consulta. Són botons de ràdio de veritat, no
   divs: així funcionen amb el teclat i s'envien amb el formulari. */
/* El <fieldset> ve amb vora i coixi propis del navegador, i el min-width
   d un fieldset impedeix que els seus fills s encongeixin. Cal desfer-ho. */
.tipus{margin:1.1rem 0 .9rem; border:0; padding:0; min-width:0}
.tipus > span{display:block; font-size:.875rem; color:var(--ink-2); margin-bottom:.55rem}
.tipus__opcions{display:flex; flex-wrap:wrap; gap:.4rem}
.tipus__opcions label{position:relative}
.tipus__opcions input{position:absolute; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer}
.tipus__opcions span{display:block; font-size:.8125rem; padding:.5rem .9rem;
  border-radius:100px; border:1px solid var(--rule); color:var(--ink-2);
  transition:border-color 180ms ease, color 180ms ease, background-color 180ms ease}
.tipus__opcions input:checked + span{border-color:var(--ink); color:var(--ink);
  font-weight:600}
.tipus__opcions input:focus-visible + span{outline:2px solid var(--magenta-ink);
  outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .tipus__opcions label:hover span{border-color:var(--ink-3)}
}

.fitxa-form .consent{margin:.4rem 0 1.1rem}
.fitxa-form .error{margin:0 0 .9rem}
.fitxa-form button{width:100%; justify-content:center; padding:.95rem 1.5rem;
  border-radius:100px; border:1px solid var(--ink); background:none;
  color:var(--ink); font-weight:600; font-size:.9375rem;
  transition:background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out)}
.fitxa-form button:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .fitxa-form button:hover{background:var(--ink); color:var(--paper)}
}

@media (max-width:980px){
  .cta__reixa{grid-template-columns:minmax(0,1fr)}
  .cta__dades{margin-top:2rem}
}
@media (max-width:600px){
  .cta__dades{grid-template-columns:minmax(0,1fr); gap:1.35rem}
  .duo{grid-template-columns:minmax(0,1fr)}
}


/* La casella de consentiment i el missatge d error. Anaven amb el CSS del
   contacte antic i van caure quan el vaig refer. */
.consent{display:flex; align-items:flex-start; gap:.6rem;
  font-size:.875rem; line-height:1.5; color:var(--ink-2)}
.consent input{flex:none; margin-top:.2rem; width:18px; height:18px;
  accent-color:var(--magenta-ink)}
.consent a{color:var(--magenta-ink)}
.error{font-size:.875rem; color:var(--magenta-ink); font-weight:600}
.error[hidden]{display:none}


/* --------------------------------------------------------------------------
   El botó de WhatsApp i el de trucar
   Verd i no magenta: el que ha de reconèixer l'ull en mig segon és on va a
   parar el clic. Tira més al groc que el #25d366 de la marca, que sobre el
   negre del plafó cridava massa.
   -------------------------------------------------------------------------- */
.boto-wa{display:inline-flex; align-items:center; gap:.6rem; margin-top:1.5rem;
  padding:.8rem 1.4rem; border-radius:100px; text-decoration:none;
  background:#5cb85c; color:#08090a; font-weight:600; font-size:.9375rem;
  transition:transform 160ms var(--ease-out), background-color 180ms ease}
.boto-wa svg{width:20px; height:20px; flex:none}
.boto-wa:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .boto-wa:hover{background:#4da84d} }

.cta__tel{font-family:var(--mono); font-size:.9375rem; color:#f5f5f7 !important;
  margin:0 0 .55rem !important; font-variant-numeric:tabular-nums}
.cta__truca{display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem .5rem .85rem; border-radius:100px;
  border:1px solid rgb(255 255 255 / .22); color:#f5f5f7 !important;
  font-size:.875rem; font-weight:600; text-decoration:none;
  transition:background-color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out)}
.cta__truca svg{width:16px; height:16px; flex:none}
.cta__truca:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .cta__truca:hover{background:rgb(255 255 255 / .1); border-color:rgb(255 255 255 / .45)}
}
@media (pointer:coarse){ .boto-wa,.cta__truca{min-height:44px} }