/* Kit de webs · estructura comuna a tots els estils
   Aquí NO hi ha colors ni tipografies fixes: tot surt de les variables de l'estil (estils/estils.json → css/estil.css).
   La disposició canvia amb les classes del <body>: hero-split · hero-overlay · hero-editorial · hero-center,
   serveis-cards · serveis-list · serveis-menu · serveis-numbered, nav-light · nav-dark. */

/* ───── 1. Base ───── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.25rem}
/* pantalles grans: tota la web creix amb l'amplada (fins a 1440 px es veu igual; a 2560 px, un 40 % més gran) */
@media (min-width:1441px){html{font-size:calc(16px + (100vw - 1440px) * .0058)}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-text);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:0.25rem}
.sec-dark :focus-visible,.hero-overlay .hero :focus-visible{outline-color:var(--accent-on-dark)}
.salta{position:absolute;left:-999px;top:0.5rem;z-index:100;background:var(--ink);color:var(--bg);padding:0.625rem 1rem;border-radius:0.5rem}
.salta:focus{left:0.75rem}
.wrap{width:min(73.75rem,100% - 2.5rem);margin-inline:auto}
[hidden]{display:none!important}  /* el que està amagat (variants d'un altre sector, avisos…) no es veu encara que tingui un display propi */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ───── 2. Tipografia ───── */
h1,h2,h3{font-family:var(--font-display);font-weight:var(--display-weight);text-transform:var(--display-case);letter-spacing:var(--display-tracking);line-height:var(--display-leading);margin:0;text-wrap:balance}
h1{font-size:calc(clamp(2.6rem,6.4vw,5.4rem) * var(--display-scale))}
h2{font-size:calc(clamp(2rem,4.2vw,3.4rem) * var(--display-scale))}
h3{font-size:calc(clamp(1.3rem,2vw,1.6rem) * var(--display-scale));line-height:1.15}
h1 em,h2 em,h3 em{font-style:var(--em-style);color:var(--accent-text)}
.sec-dark h1 em,.sec-dark h2 em,.hero-overlay .hero h1 em{color:var(--accent-on-dark)}
p{margin:0 0 1em;text-wrap:pretty}
.etiqueta{display:inline-block;font:600 .76rem/1.2 var(--font-body);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--accent-text);margin-bottom:1.125rem}
.sec-dark .etiqueta{color:var(--accent-on-dark)}
.intro{font-size:1.12rem;color:var(--ink-soft);max-width:60ch}
.sec-dark .intro,.sec-dark p{color:var(--on-dark-soft)}

/* ───── 3. Botons ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;min-height:3.125rem;padding:0 1.625rem;border-radius:var(--radius-btn);border:1.5px solid transparent;
  font:var(--btn-weight) .98rem/1 var(--font-body);letter-spacing:var(--btn-tracking);text-transform:var(--btn-case);text-decoration:none;cursor:pointer;transition:transform .2s,background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:1.125rem;height:1.125rem;flex:none}
.btn-1{background:var(--accent);color:var(--accent-ink)}
.btn-1:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
.btn-2{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 28%,transparent)}
.btn-2:hover{border-color:var(--ink)}
.sec-dark .btn-1,.hero-overlay .hero .btn-1{background:var(--accent-on-dark);color:var(--dark)}
.sec-dark .btn-2,.hero-overlay .hero .btn-2{color:var(--on-dark);border-color:color-mix(in srgb,var(--on-dark) 40%,transparent)}
.sec-dark .btn-2:hover,.hero-overlay .hero .btn-2:hover{border-color:var(--on-dark)}
.botons{display:flex;flex-wrap:wrap;gap:0.75rem}

/* ───── 4. Capçalera ───── */
.cap{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(0.75rem);-webkit-backdrop-filter:saturate(1.4) blur(0.75rem);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.nav-dark .cap{background:color-mix(in srgb,var(--dark) 94%,transparent);border-bottom-color:transparent;color:var(--on-dark)}
.cap .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.marca{display:flex;align-items:center;gap:0.75rem;color:inherit;text-decoration:none;margin-right:auto}
.marca img{height:2.5rem;width:auto}
.marca b{font:var(--display-weight) 1.5rem/1 var(--font-display);text-transform:var(--display-case);letter-spacing:var(--display-tracking)}
.marca b em{font-style:var(--em-style);color:var(--accent-text)}
.nav-dark .marca b em,.sec-dark .marca b em{color:var(--accent-on-dark)}
.marca small{display:block;font:500 .68rem/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-top:0.25rem}
.menu{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0}
.menu a{color:inherit;text-decoration:none;font-weight:500;font-size:.95rem;opacity:.86}
.menu a:hover{opacity:1;text-decoration:underline}
.cap .btn{min-height:2.75rem;padding:0 1.25rem;font-size:.9rem}
.idiomes{display:flex;gap:2px;list-style:none;margin:0;padding:0;font:600 .78rem/1 var(--font-body);letter-spacing:.08em}
.idiomes a{display:block;padding:0.5rem 0.4375rem;border-radius:0.375rem;color:inherit;text-decoration:none;opacity:.6}
.idiomes a:hover,.idiomes a[aria-current]{opacity:1}
.idiomes a[aria-current]{text-decoration:underline;text-underline-offset:.3em}
.nav-dark .cap .btn-1{background:var(--accent-on-dark);color:var(--dark)}
.obre-menu{display:none;background:none;border:0;color:inherit;padding:0.625rem;margin-right:-0.625rem;cursor:pointer}
.obre-menu svg{width:1.625rem;height:1.625rem}
@media (max-width:900px){
  .obre-menu{display:block}
  .cap .btn{display:none}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:0.5rem 1.25rem 1.25rem}
  .nav-dark .menu{background:var(--dark)}
  .menu a{display:block;padding:0.875rem 0;font-size:1.1rem;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
  .cap.obert .menu{display:flex}
}

/* ───── 5. Seccions ───── */
.sec{padding:clamp(4.5rem,10vw,8rem) 0}
.sec-alt{background:var(--bg-alt)}
.sec-dark{background:var(--dark);color:var(--on-dark)}
.sec-cap{display:grid;gap:1.125rem;margin-bottom:clamp(2.25rem,5vw,4rem);max-width:47.5rem}
.sec-cap h2{margin-bottom:0.375rem}

/* ───── 6. Fotos (o el lloc on aniran) ───── */
.foto{position:relative;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-alt);aspect-ratio:4/5}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.ample{aspect-ratio:16/10}
/* imatge sencera i sense fons (captures, muntatges amb transparència): no es retalla */
.foto.sencera,.hero-overlay .hero .foto.sencera{aspect-ratio:auto;background:transparent;border-radius:0;overflow:visible}
.foto.sencera img{height:auto;object-fit:contain}
.foto.quadrada{aspect-ratio:1}
/* sense foto encara: un requadre que diu quina foto hi va */
.foto.buida{display:grid;place-items:end start;padding:1.25rem;color:var(--ink-soft);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 4%,transparent) 0 2px,transparent 2px 0.875rem),linear-gradient(160deg,var(--accent-soft),var(--bg-alt))}
.foto.buida span{font:500 .82rem/1.4 var(--font-body);max-width:30ch;background:color-mix(in srgb,var(--surface) 84%,transparent);padding:0.5rem 0.75rem;border-radius:0.5rem}
.foto.buida span::before{content:"Foto · ";font-weight:700;color:var(--accent-text)}

/* ───── 7. Portada (hero) ───── */
.hero{position:relative}
.hero h1{margin-bottom:1.5rem}
.hero .intro{margin-bottom:2.125rem}
.confianca{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem 1.375rem;margin-top:2.125rem;font-size:.92rem;color:var(--ink-soft)}
.confianca li{display:flex;align-items:center;gap:0.5rem}
.confianca svg{width:1rem;height:1rem;color:var(--accent-text)}
.confianca{list-style:none;padding:0}
/* dividida: text a l'esquerra, foto a la dreta */
.hero-split .hero{padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem)}
.hero-split .hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,6vw,5rem);align-items:center}
/* a sang: foto de fons amb capa fosca */
.hero-overlay .hero{min-height:min(88vh,51.25rem);display:flex;align-items:flex-end;padding:8.75rem 0 clamp(3.5rem,8vw,6rem);color:var(--on-dark);background:var(--dark);isolation:isolate}
.hero-overlay .hero .foto{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;z-index:-2}
.hero-overlay .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--dark) 35%,transparent),color-mix(in srgb,var(--dark) 92%,transparent) 78%)}
.hero-overlay .hero .foto.buida{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 1rem),var(--dark);place-items:start end;padding:6.875rem 1.5rem}
.hero-overlay .hero .foto.buida span{background:rgba(255,255,255,.08);color:var(--on-dark-soft)}
.hero-overlay .hero .intro,.hero-overlay .confianca{color:var(--on-dark-soft)}
.hero-overlay .confianca svg{color:var(--accent-on-dark)}
.hero-overlay .hero .etiqueta{color:var(--accent-on-dark)}
.hero-overlay .hero h1{max-width:13ch;font-size:calc(clamp(3.2rem,9vw,8rem) * var(--display-scale))}
/* editorial: títol enorme a tot l'ample i foto a sota */
.hero-editorial .hero{padding:clamp(3rem,7vw,6rem) 0 0}
.hero-editorial .hero h1{font-size:calc(clamp(3rem,8.4vw,7.2rem) * var(--display-scale));max-width:15ch}
.hero-editorial .hero .peu{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:end;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero-editorial .hero .peu .intro{margin:0}
.hero-editorial .hero .foto{aspect-ratio:21/9;border-radius:var(--radius-img)}
/* centrada: tot al mig, foto ampla a sota */
.hero-center .hero{padding:clamp(3.5rem,8vw,7rem) 0 clamp(3.5rem,8vw,6rem);text-align:center}
.hero-center .hero .wrap>div:first-child{max-width:55rem;margin-inline:auto}
.hero-center .hero .intro{margin-inline:auto}
.hero-center .hero .botons,.hero-center .confianca{justify-content:center}
.hero-center .hero .foto{margin-top:clamp(3rem,6vw,5rem);aspect-ratio:16/9;max-width:61.25rem;margin-inline:auto}
@media (max-width:860px){
  .hero-split .hero .wrap{grid-template-columns:1fr}
  .hero-split .hero .foto{aspect-ratio:4/3}
  .hero-editorial .hero .peu{grid-template-columns:1fr}
  .hero-editorial .hero .foto{aspect-ratio:4/3}
}

/* ───── 8. Xifres ───── */
.xifres{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.625rem,1fr));border-top:1px solid var(--line)}
.xifres div{padding:1.875rem 1.5rem;box-shadow:inset -1px 0 0 var(--line),0 1px 0 var(--line)}
.xifres b{display:block;font:var(--display-weight) calc(clamp(2.4rem,4vw,3.4rem) * var(--display-scale))/1 var(--font-display);letter-spacing:var(--display-tracking);text-transform:none;color:var(--ink)}
.xifres span{display:block;margin-top:0.5rem;color:var(--ink-soft);font-size:.95rem}

/* ───── 9. Serveis (4 disposicions) ───── */
.serveis{display:grid;gap:1.25rem;list-style:none;margin:0;padding:0}
.servei h3{margin-bottom:0.625rem}
.servei p{color:var(--ink-soft);margin:0}
.servei .preu{display:inline-block;margin-top:1rem;font-weight:600;color:var(--accent-text)}
/* el nom i el preu van junts (.fila) només a la carta; a la resta, el preu va al final */
.servei .fila{display:contents}
.servei .fila h3{order:1}.servei p{order:2}.servei .preu{order:3}
/* targetes */
.serveis-cards .serveis{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.serveis-cards .servei{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.875rem;box-shadow:var(--shadow);display:flex;flex-direction:column}
.serveis-cards .servei .foto{order:0;aspect-ratio:3/2;margin:-1.875rem -1.875rem 1.5rem;border-radius:var(--radius) var(--radius) 0 0}
.serveis-cards .servei .preu{margin-top:auto;padding-top:1rem}
/* llista amb línies */
.serveis-list .serveis{gap:0;border-top:1px solid var(--line)}
.serveis-list .servei{display:grid;grid-template-columns:minmax(12.5rem,1fr) 2fr auto;gap:0.75rem 2.5rem;align-items:baseline;padding:1.875rem 0;border-bottom:1px solid var(--line)}
.serveis-list .servei .preu{margin:0;white-space:nowrap}
.serveis-list .servei .foto{display:none}
/* carta (restaurant, forn, estètica): nom ····· preu */
.serveis-menu .serveis{grid-template-columns:repeat(auto-fit,minmax(min(100%,27.5rem),1fr));gap:0.5rem 4.5rem}
.serveis-menu .servei{padding:1.375rem 0;border-bottom:1px solid var(--line)}
.serveis-numbered .servei{display:flex;flex-direction:column}
.serveis-menu .servei .fila{display:flex;align-items:baseline;gap:0.75rem}
.serveis-menu .servei .fila h3{margin:0}
.serveis-menu .servei .fila::after{content:"";flex:1;order:1;border-bottom:1.5px dotted color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-0.375rem)}
.serveis-menu .servei .preu{order:2;margin:0;white-space:nowrap}
.serveis-menu .servei p{margin-top:0.5rem;max-width:52ch}
.serveis-menu .servei .foto{display:none}
/* numerada */
.serveis-numbered .serveis{grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));gap:0;counter-reset:s;border-top:1px solid var(--line)}
.serveis-numbered .servei{counter-increment:s;padding:2.125rem 2.125rem 2.125rem 0;border-bottom:1px solid var(--line)}
.serveis-numbered .servei::before{content:counter(s,decimal-leading-zero);display:block;font:500 .85rem/1 var(--font-body);letter-spacing:.12em;color:var(--accent-text);margin-bottom:1.375rem}
.serveis-numbered .servei .foto{display:none}
@media (max-width:760px){.serveis-list .servei{grid-template-columns:1fr}.serveis-numbered .servei{padding-right:0}}

/* ───── 10. Com funciona (passos) ───── */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1.5rem,4vw,3rem);list-style:none;margin:0;padding:0;counter-reset:p}
.passos li{counter-increment:p;position:relative;padding-top:4rem}
.passos li::before{content:counter(p);position:absolute;top:0;left:0;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:var(--radius-btn);border:1.5px solid currentColor;font:600 1rem/1 var(--font-body);color:var(--accent-text)}
.sec-dark .passos li::before{color:var(--accent-on-dark)}
.passos h3{margin-bottom:0.625rem}
.passos p{color:var(--ink-soft);margin:0}
.sec-dark .passos p{color:var(--on-dark-soft)}

/* ───── 11. Sobre nosaltres i equip ───── */
.sobre{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.sobre .text h2{margin-bottom:1.625rem}
.sobre .text p{font-size:1.08rem;color:var(--ink-soft)}
.sobre .text p:first-of-type{font-size:1.3rem;color:var(--ink);line-height:1.5}
@media (max-width:860px){.sobre{grid-template-columns:1fr}.sobre .foto{aspect-ratio:4/3}}
.sobre.sense-foto{grid-template-columns:1fr;max-width:51.25rem}

/* ───── 11b. Cas d'èxit / projecte ───── */
.cas{display:grid;grid-template-columns:.95fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.cas h2{margin-bottom:1.375rem}
.cas .foto{aspect-ratio:16/11;background:transparent}
.cas .foto img{object-fit:contain}
.punts{list-style:none;padding:0;margin:1.625rem 0 2.125rem;display:grid;gap:0.75rem}
.punts li{display:flex;gap:0.75rem;align-items:flex-start}
.punts svg{width:1.25rem;height:1.25rem;flex:none;margin-top:3px;color:var(--accent-text)}
.sec-dark .punts svg{color:var(--accent-on-dark)}
@media (max-width:860px){.cas{grid-template-columns:1fr}}
.equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.75rem,1fr));gap:1.75rem;list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0}
.equip .foto{aspect-ratio:4/5;margin-bottom:1rem}
.equip b{display:block;font:var(--display-weight) 1.35rem/1.15 var(--font-display);text-transform:var(--display-case);letter-spacing:var(--display-tracking)}
.equip span{color:var(--ink-soft);font-size:.94rem}

/* ───── 12. Opinions ───── */
.opinions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.5rem;list-style:none;margin:0;padding:0}
.opinions:has(>li:only-child){max-width:40rem}
.opinio{margin:0;padding:2rem;border-radius:var(--radius);background:color-mix(in srgb,var(--on-dark) 6%,transparent);border:1px solid color-mix(in srgb,var(--on-dark) 14%,transparent);display:flex;flex-direction:column;gap:1.25rem}
.opinio blockquote{margin:0;font:var(--display-weight) 1.3rem/1.4 var(--font-display);text-transform:none;letter-spacing:0}
.opinio figcaption{margin-top:auto;font-size:.92rem;color:var(--on-dark-soft)}
.estrelles{display:flex;gap:3px;color:var(--accent-on-dark)}
.estrelles svg{width:1rem;height:1rem}
.font-opinions{margin-top:1.75rem;font-size:.92rem}
.font-opinions a{color:var(--accent-on-dark)}

/* ───── 13. Horaris i on som ───── */
.on-som{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.on-som{grid-template-columns:1fr}}
.on-som h2{margin-bottom:1.25rem}
.horaris{width:100%;border-collapse:collapse;margin:0.5rem 0 1.125rem}
.horaris th,.horaris td{text-align:left;padding:0.875rem 0;border-bottom:1px solid var(--line);font-weight:400;vertical-align:top}
.horaris th{color:var(--ink-soft);padding-right:1.5rem}
.horaris td{font-weight:600;text-align:right}
.nota{font-size:.92rem;color:var(--ink-soft)}
.adreca{font-style:normal;margin:1.625rem 0 1.25rem;line-height:1.7}
.mapa{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);aspect-ratio:4/3;display:grid}
.mapa iframe{width:100%;height:100%;border:0}
.mapa .permis{display:grid;place-content:center;justify-items:center;gap:0.875rem;text-align:center;padding:1.75rem;color:var(--ink-soft);font-size:.92rem;
  background:repeating-linear-gradient(0deg,transparent 0 1.9375rem,color-mix(in srgb,var(--ink) 6%,transparent) 1.9375rem 2rem),repeating-linear-gradient(90deg,transparent 0 1.9375rem,color-mix(in srgb,var(--ink) 6%,transparent) 1.9375rem 2rem),var(--bg-alt)}
.mapa .permis p{max-width:38ch;margin:0}

/* ───── 14. Preguntes freqüents ───── */
.faq{max-width:53.75rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;font:var(--display-weight) 1.25rem/1.3 var(--font-display);text-transform:var(--display-case);letter-spacing:var(--display-tracking)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem/1 var(--font-body);color:var(--accent-text);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-soft);max-width:68ch;padding-bottom:0.75rem}

/* ───── 15. Contacte i formulari ───── */
.contacte{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5.5rem)}
@media (max-width:860px){.contacte{grid-template-columns:1fr}}
.contacte h2{margin-bottom:1.25rem}
.vies{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:0.875rem}
.vies a{display:flex;align-items:center;gap:0.875rem;color:inherit;text-decoration:none;font-weight:500;font-size:1.05rem}
.vies a:hover span{text-decoration:underline}
.vies svg{width:1.375rem;height:1.375rem;color:var(--accent-on-dark);flex:none}
.form{background:var(--surface);color:var(--ink);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:1.125rem;box-shadow:var(--shadow)}
.form .doble{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem}
@media (max-width:560px){.form .doble{grid-template-columns:1fr}}
.camp{display:grid;gap:0.5rem}
.camp label{font:600 .8rem/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.camp input,.camp textarea,.camp select{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:min(var(--radius-btn),0.75rem);padding:0.875rem 1rem;transition:border-color .2s}
.camp textarea{min-height:7.5rem;resize:vertical}
.camp input:focus,.camp textarea:focus,.camp select:focus{outline:none;border-color:var(--accent-text)}
.consent{display:flex;gap:0.75rem;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.consent input{width:1.25rem;height:1.25rem;margin:1px 0 0;accent-color:var(--accent-text);flex:none}
.info-rgpd{font-size:.78rem;line-height:1.5;color:var(--ink-soft);margin:0}
.form .btn{width:100%}
/* el formulari és una targeta clara dins la franja fosca: colors de fons clar */
.sec-dark .form .btn-1{background:var(--accent);color:var(--accent-ink)}
.sec-dark .form p,.sec-dark .form .consent{color:var(--ink-soft)}
.form .err{color:#B3261E;font-size:.9rem;margin:0}
.no-omplir{position:absolute;left:-9999px}

/* ───── 16. Peu ───── */
.peu-web{background:var(--dark);color:var(--on-dark-soft);padding:4rem 0 2rem;font-size:.92rem}
.peu-web .wrap{display:grid;gap:2.5rem}
.peu-web .dalt{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
@media (max-width:760px){.peu-web .dalt{grid-template-columns:1fr}}
.peu-web b.nom{display:block;color:var(--on-dark);font:var(--display-weight) 1.7rem/1 var(--font-display);text-transform:var(--display-case);letter-spacing:var(--display-tracking);margin-bottom:0.75rem}
.peu-web h2{font:600 .76rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);margin-bottom:0.875rem}
.peu-web ul{list-style:none;padding:0;margin:0;display:grid;gap:0.5rem}
.peu-web a{color:var(--on-dark-soft);text-decoration:none}
.peu-web a:hover{color:var(--on-dark);text-decoration:underline}
.peu-web .baix{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.75rem;border-top:1px solid color-mix(in srgb,var(--on-dark) 14%,transparent);padding-top:1.5rem}
.peu-web .baix ul{display:flex;flex-wrap:wrap;gap:1.25rem}
.avis-demo{color:var(--accent-on-dark)}

/* ───── 17. WhatsApp flotant (mòbil) ───── */
.wa-flota{position:fixed;right:1rem;bottom:1rem;z-index:40;width:3.625rem;height:3.625rem;border-radius:50%;display:none;place-items:center;background:#1F8F4E;color:#fff;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.22)}
.wa-flota svg{width:1.75rem;height:1.75rem}
@media (max-width:900px){.wa-flota{display:grid}}

/* ───── 17b. Contacte sempre a mà ("contacteFlotant": true): WhatsApp i correu, a l'ordinador i al mòbil ───── */
.contacte-flota{position:fixed;right:1.25rem;bottom:1.25rem;z-index:45;display:flex;gap:0.625rem}
.contacte-flota a{display:flex;align-items:center;justify-content:center;gap:0.625rem;min-height:3.25rem;padding:0 1.375rem 0 1rem;border-radius:6.1875rem;font:600 .95rem/1 var(--font-body);text-decoration:none;box-shadow:0 0.75rem 1.875rem rgba(0,0,0,.28);transition:translate .2s}
.contacte-flota a:hover{translate:0 -2px}
.contacte-flota svg{width:1.375rem;height:1.375rem;flex:none}
.contacte-flota .cf-wa{background:#1A7F45;color:#fff}
.contacte-flota .cf-mail{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.contacte-flota :focus-visible{outline-color:var(--accent-text)}
@media (max-width:760px){
  .contacte-flota{left:0.75rem;right:0.75rem;bottom:0.75rem}
  .contacte-flota a{flex:1}
  body:has(.contacte-flota) .peu-web{padding-bottom:6rem}
}
body.hero-particules:has(.contacte-flota) .hero{padding-bottom:6rem}  /* que els botons flotants no tapin els de la portada */

/* ───── 18. Avís de cookies (només si la web fa servir analítica) ───── */
.cookies{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;max-width:35rem;margin-inline:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:1.375rem;box-shadow:0 1.125rem 3rem rgba(0,0,0,.18);display:grid;gap:0.875rem;font-size:.92rem}
.cookies[hidden]{display:none}
.cookies p{margin:0;color:var(--ink-soft)}
.cookies .botons .btn{min-height:2.75rem;flex:1}

/* ───── 19. Pàgines legals, gràcies i 404 ───── */
.legal{padding:clamp(3.5rem,8vw,6.5rem) 0}
.legal .wrap{max-width:48.75rem}
.legal h1{font-size:calc(clamp(2.2rem,5vw,3.6rem) * var(--display-scale));margin-bottom:2rem}
.legal h2{font-size:calc(1.5rem * var(--display-scale));margin:2.5rem 0 0.875rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0.625rem 0 1.25rem}
.legal th,.legal td{border:1px solid var(--line);padding:0.625rem;text-align:left;vertical-align:top}
.pendent{background:#FFF1B8;color:#5C4400;padding:1px 0.375rem;border-radius:0.25rem;font-weight:600}
.simple{min-height:72vh;display:grid;place-items:center;text-align:center;padding:4rem 0}
.simple h1{margin-bottom:1.25rem}
.simple .botons{justify-content:center;margin-top:1.75rem}

/* ───── 20. Cinta: paraules grans en una franja (al nivell animat es mou amb el scroll) ───── */
.cinta{overflow:hidden;border-block:1px solid var(--line);padding:clamp(1.125rem,3vw,1.875rem) 0;white-space:nowrap}
.cinta .pista{display:inline-flex;gap:clamp(1.5rem,3vw,2.75rem);padding-left:1.25rem}
.cinta span{display:inline-flex;align-items:center;gap:clamp(1.5rem,3vw,2.75rem);font:var(--display-weight) calc(clamp(2.2rem,6vw,5rem) * var(--display-scale))/1 var(--font-display);letter-spacing:var(--display-tracking);text-transform:var(--display-case)}
.cinta span::after{content:"";width:.22em;height:.22em;border-radius:50%;background:var(--accent-text)}

/* ───── 21. Capítols: la història del negoci, una pantalla per idea ─────
   Al nivell bàsic, un sota l'altre. Al nivell animat (css/animacio.css), la secció es queda fixa i passen l'un sobre l'altre.
   Tons: to-fosc · to-clar · to-accent. Mida de la paraula gran segons les lletres: mida-1 (curta) … mida-4 (llarga). */
.capitols ol{list-style:none;margin:0;padding:0}
.capitol{position:relative;padding:clamp(4.5rem,10vw,8rem) 0;overflow:hidden}
.capitol .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem clamp(2rem,6vw,5.5rem);align-items:end}
.capitol .paraula{grid-column:1/-1;margin:0 0 0 -.04em;font:var(--display-weight) calc(16vw * var(--display-scale))/.84 var(--font-display);letter-spacing:-.03em;text-transform:var(--display-case);white-space:nowrap}
.capitol.mida-2 .paraula{font-size:calc(12.5vw * var(--display-scale))}
.capitol.mida-3 .paraula{font-size:calc(9.5vw * var(--display-scale))}
.capitol.mida-4 .paraula{font-size:calc(7.5vw * var(--display-scale))}
@media (min-width:1480px){.capitol .paraula{font-size:calc(15rem * var(--display-scale))}.capitol.mida-2 .paraula{font-size:calc(12rem * var(--display-scale))}.capitol.mida-3 .paraula{font-size:calc(9rem * var(--display-scale))}.capitol.mida-4 .paraula{font-size:calc(7rem * var(--display-scale))}}
.capitol .cos{max-width:48ch}
.capitol:not(.amb-foto) .cos{grid-column:2}
.capitol h3{font-size:calc(clamp(1.7rem,3vw,2.6rem) * var(--display-scale));margin-bottom:1rem}
.capitol .cos p{font-size:1.08rem}
.capitol .btn{margin-top:0.625rem}
.capitol .foto{aspect-ratio:16/10}
.to-fosc{background:var(--dark);color:var(--on-dark)}
.to-fosc .paraula,.to-fosc .etiqueta,.to-fosc h3 em{color:var(--accent-on-dark)}
.to-fosc p{color:var(--on-dark-soft)}
.to-clar{background:var(--bg-alt);color:var(--ink)}
.to-clar .paraula{color:var(--accent-text)}
.to-clar p{color:var(--ink-soft)}
.to-accent{background:var(--accent);color:var(--accent-ink)}
.to-accent .paraula,.to-accent .etiqueta,.to-accent h3 em,.to-accent p{color:var(--accent-ink)}
.to-accent .btn-2{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent-ink) 45%,transparent)}
.to-accent .btn-2:hover{border-color:var(--accent-ink)}
.to-accent :focus-visible{outline-color:var(--accent-ink)}
.capitols .indicador{display:none}
@media (max-width:760px){
  .capitol .wrap{grid-template-columns:1fr}
  .capitol:not(.amb-foto) .cos{grid-column:auto}
  .capitol .paraula{font-size:calc(19vw * var(--display-scale))}
  .capitol.mida-2 .paraula{font-size:calc(15vw * var(--display-scale))}
  .capitol.mida-3 .paraula{font-size:calc(11vw * var(--display-scale))}
  .capitol.mida-4 .paraula{font-size:calc(8.5vw * var(--display-scale))}
}

/* ───── 22. Il·lustracions dels capítols (fetes amb codi, sense fotos): navegador · visor · xarxes · avisos ───── */
.to-fosc{--v-acc:var(--accent-on-dark);--v-acc-ink:var(--dark);--v-fons:color-mix(in srgb,var(--on-dark) 9%,var(--dark))}
.to-clar{--v-acc:var(--accent);--v-acc-ink:var(--accent-ink);--v-fons:var(--surface)}
.to-accent{--v-acc:var(--accent-ink);--v-acc-ink:var(--accent);--v-fons:color-mix(in srgb,var(--accent-ink) 12%,var(--accent))}
.visual{position:relative;width:100%;justify-self:end;--v-linia:color-mix(in srgb,currentColor 16%,transparent)}
@keyframes v-parpelleja{50%{opacity:0}}
@keyframes v-sura{to{transform:translate(18%,-12%) scale(1.15)}}
/* navegador: una web que es munta sola */
.v-navegador{max-width:35rem;aspect-ratio:16/11}
.v-finestra{position:absolute;left:0;top:0;width:86%;border-radius:0.875rem;overflow:hidden;background:var(--v-fons);border:1px solid var(--v-linia);box-shadow:0 1.875rem 3.75rem rgba(0,0,0,.22)}
.v-barra{display:flex;align-items:center;gap:0.375rem;padding:0.625rem 0.75rem;border-bottom:1px solid var(--v-linia)}
.v-barra i{width:0.5625rem;height:0.5625rem;border-radius:50%;background:color-mix(in srgb,currentColor 28%,transparent)}
.v-url{margin-left:0.625rem;flex:1;font:500 .72rem/1 var(--font-body);padding:0.375rem 0.75rem;border-radius:6.1875rem;background:color-mix(in srgb,currentColor 7%,transparent)}
.v-url::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:v-parpelleja 1s steps(1) infinite}
.v-pagina{padding:0.875rem;display:grid;gap:0.875rem}
.v-nav{display:flex;align-items:center;gap:0.5rem}
.v-nav b{width:3.5rem;height:0.625rem;border-radius:3px;background:currentColor;margin-right:auto}
.v-nav span{width:1.75rem;height:0.375rem;border-radius:3px;background:currentColor;opacity:.3}
.v-nav em{width:2.625rem;height:1rem;border-radius:6.1875rem;background:var(--v-acc)}
.v-portada{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem;align-items:center}
.v-textos{display:grid;gap:0.5rem}
.v-textos b{height:0.875rem;border-radius:0.25rem;background:currentColor}
.v-textos b.curta{width:68%}
.v-textos span{height:0.375rem;width:90%;border-radius:3px;background:currentColor;opacity:.3}
.v-textos em{width:4rem;height:1.125rem;margin-top:0.25rem;border-radius:6.1875rem;background:var(--v-acc)}
.v-img{aspect-ratio:4/3;border-radius:0.5rem;background:linear-gradient(140deg,var(--v-acc),color-mix(in srgb,var(--v-acc) 25%,transparent))}
.v-targetes{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem}
.v-targetes div{height:3.25rem;border-radius:0.5rem;background:color-mix(in srgb,currentColor 7%,transparent);border:1px solid var(--v-linia)}
.v-mobil{position:absolute;right:0;bottom:0;width:30%;aspect-ratio:9/18;padding:0.875rem 0.5625rem;display:grid;align-content:start;gap:0.4375rem;border-radius:1.25rem;background:var(--v-fons);border:1px solid var(--v-linia);box-shadow:0 1.5rem 3.125rem rgba(0,0,0,.28)}
.v-mobil b{height:0.5rem;width:50%;border-radius:3px;background:currentColor;margin-bottom:0.375rem}
.v-mobil span{height:0.375rem;border-radius:3px;background:currentColor;opacity:.3}
.v-mobil span.curta{width:60%}
.v-mobil em{height:1rem;width:70%;margin-top:0.25rem;border-radius:6.1875rem;background:var(--v-acc)}
/* visor de càmera: enfoca i dispara */
.v-visor{max-width:33.75rem;aspect-ratio:4/3}
.v-marc{position:absolute;inset:0;overflow:hidden;border-radius:0.875rem;background:var(--v-fons);border:1px solid var(--v-linia)}
.v-bokeh{position:absolute;inset:-12%;filter:blur(1rem)}
.v-bokeh i{position:absolute;aspect-ratio:1;border-radius:50%;animation:v-sura 9s ease-in-out infinite alternate}
.v-bokeh i:nth-child(1){width:38%;left:6%;top:16%;background:var(--v-acc);opacity:.55}
.v-bokeh i:nth-child(2){width:26%;left:52%;top:8%;background:currentColor;opacity:.18;animation-duration:11s}
.v-bokeh i:nth-child(3){width:30%;left:60%;top:50%;background:var(--v-acc);opacity:.35;animation-duration:7s}
.v-bokeh i:nth-child(4){width:18%;left:30%;top:62%;background:currentColor;opacity:.22;animation-duration:13s}
.v-bokeh i:nth-child(5){width:12%;left:80%;top:22%;background:var(--v-acc);opacity:.6;animation-duration:8s}
.v-graella{position:absolute;inset:0;background-image:linear-gradient(to right,var(--v-linia) 1px,transparent 1px),linear-gradient(to bottom,var(--v-linia) 1px,transparent 1px);background-size:33.34% 100%,100% 33.34%;background-position:-1px 0,0 -1px}
.v-cant{position:absolute;width:1.75rem;height:1.75rem;border:2px solid currentColor}
.v-cant.c1{left:1rem;top:1rem;border-width:2px 0 0 2px}
.v-cant.c2{right:1rem;top:1rem;border-width:2px 2px 0 0}
.v-cant.c3{left:1rem;bottom:1rem;border-width:0 0 2px 2px}
.v-cant.c4{right:1rem;bottom:1rem;border-width:0 2px 2px 0}
.v-focus{position:absolute;left:39%;top:36%;width:22%;aspect-ratio:1;border:1.5px solid var(--v-acc);border-radius:0.25rem}
.v-dalt,.v-dades,.v-af{position:absolute;font:600 .7rem/1 var(--font-body);letter-spacing:.12em}
.v-dalt{left:3.375rem;top:1.75rem}
.v-dalt b{color:#E5484D;animation:v-parpelleja 1.4s steps(1) infinite}
.v-dades{left:3.375rem;bottom:1.75rem;font-variant-numeric:tabular-nums}
.v-af{right:3.375rem;bottom:1.75rem;color:var(--v-acc)}
.v-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* xarxes: un perfil que s'omple de publicacions */
.v-xarxes{max-width:18.75rem}
.v-telefon{padding:1rem 0.75rem 1.125rem;border-radius:1.875rem;background:var(--v-fons);border:1px solid var(--v-linia);box-shadow:0 1.875rem 3.75rem rgba(0,0,0,.2)}
.v-perfil{display:flex;align-items:center;gap:0.625rem;padding:2px 0.25rem 0.875rem}
.v-perfil i{flex:none;width:2.375rem;height:2.375rem;border-radius:50%;background:var(--v-acc);box-shadow:0 0 0 2px var(--v-fons),0 0 0 0.25rem var(--v-acc)}
.v-perfil b{display:block;font:600 .85rem/1.2 var(--font-body)}
.v-perfil span{display:block;width:5.625rem;height:0.375rem;margin-top:0.375rem;border-radius:3px;background:currentColor;opacity:.3}
.v-xarxes .v-graella{position:static;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:none}
.v-xarxes li{aspect-ratio:1;display:grid;place-items:end start;padding:0.4375rem;border-radius:3px;font:var(--display-weight) .78rem/1.1 var(--font-display);text-transform:var(--display-case)}
.v-xarxes .r0{background:var(--dark);color:var(--on-dark)}
.v-xarxes .r1{background:var(--accent-soft);color:var(--ink)}
.v-xarxes .r2{background:var(--bg-alt);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.v-nota{position:absolute;left:-28%;bottom:16%;margin:0;padding:0.625rem 0.875rem;border-radius:0.75rem;background:var(--surface);color:var(--ink)!important;font:600 .8rem/1.3 var(--font-body);box-shadow:0 0.875rem 2.125rem rgba(0,0,0,.2);white-space:nowrap}
.v-nota::before{content:"";display:inline-block;width:0.5rem;height:0.5rem;margin-right:0.5rem;border-radius:50%;background:var(--accent)}
/* avisos: la feina repetitiva que es fa sola */
.v-avisos{max-width:27.5rem}
.v-avisos ul{list-style:none;margin:0;padding:0;display:grid;gap:0.625rem}
.v-avisos li{display:grid;grid-template-columns:auto 1fr auto;gap:0.75rem;align-items:center;padding:0.875rem 1rem;border-radius:1rem;background:var(--v-fons);border:1px solid var(--v-linia);box-shadow:0 0.75rem 1.875rem rgba(0,0,0,.16)}
.v-avisos i{width:2.125rem;height:2.125rem;display:grid;place-items:center;border-radius:0.625rem;background:var(--v-acc);color:var(--v-acc-ink)}
.v-avisos i svg{width:1.125rem;height:1.125rem}
.v-avisos b{display:block;font:600 .92rem/1.3 var(--font-body)}
.v-avisos span{display:block;margin-top:2px;font-size:.84rem;opacity:.75}
.v-avisos small{align-self:start;font-size:.72rem;opacity:.6;white-space:nowrap}
@media (max-width:760px){.visual{justify-self:start}.v-nota{left:auto;right:-0.5rem;bottom:-0.875rem}.v-dalt,.v-dades{left:1.5rem}.v-af{right:1.5rem}.v-dalt{top:1.375rem}.v-dades,.v-af{bottom:1.375rem}}

/* ───── 23. Portada amb partícules (només nivell animat). Quieta (sense JavaScript o «reduir moviment»): la paraula en gran ───── */
.hero-particules .hero{position:relative;min-height:100vh;min-height:100svh;margin-top:-4.5rem;padding:calc(4.5rem + clamp(1rem,4vh,3rem)) 0 clamp(2rem,6vh,4rem);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:var(--dark);color:var(--on-dark)}
.hero-particules .hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-particules .hero-paraula{flex:1;display:flex;align-items:center;justify-content:center;gap:.22em;margin:0;padding:0 1.25rem;white-space:nowrap;color:var(--on-dark);
  font:var(--display-weight) calc(min(17vw,28vh) * var(--display-scale))/1 var(--font-display);letter-spacing:-.04em;text-transform:var(--display-case)}
.hero-particules .hero-paraula em{font-style:var(--em-style);color:var(--accent-on-dark)}
.hero-particules .hero-simbol{height:.92em;width:auto;flex:none}
.hero-particules .hero-imatge,.hero-particules .hero-final,.hero-particules .hero-baixa{display:none}
.hero-particules .hero-peu{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem clamp(2rem,6vw,6rem);align-items:end}
.hero-particules .hero h1{margin:0;max-width:15ch;font-size:calc(clamp(2.1rem,4vw,3.6rem) * var(--display-scale))}
.hero-particules .hero h1 em,.hero-particules .hero .etiqueta{color:var(--accent-on-dark)}
.hero-particules .hero .intro{margin:0 0 1.625rem;font-size:1.05rem;color:var(--on-dark-soft)}
.hero-particules .hero .btn-1{background:var(--accent-on-dark);color:var(--dark)}
.hero-particules .hero .btn-2{color:var(--on-dark);border-color:color-mix(in srgb,var(--on-dark) 40%,transparent)}
.hero-particules .hero .btn-2:hover{border-color:var(--on-dark)}
.hero-particules .hero :focus-visible{outline-color:var(--accent-on-dark)}
@media (max-width:760px){.hero-particules .hero-peu{grid-template-columns:1fr}.hero-particules .hero-paraula{font-size:calc(19vw * var(--display-scale))}}

/* ───── 24. Models: webs d'exemple en una galeria horitzontal (al mòbil, es llisca amb el dit) ───── */
.models-pista{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 max(1.25rem,calc((100% - 73.75rem) / 2)) 0.5rem}
.models-pista::-webkit-scrollbar{display:none}
.models-llista{display:flex;gap:clamp(1rem,2.5vw,2rem);width:max-content;list-style:none;margin:0;padding:0}
.model{width:min(82vw,40rem);scroll-snap-align:start}
.model a{display:block;padding:clamp(1rem,2vw,1.5rem);border-radius:var(--radius);color:inherit;text-decoration:none;background:color-mix(in srgb,var(--on-dark) 6%,transparent);border:1px solid color-mix(in srgb,var(--on-dark) 12%,transparent);transition:border-color .3s,background-color .3s}
.model a:hover{border-color:var(--accent-on-dark);background:color-mix(in srgb,var(--on-dark) 9%,transparent)}
.model .foto{aspect-ratio:16/11;margin-bottom:1.125rem}
.model-peu{display:flex;justify-content:space-between;align-items:end;gap:1rem}
.model-peu b{display:block;font:var(--display-weight) 1.4rem/1.15 var(--font-display);letter-spacing:var(--display-tracking);text-transform:var(--display-case)}
.model-peu span span{display:block;margin-top:0.25rem;font-size:.92rem;color:var(--on-dark-soft)}
.model-nivell{flex:none;padding:0.4375rem 0.75rem;border-radius:6.1875rem;border:1px solid currentColor;font:600 .72rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark)}
.models-avis{margin:1.75rem 0 0;font-size:.85rem;color:var(--on-dark-soft)}

/* ───── 25. Món de partícules ("animacio": {"particules": …}): tota la web fosca, amb els punts darrere el contingut.
   Els colors de l'estil es tornen a assignar per a fons fosc; sense JavaScript es veu igual, però sense punts. ───── */
body.mon-particules{background:var(--dark);color:var(--on-dark);
  --bg:var(--dark);--bg-alt:color-mix(in srgb,var(--on-dark) 4%,var(--dark));--surface:color-mix(in srgb,var(--on-dark) 7%,var(--dark));
  --ink:var(--on-dark);--ink-soft:var(--on-dark-soft);--line:color-mix(in srgb,var(--on-dark) 16%,transparent);
  --accent:var(--accent-on-dark);--accent-ink:var(--dark);--accent-soft:color-mix(in srgb,var(--accent-on-dark) 18%,var(--dark));--accent-text:var(--accent-on-dark)}
.mon-particules main{position:relative;z-index:1}
.mon-particules .sec-alt,.mon-particules .sec-dark,.mon-particules .capitol,.mon-particules .peu-web{background:transparent}
.mon-particules .peu-web{position:relative;z-index:1;border-top:1px solid var(--line)}
.mon-particules .capitol{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.mon-particules .capitol .wrap{align-items:start;align-content:center}
.mon-particules .capitol .paraula,.mon-particules .capitol .cos{grid-column:1}
.mon-particules .capitol .paraula{font-size:calc(min(11vw,10rem) * var(--display-scale));color:var(--accent-on-dark)}
.mon-particules .capitol.mida-2 .paraula{font-size:calc(min(8.6vw,8rem) * var(--display-scale))}
.mon-particules .capitol.mida-3 .paraula{font-size:calc(min(6.8vw,6.4rem) * var(--display-scale))}
.mon-particules .capitol.mida-4 .paraula{font-size:calc(min(5.4vw,5rem) * var(--display-scale))}
.mon-particules .capitol .cos p{color:var(--on-dark-soft)}
.mon-particules .capitol .etiqueta,.mon-particules .capitol h3 em{color:var(--accent-on-dark)}
.mon-particules .capitol .visual,.mon-particules .capitol .foto{display:none}
.mon-particules .passos li::before{background:var(--dark)}
.mon-particules .form{box-shadow:none;border:1px solid var(--line)}
.mon-particules .particules-mon{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
@media (min-width:761px){.mon-particules [data-forma-costat] .wrap>*{max-width:50%}}
@media (max-width:760px){
  .mon-particules .capitol .paraula{font-size:calc(17vw * var(--display-scale))}
  .mon-particules .capitol.mida-2 .paraula{font-size:calc(14vw * var(--display-scale))}
  .mon-particules .capitol.mida-3 .paraula{font-size:calc(11vw * var(--display-scale))}
  .mon-particules .capitol.mida-4 .paraula{font-size:calc(9vw * var(--display-scale))}
  .mon-particules .capitol[data-forma]{min-height:100svh;align-items:flex-start;padding:44vh 0 8vh}  /* a dalt, l'espai on els punts fan la forma */
  .mon-particules section[data-forma-costat]{padding-top:46vh}
}

/* ───── 26. Vídeo: un sol vídeo gran amb portada; no es descarrega fins que es prem el botó ───── */
.video-sec .sec-cap{margin-bottom:clamp(1.25rem,3.5vh,2.5rem)}
@media (min-width:901px){  /* a l'ordinador, text a l'esquerra i vídeo a la dreta: cap sencer en pantalles baixes */
  .video-sec .wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2rem,4vw,4rem);align-items:center}
  .video-sec .sec-cap{margin:0}
}
.video-marc{position:relative;overflow:hidden;border-radius:calc(var(--radius) * 1.4);background:#000;aspect-ratio:16/9;box-shadow:0 2.5rem 5.625rem rgba(0,0,0,.35);border:1px solid var(--line)}
.video-marc video{display:block;width:100%;height:100%;object-fit:cover}
.video-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:0.875rem;padding:0.75rem 1.625rem 0.75rem 0.75rem;border:0;border-radius:6.1875rem;cursor:pointer;
  background:var(--accent-on-dark);color:var(--dark);font:600 1rem/1 var(--font-body);box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.35)}
.video-play svg{width:2.75rem;height:2.75rem;padding:0.625rem;border-radius:50%;background:var(--dark);color:var(--accent-on-dark)}
.video-play[hidden]{display:none}

/* ───── 27. Serveis complets: selector de sector, la feina com a prova, «el que reps» i botó ───── */
.sectors-tria{position:sticky;top:4.5rem;transition:top .4s cubic-bezier(.2,.7,.2,1);z-index:30;padding:.7rem 0;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.cap-amagada .sectors-tria{top:0}
.sectors-tria .wrap{display:flex;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap}
.sectors-tria .wrap>span{font:600 .76rem/1.2 var(--font-body);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--ink-soft)}
.sectors-botons{display:flex;gap:.5rem;flex-wrap:wrap}
.sectors-botons button{font:600 .9rem/1 var(--font-body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:99px;padding:.65rem 1.1rem;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.sectors-botons button:hover{border-color:var(--accent-text)}
.sectors-avis{font-size:.8rem;color:var(--accent-text);opacity:0;transition:opacity .3s}
.sectors-avis.visible{opacity:1}
.sectors-botons button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (max-width:760px){.sectors-tria .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sectors-tria .wrap>span{display:none}.sectors-botons{flex-wrap:nowrap}.sectors-botons button{white-space:nowrap}}
.per-sector{margin:1.25rem 0 1.5rem;padding:1rem 1.25rem;border-left:2px solid var(--accent-text);border-radius:0 var(--radius) var(--radius) 0;background:color-mix(in srgb,var(--accent-text) 8%,transparent)}
.per-sector-titol{display:block;margin-bottom:.4rem;font:600 .72rem/1.2 var(--font-body);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--accent-text)}
.capitol .per-sector p{margin:0;font-size:1rem;color:var(--ink)}
.capitol .servei-prova .wrap{display:block}
.servei-prova{padding:clamp(1.5rem,5vh,3.5rem) 0}
.prova-peu{margin:1rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.capitol .wrap.servei-peu{display:grid;grid-template-columns:1fr;justify-items:start;gap:1.75rem;padding-bottom:clamp(4rem,14vh,9rem)}  /* el botó a l'esquerra: a la dreta hi ha els botons flotants */
.servei-peu .inclou{width:100%}
.inclou ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:0 2rem}
.inclou li{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 0;border-top:1px solid var(--line)}
.inclou svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.2rem;color:var(--accent-text)}
@media (max-width:760px){.servei-peu .btn{width:100%}}
/* pantalla: la web es desplaça sola dins l'ordinador i el mòbil */
.pantalla-var{margin:0;display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.aparells{position:relative;padding-right:12%;padding-bottom:6%}
.portatil{overflow:hidden;border-radius:.9rem;background:#F3F2EE;border:1px solid color-mix(in srgb,var(--on-dark) 18%,transparent);box-shadow:0 2.5rem 5rem rgba(0,0,0,.4)}
.portatil-barra{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:#EDEBE6}
.portatil-barra i{width:.55rem;height:.55rem;border-radius:50%;background:#D5D2CA}
.portatil-barra span{flex:1;max-width:16rem;margin-left:.6rem;padding:.3rem .8rem;border-radius:99px;background:#E1DED7;font:500 .7rem/1 var(--font-body);color:#666}
.portatil-pantalla,.mobil-pantalla{overflow:hidden;background:#fff}
.portatil-pantalla{aspect-ratio:16/10}
.mobil-ap{position:absolute;right:0;bottom:0;width:24%;padding:.4rem;border-radius:1.6rem;background:#111;box-shadow:0 1.5rem 3rem rgba(0,0,0,.5)}
.mobil-pantalla{aspect-ratio:9/19;border-radius:1.25rem}
.pagina{display:block;width:100%;height:auto;max-width:none}
.pantalla-var figcaption{display:grid;gap:.6rem;justify-items:start}
.pantalla-var figcaption b{font:var(--display-weight) calc(1.6rem * var(--display-scale))/1.15 var(--font-display);letter-spacing:var(--display-tracking)}
.pantalla-var figcaption>span:not(.etiqueta){color:var(--ink-soft)}
.pantalla-var .etiqueta{margin:0}
.enllac-fletxa{font-weight:600;color:var(--accent-text);text-decoration:none}
.enllac-fletxa:hover{text-decoration:underline}
@media (max-width:860px){.pantalla-var{grid-template-columns:1fr}}
/* galeria de fotos: tres columnes que es mouen a velocitats diferents */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.5vw,1.25rem);align-items:start}
.g-col{display:grid;gap:clamp(.75rem,1.5vw,1.25rem)}
.g-col:nth-child(2){margin-top:clamp(2rem,8vh,6rem)}
.g-foto{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-img)}
.g-foto img{display:block;width:100%;height:auto}
.g-foto figcaption{position:absolute;left:.75rem;bottom:.75rem;padding:.4rem .75rem;border-radius:99px;background:color-mix(in srgb,var(--dark) 72%,transparent);color:var(--on-dark);font:600 .68rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:760px){.galeria{grid-template-columns:1fr 1fr}.g-col:nth-child(2){margin-top:2rem}.g-col:nth-child(3){grid-column:1/-1;grid-template-columns:1fr 1fr}}
/* reels: vídeos dins de mòbils, i idees de publicacions per al sector */
.prova-reels{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.telefons{display:flex;justify-content:center;gap:clamp(1rem,3vw,2.5rem);padding-bottom:2.5rem}
.telefon-reel{width:min(46%,15rem);padding:.4rem;border-radius:2rem;background:#111;box-shadow:0 2rem 4rem rgba(0,0,0,.45)}
.telefon-reel:nth-child(1){rotate:-4deg}
.telefon-reel:nth-child(2){rotate:4deg;translate:0 2.5rem}
.telefon-reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:1.65rem;background:#000}
.idees ol{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.6rem}
.idees li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:center;padding:1rem 1.2rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.idees li b{font:600 .75rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.prova-reels .prova-peu{grid-column:1/-1}
@media (max-width:860px){.prova-reels{grid-template-columns:1fr}}
/* demo d'automatització: un client escriu i els avisos arriben sols */
.prova-demo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.demo-form{display:grid;gap:1rem;padding:clamp(1.5rem,3vw,2.25rem);border-radius:calc(var(--radius) * 1.2);background:var(--surface);border:1px solid var(--line)}
.demo-form .etiqueta{margin:0}
.demo-titol{font:var(--display-weight) calc(1.4rem * var(--display-scale))/1.2 var(--font-display);letter-spacing:var(--display-tracking)}
.camp-demo{display:grid;gap:.35rem;padding:.85rem 1rem;border-radius:.75rem;background:var(--bg);border:1px solid var(--line)}
.camp-demo span{font:600 .7rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.demo-avis{margin:0;font-size:.8rem;color:var(--ink-soft)}
.demo-mobil{justify-self:center;width:min(100%,21rem);padding:.45rem;border-radius:2.4rem;background:#111;box-shadow:0 2rem 4rem rgba(0,0,0,.45)}
.demo-pantalla{position:relative;min-height:30rem;padding:2.9rem .9rem 1rem;border-radius:2rem;background:linear-gradient(165deg,color-mix(in srgb,var(--accent-on-dark) 30%,var(--dark)),var(--dark) 70%)}
.demo-hora{position:absolute;top:1rem;left:0;right:0;text-align:center;font:600 .8rem/1 var(--font-body);color:var(--on-dark)}
.demo-avisos{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.demo-avisos li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;padding:.8rem .9rem;border-radius:1.1rem;background:color-mix(in srgb,var(--on-dark) 94%,transparent);color:var(--dark)}
.demo-avisos i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;background:var(--accent-on-dark);color:var(--dark)}
.demo-avisos i svg{width:1rem;height:1rem}
.demo-avisos b{display:block;font-size:.86rem;line-height:1.3}
.demo-avisos span{display:block;margin-top:.15rem;font-size:.8rem;line-height:1.35;opacity:.75}
.demo-avisos small{font-size:.68rem;opacity:.6;white-space:nowrap}
@media (max-width:860px){.prova-demo{grid-template-columns:1fr}}
.prova-video .video-marc{max-width:none}
/* al món de partícules, cada servei complet: la presentació ocupa una pantalla i a sota hi ha la prova */
.mon-particules .capitol.ric{display:block;min-height:0;padding:0}
.mon-particules .capitol.ric>.wrap:first-child{min-height:100vh;min-height:100svh;align-content:center}
@media (max-width:760px){
  .mon-particules .capitol.ric{min-height:0;padding:0}
  .mon-particules .capitol.ric>.wrap[data-forma]:first-child{min-height:0;padding:44vh 0 2vh}
}

/* ───── 28. Servei complet en dues columnes: què és (esquerra) · què reps, preu i botó (dreta) · la prova a sota ───── */
.capitol.ric>.wrap:first-child{grid-template-columns:1.05fr .95fr;align-items:start;gap:1.5rem clamp(2rem,5vw,5rem)}
.capitol.ric .paraula{grid-column:1/-1}
.servei-costat{display:grid;gap:1.25rem;padding:clamp(1.25rem,2.5vw,2rem);border-radius:calc(var(--radius) * 1.2);background:var(--surface);border:1px solid var(--line)}
.servei-costat .inclou ul{grid-template-columns:1fr;gap:0}
.servei-costat .inclou li{padding:.7rem 0}
.servei-costat .inclou li:first-child{border-top:0}
.servei-costat .btn{width:100%}
.preus{display:grid;grid-template-columns:1fr;gap:.75rem}
.preu-card{position:relative}
.preu-card.destacat::before{content:attr(data-destacat);position:absolute;top:-.6rem;right:1rem;padding:.25rem .6rem;border-radius:99px;background:var(--accent-text);color:var(--bg);font:700 .62rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.preu-punts{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.3rem;font-size:.85rem;color:var(--ink-soft)}
.preu-punts li{position:relative;padding-left:1rem}
.preu-punts li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:.4rem;border-radius:50%;background:var(--accent-text)}
.preu-card{display:grid;align-content:start;gap:.4rem;padding:1rem 1.1rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg)}
.preu-card.destacat{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}
.preu-nom{font:600 .72rem/1.2 var(--font-body);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--accent-text)}
.preu-xifra{font:var(--display-weight) calc(2rem * var(--display-scale))/1 var(--font-display);letter-spacing:var(--display-tracking)}
.preu-xifra small{margin-left:.25rem;font:500 .85rem/1 var(--font-body);color:var(--ink-soft)}
.capitol .preu-card p{margin:0;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.preus-nota{margin:-.5rem 0 0;font-size:.78rem;color:var(--ink-soft)}
.mon-particules .capitol.ric{padding:clamp(5rem,12vh,8rem) 0 0;border-top:1px solid var(--line)}
.mon-particules .capitol.ric>.wrap:first-child{min-height:0;align-content:start}
.mon-particules .capitol.ric .servei-prova{padding:clamp(2.5rem,6vh,4rem) 0 clamp(5rem,12vh,8rem)}
.mon-particules .capitol.ric:not(:has(.servei-prova)){padding-bottom:clamp(5rem,12vh,8rem)}
@media (max-width:860px){.capitol.ric>.wrap:first-child{grid-template-columns:1fr}}
@media (max-width:760px){.mon-particules .capitol.ric>.wrap:first-child{padding:0}}
/* feed: un mòbil amb el perfil d'un negoci, i al costat les idees de la setmana */
.prova-feed{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.feed-mobil{width:100%;max-width:20rem;padding:.45rem;border-radius:2.4rem;background:#111;box-shadow:0 2rem 4rem rgba(0,0,0,.45)}
.feed-pantalla{padding:2.4rem .7rem .9rem;border-radius:2rem;background:#fff;color:#111}
.feed-perfil{display:flex;align-items:center;gap:.75rem;padding:0 .2rem .9rem}
.feed-perfil i{flex:none;width:3rem;height:3rem;border-radius:50%;background:linear-gradient(135deg,#E9A27F,#9E3B22);box-shadow:0 0 0 2px #fff,0 0 0 4px #D9A066}
.feed-perfil b{display:block;font:600 .9rem/1.2 var(--font-body)}
.feed-perfil span{display:block;margin-top:.15rem;font-size:.75rem;color:#666}
.feed-graella{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.feed-graella li{aspect-ratio:4/5;overflow:hidden;background:#eee}
.feed-graella img{width:100%;height:100%;object-fit:cover}
.feed-graella .post-text{display:grid;place-items:center;padding:.5rem;text-align:center;font:700 .62rem/1.25 var(--font-display);letter-spacing:-.01em}
.feed-graella .post-text.to-fosc{background:var(--dark);color:var(--accent-on-dark)}
.feed-graella .post-text.to-accent{background:var(--accent-on-dark);color:var(--dark)}
.feed-graella .post-text.to-clar{background:#F3EFE7;color:#2B2A22}
.prova-feed .prova-peu{grid-column:1/-1}
@media (max-width:760px){.prova-feed{grid-template-columns:minmax(0,1fr);justify-items:center}.prova-feed .idees{width:100%}}

/* Pantalles dels serveis: amb el dit es pot lliscar la web dins el mòbil i l'ordinador */
@media (hover:none){.portatil-pantalla,.mobil-pantalla{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}.portatil-pantalla::-webkit-scrollbar,.mobil-pantalla::-webkit-scrollbar{display:none}}
@media (hover:hover){.portatil-pantalla,.mobil-pantalla{cursor:ns-resize}}
@media (min-width:861px){.capitol.ric>.wrap:first-child>.cos{position:sticky;top:9rem}}  /* el text del servei acompanya mentre es llegeix la columna de preus */

/* ───── 29. Dades: xifres grans amb la font enllaçada, i beneficis ───── */
.dades-xifres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.dades-xifres > li{display:grid;align-content:start;gap:.6rem;padding:clamp(1.25rem,2.5vw,1.75rem);border-radius:calc(var(--radius) * 1.2);background:var(--surface);border:1px solid var(--line)}
.dada-num{font:var(--display-weight) calc(clamp(2.6rem,4.5vw,3.6rem) * var(--display-scale))/1 var(--font-display);letter-spacing:var(--display-tracking);color:var(--accent-text);font-variant-numeric:tabular-nums}
.dades-xifres p{margin:0;font-size:1.02rem;color:var(--ink)}
.dada-detall{font-size:.9rem;color:var(--ink-soft)}
.dada-font{margin-top:.4rem;font-size:.75rem;color:var(--ink-soft);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.dada-font:hover{color:var(--accent-text)}
.beneficis{list-style:none;margin:clamp(2.5rem,6vh,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:0 2rem;border-top:1px solid var(--line)}
.beneficis li{display:grid;gap:.4rem;padding:1.4rem 0}
.beneficis b{font:var(--display-weight) calc(1.25rem * var(--display-scale))/1.2 var(--font-display);letter-spacing:var(--display-tracking)}
.beneficis span{color:var(--ink-soft);font-size:.95rem}

.cas-font{margin:1rem 0 0;font-size:.75rem!important;color:var(--ink-soft)}

/* ───── 30. Gràfics de dades (SVG dins la pàgina; sense JavaScript es veuen amb el valor final) ───── */
.dades-xifres{grid-template-columns:repeat(4,minmax(0,1fr))}
.dades-xifres > li.ample{grid-column:span 2}
@media (max-width:1000px){.dades-xifres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dades-xifres{grid-template-columns:1fr}.dades-xifres > li.ample{grid-column:auto}}
.dades-xifres > li{position:relative;overflow:hidden}
.g-anell{width:7.5rem;height:7.5rem;margin-bottom:.4rem;transform:rotate(-90deg)}
.g-anell circle{fill:none;stroke-width:10;stroke-linecap:round}
.g-anell .pista{stroke:color-mix(in srgb,var(--accent-on-dark) 16%,transparent);stroke-dasharray:none}
.g-anell .valor{stroke:var(--accent-on-dark)}
.g-punts{display:grid;grid-template-columns:repeat(10,1fr);gap:.28rem;width:min(100%,9rem);margin-bottom:.5rem}
.g-punts i{aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--on-dark) 14%,transparent)}
.g-punts i.on{background:var(--accent-on-dark)}
.g-barres{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:1.1rem}
.g-barres li{display:grid;grid-template-columns:1fr auto;gap:.45rem 1rem;align-items:center}
.g-etiq{font-size:.92rem;color:var(--ink-soft)}
.g-barres b{font:var(--display-weight) calc(clamp(2rem,3.4vw,2.8rem) * var(--display-scale))/1 var(--font-display);letter-spacing:var(--display-tracking);color:var(--on-dark-soft)}
.g-barres li.destacat b{color:var(--accent-on-dark)}
.g-barra{grid-column:1/-1;width:100%;height:1.1rem}
.g-barra .pista{fill:color-mix(in srgb,var(--on-dark) 10%,transparent)}
.g-barra .valor{fill:color-mix(in srgb,var(--on-dark) 38%,transparent)}
.g-barres li.destacat .g-barra .valor{fill:var(--accent-on-dark)}
/* gràfic d'àrea (cas real) */
.g-serie{margin:clamp(2.5rem,6vh,4rem) 0 0;padding:clamp(1.25rem,2.5vw,2rem);border-radius:calc(var(--radius) * 1.2);background:var(--surface);border:1px solid var(--line)}
.g-serie figcaption{display:grid;gap:.3rem;margin-bottom:1rem}
.g-serie figcaption b{font:var(--display-weight) calc(1.3rem * var(--display-scale))/1.2 var(--font-display);letter-spacing:var(--display-tracking)}
.g-serie figcaption span{font-size:.9rem;color:var(--ink-soft)}
.g-serie-cos{position:relative}
.g-serie svg{display:block;width:100%;height:auto;overflow:visible}
.g-grid{stroke:color-mix(in srgb,var(--on-dark) 10%,transparent);stroke-width:1}
.g-eix{fill:var(--ink-soft);font:500 11px var(--font-body)}
.g-area{fill:color-mix(in srgb,var(--accent-on-dark) 14%,transparent)}
.g-linia{fill:none;stroke:var(--accent-on-dark);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-marca{stroke:var(--on-dark-soft);stroke-width:1}
.g-punt{fill:var(--accent-on-dark);stroke:var(--surface);stroke-width:2}
.g-marca-text{position:absolute;top:0;transform:translateX(-100%);margin-left:-.5rem;padding:.3rem .6rem;border-radius:99px;background:var(--bg);border:1px solid var(--line);font:600 .72rem/1 var(--font-body);color:var(--on-dark);white-space:nowrap}
.g-tip{position:absolute;top:0;pointer-events:none;padding:.5rem .7rem;border-radius:.6rem;background:var(--bg);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:.8rem;white-space:nowrap;transform:translateX(-50%)}
.g-tip b{display:block;font-size:1rem;color:var(--on-dark)}
.g-cursor{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--on-dark) 35%,transparent);pointer-events:none}
.g-taula{margin-top:1rem;font-size:.85rem;color:var(--ink-soft)}
.g-taula summary{cursor:pointer}
.g-taula table{margin-top:.5rem;border-collapse:collapse;font-size:.8rem}
.g-taula th,.g-taula td{padding:.15rem .8rem .15rem 0;text-align:left;font-weight:400}
.g-font{margin:.6rem 0 0;font-size:.75rem;color:var(--ink-soft)}
/* llum que segueix el cursor a les targetes (la posició la posa animacio.js) */
.llum{position:relative;isolation:isolate}
.llum::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(22rem circle at var(--lx,50%) var(--ly,50%),color-mix(in srgb,var(--accent-on-dark) 13%,transparent),transparent 60%)}
.llum:hover::after{opacity:1}
/* resplendor de fons a les seccions clau */
.dades,#cas{position:relative;isolation:isolate}
.dades::before,#cas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(45rem 26rem at 85% 10%,color-mix(in srgb,var(--accent-on-dark) 9%,transparent),transparent 70%)}

/* ───── 31. «Quin negoci tens?»: botons per tipus de negoci i una fitxa que canvia a la vista ───── */
.negocis{padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,8vh,5rem)}
.negocis-grup{display:grid;grid-template-columns:11rem 1fr;gap:.75rem 1.5rem;align-items:center;margin-bottom:.9rem}
.negocis-grup-nom{font:600 .72rem/1.3 var(--font-body);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--ink-soft)}
.negocis-botons{display:flex;flex-wrap:wrap;gap:.5rem}
.negocis-botons button{font:600 .95rem/1 var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:.8rem 1.25rem;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .2s}
.negocis-botons button:hover{border-color:var(--accent-text);transform:translateY(-1px)}
.negocis-botons button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.negoci-fitxes{margin-top:clamp(1.5rem,4vh,2.5rem)}
.negoci-fitxa{display:grid;grid-template-columns:1fr 1.2fr .9fr;gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.5rem,3vw,2.5rem);border-radius:calc(var(--radius) * 1.4);background:linear-gradient(140deg,color-mix(in srgb,var(--accent-on-dark) 12%,var(--surface)),var(--surface) 60%);border:1px solid color-mix(in srgb,var(--accent-on-dark) 30%,var(--line))}
.negoci-fitxa .etiqueta{margin-bottom:.6rem}
.nf-problema p{margin:0;font:var(--display-weight) calc(clamp(1.3rem,2.2vw,1.75rem) * var(--display-scale))/1.25 var(--font-display);letter-spacing:var(--display-tracking);color:var(--ink)}
.nf-solucions ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.nf-solucions li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink)}
.nf-solucions svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.2rem;color:var(--accent-text)}
.nf-reco{display:grid;align-content:start;gap:.6rem}
.nf-pla{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-radius:.7rem;background:var(--bg);border:1px solid var(--line)}
.nf-pla b{font-weight:600}
.nf-pla span{font:var(--display-weight) 1.05rem/1.2 var(--font-display);color:var(--accent-text);white-space:nowrap}
.nf-reco .btn{margin-top:.4rem;width:100%}
.negocis-nota{margin:1rem 0 0;font-size:.85rem;color:var(--ink-soft)}
@media (max-width:900px){.negoci-fitxa{grid-template-columns:1fr}.negocis-grup{grid-template-columns:1fr}}
@media (max-width:560px){.negocis-botons{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-1.25rem;padding-right:1.25rem}.negocis-botons::-webkit-scrollbar{display:none}.negocis-botons button{white-space:nowrap}}

/* ───── 32. Servei amb la prova al costat: text a dalt a l'esquerra, la galeria a sota i els preus a la dreta ───── */
@media (min-width:861px){
  .capitol.prova-costat>.wrap:first-child{grid-template-areas:"paraula paraula" "cos costat" "galeria costat";grid-template-rows:auto auto 1fr}
  .capitol.prova-costat .paraula{grid-area:paraula}
  .capitol.prova-costat>.wrap:first-child>.cos{grid-area:cos;position:static}
  .capitol.prova-costat .servei-costat{grid-area:costat;align-self:start;position:sticky;top:6rem}
  .capitol.prova-costat .servei-galeria{grid-area:galeria}
}
.servei-galeria .galeria.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.servei-galeria .galeria.cols-2 .g-col:nth-child(2){margin-top:clamp(2rem,6vh,4rem)}
.mon-particules .capitol.prova-costat{padding-bottom:clamp(5rem,12vh,8rem)}

/* ───── 33. Preus: pestanyes per servei i els plans un al costat de l'altre, tots visibles d'un cop ───── */
.preus-sec{position:relative;isolation:isolate}
.preus-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50rem 28rem at 50% 70%,color-mix(in srgb,var(--accent-on-dark) 10%,transparent),transparent 70%)}
.preus-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;margin-bottom:clamp(1.75rem,4vh,2.75rem)}
.preus-cap .sec-cap{margin:0;max-width:34rem}
.preus-pestanyes{position:relative;display:inline-flex;padding:.35rem;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.preus-pestanyes button{position:relative;z-index:1;display:grid;gap:.15rem;justify-items:center;padding:.65rem 1.4rem;border:0;border-radius:99px;background:none;color:var(--ink-soft);cursor:pointer;font:600 .95rem/1 var(--font-body);transition:color .3s}
.preus-pestanyes button small{font:500 .68rem/1 var(--font-body);letter-spacing:.06em;opacity:.75}
.preus-pestanyes button[aria-selected="true"]{color:var(--accent-ink)}
.preus-indicador{position:absolute;top:.35rem;bottom:.35rem;left:.35rem;width:0;border-radius:99px;background:var(--accent);box-shadow:0 6px 24px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.preus-pestanyes:not(.amb-indicador) button[aria-selected="true"]{background:var(--accent)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.5rem);align-items:stretch}
.pla{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.4rem,2.2vw,2rem);border-radius:calc(var(--radius) * 1.3);
  background:linear-gradient(170deg,color-mix(in srgb,var(--on-dark) 6%,var(--surface)),var(--surface));border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.pla:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent-on-dark) 45%,var(--line))}
.pla.destacat{border:1px solid transparent;
  background:linear-gradient(170deg,color-mix(in srgb,var(--accent-on-dark) 14%,var(--surface)),var(--surface)) padding-box,
             linear-gradient(160deg,var(--accent-on-dark),color-mix(in srgb,var(--accent-on-dark) 15%,transparent) 60%) border-box;
  box-shadow:0 24px 60px -20px color-mix(in srgb,var(--accent-on-dark) 40%,transparent)}
.pla-insignia{position:absolute;top:-.75rem;left:clamp(1.4rem,2.2vw,2rem);padding:.4rem .8rem;border-radius:99px;background:var(--accent-on-dark);color:var(--dark);font:700 .68rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.pla-nom{margin:0;font:600 .8rem/1.2 var(--font-body)!important;letter-spacing:var(--eyebrow-tracking)!important;text-transform:uppercase!important;color:var(--accent-text)}
.pla-preu{display:flex;align-items:baseline;gap:.5rem;margin:0}
.pla-preu b{font:var(--display-weight) calc(clamp(2.4rem,3.6vw,3.2rem) * var(--display-scale))/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.pla-preu span{font-size:.85rem;color:var(--ink-soft)}
.pla-text{margin:0;font-size:.9rem;color:var(--ink-soft)}
.pla-punts{list-style:none;margin:0;padding:.9rem 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem;flex:1;align-content:start}
.pla-punts li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;line-height:1.4;color:var(--ink)}
.pla-punts svg{width:1rem;height:1rem;flex:none;margin-top:.15rem;color:var(--accent-text)}
.pla .btn{width:100%;margin-top:.25rem}
.preus-nota{margin:1.25rem 0 0;text-align:center;font-size:.85rem;color:var(--ink-soft)}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}.preus-cap{flex-direction:column;align-items:stretch}.preus-pestanyes{align-self:stretch}.preus-pestanyes button{flex:1;padding:.65rem .5rem}}
/* preus: tot l'apartat ha de cabre en una pantalla d'ordinador (també en una de 1280×690) */
@media (min-width:901px){
  .preus-sec{padding:clamp(2.5rem,7vh,5rem) 0}
  .preus-cap{margin-bottom:clamp(1.5rem,3.5vh,2.5rem)}
  .preus-cap .sec-cap{gap:.6rem}
  .preus-cap .sec-cap .etiqueta{margin-bottom:0}
  .preus-cap h2{font-size:calc(clamp(1.8rem,3vw,2.7rem) * var(--display-scale));margin:0}
  .preus-cap .intro{font-size:.98rem;margin:0}
  .pla{gap:.7rem;padding:clamp(1.2rem,1.8vw,1.75rem)}
  .pla-preu b{font-size:calc(clamp(2.1rem,3vw,2.9rem) * var(--display-scale))}
  .pla-punts{padding-top:.75rem;gap:.45rem}
  .preus-nota{margin-top:.9rem}
}

/* ───── 34. «Per què una web» en versió impacte: dada protagonista, la bretxa i una dada de suport ─────
   Un sol color nou, l'ambre (--alerta), i només per marcar el que es perd. */
.dades{--alerta:#CFA46A;--alerta-suau:color-mix(in srgb,#CFA46A 16%,transparent)}
.dades .sec-cap h2{font-size:calc(clamp(2.6rem,5.6vw,4.6rem) * var(--display-scale));line-height:1}
.d-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin:clamp(1rem,3vh,2rem) 0 clamp(3rem,8vh,5rem)}
.d-gegant{display:block;font:700 clamp(6rem,16vw,14rem)/.86 var(--font-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--accent-on-dark);
  text-shadow:0 0 60px color-mix(in srgb,var(--accent-on-dark) 22%,transparent);white-space:nowrap}
.d-hero-num p{margin:1rem 0 .6rem;max-width:28rem;font:var(--display-weight) calc(clamp(1.2rem,2vw,1.6rem) * var(--display-scale))/1.3 var(--font-display);letter-spacing:var(--display-tracking);color:var(--on-dark)}
.d-graella{margin:0;justify-self:end;width:min(100%,19rem)}
.d-punts{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(.35rem,.8vw,.55rem)}
.d-punts i{aspect-ratio:1;border-radius:50%}
.d-punts i.on{background:var(--accent-on-dark)}
.d-punts i.off{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-dark) 35%,transparent)}
.d-graella figcaption{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;font-size:.8rem;color:var(--ink-soft)}
.d-graella figcaption i{width:.7rem;height:.7rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-dark) 35%,transparent)}
/* la bretxa */
.d-bretxa{padding:clamp(1.5rem,3.5vw,3rem);border-radius:calc(var(--radius) * 1.4);background:color-mix(in srgb,var(--on-dark) 4%,var(--surface));border:1px solid var(--line)}
.d-files{display:grid;gap:1.4rem;margin:1rem 0 clamp(1.75rem,4vh,2.5rem)}
.d-fila{display:grid;grid-template-columns:minmax(10rem,15rem) 1fr 7.5rem;gap:1.25rem;align-items:center}
.d-fila-nom{font-size:.95rem;color:var(--ink-soft)}
.d-fila.propi .d-fila-nom{color:var(--on-dark);font-weight:600}
.d-barra{position:relative;height:1.75rem;border-radius:.4rem;background:color-mix(in srgb,var(--on-dark) 7%,transparent)}
.d-ple{position:absolute;inset:0 auto 0 0;border-radius:.4rem;background:color-mix(in srgb,var(--on-dark) 42%,transparent);transform-origin:left}
.d-fila.propi .d-ple{background:var(--accent-on-dark)}
.d-buit{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border-radius:.4rem;
  background:repeating-linear-gradient(135deg,var(--alerta-suau) 0 6px,transparent 6px 12px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--alerta) 55%,transparent)}
.d-buit span{font:700 .72rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--alerta);white-space:nowrap}
.d-fila-num{white-space:nowrap;text-align:right;font:var(--display-weight) calc(clamp(1.5rem,2.4vw,2rem) * var(--display-scale))/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-dark-soft)}
.d-fila.propi .d-fila-num{color:var(--accent-on-dark)}
.d-perdua{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-top:clamp(1.25rem,3vh,2rem);border-top:1px solid var(--line)}
.d-perdua>b{font:700 clamp(3.5rem,8vw,6.5rem)/.9 var(--font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--alerta)}
.d-perdua p{margin:0;color:var(--ink-soft)}
.d-perdua .d-perdua-titol{margin-bottom:.35rem;font:var(--display-weight) calc(clamp(1.25rem,2.2vw,1.7rem) * var(--display-scale))/1.2 var(--font-display);letter-spacing:var(--display-tracking);color:var(--on-dark)}
.d-font{margin:1.25rem 0 0;font-size:.75rem;color:var(--ink-soft)}
.d-font a{color:inherit}
/* dada de suport */
.d-suport{display:flex;align-items:center;gap:1.5rem;margin-top:clamp(2rem,5vh,3rem)}
.d-suport .g-anell{flex:none;width:5.5rem;height:5.5rem;margin:0}
.d-suport-num{font:700 calc(2.4rem * var(--display-scale))/1 var(--font-display);letter-spacing:-.03em;color:var(--on-dark)}
.d-suport p{margin:.3rem 0 .2rem;color:var(--ink-soft)}
@media (max-width:860px){
  .d-hero{grid-template-columns:1fr}.d-graella{justify-self:start}
  .d-fila{grid-template-columns:1fr auto;gap:.6rem 1rem}.d-fila .d-barra{grid-column:1/-1;grid-row:2}
  .d-perdua{flex-direction:column;align-items:flex-start}
}

/* ───── 35. Relat en quatre temps (problema · prova · solució · acció): proves a la portada, resultats amb xifres,
   serveis compactes, càpsula de serveis a mida, «com treballem» amb qui hi ha darrere, preguntes en dues columnes,
   garanties al contacte i botons flotants discrets ───── */
:root{--alerta:#CFA46A}


/* ───── 1. Portada ───── */
.hero-particules .hero h1{max-width:12ch;font-size:calc(clamp(2.6rem,5.2vw,4.6rem) * var(--display-scale))}
.hero-proves{list-style:none;margin:clamp(1.75rem,4vh,2.75rem) 0 0;padding:clamp(1.1rem,2.5vh,1.5rem) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem clamp(1.5rem,4vw,3.5rem);border-top:1px solid var(--line);position:relative;z-index:2}
.hero-proves li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center}
.hero-proves b{font:700 calc(clamp(1.9rem,3vw,2.6rem) * var(--display-scale))/1 var(--font-display);letter-spacing:-.04em;color:var(--accent-on-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-proves span{font-size:.85rem;line-height:1.4;color:var(--on-dark-soft);max-width:26ch}
@media (max-width:860px){.hero-proves{grid-template-columns:1fr;gap:.9rem}.hero-proves span{max-width:none}}
@media (max-width:760px){.hero-particules .hero-paraula{flex:0 0 auto;min-height:28vh}}

/* ───── 2. Per què una web ───── */
.d-pont{margin:clamp(3rem,8vh,5rem) 0 0;max-width:22ch;font:var(--display-weight) calc(clamp(1.9rem,4vw,3.3rem) * var(--display-scale))/1.08 var(--font-display);letter-spacing:var(--display-tracking);color:var(--on-dark);text-wrap:balance}
.d-pont em{font-style:normal;color:var(--accent-on-dark)}
.beneficis.numerats{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;border-top:0;margin-top:clamp(2rem,5vh,3rem)}
.beneficis.numerats li{position:relative;align-content:start;padding:1.5rem 1.4rem 1.6rem;border-radius:calc(var(--radius) * 1.1);background:var(--surface);border:1px solid var(--line);transition:border-color .3s,transform .3s}
.beneficis.numerats li:hover{border-color:color-mix(in srgb,var(--accent-on-dark) 45%,var(--line));transform:translateY(-3px)}
.beneficis .b-num{font:700 .72rem/1 var(--font-body);letter-spacing:.14em;color:var(--accent-on-dark);margin-bottom:.9rem}
@media (max-width:1000px){.beneficis.numerats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.beneficis.numerats{grid-template-columns:1fr}}

/* ───── 3. Resultats: la xifra gran primer, el gràfic com a prova i el projecte a sota ───── */
.cas-cap{max-width:58rem}
.cas-cap h2{font-size:calc(clamp(2.1rem,4.4vw,3.8rem) * var(--display-scale));line-height:1.04}
.cas-kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1rem;align-items:stretch}
.cas-kpi{display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;padding:clamp(1.25rem,2.5vw,2rem);border-radius:calc(var(--radius) * 1.2);background:var(--surface);border:1px solid var(--line)}
.cas-kpi b{font:700 calc(clamp(2.4rem,4.2vw,3.6rem) * var(--display-scale))/.95 var(--font-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--on-dark);white-space:nowrap}
.cas-kpi b .abans{color:var(--on-dark-soft);opacity:.7}
.cas-kpi b i{font-style:normal;margin:0 .18em;color:var(--accent-on-dark);font-weight:400}
.cas-kpi > span{font-size:.92rem;color:var(--ink-soft)}
.cas-kpi.gran{background:linear-gradient(150deg,color-mix(in srgb,var(--accent-on-dark) 16%,var(--surface)),var(--surface) 70%);border-color:color-mix(in srgb,var(--accent-on-dark) 40%,var(--line))}
.cas-kpi.gran b{font-size:clamp(4.5rem,10vw,8.5rem);line-height:.82;letter-spacing:-.06em;color:var(--accent-on-dark);text-shadow:0 0 60px color-mix(in srgb,var(--accent-on-dark) 22%,transparent)}
.cas-kpi.gran > span{font:var(--display-weight) calc(clamp(1.1rem,1.8vw,1.4rem) * var(--display-scale))/1.25 var(--font-display);letter-spacing:var(--display-tracking);color:var(--on-dark)}
#cas .g-serie{margin-top:1rem}
.cas-baix{margin-top:clamp(3rem,7vh,4.5rem);grid-template-columns:1.1fr .9fr}
.cas-baix .intro{color:var(--on-dark)}
.cas-baix .punts{margin:1.25rem 0 1.75rem}
@media (max-width:860px){.cas-kpis{grid-template-columns:1fr 1fr}.cas-kpi.gran{grid-column:1/-1}.cas-baix{grid-template-columns:1fr}.cas-baix .foto{order:2}}
@media (max-width:480px){.cas-kpis{grid-template-columns:1fr}}

/* ───── 4. Serveis ───── */
.models-mini{margin:0;font-size:.85rem;color:var(--ink-soft)}
.models-mini a{font-weight:600}
.servei-costat .enllac-fletxa + .enllac-fletxa{margin-top:-.6rem}
/* els capítols, una mica més compactes: abans eren 5 pantalles llargues */
.mon-particules .capitol{min-height:auto;padding:clamp(4rem,9vh,6.5rem) 0}

/* ───── 5. Preus ───── */
.preus-sec .plans{position:relative;z-index:1}  /* la nota de sota no es veu entre les targetes mentre entren */
.preus-mida{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;margin:1.5rem auto 0;padding:1rem 1.4rem;max-width:46rem;border-radius:99px;border:1px dashed var(--line);font-size:.92rem;color:var(--ink-soft);text-align:center}
.preus-mida b{color:var(--on-dark)}
.preus-mida a{font-weight:600;text-decoration:none}
@media (max-width:560px){.preus-mida{border-radius:var(--radius)}}

/* ───── 6. Com treballem + qui som ───── */
.com-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.com-grid .passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 2rem}
.com-grid .passos h3{font-size:calc(1.3rem * var(--display-scale))}
.qui{padding:clamp(1.5rem,3vw,2.25rem);border-radius:calc(var(--radius) * 1.3);background:var(--surface);border:1px solid var(--line)}
.qui h3{margin:0 0 1rem;font-size:calc(clamp(1.5rem,2.4vw,2rem) * var(--display-scale))}
.qui p{color:var(--ink-soft);margin:0 0 .9rem}
.qui p:last-child{margin:0}
@media (max-width:900px){.com-grid{grid-template-columns:1fr}}
@media (max-width:560px){.com-grid .passos{grid-template-columns:1fr}}

/* ───── 7. Preguntes ───── */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-grid .sec-cap{position:sticky;top:6.5rem;margin:0}
.faq-grid .faq{max-width:none}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-grid .sec-cap{position:static}}

/* ───── 8. Contacte ───── */
.garanties{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem}
.garanties li{display:flex;gap:.65rem;align-items:flex-start;color:var(--on-dark)}
.garanties svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.2rem;color:var(--accent-on-dark)}
.contacte .vies{padding-top:1.5rem;border-top:1px solid var(--line)}

/* ───── 9. Botons flotants: s'amaguen quan ja ets al contacte i no tapen el peu ───── */
.contacte-flota{transition:opacity .3s,translate .3s}
.contacte-flota.amaga{opacity:0;translate:0 1rem;pointer-events:none}
body:has(.contacte-flota) .peu-web{padding-bottom:6.5rem}
/* a l'ordinador, només icones: no tapen el contingut (el text queda per als lectors de pantalla) */
@media (min-width:761px){
  .contacte-flota{flex-direction:column;gap:.5rem}
  .contacte-flota a{width:3.25rem;min-height:3.25rem;padding:0;border-radius:50%}
  .contacte-flota a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* al mòbil: el WhatsApp com a botó principal a la dreta i el correu només amb icona (abans ocupaven tota l'amplada) */
@media (max-width:760px){
  .contacte-flota{left:auto;right:.75rem;bottom:.75rem}
  .contacte-flota a{flex:none}
  .contacte-flota .cf-mail{width:3.25rem;padding:0;border-radius:50%}
  .contacte-flota .cf-mail span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:560px){
  .com-grid .passos{gap:1.5rem}
  .com-grid .passos li{padding:0 0 0 3.5rem}
  .com-grid .passos li::before{width:2.4rem;height:2.4rem}
}

/* ───── 36. Temes de secció (paleta de la marca): cada secció pot canviar de fons i de colors amb "tema" a la fitxa.
   paper (clar) · pedra (clar càlid) · avet (verd profund) · nit (fosc). Contrast AA comprovat per a tots els textos. ───── */
.tema-paper,.tema-pedra,.tema-avet,.tema-nit{position:relative;isolation:isolate;color:var(--ink)}
body .tema-paper{--bg:#F7F5EF;--bg-alt:#EFECE4;--surface:#FFFFFF;--ink:#0D1F24;--ink-soft:#4A5A5D;--line:#DAD6CB;
  --accent:#23695F;--accent-ink:#FFFFFF;--accent-text:#23695F;--accent-soft:#D6E8E3;--on-dark:#0D1F24;--on-dark-soft:#4A5A5D;--accent-on-dark:#23695F;background:var(--bg)!important}
body .tema-pedra{--bg:#E9E6DD;--bg-alt:#E1DDD2;--surface:#F7F5EF;--ink:#0D1F24;--ink-soft:#4A5A5D;--line:#D2CDC0;
  --accent:#1F5F56;--accent-ink:#FFFFFF;--accent-text:#1F5F56;--accent-soft:#D3E2DD;--on-dark:#0D1F24;--on-dark-soft:#4A5A5D;--accent-on-dark:#1F5F56;background:var(--bg)!important}
body .tema-avet{--bg:#17453F;--bg-alt:#1B4C45;--surface:#1E534C;--ink:#F7F5EF;--ink-soft:#C9DED9;--line:color-mix(in srgb,#F7F5EF 18%,transparent);
  --accent:#8FDCCF;--accent-ink:#0D1F24;--accent-text:#8FDCCF;--accent-soft:color-mix(in srgb,#8FDCCF 18%,#17453F);--on-dark:#F7F5EF;--on-dark-soft:#C9DED9;--accent-on-dark:#8FDCCF;--dark:#0F3530;
  background:radial-gradient(70rem 40rem at 85% 0%,#1F5A52,transparent 60%),var(--bg)!important}
body .tema-nit{background:var(--dark)!important}
.tema-paper .btn-1,.tema-pedra .btn-1{background:var(--accent);color:var(--accent-ink)}
.tema-paper .btn-2,.tema-pedra .btn-2{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 28%,transparent)}
.tema-avet .btn-1{background:#F7F5EF;color:#0D1F24}
.tema-paper :focus-visible,.tema-pedra :focus-visible{outline-color:var(--accent)}
/* a les seccions clares, ombres suaus en lloc de vores fosques */
.tema-paper .servei-costat,.tema-pedra .servei-costat,.tema-paper .qui,.tema-paper .g-serie{box-shadow:0 1px 2px rgba(13,31,36,.05),0 18px 40px -18px rgba(13,31,36,.18)}
.tema-paper .per-sector,.tema-pedra .per-sector{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tema-paper .portatil,.tema-pedra .portatil{border-color:var(--line);box-shadow:0 30px 60px -20px rgba(13,31,36,.35)}
.tema-pedra .demo-form,.tema-pedra .camp-demo{background:var(--surface)}
/* paraula gegant del capítol: en contorn (només el traç) per diferenciar-lo */
.capitol.paraula-contorn .paraula{color:transparent!important;-webkit-text-stroke:1.5px var(--accent-on-dark)}
/* cada capítol, una franja pròpia: a les clares, la paraula gegant en el color de la marca */
.mon-particules .capitol.tema-paper .paraula,.mon-particules .capitol.tema-pedra .paraula{color:var(--accent-text)}
.mon-particules .capitol.tema-paper,.mon-particules .capitol.tema-pedra,.mon-particules .capitol.tema-avet{border-top:0}
/* número del servei gran al costat de l'etiqueta */
.capitol.ric .cos>.etiqueta{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .8rem .4rem .45rem;border-radius:99px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent-text) 8%,transparent)}

.cas-baix:not(:has(.foto)){grid-template-columns:1fr;max-width:46rem}  /* sense captura: el text sol, més estret */

/* 37. Contacte directe: dos botons grans, WhatsApp i correu, en lloc del formulari */
.vies-grans{display:grid;gap:1rem;align-content:center}
.via{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.125rem;padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--radius);text-decoration:none;color:inherit;border:1px solid var(--line);background:color-mix(in srgb,currentColor 4%,transparent);transition:transform .25s ease,background-color .25s ease,border-color .25s ease}
.via>svg:first-child{width:3rem;height:3rem;padding:.75rem;border-radius:50%;background:color-mix(in srgb,currentColor 10%,transparent);box-sizing:border-box}
.via>svg:last-child{width:1.5rem;height:1.5rem;transition:transform .25s ease}
.via span{display:grid;gap:.15rem;min-width:0}
.via small{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.via b{font-family:var(--font-display,inherit);font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:600;line-height:1.2}
.via em{font-style:normal;opacity:.85;overflow-wrap:anywhere}
.via:hover{transform:translateY(-2px);border-color:color-mix(in srgb,currentColor 35%,transparent)}
.via:hover>svg:last-child{transform:translateX(4px)}
.sec-dark .via-wa{background:var(--accent-on-dark);color:var(--dark);border-color:transparent}
.sec-dark .via-wa:hover{background:color-mix(in srgb,var(--accent-on-dark) 88%,#fff);border-color:transparent}
.sec-dark .via-wa small,.sec-dark .via-wa em{opacity:.8}
@media (prefers-reduced-motion:reduce){.via,.via>svg:last-child{transition:none}.via:hover,.via:hover>svg:last-child{transform:none}}
@media (max-width:480px){.via{gap:.875rem;padding:1.125rem}.via>svg:first-child{width:2.5rem;height:2.5rem;padding:.6rem}.via b{font-size:1.15rem}}
.capitol .cos>a.btn{margin-bottom:1.5rem}  /* enllaç del capítol: aire abans de la columna «El que reps» quan s'apila al mòbil */

/* 39. La feina en una pantalla: els serveis a l'esquerra i una composició a la dreta
   (mòbil amb una web que es desplaça en passar-hi el cursor, Google, fotos, xarxes i un avís automàtic) */
.feina-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feina-text h2{margin-bottom:1.75rem}
.feina-llista{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.feina-llista li{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:1rem;background:color-mix(in srgb,var(--on-dark) 5%,transparent);border:1px solid var(--line);transition:border-color .3s,transform .3s}
.feina-llista li:hover{border-color:color-mix(in srgb,var(--accent-on-dark) 45%,var(--line));transform:translateX(4px)}
.feina-llista svg{flex:none;width:2.4rem;height:2.4rem;padding:.55rem;box-sizing:border-box;border-radius:.7rem;background:color-mix(in srgb,var(--accent-on-dark) 14%,transparent);color:var(--accent-on-dark)}
.feina-llista b{display:block;font:var(--display-weight) 1.1rem/1.2 var(--font-display);letter-spacing:var(--display-tracking);color:var(--on-dark)}
.feina-llista span{font-size:.92rem;color:var(--on-dark-soft)}
.feina-visual{position:relative;display:grid;grid-template-columns:1fr 1.08fr 1fr;align-items:center;gap:clamp(.9rem,1.6vw,1.5rem);width:100%;max-width:42rem;justify-self:end}
.hv-halo{position:absolute;inset:4% -4%;border-radius:50%;filter:blur(48px);opacity:.85;pointer-events:none;background:radial-gradient(closest-side at 50% 45%,color-mix(in srgb,var(--accent-on-dark) 34%,transparent),transparent 70%),radial-gradient(closest-side at 80% 80%,rgba(207,164,106,.28),transparent 70%)}
.hv-col{position:relative;z-index:1;display:grid;gap:clamp(.8rem,1.4vw,1.1rem);min-width:0}
.hv-esq{margin-top:3.5rem}.hv-dre{margin-bottom:2.5rem}
.hv-capa{position:relative;transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.hv-etiq{position:absolute;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .65rem;border-radius:99px;background:var(--dark);border:1px solid color-mix(in srgb,var(--on-dark) 18%,transparent);font:600 .72rem/1 var(--font-body);color:var(--on-dark);white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.hv-etiq svg{width:.9rem;height:.9rem;color:var(--accent-on-dark)}
/* mòbil, al centre i sense res a sobre */
.hv-mobil{z-index:1;aspect-ratio:9/19.5}
.hv-pantalla{position:relative;height:100%;border-radius:2rem;overflow:hidden;background:#000;border:.42rem solid #0A1417;box-shadow:0 40px 80px -20px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--on-dark) 14%,transparent)}
.hv-pantalla img{display:block;width:100%;height:auto;max-width:none;transition:transform 7s cubic-bezier(.45,0,.55,1)}
.feina-visual:hover .hv-pantalla img{transform:translateY(var(--hv-dist,0))}  /* la web es desplaça només amb el cursor a sobre */
.hv-pantalla::before{content:"";position:absolute;z-index:1;top:.42rem;left:50%;width:32%;height:1rem;transform:translateX(-50%);border-radius:99px;background:#0A1417}
.hv-mobil .hv-etiq{left:50%;bottom:-.85rem;transform:translateX(-50%)}
/* fotos: dues targetes netes, una sota l'altra */
.hv-foto{margin:0}
.hv-foto img{display:block;width:100%;aspect-ratio:4/3.1;object-fit:cover;border-radius:1rem;box-shadow:0 24px 46px -16px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--on-dark) 14%,transparent)}
.hv-foto .hv-etiq{left:.55rem;bottom:.55rem}
.hv-foto.vertical img{aspect-ratio:3/4.1;width:78%;margin-left:auto}
/* Google, avís i xarxes */
.hv-google{padding:.95rem 1rem .85rem;border-radius:1.1rem;color:var(--on-dark);background:color-mix(in srgb,#10262B 90%,transparent);backdrop-filter:blur(12px);border:1px solid color-mix(in srgb,var(--accent-on-dark) 28%,transparent);box-shadow:0 24px 50px -14px rgba(0,0,0,.6)}
.hv-cap{display:flex;align-items:center;gap:.45rem;font:600 .72rem/1.15 var(--font-body);color:var(--on-dark-soft)}
.hv-cap small{margin-left:auto;padding:.2rem .45rem;border-radius:99px;background:color-mix(in srgb,var(--accent-on-dark) 18%,transparent);color:var(--accent-on-dark);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.hv-g{flex:none;display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;color:#0D1F24;font:800 .7rem/1 var(--font-body)}
.hv-google b{display:block;margin:.45rem 0 .1rem;font:700 clamp(2rem,3vw,2.8rem)/1 var(--font-display);letter-spacing:-.05em;color:var(--accent-on-dark)}
.hv-linia{display:block;width:100%;height:3.4rem;margin-top:.6rem}
.hv-linia polygon{fill:color-mix(in srgb,var(--accent-on-dark) 22%,transparent)}
.hv-linia polyline{fill:none;stroke:var(--accent-on-dark);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hv-peu{display:block;margin-top:.4rem;font-size:.68rem;line-height:1.35;color:var(--on-dark-soft)}
.hv-avis{display:flex;align-items:center;gap:.65rem;padding:.75rem .85rem;border-radius:1rem;background:rgba(247,245,239,.97);color:#0D1F24;box-shadow:0 24px 50px -14px rgba(0,0,0,.65)}
.hv-avis i{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.6rem;background:#1A7F45;color:#fff}
.hv-avis i svg{width:1.1rem;height:1.1rem}
.hv-avis div{min-width:0}
.hv-avis b{display:block;font:700 .86rem/1.2 var(--font-body)}
.hv-avis span{display:block;font-size:.76rem;color:#4A5A5D}
.hv-avis small{margin-left:auto;align-self:flex-start;font-size:.66rem;color:#4A5A5D}
.hv-xarxes{justify-self:start;display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem .55rem .55rem;border-radius:.9rem;background:linear-gradient(135deg,#CFA46A,#C77A5B);color:#1A1208;box-shadow:0 18px 40px -12px rgba(199,122,91,.55);font:700 .74rem/1.2 var(--font-body);white-space:pre-line}
.hv-xarxes i{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:.55rem;background:rgba(255,255,255,.28)}
.hv-xarxes i svg{width:1.05rem;height:1.05rem}
/* entrada: les peces apareixen una a una i després suren suaument */
.hv-js:not(.vist) .hv-capa,.hv-js:not(.vist) .hv-halo{opacity:0}
.hv-js.vist .hv-capa{opacity:0;animation:hv-entra .9s cubic-bezier(.2,.8,.2,1) var(--d,.2s) forwards,hv-sura var(--f,7s) ease-in-out var(--o,0s) infinite}
.hv-js.vist .hv-halo{opacity:0;animation:hv-entra 1.4s ease forwards}
.hv-mobil{--d:.1s;--f:9s}.hv-foto-1{--d:.3s;--f:8s;--o:-4s}.hv-foto-2{--d:.45s;--f:8.5s;--o:-6s}.hv-google{--d:.35s;--o:-2s}.hv-avis{--d:.6s;--f:6.5s;--o:-1s}.hv-xarxes{--d:.75s;--f:7.5s;--o:-3s}
@keyframes hv-entra{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes hv-sura{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.hv-capa,.hv-halo{opacity:1!important;animation:none!important}.hv-pantalla img{transition:none}}
@media (max-width:900px){.feina-grid{grid-template-columns:1fr}.feina-visual{justify-self:center;max-width:34rem}}
/* mòbil: el telèfon a dalt i, a sota, les fotos i les targetes en dues columnes */
@media (max-width:600px){
  .feina-visual{grid-template-columns:1fr 1fr;gap:.8rem}
  .hv-mobil{grid-column:1/-1;grid-row:1;width:52%;justify-self:center;margin-bottom:1.4rem}
  .hv-esq,.hv-dre{margin:0}
  .hv-cap small,.hv-xarxes{display:none}
  .hv-google b{font-size:1.9rem}
}
/* 40. Capçaleres de capítol («capcaleres": "capitol"): cada secció s'obre amb el seu número, una línia de punta a punta
   i un títol gran, perquè es noti que comença un apartat nou. «pes»: "menor" (secundàries) o "compacte" (preus en una pantalla) */
.cap-capitol main{counter-reset:cap}
.cap-capitol main section:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>.etiqueta{counter-increment:cap;display:flex;align-items:center;gap:1rem;width:100%;margin-bottom:clamp(1.25rem,3vw,2.25rem)}
.cap-capitol main section:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>.etiqueta::before{content:counter(cap,decimal-leading-zero);flex:none;padding:.42rem .55rem;border:1px solid currentColor;border-radius:.5rem;font:var(--display-weight) 1.05rem/1 var(--font-display);letter-spacing:0}
.cap-capitol main section:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>.etiqueta::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.cap-capitol .sec-cap{max-width:none}
.cap-capitol main section:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>h2{font-size:calc(clamp(2.5rem,5.4vw,5.2rem) * var(--display-scale));line-height:1;letter-spacing:-.035em;max-width:17ch}
.cap-capitol main section:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>.intro{font-size:clamp(1.08rem,1.35vw,1.28rem);max-width:56ch}
.cap-capitol main section.pes-menor:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>h2{font-size:calc(clamp(2.2rem,3.8vw,3.4rem) * var(--display-scale))}
.cap-capitol main section.pes-compacte:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>h2{font-size:calc(clamp(2rem,3.4vw,3rem) * var(--display-scale));max-width:none}
.cap-capitol main section.pes-compacte:not(.hero) :is(.sec-cap,.feina-text,.contacte>div:first-child)>.etiqueta{margin-bottom:.9rem}
/* columnes estretes (qui som, preguntes, contacte, la feina): el títol no pot ser tan gran */
.cap-capitol main section:not(.hero) :is(.feina-text,.contacte>div:first-child)>h2{font-size:calc(clamp(2.4rem,4.4vw,4.2rem) * var(--display-scale))}
/* la llista de «la feina» porta a cada servei */
.feina-llista li:has(>a){padding:0}
.feina-llista a{display:flex;gap:.9rem;align-items:flex-start;width:100%;padding:1rem 1.1rem;color:inherit;text-decoration:none;border-radius:inherit}
.feina-fletxa{margin-left:auto;align-self:center;font-style:normal;font-size:1.15rem;color:var(--accent-on-dark);opacity:.55;transition:transform .3s,opacity .3s}
.feina-llista a:hover .feina-fletxa,.feina-llista a:focus-visible .feina-fletxa{opacity:1;transform:translateX(4px)}

/* 41. Calculadora de preus: en quant temps es paga la web (només amb els números del visitant) */
.calc{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:.75rem 1.25rem;align-items:end;margin:1.5rem auto 0;max-width:62rem;padding:1.1rem 1.4rem;border-radius:var(--radius);border:1px solid var(--line);background:color-mix(in srgb,var(--accent-on-dark) 6%,transparent)}
.calc-titol{margin:0;align-self:center;color:var(--ink-soft)}
.calc-titol b{display:block;font:var(--display-weight) 1.25rem/1.2 var(--font-display);color:var(--ink)}
.calc-camp{display:grid;gap:.35rem;font-size:.85rem;color:var(--ink-soft)}
.calc-entrada{display:flex;align-items:center;gap:.5rem;padding:0 .9rem;border-radius:.7rem;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.calc-entrada:focus-within{border-color:var(--accent-on-dark)}
.calc-entrada input{flex:1;min-width:0;padding:.65rem 0;border:0;background:none;color:var(--ink);font:600 1.1rem/1.2 var(--font-body)}
.calc-entrada input:focus{outline:none}
.calc-entrada i{font-style:normal;color:var(--ink-soft);font-size:.85rem;white-space:nowrap}
.calc-res{grid-column:1/-1;display:block;font-weight:600;color:var(--accent-on-dark)}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
/* «El que reps» plegable al mòbil */
details.inclou>summary{list-style:none;cursor:default}
details.inclou>summary::-webkit-details-marker{display:none}
@media (max-width:760px){
  details.inclou>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin:0;padding:.35rem 0}
  details.inclou>summary::after{content:"+";font:400 1.4rem/1 var(--font-body);color:var(--accent-text);transition:transform .25s}
  details.inclou[open]>summary::after{transform:rotate(45deg)}
}
/* el telèfon té barra d'estat: la web comença sota la càmera, sense que la tapi */
.hv-pantalla{padding-top:1.55rem}
.hv-avis small{display:none}
.hv-avis span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* la composició no pot eixamplar la pàgina: les columnes es poden encongir fins a 0 */
.feina-visual{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr)}
@media (max-width:600px){.feina-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hv-google,.hv-avis{min-width:0}.hv-cap>span:not(.hv-g){min-width:0;overflow:hidden;text-overflow:ellipsis}}
/* arreglos de pantalles: números dels passos llegibles a les seccions clares; preus que no es parteixen al mòbil */
.mon-particules :is(.tema-paper,.tema-pedra) .passos li::before{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pla-preu{flex-wrap:wrap;row-gap:.2rem}
.pla-preu b{white-space:nowrap}
@media (max-width:420px){.preus-pestanyes button small{display:none}.preus-pestanyes button{padding-block:.7rem}}

/* 42. Efectes d'estudi («efectes": "estudi"): gra de pel·lícula, llum d'aurora, botons amb reflex, vora que gira
   al pla recomanat, «Parlem.» gegant i el logo del peu. Només s'animen transform, opacity i clip-path. */
@media (min-width:900px){
  body.fx-estudi::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
}
.fx-estudi :is(.hero,#cas,#contacte){position:relative;isolation:isolate}
.fx-estudi #contacte{overflow:hidden}
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:52vmax;height:52vmax;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:var(--o);animation:fx-deriva var(--t) ease-in-out infinite alternate}
.aurora i:nth-child(1){--c:#7CC7BC;--o:.26;--t:19s;top:-28%;right:-18%}
.aurora i:nth-child(2){--c:#9BF0E1;--o:.12;--t:23s;bottom:-34%;left:-22%}
.aurora i:nth-child(3){--c:#E3B26E;--o:.1;--t:27s;top:35%;left:38%;width:36vmax;height:36vmax}
.hero .aurora i:nth-child(3){top:55%}
@keyframes fx-deriva{to{transform:translate(5%,7%) scale(1.1)}}
/* botó principal: ombra de color i un reflex que el creua */
.fx-estudi .btn-1{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 12px 36px -14px color-mix(in srgb,var(--accent) 85%,transparent)}
.fx-estudi .btn-1::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fx-estudi .btn-1:hover::after{transform:translateX(130%)}
/* enllaços: el subratllat es dibuixa d'esquerra a dreta */
.fx-estudi :is(.enllac-fletxa,.peu-web a,.preus-mida a,.qs-equip a){text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s ease}
.fx-estudi :is(.enllac-fletxa,.peu-web a,.preus-mida a,.qs-equip a):hover{background-size:100% 1px}
/* preus: el pla recomanat amb una vora de llum que gira; tots s'inclinen amb el ratolí */
@property --fx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.fx-estudi .plans{perspective:1200px}
.fx-estudi .pla{transition:transform .35s ease,border-color .35s ease,rotate .3s ease}
.fx-estudi .pla.destacat::before{content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--fx-ang),transparent 0deg 210deg,var(--accent-on-dark) 285deg,#C9FFF5 320deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fx-gira 6s linear infinite}
@keyframes fx-gira{to{--fx-ang:360deg}}
/* resultats: el ×3,7 amb llum dins la lletra */
.fx-estudi .cas-kpi.gran b{background:linear-gradient(100deg,var(--accent-on-dark) 15%,#D8FFF8 50%,var(--accent-on-dark) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* contacte: «Parlem.» gegant amb una cinta que passa per darrere */
.crida{position:relative;margin:0 0 clamp(2.5rem,6vw,5rem)}
.crida-mot{position:relative;z-index:1;margin:0;font:var(--display-weight) clamp(5rem,19vw,16rem)/.84 var(--font-display);letter-spacing:-.065em;color:var(--on-dark)}
.crida-mot em{font-style:normal;color:var(--accent-on-dark)}
.crida-cinta{position:absolute;z-index:0;top:52%;left:calc(50% - 50vw);width:100vw;overflow:hidden;padding:.75rem 0;transform:translateY(-50%) rotate(-3deg);background:color-mix(in srgb,var(--accent-on-dark) 13%,transparent);border-block:1px solid color-mix(in srgb,var(--accent-on-dark) 30%,transparent)}
.crida-pista{display:flex;width:max-content;animation:fx-cinta 45s linear infinite}
.crida-pista span{padding:0 1.1rem;font:600 .82rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--accent-on-dark)}
.crida-pista span::after{content:"✦";margin-left:2.2rem;opacity:.65}
@keyframes fx-cinta{to{transform:translateX(-50%)}}
/* peu: el logo a tota l'amplada, de contorn, que s'omple de menta amb el scroll */
.peu-gegant{position:relative;overflow:hidden;margin-top:clamp(2rem,5vw,4rem);padding:0 1.5vw;font:var(--display-weight) 20.5vw/.8 var(--font-display);letter-spacing:-.065em;white-space:nowrap;text-align:center;user-select:none}
.peu-gegant em{font-style:normal}
.pg-contorn{display:block;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--on-dark) 24%,transparent)}
.pg-ple{position:absolute;inset:0;padding:inherit;color:var(--accent-on-dark)}
@media (prefers-reduced-motion:reduce){.aurora i,.crida-pista,.fx-estudi .pla.destacat::before{animation:none}.fx-estudi .btn-1::after{display:none}}

/* 38. Qui som: el símbol que es dibuixa, la història en tres passos sobre una línia, on treballem (radar) i l'equip.
   Sense JS (o amb menys moviment) tot surt dibuixat; amb JS (.qs-js), cada bloc s'anima quan arriba (.vist). */
.qs-dalt{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.qs-dalt .sec-cap{margin-bottom:0}
.qui-som h2 em{background:linear-gradient(var(--accent),var(--accent)) 0 96%/100% .07em no-repeat}
.qs-js h2 em{background-size:0 .07em;transition:background-size 1.2s cubic-bezier(.65,0,.35,1) .7s}
.qs-js .qs-dalt.vist h2 em{background-size:100% .07em}
.qs-simbol{position:relative;justify-self:center;width:min(100%,13rem);isolation:isolate}
.qs-simbol::before{content:"";position:absolute;inset:-35%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,transparent),transparent)}
.qs-simbol-svg{display:block;width:100%;height:auto;overflow:visible}
.qs-js .qs-tra{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1) .2s}
.qs-js .qs-tra+.qs-tra{transition-delay:1.1s}
.qs-js .vist .qs-tra{stroke-dashoffset:0}
/* la història: tres passos sobre una línia que es dibuixa */
.qs-historia{margin-top:clamp(3.5rem,8vw,6rem)}
.qs-sub{margin:0 0 1.75rem;font:600 .78rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.qs-linia{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.75rem)}
.qs-linia::before{content:"";position:absolute;left:0;right:0;top:1.25rem;height:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 15%,transparent));transform-origin:left}
.qs-js .qs-linia::before{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.65,0,.35,1) .3s}
.qs-js .qs-historia.vist .qs-linia::before{transform:none}
.qs-linia li{position:relative;padding-top:3.6rem}
.qs-n{position:absolute;top:0;left:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--bg);border:1px solid var(--accent);color:var(--accent);font:600 .85rem/1 var(--font-display)}
.te-xifra .qs-n{background:var(--accent);color:var(--accent-ink)}
.qs-xifra{display:block;margin:-.35rem 0 .35rem;font:700 clamp(3rem,6vw,5rem)/.9 var(--font-display);letter-spacing:-.05em;background:linear-gradient(100deg,var(--accent) 15%,#D8FFF8 50%,var(--accent) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.qs-linia h4{margin:0 0 .45rem;font:var(--display-weight) 1.25rem/1.2 var(--font-display);color:var(--ink)}
.qs-linia p{margin:0;max-width:34ch;color:var(--ink-soft)}
.qs-tancament{margin:2.25rem 0 0;font:var(--display-weight) clamp(1.15rem,1.8vw,1.45rem)/1.3 var(--font-display);color:var(--ink)}
/* on treballem i l'equip */
.qs-baix{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3.5rem,8vw,6rem)}
.qs-mapa{margin:0}
.qs-radar{position:relative;max-width:36rem;margin-inline:auto;isolation:isolate}
.qs-radar svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.qs-escombrat{position:absolute;inset:9.5%;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 280deg,color-mix(in srgb,var(--accent) 42%,transparent) 360deg);animation:qs-gira 6s linear infinite}
@keyframes qs-gira{to{transform:rotate(1turn)}}
.qs-mapa pattern circle{fill:color-mix(in srgb,var(--ink) 24%,transparent)}
.qs-anell{fill:none;stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-dasharray:3 5}
.qs-km{fill:color-mix(in srgb,var(--ink) 55%,transparent);font:600 10px/1 var(--font-body);letter-spacing:.08em}
.qs-raig{stroke:var(--accent);stroke-width:.8;opacity:.3;stroke-dasharray:1;stroke-dashoffset:0}
.qs-js .qs-raig{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease .5s}
.qs-js .qs-mapa.vist .qs-raig{stroke-dashoffset:0}
.qs-punt{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.qs-centre .qs-punt{fill:var(--ink)}
.qs-pols{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:qs-pols 2.6s ease-out infinite}
.qs-centre .qs-pols{fill:var(--ink)}
@keyframes qs-pols{from{transform:scale(1);opacity:.5}to{transform:scale(3.6);opacity:0}}
.qs-pin text{fill:var(--ink);font:600 13px/1 var(--font-body)}
.qs-centre text{font:700 15px/1 var(--font-display)}
.qs-petit text{font-size:11px;fill:color-mix(in srgb,var(--ink) 82%,transparent)}
.qs-gran text{font-size:13.5px;font-weight:700}
.qs-pin{cursor:default}
.qs-guia{stroke:var(--ink);stroke-width:1;opacity:.75;stroke-dasharray:2 2}
.qs-js .qs-pin{opacity:0;transition:opacity .6s ease 1.2s}
.qs-js .qs-mapa.vist .qs-pin{opacity:1}
.qs-mapa figcaption{margin-top:.75rem;text-align:center;color:var(--ink-soft)}
.qs-mapa figcaption b{display:block;font:var(--display-weight) 1.3rem/1.2 var(--font-display);color:var(--ink)}
.qs-equip{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.qs-equip li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;padding:1.25rem 1.4rem;border-radius:calc(var(--radius) * 1.2);background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--line);transition:border-color .3s ease,transform .3s ease}
.qs-equip li:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateX(4px)}
.qs-inicial{position:relative;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;color:var(--accent);font:var(--display-weight) 1.5rem/1 var(--font-display);isolation:isolate}
.qs-inicial::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:50%;background:conic-gradient(from var(--fx-ang,0deg),var(--accent),transparent 35%,#E3B26E 65%,var(--accent));animation:fx-gira 5s linear infinite}
.qs-inicial::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:50%;background:var(--bg)}
.qs-inicial svg{width:1.6rem;height:1.6rem}
.qs-equip h3{margin:0;font-size:1.2rem}
.qs-equip .qs-rol{margin:.2rem 0 .45rem;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.qs-equip p{margin:0;color:var(--ink-soft)}
.qs-equip .enllac-fletxa{display:inline-block;margin-top:.55rem;color:var(--accent)}
.qs-frase{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:clamp(3rem,6vw,4.5rem) 0 0;padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);text-align:center;font:var(--display-weight) clamp(1.1rem,1.8vw,1.4rem)/1.35 var(--font-display);color:var(--ink)}
.qs-frase svg{flex:none;width:1.4rem;height:1.4rem;color:var(--accent)}
@media (max-width:900px){
  .qs-dalt,.qs-baix{grid-template-columns:1fr}
  .qs-simbol{order:-1;justify-self:start;width:5.5rem}
  .qs-linia{grid-template-columns:1fr;gap:2rem}
  .qs-linia::before{left:1.25rem;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 15%,transparent));transform-origin:top}
  .qs-js .qs-linia::before{transform:scaleY(0)}
  .qs-linia li{padding:0 0 0 3.6rem;min-height:2.5rem}
  .qs-frase{justify-content:flex-start;text-align:left}
}
@media (prefers-reduced-motion:reduce){.qs-escombrat,.qs-pols,.qs-inicial::before{animation:none}.qs-pols{opacity:0}}

/* 43. Portada: cinta de feina feta (webs i software reals) que llisca sola i s'atura amb el ratolí */
.hero-mostra{position:relative;z-index:1;margin-top:clamp(2rem,4.5vh,3.25rem);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hm-pista{display:flex;gap:clamp(.9rem,1.6vw,1.4rem);width:max-content;margin:0;padding:.5rem 0 1.25rem;list-style:none;animation:hm-llisca 55s linear infinite}
.hero-mostra:hover .hm-pista,.hero-mostra:focus-within .hm-pista{animation-play-state:paused}
@keyframes hm-llisca{to{transform:translateX(calc(-50% - clamp(.45rem,.8vw,.7rem)))}}
.hm-card{display:block;width:clamp(15rem,23vw,21rem);border-radius:.9rem;overflow:hidden;text-decoration:none;color:var(--on-dark);background:#0A1417;border:1px solid color-mix(in srgb,var(--on-dark) 14%,transparent);box-shadow:0 24px 50px -22px rgba(0,0,0,.8);transition:transform .35s ease,border-color .35s ease}
.hm-card:hover,.hm-card:focus-visible{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent-on-dark) 60%,transparent)}
.hm-barra{display:flex;gap:.3rem;padding:.5rem .65rem;background:#0A1417}
.hm-barra i{width:.45rem;height:.45rem;border-radius:50%;background:color-mix(in srgb,var(--on-dark) 25%,transparent)}
.hm-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.hm-peu{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .85rem .8rem;font-size:.8rem;color:var(--on-dark-soft)}
.hm-peu b{font:600 .7rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-on-dark)}
@media (prefers-reduced-motion:reduce){.hm-pista{animation:none}.hero-mostra{overflow-x:auto;-webkit-mask:none;mask:none}}
.hero-particules .hero h1.llarg{max-width:22ch;font-size:calc(clamp(2rem,3.5vw,3.4rem) * var(--display-scale))}  /* títol llarg (llista de serveis): més ample i més petit */
.hero:has(.hero-mostra) .hero-baixa{display:none}  /* amb la cinta de feina, l'indicador «baixa» sobra */

/* 44. Portada amb producte en directe (hero.demo): una finestra del software, programada, que funciona sola.
   Sense JS o amb menys moviment es veu l'estat final (la cita reservada i l'avís). */
.hero-particules .hero-peu:has(.hero-demo){grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.hero-text .botons{margin-top:clamp(1.5rem,3vh,2.25rem)}
.hero-demo{position:relative;justify-self:end;width:min(100%,33rem);padding:0 0 1.75rem 1.5rem;font-family:var(--font-body)}
.hd-app{border-radius:1.2rem;overflow:hidden;color:var(--on-dark);background:color-mix(in srgb,#10262B 94%,transparent);border:1px solid color-mix(in srgb,var(--accent-on-dark) 24%,transparent);box-shadow:0 40px 90px -35px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset}
.hd-barra{display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;border-bottom:1px solid rgba(255,255,255,.07);font-size:.8rem}
.hd-barra b{font-weight:600}
.hd-punts{display:flex;gap:.3rem}.hd-punts i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.18)}
.hd-directe{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:99px;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark);background:color-mix(in srgb,var(--accent-on-dark) 14%,transparent)}
.hd-directe::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--accent-on-dark);animation:hd-batec 1.6s ease-in-out infinite}
@keyframes hd-batec{50%{opacity:.25}}
.hd-cos{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hd-agenda{list-style:none;margin:0;padding:.75rem 0;display:grid;gap:.15rem}
.hd-franja{display:grid;grid-template-columns:2.8rem minmax(0,1fr);align-items:center;gap:.4rem;padding:.3rem .85rem}
.hd-hora{font-size:.7rem;font-weight:600;color:var(--on-dark-soft);font-variant-numeric:tabular-nums}
.hd-cita{display:block;padding:.45rem .65rem;border-radius:.6rem;background:color-mix(in srgb,var(--accent-on-dark) 13%,transparent);border-left:3px solid var(--accent-on-dark);font-size:.72rem;line-height:1.3;color:var(--on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-cita b{display:block;font-size:.8rem;color:var(--on-dark)}
.hd-cita-nova{border-left-color:#E3B26E;background:color-mix(in srgb,#E3B26E 16%,transparent)}
.hd-buida{display:block;height:2.55rem;border-radius:.6rem;border:1px dashed rgba(255,255,255,.14)}
.hd-nova{position:relative;display:block}
.hd-nova .hd-buida{position:absolute;inset:0;opacity:0}
.hd-xat{display:flex;flex-direction:column;gap:.55rem;padding:.8rem .85rem;border-left:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.12)}
.hd-xat-cap{display:flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:600;color:var(--on-dark-soft)}
.hd-xat-cap svg{width:.95rem;height:.95rem;color:#25D366}
.hd-xat p{margin:0;font-size:.74rem;line-height:1.4}
.hd-in{align-self:flex-start;max-width:92%;padding:.5rem .65rem;border-radius:.8rem .8rem .8rem .25rem;background:rgba(255,255,255,.09);color:var(--on-dark)}
.hd-out{align-self:flex-end;max-width:94%;padding:.5rem .65rem;border-radius:.8rem .8rem .25rem .8rem;background:#1F6F5C;color:#F2FFFB}
.hd-out small{display:flex;align-items:center;gap:.25rem;margin-bottom:.2rem;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#BFF5E8}
.hd-out small svg{width:.75rem;height:.75rem}
.hd-escriu{display:none}
.hd-js .hd-escriu{display:flex;gap:.25rem;align-self:flex-end;padding:.55rem .7rem;border-radius:.8rem;background:rgba(255,255,255,.07)}
.hd-escriu i{width:.35rem;height:.35rem;border-radius:50%;background:var(--on-dark-soft);animation:hd-punt 1s ease-in-out infinite}
.hd-escriu i:nth-child(2){animation-delay:.15s}.hd-escriu i:nth-child(3){animation-delay:.3s}
@keyframes hd-punt{50%{transform:translateY(-3px);opacity:.4}}
.hd-peu{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem .95rem;border-top:1px solid rgba(255,255,255,.07);font-size:.72rem;color:var(--on-dark-soft)}
.hd-peu b{display:inline-block;min-width:1.2ch;margin-left:.25rem;font:700 1rem/1 var(--font-display);color:var(--on-dark);font-variant-numeric:tabular-nums}
.hd-ok{display:inline-flex;align-items:center;gap:.3rem}
.hd-ok svg{width:.9rem;height:.9rem;color:var(--accent-on-dark)}
.hd-avis{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border-radius:1rem;background:rgba(247,245,239,.97);color:#0D1F24;box-shadow:0 24px 50px -16px rgba(0,0,0,.7)}
.hd-avis i{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;background:#1A7F45;color:#fff}
.hd-avis i svg{width:1.05rem;height:1.05rem}
.hd-avis b{display:block;font-size:.84rem;line-height:1.2}
.hd-avis span{font-size:.74rem;color:#4A5A5D}
@media (max-width:900px){
  .hero-particules .hero-peu:has(.hero-demo){grid-template-columns:1fr}
  .hero-demo{justify-self:stretch;width:100%;max-width:33rem;padding-left:.75rem}
}
@media (max-width:480px){
  .hd-cos{grid-template-columns:1fr}
  .hd-xat{border-left:0;border-top:1px solid rgba(255,255,255,.07)}
  .hd-agenda .hd-franja:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){.hd-directe::before,.hd-escriu i{animation:none}}
/* Portada amb demo: títol i demo una mica més petits, franja de dades a sota i indicador «baixa» centrat i animat */
.hero-particules .hero:has(.hero-demo) h1.llarg{font-size:calc(clamp(1.85rem,3vw,2.95rem) * var(--display-scale))}
.hero:has(.hero-demo) .hero-demo{width:min(100%,29rem)}
.hero:has(.hero-demo) .hero-proves{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem clamp(1.25rem,3vw,2.5rem);margin-top:clamp(1.5rem,3.5vh,2.5rem);padding-top:clamp(1rem,2.2vh,1.4rem);border-top-color:color-mix(in srgb,var(--on-dark) 14%,transparent)}
.hero:has(.hero-demo) .hero-proves li{grid-template-columns:1fr;gap:.35rem;align-items:start}
.hero:has(.hero-demo) .hero-proves b{font-size:calc(clamp(1.5rem,2.3vw,2.1rem) * var(--display-scale))}
.hero:has(.hero-demo) .hero-proves span{font-size:.82rem;max-width:24ch}
.hero-particules .hero:has(.hero-demo) .hero-baixa,.anim .hero-particules .hero:has(.hero-demo) .hero-baixa{position:relative;z-index:2;top:auto;right:auto;display:flex;flex-direction:column;align-items:center;gap:.55rem;margin:clamp(1.25rem,3vh,2rem) auto 0;writing-mode:horizontal-tb;
  font:600 .68rem/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft)}
.hero-particules .hero:has(.hero-demo) .hero-baixa i,.anim .hero-particules .hero:has(.hero-demo) .hero-baixa i{position:relative;width:1.4rem;height:2.2rem;border-radius:1rem;border:1.5px solid color-mix(in srgb,var(--on-dark) 45%,transparent);background:none;animation:none}
.hero-particules .hero:has(.hero-demo) .hero-baixa i::after{content:"";position:absolute;left:50%;top:.4rem;width:.28rem;height:.5rem;margin-left:-.14rem;border-radius:99px;background:var(--accent-on-dark);animation:hero-roda 1.8s cubic-bezier(.6,0,.4,1) infinite}
.hero:has(.hero-demo) .hero-baixa::after{content:"";width:.55rem;height:.55rem;margin-top:-.15rem;border-right:1.5px solid var(--accent-on-dark);border-bottom:1.5px solid var(--accent-on-dark);rotate:45deg;animation:hero-fletxa 1.8s ease-in-out infinite}
@keyframes hero-roda{0%{translate:0 0;opacity:0}20%{opacity:1}70%{translate:0 .75rem;opacity:0}100%{opacity:0}}
@keyframes hero-fletxa{0%,100%{translate:0 0;opacity:.35}50%{translate:0 .3rem;opacity:1}}
@media (max-width:860px){.hero:has(.hero-demo) .hero-proves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.hero-particules .hero:has(.hero-demo) .hero-baixa i::after,.hero-particules .hero:has(.hero-demo) .hero-baixa::after{animation:none}}
.hd-peu{justify-content:flex-end}
.hd-peu>span:first-child{order:2;margin-left:1.25rem}
.hero-demo{padding-left:0}
.hd-avis{left:-1.5rem;bottom:-.25rem}
@media (max-width:900px){.hd-avis{left:.5rem}}

/* 45. Preus que venen la Web Animada: la targeta estrella (més ampla, aixecada, vora de llum que gira, mini demo de partícules),
   la Web + Fotos amb fotos reals, «Tot inclòs per 25 €/mes» i el mode «posa-la quieta». Fet amb translate/scale/rotate (no transform)
   perquè les entrades de GSAP no ho trepitgin. */
.plans:has(.estrella){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.22fr);padding-top:1rem}
.pla-lema{margin:-.35rem 0 0;font-size:.93rem;line-height:1.45;color:var(--ink-soft)}
.pla-titol-llista{margin:0;font:700 .7rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pla-punts li.tot{font-weight:700}
.pla-preu{flex-wrap:wrap;row-gap:.3rem}
.pla-dif{display:inline-flex;align-items:center;padding:.3rem .6rem;border-radius:99px;background:color-mix(in srgb,var(--accent-on-dark) 16%,transparent);color:#A6EEE2!important;font:700 .76rem/1 var(--font-body)!important}
.pla-fotos{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:.4rem;height:7.5rem}
.pla-fotos.vertical-primer{grid-template-columns:.62fr 1.38fr;height:9.5rem}
.pla-fotos div{overflow:hidden;border-radius:.8rem}
.pla-fotos img{width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.2,.8,.2,1)}
.pla:hover .pla-fotos img{scale:1.06}
.pla-segell{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .65rem;border-radius:99px;background:rgba(13,31,36,.86);backdrop-filter:blur(6px);font:700 .7rem/1 var(--font-body);color:#F7F5EF}
.pla-segell svg{width:.95rem;height:.95rem;color:#CFA46A}
.pla-bloc{display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border-radius:.9rem;background:color-mix(in srgb,#CFA46A 10%,transparent);border:1px solid color-mix(in srgb,#CFA46A 35%,transparent)}
.pla-bloc b{font:700 1.9rem/1 var(--font-display);letter-spacing:-.04em;color:#CFA46A}
.pla-bloc span{font-size:.86rem;line-height:1.35}
@property --pla-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.pla.estrella{padding:clamp(1.6rem,2.4vw,2.1rem);border:1.5px solid transparent;translate:0 -14px;scale:1.02;
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent-on-dark) 15%,var(--dark)),color-mix(in srgb,var(--accent-on-dark) 4%,var(--dark)) 60%) padding-box,
             conic-gradient(from var(--pla-ang),#A6EEE2,color-mix(in srgb,var(--accent-on-dark) 25%,transparent) 22%,#CFA46A 50%,color-mix(in srgb,var(--accent-on-dark) 25%,transparent) 78%,#A6EEE2) border-box;
  box-shadow:0 40px 90px -30px color-mix(in srgb,var(--accent-on-dark) 55%,transparent);animation:pla-gira 6s linear infinite}
.pla.estrella:hover{translate:0 -18px}
@keyframes pla-gira{to{--pla-ang:360deg}}
.pla.estrella::after{display:none}
.estrella .pla-insignia{display:inline-flex;align-items:center;gap:.4rem;top:-.9rem;padding:.48rem .9rem;background:var(--accent-on-dark);color:var(--dark);font:800 .7rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 24px -6px color-mix(in srgb,var(--accent-on-dark) 80%,transparent)}
.estrella .pla-insignia svg{width:.85rem;height:.85rem}
.estrella .pla-nom{color:#A6EEE2!important}
.estrella .pla-preu b{font-size:calc(clamp(2.8rem,4.4vw,3.8rem) * var(--display-scale));background:linear-gradient(100deg,#fff,#A6EEE2 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.estrella .btn-1{min-height:3.5rem;font-size:1.02rem}
.pla-demo{position:relative;height:8rem;border-radius:1rem;overflow:hidden;background:#071318;border:1px solid color-mix(in srgb,var(--accent-on-dark) 22%,transparent)}
.pla-demo-barra{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:.3rem;height:1.6rem;padding:0 .7rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.pla-demo-barra i{width:.4rem;height:.4rem;border-radius:50%;background:rgba(255,255,255,.22)}
.pla-demo-barra span{margin-left:.5rem;font:600 .62rem/1 var(--font-body);color:var(--on-dark-soft);letter-spacing:.04em}
.pla-demo canvas{position:absolute;inset:1.6rem 0 0;width:100%;height:calc(100% - 1.6rem)}
.pla-demo-peu{position:absolute;right:.6rem;bottom:.55rem;z-index:2;font:700 .62rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark)}
/* sense JS d'animació (o amb la web quieta) la demo es veu com una paraula feta de punts, quieta */
html:not(.anim) .pla-demo canvas{display:none}
html:not(.anim) .pla-demo::after{content:attr(data-paraula);position:absolute;inset:1.6rem 0 0;display:grid;place-items:center;font:700 3.6rem/1 var(--font-display);letter-spacing:-.04em;color:#A6EEE2}
.pla-quieta{align-self:center;background:none;border:0;padding:.2rem;cursor:pointer;font:600 .86rem/1.2 var(--font-body);color:var(--accent-on-dark);text-decoration:underline;text-underline-offset:.25em;text-decoration-color:color-mix(in srgb,var(--accent-on-dark) 45%,transparent)}
.preus-inclou{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.6rem;margin:2.25rem 0 0;padding:1.1rem 1.4rem;border-radius:1.2rem;border:1px dashed var(--line)}
.preus-inclou>b{font:var(--display-weight) 1rem/1.2 var(--font-display);color:var(--ink)}
.preus-inclou ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.preus-inclou li{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--ink-soft)}
.preus-inclou li svg{width:1rem;height:1rem;color:var(--accent-on-dark)}
/* calculadora amb controls lliscants */
.calc-camp>span{display:flex;justify-content:space-between;gap:1rem}
.calc-camp output{font:700 1.05rem/1 var(--font-display);color:var(--ink)}
.calc-camp input[type=range]{width:100%;accent-color:var(--accent-on-dark)}
/* web quieta: res no es mou, i una píndola per tornar-la a animar */
html.quieta *,html.quieta *::before,html.quieta *::after{animation-play-state:paused!important}
.pill-quieta{display:none}
html.quieta .pill-quieta{position:fixed;left:50%;bottom:1rem;z-index:300;translate:-50% 0;display:flex;align-items:center;gap:.9rem;padding:.55rem .6rem .55rem 1.1rem;border-radius:99px;background:var(--dark);color:var(--on-dark);border:1px solid color-mix(in srgb,var(--accent-on-dark) 40%,transparent);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);font-size:.86rem;white-space:nowrap}
.pill-quieta button{border:0;border-radius:99px;padding:.5rem .9rem;background:var(--accent-on-dark);color:var(--dark);font:700 .82rem/1 var(--font-body);cursor:pointer}
html.quieta .contacte-flota{bottom:4.5rem}
@media (max-width:980px){
  .plans:has(.estrella){grid-template-columns:1fr;max-width:32rem;margin-inline:auto}
  .pla.estrella{order:-1;translate:none;scale:none;margin-top:.75rem}
  .pla.estrella:hover{translate:0 -4px}
}
@media (max-width:480px){html.quieta .pill-quieta{white-space:normal;width:calc(100% - 2rem);font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.pla.estrella{animation:none}}
.hv-foto.vertical .hv-etiq{left:calc(22% + .55rem)}

/* 46. Google («cercador»): el visitant escriu el seu negoci i el veu pujar fins al primer resultat.
   Cercador genèric, sense el logotip ni la marca de Google. A l'esquerra el text i els camps; a la dreta, els resultats. */
.gs{--gs-sup:color-mix(in srgb,var(--on-dark) 6%,var(--dark));--gs-vora:color-mix(in srgb,var(--on-dark) 13%,transparent);--gs-viva:#A6EEE2;--gs-avet:#23695F;
  --s-ink:#1f1f1f;--s-soft:#4d5156;--s-link:#1a0dab;--s-url:#202124;--s-line:#e8eaed;--s-sk:#eceef1;position:relative;isolation:isolate;overflow:hidden}
.gs::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(44rem 34rem at 72% 40%,color-mix(in srgb,var(--accent-on-dark) 16%,transparent),transparent 70%)}
.gs-wrap{display:grid;grid-template-columns:.8fr 1.2fr;grid-template-areas:"cap visual" "camps visual" "modes visual" "resta visual";grid-template-rows:auto auto auto 1fr;column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
.gs-cap{grid-area:cap;margin:0 0 1.6rem;text-align:left}.gs-camps{grid-area:camps}.gs-modes{grid-area:modes}.gs-visual{grid-area:visual}.gs-resta{grid-area:resta}
.gs-cap .intro{margin-inline:0;max-width:38ch}
.gs-camp{display:block;margin-bottom:1rem}
.gs-camp>span{display:block;margin-bottom:.5rem;font:700 .72rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
.gs-fila{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.gs input,.gs select{width:100%;padding:.9rem 1rem;border-radius:.9rem;border:1.5px solid var(--gs-vora);background:var(--gs-sup);color:var(--on-dark);font:600 1.05rem/1.2 var(--font-display);letter-spacing:-.01em;transition:border-color .25s,box-shadow .25s}
.gs select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent-on-dark) 50%),linear-gradient(135deg,var(--accent-on-dark) 50%,transparent 50%);background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat}
.gs select option{color:#111}
.gs input::placeholder{color:color-mix(in srgb,var(--on-dark) 35%,transparent)}
.gs input:focus,.gs select:focus{outline:none;border-color:var(--accent-on-dark);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-on-dark) 18%,transparent)}
.gs-xips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:-.35rem}
.gs-xips button{padding:.42rem .75rem;border-radius:99px;border:1px solid var(--gs-vora);background:none;color:var(--on-dark-soft);font:600 .8rem/1 var(--font-body);cursor:pointer;transition:border-color .2s,color .2s}
.gs-xips button:hover,.gs-xips button[aria-pressed="true"]{border-color:var(--accent-on-dark);color:var(--on-dark)}
.gs .gs-adapta{margin:.75rem 0 0;font-size:.8rem;line-height:1.4}
.gs-modes{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:.3rem;margin:1.4rem 0 1.1rem;border-radius:1rem;background:var(--gs-sup);border:1px solid var(--gs-vora)}
.gs-modes button{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.75rem .9rem;border:0;border-radius:.75rem;background:none;color:var(--on-dark-soft);text-align:left;cursor:pointer;transition:background-color .3s,color .3s}
.gs-modes b{font:700 .95rem/1.1 var(--font-display);color:inherit}
.gs-modes small{font-size:.76rem;line-height:1.3}
.gs-modes button[aria-pressed="true"]{background:var(--accent-on-dark);color:var(--dark)}
.gs-modes button[aria-pressed="true"] small{color:color-mix(in srgb,var(--dark) 75%,transparent)}
.gs-punts{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.gs-punts li{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem;line-height:1.45;color:var(--on-dark)}
.gs-punts svg{flex:none;width:1.1rem;height:1.1rem;margin-top:.15rem;color:var(--accent-on-dark)}
.gs-prova{display:flex;align-items:center;gap:.9rem;margin-top:1.2rem;padding:.9rem 1rem;border-radius:1rem;background:color-mix(in srgb,var(--gs-avet) 40%,transparent);border:1px solid color-mix(in srgb,var(--accent-on-dark) 30%,transparent);font-size:.88rem;line-height:1.4;color:var(--on-dark-soft)}
.gs-prova strong{font:700 1.7rem/1 var(--font-display);color:var(--gs-viva);letter-spacing:-.03em;white-space:nowrap}
.gs-prova b{color:var(--on-dark);font-weight:600}
.gs .gs-cta{display:flex;width:100%;min-height:3.6rem;margin-top:1.2rem;text-align:center;line-height:1.15;box-shadow:0 14px 40px -12px color-mix(in srgb,var(--accent-on-dark) 85%,transparent)}
.gs .gs-cta svg{flex:none;width:1.2rem;height:1.2rem}
.gs .gs-avis{margin:.8rem 0 0;font-size:.76rem;line-height:1.45;text-align:center}

/* la finestra del cercador (sempre clara, com un navegador) */
.gs-fin{position:relative;border-radius:1.1rem;overflow:hidden;background:#fff;color:var(--s-ink);font-family:Arial,Helvetica,system-ui,sans-serif;box-shadow:0 50px 100px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.gs-barra{display:flex;align-items:center;gap:.35rem;height:2.1rem;padding:0 .85rem;background:#f1f3f4;border-bottom:1px solid var(--s-line)}
.gs-barra i{width:.55rem;height:.55rem;border-radius:50%;background:#d5d8dc}
.gs-cap-s{display:flex;align-items:center;gap:1rem;padding:1rem 1.3rem .2rem}
.gs-cerca{flex:1;display:flex;align-items:center;gap:.7rem;height:2.9rem;padding:0 1.1rem;border-radius:99px;border:1px solid #dfe1e5;box-shadow:0 1px 6px rgba(32,33,36,.18);font-size:1rem;color:var(--s-ink);min-width:0}
.gs-cerca svg{flex:none;width:1.1rem;height:1.1rem;color:#9aa0a6}
.gs-q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-caret{flex:none;width:1px;height:1.2rem;margin-left:-.55rem;background:#1a73e8;animation:gs-pampalluga 1s steps(1) infinite}
@keyframes gs-pampalluga{50%{opacity:0}}
.gs-tabs{display:flex;gap:1.3rem;padding:.6rem 1.3rem 0 2.6rem;border-bottom:1px solid var(--s-line);font-size:.82rem;color:var(--s-soft)}
.gs-tabs span{padding-bottom:.6rem}
.gs-tabs span:first-child{color:#1a73e8;border-bottom:3px solid #1a73e8;font-weight:700}
.gs-serp{position:relative;height:34rem;overflow:hidden}
.gs-serp::after{content:"";position:absolute;inset:auto 0 0;height:4.5rem;background:linear-gradient(transparent,#fff);pointer-events:none}
.gs-llista{list-style:none;margin:0;padding:1rem 1.3rem 2rem 2.6rem;display:flex;flex-direction:column;gap:1.25rem;max-width:42rem}
.gs-r{position:relative;border-radius:.9rem;transition:opacity .5s,filter .5s}
.gs-url{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--s-soft);line-height:1.25}
.gs-url>div{min-width:0}.gs-url>div>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-fav{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:#f1f3f4;border:1px solid var(--s-line);font:700 .75rem/1 Arial,sans-serif;color:#5f6368}
.gs-url b{display:block;font-weight:400;font-size:.86rem;color:var(--s-url)}
.gs-fin .gs-tit{margin:.3rem 0 .2rem;font-size:1.18rem;line-height:1.3;color:var(--s-link)}
.gs-fin .gs-desc{margin:0;font-size:.85rem;line-height:1.5;color:var(--s-soft)}
.gs-sk{display:block;height:.62rem;border-radius:99px;background:var(--s-sk);margin-top:.45rem}
.gs-sk.w9{width:92%}.gs-sk.w7{width:70%}.gs-sk.w5{width:48%}.gs-sk.w3{width:32%}
.gs-tit .gs-sk{height:.95rem;background:#e3e6ee;margin:0}
.gs-tu{padding:1rem 1.1rem 1.1rem;margin:-.4rem -1.1rem 0;background:linear-gradient(135deg,#f3fbf9,#fff 60%);box-shadow:0 0 0 2px var(--accent-on-dark),0 18px 40px -18px rgba(35,105,95,.45)}
.gs-tu .gs-fav{background:var(--gs-avet);border-color:var(--gs-avet);color:#fff}
.gs-fin .gs-tu .gs-tit{font-size:1.32rem}
.gs-tu .gs-url{padding-right:6.5rem}
.gs-sitelinks{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem;margin-top:.8rem;padding-top:.75rem;border-top:1px solid var(--s-line)}
.gs-sitelinks span{display:block;font-size:.95rem;color:var(--s-link)}
.gs-sitelinks small{display:block;font-size:.76rem;color:var(--s-soft);line-height:1.35;margin-top:.1rem}
.gs-insignia{position:absolute;right:.9rem;top:.9rem;display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .7rem;border-radius:99px;background:var(--dark);color:var(--gs-viva);font:700 .66rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 8px 20px -6px rgba(0,0,0,.4);transition:opacity .4s}
.gs-insignia i{width:.45rem;height:.45rem;border-radius:50%;background:var(--gs-viva);box-shadow:0 0 0 4px color-mix(in srgb,var(--gs-viva) 30%,transparent);animation:gs-batec 1.8s ease-in-out infinite}
@keyframes gs-batec{50%{box-shadow:0 0 0 7px transparent}}
.gs-mapa{border:1px solid var(--s-line);border-radius:.9rem;overflow:hidden}
.gs-mapa-tit{padding:.75rem 1rem .25rem;font-size:1.05rem;color:var(--s-ink)}
.gs-mapa svg{display:block;width:100%;height:8.5rem;background:#eef2ec}
.gs-pin{transition:transform .6s cubic-bezier(.2,.9,.3,1.4),opacity .4s;transform-box:fill-box;transform-origin:50% 100%}
.gs-pin-tu{opacity:0;transform:translateY(-14px) scale(.4)}
.gs-mapa ol{list-style:none;margin:0;padding:0}
.gs-lloc{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-top:1px solid var(--s-line);font-size:.82rem;color:var(--s-soft);transition:max-height .6s ease,padding .6s ease,opacity .5s,background-color .5s;max-height:6rem;overflow:hidden}
.gs-lloc>div:first-child{flex:1;min-width:0}
.gs-lloc b{display:block;font-size:.95rem;font-weight:400;color:var(--s-link)}
.gs-lloc .ok{color:#188038}
.gs-lloc-bt{display:flex;gap:.4rem;align-items:center;flex:none}
.gs-lloc-bt span{padding:.35rem .65rem;border-radius:99px;border:1px solid #dadce0;color:#1a73e8;font-size:.74rem;white-space:nowrap}
.gs-lloc-tu{background:#f3fbf9}
.gs-fin[data-mode="ara"] .gs-lloc-tu{max-height:0;padding-block:0;opacity:0;border-top-width:0}
.gs-fin[data-mode="ara"] .gs-tu{opacity:.35;filter:blur(1.5px) grayscale(1)}
.gs-fin[data-mode="ara"] .gs-insignia{opacity:0}
.gs-fin[data-mode="objectiu"] .gs-pin-tu{opacity:1;transform:none}
.gs-fin[data-mode="objectiu"] .gs-insta{opacity:.55}
.gs-sep{display:flex;align-items:center;gap:.8rem;font-size:.78rem;color:#9aa0a6;transition:opacity .4s}
.gs-sep::before,.gs-sep::after{content:"";flex:1;height:1px;background:var(--s-line)}
.gs-fin[data-mode="objectiu"] .gs-sep{opacity:0}
.gs-on{position:absolute;z-index:3;left:50%;bottom:1.3rem;translate:-50% 0;display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-radius:99px;background:var(--dark);color:var(--on-dark);font:600 .84rem/1.2 var(--font-body);white-space:nowrap;box-shadow:0 14px 34px -10px rgba(0,0,0,.55);transition:opacity .4s,translate .4s}
.gs-on svg{width:1rem;height:1rem;color:#f28b82;flex:none}
.gs-fin[data-mode="objectiu"] .gs-on{opacity:0;translate:-50% 12px;pointer-events:none}
.gs .gs-peu{display:flex;align-items:center;gap:.6rem;margin:1rem 0 0;font-size:.82rem}
.gs-peu i{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent-on-dark);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-on-dark) 20%,transparent)}
@media (max-width:980px){
  .gs-wrap{grid-template-columns:1fr;grid-template-areas:"cap" "camps" "modes" "visual" "resta";grid-template-rows:none}
  .gs-modes{margin-top:.4rem}
  .gs-resta{margin-top:1.6rem}
}
@media (max-width:560px){
  .gs-fila{grid-template-columns:1fr}
  .gs-cap-s{padding:.8rem .8rem .2rem}
  .gs-tabs{padding-left:1rem;gap:1rem}
  .gs-llista{padding:.6rem .9rem 2rem}
  .gs-tu{margin-inline:-.5rem;padding:.9rem .8rem 1rem}
  .gs-insignia{right:.6rem;top:.6rem}
  .gs-tu .gs-url{padding-right:5.5rem}
  .gs-sitelinks{grid-template-columns:1fr;gap:.45rem}
  .gs-sitelinks small{display:none}
  .gs-serp{height:31rem}
  .gs-lloc-bt span+span{display:none}
  .gs-on{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){.gs *{animation:none!important;transition:none!important}}
html.quieta .gs *{animation:none!important;transition:none!important}

/* 47. Cartell d'un capítol («cartell»): una foto real amb el visor de la càmera a sobre i la paraula gran.
   Es veu de què va el capítol sense llegir res. En arribar-hi, la foto s'enfoca, el quadre d'enfocament es fixa i dispara. */
.capitol .cartell{grid-column:1/-1;position:relative;isolation:isolate;margin:0 0 clamp(1.5rem,3vw,2.5rem);aspect-ratio:21/9;border-radius:calc(var(--radius) * 1.4);overflow:hidden;background:#0b1316;color:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.cartell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.cartell::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,14,17,.35),rgba(6,14,17,0) 28%,rgba(6,14,17,0) 45%,rgba(6,14,17,.82)),linear-gradient(90deg,rgba(6,14,17,.5),transparent 55%)}
.cartell-visor{position:absolute;inset:0;z-index:2;pointer-events:none;font:600 .72rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.cv-graella{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.16) 1px,transparent 1px);background-size:33.34% 100%,100% 33.34%;background-position:-1px 0,0 -1px}
.cv-cant{position:absolute;width:2.25rem;height:2.25rem;border:2px solid #fff;opacity:.9}
.cv-cant.c1{left:1.25rem;top:1.25rem;border-width:2px 0 0 2px}.cv-cant.c2{right:1.25rem;top:1.25rem;border-width:2px 2px 0 0}
.cv-cant.c3{left:1.25rem;bottom:1.25rem;border-width:0 0 2px 2px}.cv-cant.c4{right:1.25rem;bottom:1.25rem;border-width:0 2px 2px 0}
.cv-dalt{position:absolute;left:4rem;top:2rem}
.cv-dalt b{color:#E5484D;animation:v-parpelleja 1.4s steps(1) infinite}
.cv-comptador{position:absolute;right:4rem;top:2rem;padding:.4rem .6rem;border:1px solid rgba(255,255,255,.55);border-radius:.3rem;font-variant-numeric:tabular-nums}
.cv-dades{position:absolute;right:4rem;bottom:2rem;font-variant-numeric:tabular-nums;opacity:.9}
.cv-focus{position:absolute;left:58%;top:24%;width:clamp(5rem,11vw,9rem);aspect-ratio:1;border:2px solid var(--accent-on-dark);border-radius:.3rem;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.cv-focus::before,.cv-focus::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent-on-dark)}
.cv-focus::before{width:.9rem;height:2px;translate:-50% -50%}.cv-focus::after{width:2px;height:.9rem;translate:-50% -50%}
.cv-focus span{position:absolute;left:0;top:calc(100% + .5rem);white-space:nowrap;color:var(--accent-on-dark)}
.cv-flash{position:absolute;inset:0;background:#fff;opacity:0}
.capitol .cartell .paraula{position:absolute;z-index:3;left:clamp(1.25rem,4.5vw,4rem);bottom:clamp(1.5rem,4vw,3.25rem);margin:0;color:#fff!important;-webkit-text-stroke:0;font-size:clamp(2.6rem,6.6vw,6.75rem);line-height:.92;letter-spacing:-.045em;white-space:normal;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.cartell .paraula>span{display:block}
.cartell .paraula>span+span{color:var(--accent-on-dark)}
.cartell figcaption{position:absolute;z-index:3;right:clamp(1.25rem,4.5vw,4rem);bottom:calc(clamp(1.5rem,4vw,3.25rem) + 1.9rem);display:flex;align-items:center;gap:.45rem;max-width:16rem;font-size:.8rem;line-height:1.3;color:rgba(255,255,255,.85)}
.cartell figcaption svg{flex:none;width:1rem;height:1rem;color:var(--accent-on-dark)}
/* animació: s'enfoca i dispara (només si el navegador la fa; sense JS o amb «quieta», tot quieta i enfocat) */
.cartell.anima img{filter:blur(10px);transform:scale(1.07);transition:filter 1.1s cubic-bezier(.2,.8,.2,1) .15s,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.cartell.anima .cv-focus{opacity:0;transform:scale(1.7);transition:opacity .35s ease .35s,transform .6s cubic-bezier(.2,.9,.3,1.3) .35s}
.cartell.anima .cv-focus span{opacity:0;transition:opacity .3s ease 1s}
.cartell.vist img{filter:none;transform:none}
.cartell.vist .cv-focus{opacity:1;transform:none}
.cartell.vist .cv-focus span{opacity:1}
.cartell.vist .cv-flash{animation:cv-dispara .45s ease-out 1.25s}
@keyframes cv-dispara{12%{opacity:.85}100%{opacity:0}}
.capitol.amb-cartell .paraula{will-change:auto}
@media (max-width:760px){
  .capitol .cartell{aspect-ratio:4/5;border-radius:var(--radius)}
  .cartell img{object-position:28% 50%}
  .cartell::after{background:linear-gradient(180deg,rgba(6,14,17,.4),rgba(6,14,17,0) 25%,rgba(6,14,17,0) 40%,rgba(6,14,17,.88))}
  .cv-cant{width:1.5rem;height:1.5rem}
  .cv-cant.c1,.cv-cant.c3{left:.9rem}.cv-cant.c2,.cv-cant.c4{right:.9rem}.cv-cant.c1,.cv-cant.c2{top:.9rem}.cv-cant.c3,.cv-cant.c4{bottom:.9rem}
  .cv-dalt{left:3rem;top:1.4rem}.cv-comptador{right:3rem;top:1.15rem}
  .cv-focus{left:52%;top:26%;width:5.5rem}
  .cv-dades{display:none}
  .capitol .cartell .paraula{left:1.25rem;bottom:3.6rem;font-size:clamp(2.3rem,11.5vw,3.4rem)}
  .cartell figcaption{left:1.25rem;right:auto;bottom:1.4rem;max-width:none}
}
@media (prefers-reduced-motion:reduce){.cartell *{animation:none!important;transition:none!important}}

/* 48. Portada amb demo que cap a la pantalla de l'ordinador: el logo de partícules ocupa només l'alçada que queda lliure
   (unitats de contenidor), i així la franja de dades i l'indicador «baixa» es veuen sense fer scroll, al portàtil i al monitor.
   Amb la demo a la vista els botons flotants s'amaguen, i per això no cal el marge de baix que els deixava lloc. */
@media (min-width:861px){
  body.hero-particules .hero:has(.hero-demo){padding-top:calc(4.5rem + clamp(.5rem,2.5vh,2rem));padding-bottom:clamp(.75rem,2.5vh,1.75rem)}
  .hero-particules .hero:has(.hero-demo) .hero-paraula{flex:1 1 0;min-height:4.5rem;gap:0;container-type:size}
  .hero-particules .hero:has(.hero-demo) .hero-paraula>*{font-size:min(calc(17vw * var(--display-scale)),calc(28vh * var(--display-scale)),86cqh)}
  .hero-particules .hero:has(.hero-demo) .hero-simbol{margin-right:.22em}
  .hero:has(.hero-demo) .hero-demo{padding-bottom:1rem}
  .hero:has(.hero-demo) .hero-proves{margin-top:clamp(.9rem,3vh,2.25rem);padding-top:clamp(.75rem,2vh,1.25rem)}
  .hero-particules .hero:has(.hero-demo) .hero-baixa,.anim .hero-particules .hero:has(.hero-demo) .hero-baixa{margin-top:clamp(.6rem,2vh,1.5rem)}
}
/* pantalles baixes (portàtil): la demo i els textos, una mica més compactes */
@media (min-width:861px) and (max-height:1000px){
  .hd-agenda .hd-franja:nth-child(n+4){display:none}
  .hd-agenda{padding:.5rem 0}
  .hero-particules .hero:has(.hero-demo) .hero-text .botons{margin-top:1.1rem}
  .hero:has(.hero-demo) .hero-proves b{font-size:calc(clamp(1.35rem,2vw,1.8rem) * var(--display-scale))}
  .hero:has(.hero-demo) .hero-proves span{font-size:.78rem}
  .hero-particules .hero:has(.hero-demo) .hero-baixa i,.anim .hero-particules .hero:has(.hero-demo) .hero-baixa i{width:1.2rem;height:1.85rem}
}

/* 49. Web «compacta» (fitxa "compacta": true): a l'ordinador cada secció cap (gairebé) en una pantalla.
   Menys aire entre seccions, títols una mica més petits i els blocs que anaven un sota l'altre, de costat. */
.cas-baix:not(:has(p,ul,a,img,figure)){display:none}
.compacta .sec{padding:clamp(3.5rem,8vh,5.5rem) 0}
.compacta .sec-cap{margin-bottom:clamp(1.5rem,3.5vh,2.5rem)}
.compacta.cap-capitol main section:not(.hero) .sec-cap>h2{font-size:calc(clamp(2.1rem,3.4vw,3.2rem) * var(--display-scale))}
@media (min-width:1024px){
  /* Per què una web: el 98 % i el gràfic de l'INE, de costat */
  .compacta .dades>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:center}
  .compacta .dades .sec-cap{grid-column:1/-1}
  .compacta .d-hero{grid-template-columns:1fr;gap:1.25rem;margin:0}
  .compacta .d-gegant{font-size:clamp(5rem,9vw,8.5rem)}
  .compacta .d-graella{display:none}
  .compacta .d-bretxa{padding:clamp(1.25rem,2.5vw,2rem)}
  .compacta .d-pont{grid-column:1/-1;max-width:none;margin-top:clamp(1.5rem,4vh,2.5rem);font-size:calc(clamp(1.5rem,2.4vw,2.2rem) * var(--display-scale))}
  /* Resultats: el títol i les xifres a l'esquerra, el gràfic a la dreta */
  .compacta #cas>.wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .compacta #cas .cas-cap{grid-column:1;margin-bottom:1.5rem}
  .compacta #cas .cas-kpis{grid-column:1;grid-template-columns:1fr 1fr}
  .compacta #cas .cas-kpi.gran{grid-column:1/-1}
  .compacta #cas .cas-kpi.gran b{font-size:clamp(3.5rem,6vw,5.5rem)}
  .compacta #cas .cas-kpi{padding:1.1rem 1.25rem}
  .compacta #cas .g-serie{grid-column:2;grid-row:1/3;margin:0;align-self:center}
  /* Google: el cercador una mica més baix */
  .compacta .gs-serp{height:min(34rem,58vh)}
  .compacta .gs-cap{margin-bottom:1.1rem}
  .compacta .gs-camp{margin-bottom:.75rem}
  .compacta .gs-modes{margin:1rem 0 0}
  .compacta .gs-resta{margin-top:0}
  .compacta .gs .gs-cta{margin-top:1rem}
  /* Qui som: el mapa i l'equip, més junts i més petits */
  .compacta .qs-baix{margin-top:clamp(1.5rem,4vh,2.5rem);align-items:center}
  .compacta .qs-radar{max-width:min(30rem,62vh)}
  .compacta .qs-equip{gap:.7rem}
  .compacta .qs-equip li{padding:1rem 1.2rem}
  .compacta .qs-simbol{max-height:12rem}
  /* La nostra feina */
  .compacta .feina-llista li{padding:.7rem 1rem}
  .compacta .feina-llista{gap:.45rem}
  .compacta .feina-text h2{margin-bottom:1.1rem}
}
@media (min-width:1024px){
  .compacta .d-perdua b{font-size:clamp(3rem,5vw,4.5rem);white-space:nowrap}
  .compacta .feina-llista{grid-template-columns:1fr 1fr}
  .compacta .feina-fletxa{display:none}
  .compacta .feina-llista span{font-size:.85rem;line-height:1.4}
  .compacta.cap-capitol main #cas .sec-cap>h2,.compacta.cap-capitol main #qui-som .sec-cap>h2{font-size:calc(clamp(2rem,3vw,2.9rem) * var(--display-scale))}
  .compacta .qs-radar{max-width:min(26rem,52vh)}
}
@media (min-width:1024px){
  .compacta .feina-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .compacta .feina-visual{max-width:34rem}
}
@media (min-width:1024px){
  /* capítols de servei: la paraula gran, més continguda; la presentació del servei cap en una pantalla i la prova, en una altra */
  .compacta .capitols .capitol.capitol .paraula{font-size:calc(clamp(3.5rem,6.5vw,6.25rem) * var(--display-scale))}
  .compacta.mon-particules .capitol.ric{padding-top:clamp(3.5rem,8vh,5.5rem)}
  .compacta.mon-particules .capitol.ric .servei-prova{padding:clamp(1.5rem,4vh,3rem) 0 clamp(3.5rem,8vh,5.5rem)}
  .compacta .capitol.ric>.wrap:first-child{row-gap:1rem}
  .compacta .servei-costat{gap:1rem;padding:clamp(1.1rem,2vw,1.6rem)}
  .compacta .inclou li{padding-block:.45rem}
  /* preus: targetes més denses */
  .compacta .pla{gap:.7rem;padding:clamp(1.15rem,1.8vw,1.6rem)}
  .compacta .pla-punts{gap:.4rem;padding-top:.7rem}
  .compacta .pla-punts li{font-size:.86rem}
  .compacta .preus-inclou{margin-top:1.25rem;padding:.8rem 1.2rem}
  .compacta .calc{margin-top:1rem;padding:.9rem 1.2rem}
}
@media (min-width:1024px){
  .compacta .capitol .cartell{aspect-ratio:auto;height:clamp(16rem,40vh,26rem);margin-bottom:.5rem}
  .compacta .capitol .cartell .paraula{font-size:clamp(2.4rem,5vw,5rem)}
}
@media (min-width:1024px) and (max-width:1380px){.compacta .feina-visual{width:calc(100% - 2.75rem);justify-self:start}}
.compacta #feina{overflow-x:clip}  /* les targetes flotants del visual no han de fer scroll de costat */
.compacta main{overflow-x:clip}  /* cap decoració (halos, targetes flotants) pot fer scroll de costat; clip no trenca el sticky */

/* 50. Portada al portàtil i als monitors de fins a 1000 px d'alçada: el logo de partícules mana i hi ha poca lletra.
   Fora l'etiqueta, xifres amb el text curt en una sola línia, demo més petita i l'indicador «baixa» sense text. */
.hp-curt{display:none}
@media (min-width:861px) and (max-height:1000px){
  .hero:has(.hero-demo) .hero-text>.etiqueta{display:none}
  .hero-particules .hero:has(.hero-demo) h1.llarg{font-size:calc(clamp(1.7rem,2.5vw,2.35rem) * var(--display-scale));max-width:24ch}
  .hero-particules .hero:has(.hero-demo) .hero-paraula{min-height:9rem}
  .hero-particules .hero:has(.hero-demo) .hero-paraula>*{font-size:min(calc(17vw * var(--display-scale)),calc(30vh * var(--display-scale)),90cqh)}
  .hero:has(.hero-demo) .hero-demo{zoom:.8;padding-bottom:.5rem}
  .hero:has(.hero-demo) .hero-proves{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(.9rem,2.5vh,1.5rem);padding-top:clamp(.75rem,2vh,1.1rem)}
  .hero:has(.hero-demo) .hero-proves li{display:flex;align-items:baseline;gap:.55rem}
  .hero:has(.hero-demo) .hero-proves b{font-size:calc(clamp(1.3rem,1.9vw,1.65rem) * var(--display-scale))}
  .hero:has(.hero-demo) .hero-proves .hp-llarg{display:none}
  .hero:has(.hero-demo) .hero-proves .hp-curt{display:inline;font-size:.85rem;max-width:none;white-space:nowrap}
  body.hero-particules .hero:has(.hero-demo){padding-bottom:3rem}
  .hero-particules .hero:has(.hero-demo) .hero-baixa,.anim .hero-particules .hero:has(.hero-demo) .hero-baixa{position:absolute;left:50%;bottom:.55rem;margin:0;translate:-50% 0;gap:.2rem}
  .hero:has(.hero-demo) .hero-baixa>span{display:none}
  .hero-particules .hero:has(.hero-demo) .hero-baixa i,.anim .hero-particules .hero:has(.hero-demo) .hero-baixa i{width:1.05rem;height:1.6rem}
  .hero-particules .hero:has(.hero-demo) .hero-baixa i::after{top:.28rem;height:.4rem}
  .hero:has(.hero-demo) .hero-baixa::after{width:.42rem;height:.42rem}
}

/* 51. Portada amb els tres projectes (hero.mostres), per ordre de prioritat: 01 web animada (gran, amb el vídeo d'una web feta per nosaltres),
   02 xarxes i 03 software. Cada targeta porta a la seva secció; sense JS es veu igual (el vídeo amb la portada). */
@media (min-width:861px){.hero-particules .hero:has(.amb-mostres) .hero-peu{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.hero:has(.amb-mostres) .hero-demo{width:100%;max-width:44rem;padding:0;zoom:1}
.hb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:.7rem;height:clamp(16rem,42vh,25rem)}
.hb-card{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:1.15rem;color:var(--on-dark);text-decoration:none;background:color-mix(in srgb,#10262B 92%,transparent);border:1px solid color-mix(in srgb,var(--accent-on-dark) 20%,transparent);box-shadow:0 30px 70px -35px rgba(0,0,0,.9);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s}
.hb-card:hover,.hb-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent-on-dark) 60%,transparent)}
.hb-web{grid-row:1/3}
.hb-cap{position:relative;z-index:2;display:flex;align-items:flex-start;gap:.6rem;padding:.75rem .9rem .55rem}
.hb-cap b{flex:none;padding-top:.18rem;font:700 .68rem/1 var(--font-display);letter-spacing:.06em;color:var(--accent-on-dark)}
.hb-cap strong{display:block;font:700 1rem/1.15 var(--font-display);letter-spacing:-.01em}
.hb-cap small{display:block;margin-top:.22rem;font-size:.72rem;line-height:1.3;color:var(--on-dark-soft)}
.hb-vista{position:relative;flex:1;min-height:0;display:block}
.hb-web .hb-vista{position:absolute;inset:0}
.hb-web video{display:block;width:100%;height:100%;object-fit:cover}
.hb-web .hb-cap{position:absolute;inset:auto 0 0;padding:3.5rem 1.1rem 1rem;background:linear-gradient(rgba(8,14,16,0),rgba(8,14,16,.82) 45%,rgba(8,14,16,.94))}
.hb-web .hb-cap strong{font-size:1.25rem}
.hb-boto{position:absolute;z-index:3;right:.8rem;top:.8rem;padding:.48rem .85rem;border-radius:99px;background:rgba(10,8,6,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);color:#fff;font:600 .76rem/1 var(--font-body);transition:background-color .25s,color .25s}
.hb-web:hover .hb-boto,.hb-web:focus-visible .hb-boto{background:var(--accent-on-dark);color:var(--dark)}
.hbx{margin:0 .9rem .9rem;border-radius:.7rem;overflow:hidden}
.hbx-graella{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;height:100%}
.hbx-graella img{display:block;width:100%;height:100%;min-height:0;object-fit:cover}
.hbx-xip{position:absolute;left:.5rem;bottom:.5rem;display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .65rem;border-radius:99px;background:rgba(247,245,239,.96);color:#0D1F24;font:600 .68rem/1 var(--font-body);box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.hbx-xip i{font-style:normal;color:#E5484D}
.hbs{display:grid;align-content:end;gap:.35rem;padding:0 .9rem .9rem}
.hbs>span{max-width:88%;padding:.42rem .65rem;font-size:.7rem;line-height:1.3}
.hbs-msg{justify-self:start;border-radius:.8rem .8rem .8rem .2rem;background:rgba(255,255,255,.08)}
.hbs-ok{justify-self:end;border-radius:.8rem .8rem .2rem .8rem;background:color-mix(in srgb,var(--accent-on-dark) 24%,transparent)}
.hbs-cita{display:flex;align-items:center;gap:.5rem;border-radius:.55rem;border-left:3px solid #E3B26E;background:color-mix(in srgb,#E3B26E 15%,transparent)}
.hbs-cita i{font-style:normal;color:var(--on-dark-soft)}
.hb.viu .hbx-xip{animation:hb-xip 6s cubic-bezier(.2,.8,.2,1) infinite}
.hb.viu .hbs-msg{animation:hb-a 7s ease infinite}
.hb.viu .hbs-ok{animation:hb-b 7s ease infinite}
.hb.viu .hbs-cita{animation:hb-c 7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes hb-xip{0%,8%{opacity:0;transform:translateY(10px) scale(.9)}16%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hb-a{0%,4%{opacity:0;transform:translateY(8px)}12%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hb-b{0%,24%{opacity:0;transform:translateY(8px)}32%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hb-c{0%,44%{opacity:0;transform:scale(.92)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hb *{animation:none!important}.hb-card{transition:none}}
html.quieta .hb *{animation:none!important}
@media (min-width:861px) and (max-height:1000px){.hero:has(.amb-mostres) .hero-demo{zoom:1}.hb{height:clamp(14.5rem,40vh,23rem)}}
@media (min-width:861px) and (max-height:820px){.hb:has(.hb-xarxes) :is(.hb-xarxes,.hb-soft) .hb-cap small,.hb:has(.hb-xarxes) .hbs-msg{display:none}.hb-cap{padding:.6rem .8rem .45rem}}
.hbs{overflow:hidden}
@media (max-width:860px){
  .hero:has(.amb-mostres) .hero-demo{max-width:none}
  .hb{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .hb-web{grid-row:auto;grid-column:1/-1;aspect-ratio:16/11}
  .hb-xarxes,.hb-soft{height:12.5rem}
  .hb-cap small{display:none}
}

/* 52. Demo de xarxes (community manager): perfil del negoci, publicacions, setmana i abast; un missatge arriba en bucle */
.hx{position:relative;font-family:var(--font-body);color:var(--on-dark)}
.hx-app{border-radius:1.2rem;overflow:hidden;background:color-mix(in srgb,#10262B 94%,transparent);border:1px solid color-mix(in srgb,var(--accent-on-dark) 24%,transparent);box-shadow:0 40px 90px -35px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset}
.hx-cos{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.hx-perfil{padding:.8rem .85rem;border-right:1px solid rgba(255,255,255,.07)}
.hx-cap{display:flex;align-items:center;gap:.6rem}
.hx-avatar{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;object-fit:cover;background:#3a2a1e;box-shadow:0 0 0 2px #10262B,0 0 0 3.5px #E3B26E}
.hx-cap b{display:block;font-size:.84rem}
.hx-cap span{display:block;font-size:.64rem;color:var(--on-dark-soft)}
.hx-xifres{list-style:none;margin:.6rem 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;text-align:center}
.hx-xifres b{display:block;font:700 .9rem/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.hx-xifres span{display:block;font-size:.58rem;line-height:1.2;color:var(--on-dark-soft)}
.hx-graella{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border-radius:.55rem;overflow:hidden}
.hx-graella li{position:relative;aspect-ratio:1;overflow:hidden;background:#1a1410}
.hx-graella img{display:block;width:100%;height:100%;object-fit:cover}
.hx-graella em{position:absolute;left:.3rem;top:.3rem;padding:.18rem .38rem;border-radius:99px;background:var(--accent-on-dark);color:var(--dark);font:700 .52rem/1 var(--font-body);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.hx-costat{display:grid;align-content:start;gap:.7rem;padding:.8rem .85rem}
.hx-tit{display:block;margin-bottom:.4rem;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
.hx-setmana{list-style:none;margin:0;padding:0;display:grid;gap:.32rem}
.hx-setmana li{display:grid;grid-template-columns:1.3rem minmax(0,1fr) auto;gap:.4rem;align-items:center;padding:.36rem .45rem;border-radius:.55rem;background:color-mix(in srgb,var(--accent-on-dark) 9%,transparent);font-size:.68rem}
.hx-setmana b{font-size:.6rem;color:var(--accent-on-dark)}
.hx-setmana span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hx-setmana small{display:block;font-size:.55rem;color:var(--on-dark-soft)}
.hx-setmana em{font-style:normal;font-size:.55rem;font-weight:700;color:#8FE3C5}
.hx-setmana li.prog em{color:#E3B26E}
.hx-grafic svg{display:block;width:100%;height:3.4rem;overflow:visible}
.hx-area{fill:color-mix(in srgb,var(--accent-on-dark) 16%,transparent)}
.hx-linia{fill:none;stroke:var(--accent-on-dark);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.hx .hx-avis{z-index:2}
.hx-avis i{background:#25D366}
/* moviment (només quan es veu i si la persona no ha demanat menys moviment): publicació nova, la corba es dibuixa, arriba un missatge */
.hx.viu .hx-nou img{animation:hx-nou 9s cubic-bezier(.2,.8,.2,1) infinite}
.hx.viu .hx-nou em{animation:hx-etiqueta 9s ease infinite}
.hx.viu .hx-linia{stroke-dasharray:100;animation:hx-dibuixa 9s ease-out infinite}
.hx.viu .hx-area{animation:hx-ompli 9s ease-out infinite}
.hx.viu .hx-avis{animation:hx-avis 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes hx-nou{0%{transform:scale(1.25);opacity:0}8%{opacity:1}16%,100%{transform:none;opacity:1}}
@keyframes hx-etiqueta{0%,10%{opacity:0;transform:scale(.6)}16%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hx-dibuixa{0%{stroke-dashoffset:100}30%,100%{stroke-dashoffset:0}}
@keyframes hx-ompli{0%,10%{opacity:0}35%,100%{opacity:1}}
@keyframes hx-avis{0%,30%{opacity:0;transform:translateY(18px) scale(.96)}37%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.hx *{animation:none!important}}
html.quieta .hx *{animation:none!important}
/* a la secció de xarxes, la demo en gran */
.prova-xarxes{display:grid;justify-items:center;gap:1rem}
.prova-xarxes .hx{width:min(100%,40rem)}
@media (min-width:900px){.prova-xarxes .hx{zoom:1.3}}
.prova-xarxes .hx-avis{left:auto;right:-1rem;bottom:-1rem}

/* 53. Web d'exemple principal (prova «pellicula»): el vídeo de la web es reprodueix sol i tot el bloc porta a provar-la */
.prova-pellicula{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.pel-pantalla{display:block;overflow:hidden;border-radius:1rem;background:#140e0a;color:#fff;text-decoration:none;box-shadow:0 40px 90px -40px rgba(13,31,36,.55),0 0 0 1px rgba(13,31,36,.08);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.pel-pantalla:hover{transform:translateY(-4px);box-shadow:0 50px 100px -40px rgba(13,31,36,.65),0 0 0 1px rgba(13,31,36,.1)}
.pel-barra{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:#1c1612;color:#cdbfae;font:500 .72rem/1 var(--font-body)}
.pel-barra i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.2)}
.pel-barra span{margin-left:.6rem;padding:.28rem .75rem;border-radius:99px;background:rgba(255,255,255,.07)}
.pel-barra em{margin-left:auto;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E3B26E}
.pel-video{position:relative;display:block;aspect-ratio:16/10}
.pel-video video{display:block;width:100%;height:100%;object-fit:cover}
.pel-play{position:absolute;left:50%;bottom:1.1rem;translate:-50% 0;padding:.65rem 1.15rem;border-radius:99px;background:rgba(10,8,6,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);font:600 .86rem/1 var(--font-body);white-space:nowrap;transition:background-color .25s,color .25s}
.pel-pantalla:hover .pel-play,.pel-pantalla:focus-visible .pel-play{background:#E3B26E;color:#1c1612}
.pel-text h4{margin:.55rem 0 .7rem;font:var(--display-weight) calc(clamp(2rem,3.4vw,3rem) * var(--display-scale))/1 var(--font-display);letter-spacing:var(--display-tracking)}
.pel-text>p{margin:0 0 1rem;color:var(--ink-soft)}
.pel-punts{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.45rem}
.pel-punts li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem}
.pel-punts svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.2rem;color:var(--accent-text)}
.pel-text .pel-avis{margin:.85rem 0 0;font-size:.75rem;color:var(--ink-soft)}
@media (max-width:860px){.prova-pellicula{grid-template-columns:1fr}}

/* 54. Targetes de preus: la Web Animada amb el vídeo del Cafè Grà, i el Prèmium de xarxes amb un mini perfil */
.pla-demo.pla-video{display:block;height:auto;color:inherit;text-decoration:none}
.pla-video video{display:block;width:100%;aspect-ratio:16/9;margin-top:1.6rem;object-fit:cover}
.pla-video .pla-demo-peu{padding:.35rem .6rem;border-radius:99px;background:rgba(10,8,6,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .25s,color .25s}
.pla-video:hover .pla-demo-peu{background:var(--accent-on-dark);color:var(--dark)}
.pla-mini{padding:.7rem;border-radius:1rem;background:color-mix(in srgb,var(--on-dark) 4%,transparent);border:1px solid var(--line)}
.pm-cap{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem;font-size:.78rem}
.pm-cap i{width:1.45rem;height:1.45rem;border-radius:50%;background:linear-gradient(135deg,#E3B26E,var(--accent-on-dark))}
.pm-cap span{margin-left:auto;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pm-graella{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;border-radius:.45rem;overflow:hidden}
.pm-graella li{aspect-ratio:1;overflow:hidden}
.pm-graella img{display:block;width:100%;height:100%;object-fit:cover}
.pm-peu{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;font-size:.72rem;color:var(--ink-soft)}
.pm-peu svg{flex:none;width:4.5rem;height:1.4rem;overflow:visible}
.pm-peu path{fill:none;stroke:var(--accent-on-dark);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}

/* 55. «La nostra feina» com el camí del client (feina.etapes): et troben → et coneixen → et reserven → tornen.
   Quatre targetes unides per una línia; cada una amb una il·lustració petita feta amb codi, el servei i el preu o la demo. */
.amb-etapes .fj-cap{max-width:46rem}
.fj{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.4vw,1.25rem)}
.fj::before{content:"";position:absolute;left:2rem;right:2rem;top:1.05rem;height:1px;background:linear-gradient(90deg,var(--accent-on-dark),color-mix(in srgb,var(--accent-on-dark) 30%,transparent) 70%,transparent);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.fj-etapa{position:relative;padding-top:2.9rem}
.fj-etapa>a{display:flex;flex-direction:column;height:100%;padding:1.1rem 1.1rem 1rem;border-radius:1.2rem;color:var(--on-dark);text-decoration:none;
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent-on-dark) 9%,#10262B),#0E2126 65%);border:1px solid color-mix(in srgb,var(--accent-on-dark) 16%,transparent);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .45s}
.fj-etapa>a:hover,.fj-etapa>a:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent-on-dark) 55%,transparent);box-shadow:0 40px 70px -40px rgba(0,0,0,.95)}
.fj-num{position:absolute;left:1.1rem;top:0;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--dark);border:1px solid var(--accent-on-dark);color:var(--accent-on-dark);font:700 .72rem/1 var(--font-display);box-shadow:0 0 0 5px var(--dark)}
.fj-vis{position:relative;display:grid;align-content:center;gap:.4rem;height:8.25rem;margin-bottom:1rem;padding:.75rem;border-radius:.85rem;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.fj-fase{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-on-dark)}
.fj-titol{margin:.3rem 0 .45rem;font:var(--display-weight) 1.25rem/1.15 var(--font-display);letter-spacing:var(--display-tracking)}
.fj-text{flex:1;font-size:.86rem;line-height:1.5;color:var(--on-dark-soft)}
.fj-peu{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.08);font-size:.74rem}
.fj-servei{display:inline-flex;align-items:center;gap:.35rem;color:var(--on-dark-soft)}
.fj-servei svg{width:.95rem;height:.95rem;color:var(--accent-on-dark)}
.fj-preu{font-weight:700;color:var(--on-dark);white-space:nowrap;transition:color .25s}
.fj-etapa>a:hover .fj-preu{color:var(--accent-on-dark)}
.fj-nota{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:clamp(1.25rem,3vh,2rem) 0 0;font-size:.84rem;color:var(--on-dark-soft)}
.fj-nota svg{width:1rem;height:1rem;color:var(--accent-on-dark)}
/* il·lustracions de cada etapa */
.fjv-cerca{display:flex;align-items:center;gap:.4rem;padding:.38rem .6rem;border-radius:99px;background:#fff;color:#202124;font:400 .7rem/1 Arial,system-ui,sans-serif;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.fjv-cerca svg{width:.75rem;height:.75rem;color:#9aa0a6;rotate:-45deg}
.fjv-res{display:grid;gap:.2rem;padding:.32rem .5rem;border-radius:.5rem}
.fjv-res i{display:block;height:.32rem;width:88%;border-radius:99px;background:rgba(255,255,255,.12)}
.fjv-res i.curt{width:55%}
.fjv-tu{position:relative;padding-left:2rem;background:color-mix(in srgb,var(--accent-on-dark) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent-on-dark) 45%,transparent)}
.fjv-tu em{position:absolute;left:.45rem;top:50%;translate:0 -50%;font:700 .62rem/1 var(--font-display);font-style:normal;color:var(--dark);background:var(--accent-on-dark);padding:.2rem .25rem;border-radius:.3rem}
.fjv-tu b{font-size:.74rem;color:#9ec5ff}
.fjv-tu small{font-size:.6rem;color:var(--on-dark-soft)}
.fjv-graella{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;height:100%;margin:-.75rem;border-radius:.85rem;overflow:hidden}
.fj-xarxes .fj-vis{padding:.75rem}
.fjv-graella img{display:block;width:100%;height:100%;object-fit:cover}
.fjv-xip{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;gap:.35rem;align-items:center;padding:.35rem .6rem;border-radius:99px;background:rgba(247,245,239,.96);color:#0D1F24;font:600 .66rem/1 var(--font-body)}
.fjv-xip i{font-style:normal;color:#E5484D}
.fjv-dia{display:flex;align-items:baseline;justify-content:space-between;padding:.5rem .65rem;border-radius:.6rem;background:rgba(255,255,255,.06)}
.fjv-dia small{font-size:.66rem;color:var(--on-dark-soft)}
.fjv-dia b{font:700 1.1rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.fjv-estat{display:inline-flex;align-items:center;gap:.35rem;justify-self:start;padding:.35rem .6rem;border-radius:99px;background:color-mix(in srgb,var(--accent-on-dark) 22%,transparent);font-size:.68rem;font-weight:600}
.fjv-estat svg{width:.8rem;height:.8rem;color:var(--accent-on-dark)}
.fjv-senyal{justify-self:start;font-size:.64rem;color:#E3B26E}
.fjv-avis{display:flex;align-items:center;gap:.5rem;padding:.42rem .55rem;border-radius:.6rem;background:rgba(247,245,239,.95);color:#0D1F24}
.fjv-avis i{display:grid;place-items:center;flex:none;width:1.4rem;height:1.4rem;border-radius:.4rem;background:var(--accent-on-dark)}
.fjv-avis i svg{width:.8rem;height:.8rem;color:var(--dark)}
.fjv-avis b{display:block;font-size:.68rem}
.fjv-avis small{display:block;font-size:.6rem;color:#4d5a5e}
/* entrada: la línia es dibuixa i les targetes pugen una darrere l'altra */
.fj.anima::before{transform:scaleX(0)}
.fj.anima .fj-etapa{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.fj.anima.vist::before{transform:none}
.fj.anima.vist .fj-etapa{opacity:1;transform:none}
.fj.anima.vist .fj-etapa:nth-child(2){transition-delay:.12s}.fj.anima.vist .fj-etapa:nth-child(3){transition-delay:.24s}.fj.anima.vist .fj-etapa:nth-child(4){transition-delay:.36s}
@media (max-width:1023px){.fj{grid-template-columns:repeat(2,minmax(0,1fr))}.fj::before{display:none}}
@media (max-width:600px){.fj{grid-template-columns:1fr}.fj-vis{height:7.5rem}}
.fj-google .fj-vis{gap:.45rem}
.pla-bloc b{white-space:nowrap}

/* 56. Portada amb dos projectes (web animada + software): el software ocupa tota la columna, amb l'agenda del dia i el WhatsApp que es respon sol */
.hb:not(:has(.hb-xarxes)) .hb-soft{grid-row:1/3}
.hbs-agenda{display:grid;gap:.3rem;margin-bottom:.55rem;padding:.6rem;border-radius:.75rem;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.hbs-dia{margin-bottom:.15rem;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
.hbs-franja{display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:center;column-gap:.4rem;min-height:2.1rem;padding:.3rem .5rem;border-radius:.5rem;border-left:3px solid var(--accent-on-dark);background:color-mix(in srgb,var(--accent-on-dark) 11%,transparent);font-size:.7rem}
.hbs-franja i{grid-row:1/3;font-style:normal;font-variant-numeric:tabular-nums;color:var(--on-dark-soft)}
.hbs-franja b{font-size:.74rem}
.hbs-franja small{font-size:.62rem;color:var(--on-dark-soft)}
.hbs-franja em{display:block;height:1.2rem;border:1px dashed rgba(255,255,255,.16);border-radius:.4rem}
.hbs-franja:has(em){border-left-color:transparent;background:none}
.hbs-franja.nova{border-left-color:#E3B26E;background:color-mix(in srgb,#E3B26E 15%,transparent)}
.hbs-xat{display:grid;gap:.35rem}
.hbs-xat>span{max-width:88%;padding:.42rem .65rem;font-size:.7rem;line-height:1.3}
.hb.viu .hbs-franja.nova{animation:hb-c 7s cubic-bezier(.2,.8,.2,1) infinite}
@media (max-width:860px){.hb:not(:has(.hb-xarxes)) .hb-soft{grid-row:auto;grid-column:1/-1;height:auto}}
@media (min-width:861px) and (max-height:820px){.hbs-franja{min-height:1.8rem;padding-block:.2rem}.hbs-agenda{margin-bottom:.4rem}}
.hb-soft .hbs{align-content:start}
@media (min-width:861px) and (max-height:820px){.hb-soft .hbs-msg{display:none}}
.hbs>.hbs-agenda{max-width:none;padding:.6rem}
.hbs>.hbs-xat{max-width:none;padding:0}
@media (min-width:861px) and (max-height:820px){.hbs-dia{display:none}.hbs>.hbs-agenda{padding:.45rem}}
/* 57. Portada sense franja de xifres: els projectes (web animada i software) ocupen l'espai i es veuen més grans */
.hero:not(:has(.hero-proves)) .hb{height:clamp(17rem,52vh,31rem)}
@media (min-width:861px) and (max-height:1000px){.hero:not(:has(.hero-proves)) .hb{height:clamp(15rem,50vh,29rem)}}
@media (max-width:860px){.hero:not(:has(.hero-proves)) .hb{height:auto}}

/* 58. Oferta de llançament a Preus (preus.oferta): places limitades, preu de fundador al costat del preu normal */
.oferta{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:1.25rem clamp(1.5rem,3vw,2.5rem);align-items:center;margin:0 0 clamp(1.25rem,3vh,2rem);padding:clamp(1.1rem,2.2vw,1.6rem);border-radius:calc(var(--radius) * 1.3);
  background:linear-gradient(135deg,color-mix(in srgb,#CFA46A 16%,var(--surface)),var(--surface) 60%);border:1px solid color-mix(in srgb,#CFA46A 45%,transparent);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.of-etiq{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:99px;background:#CFA46A;color:#1c1612;font:700 .68rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.of-etiq svg{width:.8rem;height:.8rem}
.of-cap h3{margin:.65rem 0 .4rem;font:var(--display-weight) calc(clamp(1.4rem,2.2vw,1.9rem) * var(--display-scale))/1.1 var(--font-display);letter-spacing:var(--display-tracking)}
.of-cap h3 em{font-style:normal;color:#CFA46A}
.of-cap p{margin:0;font-size:.86rem;color:var(--ink-soft)}
.of-plans{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.of-plans li{display:grid;gap:.25rem;padding:.8rem .9rem;border-radius:1rem;background:color-mix(in srgb,var(--on-dark) 4%,transparent);border:1px solid var(--line)}
.of-plans li.destacat{border-color:color-mix(in srgb,#CFA46A 60%,transparent);background:color-mix(in srgb,#CFA46A 10%,transparent)}
.of-nom{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.of-preu{font:700 clamp(1.7rem,2.6vw,2.2rem)/1 var(--font-display);letter-spacing:-.04em;color:var(--ink)}
.of-plans li.destacat .of-preu{color:#CFA46A}
.of-normal{font-size:.74rem;color:var(--ink-soft)}
.of-normal s{text-decoration-thickness:1.5px}
.of-peu{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding-top:.9rem;border-top:1px solid var(--line)}
.of-peu p{margin:0;max-width:56ch;font-size:.8rem;color:var(--ink-soft)}
.of-peu p b{color:var(--ink)}
.oferta .btn-1{background:#CFA46A;color:#1c1612}
@media (max-width:860px){.oferta{grid-template-columns:1fr}.of-plans{grid-template-columns:1fr}.of-plans li{grid-template-columns:1fr auto;align-items:baseline}.of-normal{grid-column:1/-1}}
/* oferta sota les targetes: el preu normal ratllat, gran, al costat del preu de fundador */
.oferta{margin:clamp(1.25rem,3vh,2rem) 0 0}
.of-preus{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap}
.of-abans{display:grid;gap:.15rem}
.of-abans small{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.of-abans s{font:600 clamp(1.3rem,1.9vw,1.6rem)/1 var(--font-display);letter-spacing:-.03em;color:color-mix(in srgb,var(--ink) 55%,transparent);text-decoration-thickness:2.5px;text-decoration-color:#E5484D}
@media (max-width:860px){.of-plans li{grid-template-columns:1fr}.of-preus{justify-content:flex-start}}