/* Lletres: servides per nosaltres (assets/fonts/), cap visitant envia la IP a un tercer. */
/* 04/10/2026 · La Schibsted és una lletra VARIABLE: els cinc fitxers de cada alfabet (400, 500, 600, 700 i 800) eren el
   mateix fitxer cinc vegades (mateixa empremta), i el navegador els baixava tots: 187 KB de més a cada visita. Ara una
   sola declaració per alfabet, amb tot el ventall de pesos. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/schibsted-0.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/schibsted-1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/satoshi-500.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/satoshi-700.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:900;font-display:swap;src:url('../assets/fonts/satoshi-900.woff2') format('woff2');}


/* ==========================================================================
   ALETHEIA — sistema clar: blanc + blau cel + tinta marina
   Hero 3D (seqüència al cel): part de l'Oriol — no tocar la mecànica.
   ========================================================================== */
:root{
  --paper:#F6FAFD; --white:#ffffff;
  --cel:#7CC4EC; --cel2:#4A90C8; --cel2-text:#3477AD; --cel-pale:#EAF4FB; --cel-mist:#DDEEF9;
  --blau:#0E68C4; --blau2:#0B4E94; --blau-nit:#0B1F3A;
  --tinta:#0B1F3A; --tinta2:#3D5876; --gris:#5A7591;
  /* 27/09 · contrast AA (4,5:1 fins i tot sobre --paper): --gris era #7A93AC (3,2:1); --cel2-text és el --cel2
     per a lletra (el --cel2, 3,4:1, es queda per a línies, vores i degradats, que no han de complir-lo) */
  --linia:rgba(11,31,58,.10); --linia-forta:rgba(11,31,58,.17);
  --radi:18px; --ease:cubic-bezier(.22,1,.36,1);
  --font:'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --syne:'Satoshi', 'Schibsted Grotesk', system-ui, sans-serif;   /* nom heretat: ara apunta a Satoshi */
  --maxw:1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:auto; -webkit-text-size-adjust:100%;}
body{margin:0; font-family:var(--font); background:var(--paper); color:var(--tinta);
  line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
h1,h2,h3,h4{line-height:1.04; margin:0; text-wrap:balance; letter-spacing:-.02em; font-weight:800;}
/* Els accents dels títols es marquen amb COLOR, no canviant de tipografia. Abans cada títol
   acabava amb una paraula en serif cursiva (14 a tota la pàgina): massa informal i feia que
   la web semblés escrita amb dues veus. Una sola família, jerarquia per pes i color. */
h1 em, h2 em, h3 em, .big em{font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit;
  font-size:1em; color:var(--blau);}
p{margin:0;}
a{color:inherit; text-decoration:none; transition:color .2s, opacity .2s;}
img,video,canvas{max-width:100%; display:block;}
::selection{background:var(--cel); color:var(--blau-nit);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(74,144,200,.35); border-radius:99px;}
@media (hover: hover){ ::-webkit-scrollbar-thumb:hover{background:rgba(74,144,200,.6);} }

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,44px);}
section{position:relative;}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--blau); margin:0 0 22px;}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--cel2); opacity:.8;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:99px; font-weight:700; font-size:1rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--blau); color:#fff; box-shadow:0 10px 28px -10px rgba(14,104,196,.65);}
@media (hover: hover){ .btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 38px -12px rgba(14,104,196,.75); background:var(--blau2);} }
.btn-ghost{background:rgba(255,255,255,.75); border-color:var(--linia-forta); color:var(--tinta); backdrop-filter:blur(6px);}
@media (hover: hover){ .btn-ghost:hover{transform:translateY(-3px); background:#fff; border-color:var(--cel2);} }
.btn svg{width:17px; height:17px;}

/* noanim */
.noanim *, .noanim *::before, .noanim *::after{animation:none !important; transition:none !important;}
.noanim .reveal, .noanim .step{opacity:1 !important; transform:none !important; filter:none !important;}
.noanim .stmt .w{opacity:1 !important; transform:none !important; filter:none !important;}
.noanim #preloader{display:none !important;}
.ja-hi-eres #preloader{display:none !important;}   /* 08/10: només en entrar a la web; si ja hi eres, res (js/primer.js) */

/* barra de progrés de lectura */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:950; pointer-events:none;
  background:linear-gradient(90deg, var(--cel), var(--blau)); transform:scaleX(0); transform-origin:left;
  box-shadow:0 0 10px rgba(14,104,196,.35);}

/* preloader */
/* 31/07 · la xarxa de seguretat CSS (preSafety) corre al compositor i NO es pot
   endarrerir encara que el fil principal vagi ofegat (els setTimeout sí). A la web
   publicada, amb la riuada de fotogrames, el timer de sortida arribava tard i aquesta
   animació fonia el preloader a poc a poc (0,8 s): el logo es quedava surant sobre el
   hero. Ara arrenca a 3 s (just després del sostre de 2,5 s del JS, que és qui mana
   normalment) i fon DE COP (0,35 s): com a molt es veu un parpelleig. */
#preloader{position:fixed; inset:0; z-index:9999; background:var(--white);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;
  transition:opacity .32s var(--ease), visibility .32s var(--ease); animation:preSafety .35s ease 4.4s forwards;}   /* 08/10: el sostre del JS ara és 3,8 s */
/* 31/07 · SORTIDA EN DOS TEMPS: primer s'esvaeix el LOGO (encara sobre blanc) i només
   després la cortina descobreix el hero. Abans la cortina marxava alhora que el logo i,
   segons el moment, el logo quedava un instant surant sobre el vídeo. Ara, per ordre. */
#preloader.out{opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .55s var(--ease) .28s, visibility .55s var(--ease) .28s;}   /* 08/10: més pausat (era .3s/.18s) */
/* L'OMBRA DEL LOGO SOBRE ELS NÚVOLS (29/07).
   En marxar, el logo trigava 0,8 s a esvair-se i portava una ombra blava
   (drop-shadow) que quedava surant damunt del hero mentre s'anava. Ara la
   cortina se'n va en 0,32 s i el logo, més de pressa encara i sense ombra:
   quan comences a veure el cel, ja no hi ha res a sobre.
   Cal !important perquè el logo entra amb una animació (preIn ... forwards) que
   li deixa l'opacitat fixada a 1, i una regla normal no la pot vèncer. */
#preloader.out .pre-mark, #preloader.out .pre-name{
  opacity:0 !important; filter:none !important;
  transition:opacity .3s linear, filter .3s linear;}
@keyframes preSafety{to{opacity:0; visibility:hidden; pointer-events:none;}}
.pre-mark{width:64px; height:64px; opacity:0; animation:preIn 1.1s var(--ease) .15s forwards; filter:drop-shadow(0 8px 26px rgba(74,144,200,.45));}
.pre-name{font-size:1.1rem; font-weight:700; letter-spacing:.42em; text-transform:uppercase; color:var(--tinta);
  opacity:0; animation:preNom 1.2s var(--ease) .55s forwards; padding-left:.42em;}
@keyframes preIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
/* 08/10 · el nom entra una mica més tard i les lletres s'apropen (de .62em a .42em), sense pressa */
@keyframes preNom{from{opacity:0; transform:translateY(8px); letter-spacing:.62em;} to{opacity:1; transform:none; letter-spacing:.42em;}}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:900;}
.nav-inner{max-width:var(--maxw); margin:14px auto 0; padding:11px 12px 11px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:99px; border:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  /* 05/10 · el marge petit dels costats trepitjava el «auto» i, de 1297 px en amunt, la barra quedava enganxada a
     l'esquerra (a 1920, a 28 px d'un costat i a 652 de l'altre). Ara: el marge petit o el que la centra, el més gran. */
  margin-left:max(clamp(12px,4vw,28px), (100% - var(--maxw)) / 2); margin-right:max(clamp(12px,4vw,28px), (100% - var(--maxw)) / 2);}
.nav.scrolled .nav-inner{background:rgba(255,255,255,.78); backdrop-filter:blur(16px) saturate(1.2);
  border-color:var(--linia); box-shadow:0 14px 40px -20px rgba(11,31,58,.35);}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.02em; font-size:1.06rem; color:#0a2a48;}
.brand img{width:30px; height:30px; filter:drop-shadow(0 2px 10px rgba(124,196,236,.5));}
.brand b{text-transform:uppercase; letter-spacing:.06em;}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{padding:8px 15px; border-radius:99px; font-size:.94rem; font-weight:600; color:#1c3d5c; transition:color .3s, background .3s;}
@media (hover: hover){ .nav-links a:hover{color:var(--blau); background:rgba(124,196,236,.16);} }
.nav-links a.active{color:var(--blau); background:rgba(124,196,236,.20);}
.nav-cta{display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:99px;
  background:var(--blau); color:#fff !important; font-weight:700; font-size:.94rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; box-shadow:0 8px 22px -8px rgba(14,104,196,.6);}
@media (hover: hover){ .nav-cta:hover{transform:translateY(-2px); background:var(--blau2);} }
.burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center;}
.burger span{width:22px; height:2px; background:#0a2a48; border-radius:2px; transition:transform .3s var(--ease), opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:880px){
  .nav-links{position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:76px 32px 40px;
    transform:translateX(100%); transition:transform .45s var(--ease); border-left:1px solid var(--linia);
    box-shadow:-18px 0 50px -20px rgba(11,31,58,.28);}
  .nav-links.open{transform:none;}
  .nav-links a{font-size:1.3rem; padding:12px 0; color:var(--tinta) !important;}
  .nav-links a.active{background:transparent; color:var(--blau) !important;}
  @media (hover: hover){ .nav-links a:hover{background:transparent; color:var(--blau) !important;} }
  .nav-links .nav-cta{margin-top:18px; font-size:1.05rem; padding:14px 28px; color:#fff !important;}
  .burger{display:flex;}
  /* UNA sola creu. Les tres ratlles també es convertien en X en obrir-se, i amb la creu
     del panell se'n veien DUES. Mentre el menú és obert, les ratlles desapareixen. */
  .burger.open{opacity:0; pointer-events:none;}
  /* la creu, a dalt a la dreta del panell i SEMPRE en tinta fosca: es veu tant si
     el menú s'obre sobre el cel com sobre la part blanca de la pàgina */
  .nav-close{position:absolute; top:16px; right:16px; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid var(--linia); border-radius:50%; background:#fff; color:var(--tinta);
    transition:background .2s var(--ease), transform .2s var(--ease);}
  .nav-close svg{width:20px; height:20px;}
  @media (hover: hover){ .nav-close:hover{background:var(--cel-pale); transform:rotate(90deg);} }
  .nav-close:focus-visible{outline:3px solid var(--blau); outline-offset:2px;}
}
/* fora del mòbil, la creu no pinta res */
@media(min-width:881px){ .nav-close{display:none;} }

/* ============ HERO — cinema fosc estil Véla/Cronos (núvols raspats per scroll) ============ */
/* El fons de darrere és blau de cel, no negre: si mai queda un pam descobert
   (canvi de mida, rebot de l'scroll), el que s'hi veu és cel i no un forat fosc. */
.hero{position:relative; height:380vh; background:#8fc7d6;}   /* l'alçada REAL la posa el bloc "EL HERO, MÉS FÀCIL DE LLEGIR" de més avall */
/* 25/09 · el hero ja fa una sola pantalla (el vídeo no depèn de l'scroll): el cel n'ocupa tota l'alçada */
.hero-sticky{position:sticky; top:0; height:100%; overflow:hidden; background:#8fc7d6 center/cover no-repeat; background-image:url('../assets/hero-flow-poster.webp');}
.hero-scene{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  background-size:cover; background-position:50% 50%;}
.hero-video{display:none;}   /* l'encén el JS (en mode estàtic es queda el pòster de fons) */
/* capa de núvols protagonistes que travessen el cel fix (arc + gir) */
.cloud-layer{position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none;}
.cl{position:absolute; left:0; top:0; width:46vw; height:auto; will-change:transform,opacity;
  filter:drop-shadow(0 14px 40px rgba(20,40,70,.14));}
/* gradació cinematogràfica: fosc a dalt (nav) i transició a la web clara a baix + vinyeta */
.hero-tint{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(78% 46% at 50% 45%, rgba(6,26,54,.34), rgba(6,26,54,0) 72%),
    linear-gradient(180deg, rgba(10,22,38,.24) 0%, rgba(10,22,38,.02) 18%, transparent 62%, rgba(150,190,220,.24) 88%, var(--paper) 100%);}
.hero-ui{position:absolute; inset:0; z-index:4; pointer-events:none;}
.beat{position:absolute; opacity:0; will-change:opacity,transform;}
@media (min-width:821px){ .beat-hero{opacity:1;} }   /* 27/09 · ALETHEIA ja pintat sota la pantalla de càrrega: Google el compta (LCP) */
/* els botons del final NOMÉS funcionen quan es veuen */
.hero:not(.static) .beat:not(.on) .hero-cta{pointer-events:none;}
.mark .ml{display:inline-block; will-change:transform,opacity,filter;}
/* ocells de lluny */
.sky-bird{position:absolute; z-index:1; color:#0d1826; opacity:.5; pointer-events:none;}
.sky-bird path{fill:none; stroke:currentColor; stroke-linecap:round;}
.sky-bird.b1{top:22%; width:40px; animation:birdFly1 58s linear infinite;}
.sky-bird.b2{top:33%; width:26px; opacity:.4; animation:birdFly2 82s linear infinite 12s;}
@keyframes birdFly1{0%{transform:translate(-10vw,0)}50%{transform:translate(52vw,-5vh)}100%{transform:translate(114vw,3vh)}}
@keyframes birdFly2{0%{transform:translate(-12vw,0) scaleX(-1)}100%{transform:translate(116vw,-7vh) scaleX(-1)}}
@media(prefers-reduced-motion:reduce){.sky-bird{display:none;}}
.noanim .sky-bird{display:none;}
/* la caixa que amaga el titular mentre puja tallava la cua de la g, la p i la q
   (Satoshi les té més llargues que la lletra d'abans): més marge abans de retallar.
   31/07 · EL MARGE ANAVA AMB LA LLETRA EQUIVOCADA: .2em de la caixa (16 px) són
   3,2 px, i la cua de la g d'un titular de 33 px en necessita ~7. El marge va ara
   AL TITULAR (el fill), que escala amb la seva pròpia mida — la g de «catàleg»
   sortia tallada al mòbil justament per això. */
.mask{overflow-y:clip; display:block; padding-bottom:.2em;}
.bpanel .mask > .big{padding-bottom:.24em;}   /* la cua, amb la mida del titular, no la de la caixa */
/* nom GEGANT blanc, nítid */
.beat-hero{inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 4vw;}
.mark{font-family:var(--syne); font-weight:800; font-size:clamp(2.7rem,11.8vw,12rem); line-height:.86; letter-spacing:-.02em; margin:0;
  white-space:nowrap; color:#fff;
  /* ombra present però no dura: molt difusa i fluixa. Fora la capa d'1-2 px, que era la
     que marcava la vora i li donava aire de relleu enganxat. */
  /* Ombra SENSE desplaçament vertical: amb 10px avall, l'ombra de totes les lletres se
     sumava i dibuixava una franja recta sota la línia base. Ara és un halo centrat, molt
     més obert i fluix: separa el nom del cel sense marcar cap vora. */
  /* El halo NO va aquí: la caixa .mask retalla per sota i el tallava en sec (ratlla grisa
     recta just on s'acaba el text). Ara el pinta .beat-hero .mask amb drop-shadow. */
  text-shadow:none;}
/* El drop-shadow s'aplica a la caixa JA retallada, o sigui que el halo es dibuixa fora
   del retall i es difumina fins a esvair-se del tot: cap vora, cap línia. */
.beat-hero .mask{filter:drop-shadow(0 0 42px rgba(4,26,54,.30)) drop-shadow(0 0 110px rgba(4,20,44,.20));}
@media(max-width:640px){ .mark{font-size:11vw; letter-spacing:-.045em;} }   /* que "ALETHEIA" càpiga sencer en pantalla estreta */
.mark-tag{font-family:var(--syne); font-weight:600; font-size:clamp(.95rem,2.1vw,1.5rem); margin-top:1.4rem; color:#eaf1f8;
  letter-spacing:.02em; text-shadow:0 1px 10px rgba(0,0,0,.5);}
/* punts amb text — panells de vidre fosc */
/* prou ample perquè el títol del panell no surti mai de la caixa (el padding de 6vw es menjava mig espai) */
/* l'amplada va en vw, NO en ch: els 'ch' es mesuren amb la lletra petita del contenidor
   i deixaven el titular gegant escanyat en una columna de 258px */
/* ancorats per DALT, no centrats: centrats, un títol d'una línia i un de dues feien saltar
   tot el bloc amunt i avall a cada punt. Així l'etiqueta surt sempre a la mateixa alçada. */
.beat-data{top:0; bottom:0; display:flex; flex-direction:column; justify-content:flex-start;
  max-width:min(50vw,700px); padding:40vh 4.5vw 0;}
/* El bloc salta esquerra/dreta (això dona el ritme del vol), però el TEXT sempre comença
   a l'esquerra: alineat a la dreta, cada línia arrencava en un lloc diferent i l'ull s'hi perdia. */
.beat-data.left{left:0; align-items:flex-start;}
.beat-data.right{right:0; align-items:flex-end;}
.beat-data.left .bpanel, .beat-data.right .bpanel{text-align:left;}
/* RES DE CAIXA DE VIDRE: el text viu NU sobre el cel. La caixa fosca era el que feia
   que semblés plantilla; sense ella el protagonista torna a ser el vol pels núvols. */
/* columna d'amplada FIXA: amb width:fit-content cada punt tenia una amplada diferent
   i el titular i el paràgraf no compartien la mateixa vora esquerra. */
.bpanel{width:min(100%,34rem); max-width:100%; padding:0; border:0; border-radius:0; background:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;}
.bpanel .big{font-family:var(--syne); font-weight:800; font-size:clamp(2rem,5vw,4.4rem); line-height:.98; letter-spacing:-.03em; color:var(--tinta);
  white-space:normal; overflow-wrap:normal; hyphens:none; text-wrap:balance;   /* MAI partir un mot pel mig */
  /* halo clar en comptes de caixa: llegible tant sobre núvol blanc com sobre cel obert */
  text-shadow:0 2px 30px rgba(255,255,255,.62), 0 1px 6px rgba(255,255,255,.5);}
.bpanel .k{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blau2); margin:0 0 .9rem; font-weight:700;
  text-shadow:0 1px 14px rgba(255,255,255,.75);}
.bpanel p{color:rgba(11,31,58,.88); font-weight:500; margin-top:1.1rem; font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.55; max-width:34ch;
  text-wrap:pretty;   /* evita que l'última línia quedi amb una paraula sola ("dia.") */
  text-shadow:0 1px 14px rgba(255,255,255,.7);}
/* final */
.beat-end{left:0; right:0; bottom:16vh; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 5vw;}
.beat-end h2{font-family:var(--syne); font-weight:700; font-size:clamp(2rem,5.6vw,4.4rem); letter-spacing:-.02em; line-height:1.04; color:#fff;
  text-shadow:0 1px 3px rgba(9,28,52,.42), 0 6px 22px rgba(9,28,52,.5);}
.beat-end h2 em{font-style:normal; font-weight:600; color:var(--cel);}
.beat-end .hero-cta{margin-top:1.8rem;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; pointer-events:auto;}
/* el cel del hero acaba BLANC: el botó ha de ser sòlid i de tinta fosca, o desapareix */
/* sense backdrop-filter: sobre un vídeo, el desenfocament s'hauria de recalcular a cada fotograma */
.hero .btn-ghost{background:rgba(255,255,255,.92); border-color:var(--linia-forta); color:var(--tinta); backdrop-filter:none; -webkit-backdrop-filter:none;}
@media (hover: hover){ .hero .btn-ghost:hover{background:#fff; border-color:var(--cel2);} }
/* barra de progrés + punts (clars sobre fosc) */
.hero-bar{position:absolute; left:6vw; right:6vw; bottom:1.6rem; height:2px; background:rgba(9,28,52,.16); z-index:5; border-radius:2px;}
.hero-bar>i{display:block; height:100%; width:100%; background:#0b2440; transform:scaleX(0); transform-origin:left; border-radius:2px;}
.hero-dots{position:absolute; inset:0;}
.hero-dot{position:absolute; top:50%; width:22px; height:22px; transform:translate(-50%,-50%); padding:0; border:0; background:none; cursor:pointer;}
.hero-dot:focus-visible, .hero-pausa:focus-visible{outline:3px solid var(--blau); outline-offset:2px; border-radius:50%;}
/* pausa / reprèn (WCAG 2.2.2: tot el que es mou sol més de 5 s s'ha de poder aturar) */
.hero-pausa{position:absolute; right:6vw; bottom:calc(1.6rem + 20px); z-index:6; width:40px; height:40px; display:grid; place-items:center;
  padding:0; border-radius:50%; border:1px solid rgba(11,31,58,.28); background:rgba(255,255,255,.7); color:var(--tinta); cursor:pointer;
  transition:background .3s var(--ease);}
@media (hover: hover){ .hero-pausa:hover{background:#fff;} }
.hero-pausa svg{width:16px; height:16px; fill:currentColor;}
.hero-pausa .i-play, .hero.pausat .hero-pausa .i-pausa{display:none;}
.hero.pausat .hero-pausa .i-play{display:inline;}
.hero.static .hero-pausa{display:none;}
.hero-dot::before{content:""; position:absolute; inset:50%; width:8px; height:8px; transform:translate(-50%,-50%); border-radius:50%;
  background:rgba(9,28,52,.26); border:1px solid rgba(9,28,52,.45); transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);}
.hero-dot.on::before{background:#0b2440; transform:translate(-50%,-50%) scale(1.6); box-shadow:0 0 0 3px rgba(255,255,255,.5);}
/* fallback estàtic (mòbil / noanim) */
.hero.static{height:auto;}   /* sense scroll fixat, el hero no ha de mesurar 520vh (deixava 3000px buits en mòbil) */
.hero.static .hero-sticky{position:relative; height:auto; min-height:auto; padding:0;}
.hero.static .hero-scene{position:absolute; inset:0;}
.hero.static .hero-ui{position:relative; inset:auto; display:grid; gap:2.2rem; padding:110px 8vw 80px;}
.hero.static .beat{position:relative; opacity:1 !important; transform:none !important; inset:auto; max-width:none;}
/* en mòbil els punts van un sota l'altre: aquí NO hi va l'ancoratge de 32vh del desktop */
.hero.static .beat-data{align-items:flex-start; text-align:left; padding:0;}
.hero.static .bpanel{width:100%;}
.hero.static .beat-hero, .hero.static .beat-end{align-items:center; text-align:center;}
.hero.static .hero-bar, .hero.static .scroll-hint{display:none;}
.hero.static .beat-data::before{content:none;}   /* apilats, el vel d'un bloc tapava el text del de dalt */
/* nav minimalista i transparent MENTRE ets al hero fosc (com Véla) */
body.over-hero .nav-inner{background:transparent !important; box-shadow:none !important; border-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
body.over-hero .brand{color:#fff;}
body.over-hero .brand img{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));}
body.over-hero .nav-links a{color:rgba(255,255,255,.82);}
body.over-hero .nav-links a.active{color:#fff; background:rgba(255,255,255,.12);}
@media (hover: hover){ body.over-hero .nav-links a:hover{color:#fff; background:rgba(255,255,255,.12);} }
body.over-hero .burger span{background:#fff;}

/* ── MODE STORY del mòbil (31/07): el vídeo mana, cada toc avança el text i el hero
   ocupa UNA pantalla — baixar continua la pàgina amb normalitat. El JS posa .tap. ── */
/* 94svh i no 100: que la secció següent tregui el nas per sota — el senyal
   universal de "hi ha més a baix", sense necessitar cap botó ni cap text */
.hero.tap{height:94svh;}
.hero.tap .hero-sticky{height:100%;}
.hero.tap .scroll-hint{display:none;}
.hero.tap .tap-hint{display:flex;}
.tap-hint{position:absolute; left:50%; bottom:calc(58px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  z-index:6; display:none; flex-direction:column; align-items:center; gap:8px; color:#0b2440;
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;}
.tap-hint span{font-size:.72rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; padding-left:.3em;}
.tap-hint i{width:9px; height:9px; border-radius:50%; background:#0b2440; animation:tapPuls 1.6s var(--ease) infinite;}
@keyframes tapPuls{0%,100%{transform:scale(.65); opacity:.4} 50%{transform:scale(1); opacity:1}}
@media(prefers-reduced-motion:reduce){.tap-hint i{animation:none;}}
/* barra estil stories: un segment blanc per text, a dalt (sota el menú) */
.story-segs{position:absolute; top:78px; left:5vw; right:5vw; z-index:6; display:none; gap:6px; pointer-events:none;}
.hero.tap .story-segs{display:flex;}
.story-segs i{flex:1; height:3px; border-radius:99px; background:rgba(255,255,255,.35);
  box-shadow:0 1px 5px rgba(9,28,52,.28); transition:background .35s var(--ease);}
.story-segs i.on{background:#fff;}
.hero.tap .hero-bar{display:none;}   /* la línia de baix cedeix el lloc als segments */
.hero.tap .hero-pausa{width:44px; height:44px; right:14px; bottom:calc(46px + env(safe-area-inset-bottom,0px));}
/* fletxes de direcció: ‹ enrere (només quan n'hi ha) · endavant › (calla a l'últim) */
.tap-nav{display:none;}
.hero.tap .tap-nav{display:block;}
.tap-nav i{position:absolute; top:50%; transform:translateY(-50%); z-index:6; font-style:normal;
  font-family:var(--syne); font-weight:600; font-size:1.7rem; line-height:1; color:#0b2440;
  text-shadow:0 1px 12px rgba(255,255,255,.75); opacity:0; transition:opacity .4s var(--ease); pointer-events:none;}
#tapEnrere{left:12px;} #tapEndavant{right:12px;}
/* els textos es queden un dit lluny de cada vora: les fletxes mai trepitgen cap lletra */
.hero.tap .beat-data{padding-left:46px; padding-right:46px; max-width:none;}
.hero.tap .beat-end{padding-left:46px; padding-right:46px;}

.scroll-hint{position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; transition:opacity .4s;
  /* fosc: a baix del hero el fons són núvols BLANCS i en blanc no es llegia */
  color:rgba(9,28,52,.8); text-shadow:0 1px 14px rgba(255,255,255,.55);}
.scroll-hint i{width:1px; height:36px; background:linear-gradient(rgba(9,28,52,.6), transparent); position:relative; overflow:hidden;}
.scroll-hint i::after{content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:#0b2440; animation:scrolldot 1.8s var(--ease) infinite;}
@keyframes scrolldot{to{top:110%;}}

/* reveals */
.reveal{opacity:0; transform:translateY(30px); filter:blur(9px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);}
.reveal.in{opacity:1; transform:none; filter:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; filter:none;}}

/* section shell */
.band{padding:clamp(90px,13vw,160px) 0; position:relative;}
/* sense linia divisoria: separava el contingut en calaixos. El ritme el fa l espai, no una ratlla */
.section-head{max-width:46ch;}
.section-head h2{font-size:clamp(2.1rem,5.2vw,3.7rem); font-weight:800; line-height:1.03;}
.section-head h2 em{color:var(--blau);}
.section-head .lede{color:var(--tinta2); font-size:clamp(1.05rem,1.5vw,1.2rem); margin-top:20px; max-width:54ch;}

/* ============ MANIFEST (paraules que s'escriuen amb l'scroll) ============ */
.manifest{background:var(--white);}
.manifest .stmt{font-size:clamp(2.3rem,6.6vw,5.2rem); font-weight:800; line-height:1.04; letter-spacing:-.03em; max-width:20ch; color:var(--tinta);}
.manifest .stmt em{color:var(--blau);}
.stmt .w{display:inline-block; opacity:.1; transform:translateY(.22em); filter:blur(6px); will-change:opacity, transform, filter;}
html.no-gsap .stmt .w{opacity:1; transform:none; filter:none;}
.manifest .greek{font-family:var(--serif); font-style:italic; color:var(--cel2-text); font-size:1.5rem;}
.manifest .foot{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; margin-top:64px; max-width:860px;}
.manifest .foot p{color:var(--tinta2); font-size:1.05rem;}
.manifest .foot b{color:var(--tinta);}


/* ============ LA FEINA — galeria horitzontal fixada ============ */
.feina{background:var(--white); overflow:clip;}
.feina-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; padding-top:clamp(80px,11vw,140px);}
.feina-pin{position:relative; height:100svh; display:flex; flex-direction:column; justify-content:center; min-height:640px;}
.feina-strip{overflow:visible;}
.feina-track{display:flex; gap:clamp(18px,2.6vw,30px); padding:0 clamp(20px,5vw,44px); width:max-content; will-change:transform;}
.pcard{width:clamp(380px,42vw,540px); flex:none;}
.frame{border-radius:16px; overflow:hidden; border:1px solid var(--linia-forta); background:var(--white);
  box-shadow:0 30px 70px -32px rgba(11,49,88,.35);}
.frame-bar{display:flex; align-items:center; gap:7px; padding:11px 15px; background:#F0F6FB; border-bottom:1px solid var(--linia);}
.frame-bar .dots{display:flex; gap:6px;}
.frame-bar .dots i{width:10px; height:10px; border-radius:50%; background:rgba(11,31,58,.14);}
.frame-bar .url{flex:1; text-align:center; font-size:.78rem; color:var(--tinta2); background:#fff; border:1px solid var(--linia); border-radius:99px; padding:5px 14px; margin:0 8px; max-width:320px; margin-inline:auto;}
.frame-body{height:clamp(340px,46vh,430px); overflow:hidden; position:relative; transition:transform .5s var(--ease);}
.frame-body img{width:100%; will-change:transform;}
@media (hover: hover){ .pcard:hover .frame-body{transform:scale(1.012);} }
.frame-body::after{content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:46%; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.14) 45%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.14) 55%, transparent);
  transform:skewX(-14deg) translateX(-260%); transition:transform 1s var(--ease);}
@media (hover: hover){ .pcard:hover .frame-body::after{transform:skewX(-14deg) translateX(420%);} }
/* preview: la captura nítida fa un pan suau al hover (transform GPU, sense jank) */
.frame-body img.pan{position:absolute; top:0; left:0; width:100%; height:auto; transform:translateY(0); will-change:transform;}
/* preview EN VIU: al hover hi muntem la demo de veritat, encongida. La captura es queda
   a sota fent de fons mentre carrega, i no hi ha cap salt en blanc. */
.frame-body .viu{position:absolute; top:0; left:0; z-index:1; border:0; background:var(--white);
  transform-origin:0 0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease);}
.frame-body .viu.on{opacity:1;}
/* imatges apaïsades (un render, no una captura de web): omplen el marc en comptes de deixar buit a sota */
.frame-body img.pan.fit{height:100%; object-fit:cover; object-position:center;}
.frame-body::before{content:"▸ Obre-la en viu"; position:absolute; top:12px; right:12px; z-index:3;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; padding:6px 13px; border-radius:99px;
  background:rgba(255,255,255,.94); color:var(--blau); box-shadow:0 6px 18px -6px rgba(11,49,88,.4);
  opacity:0; transform:translateY(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none;}
@media (hover: hover){ .pcard:hover .frame-body::before{opacity:1; transform:none;} }
.noanim .frame-body::before{content:"Obre la fitxa";}
.pcard:focus-visible{outline:3px solid var(--blau); outline-offset:4px; border-radius:18px;}
.pmeta{padding:18px 6px 0; display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.ptag{font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:5px 12px; border-radius:99px;}
.ptag.real{background:var(--blau); color:#fff;}
.ptag.demo{background:var(--cel-pale); color:var(--blau); border:1px solid rgba(74,144,200,.35);}
.pmeta h3{font-size:1.5rem; font-weight:800;}
.pmeta p{color:var(--tinta2); font-size:.98rem; max-width:40ch;}
.endcap{width:clamp(340px,36vw,460px); flex:none; display:flex; align-items:center; justify-content:center;}
.endcap a{display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; text-align:center;
  width:100%; height:clamp(340px,46vh,430px); border-radius:16px; color:#fff; font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem);
  background:linear-gradient(150deg, var(--cel2), var(--blau) 70%); box-shadow:0 30px 70px -32px rgba(14,104,196,.55);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
@media (hover: hover){ .endcap a:hover{transform:translateY(-8px); box-shadow:0 44px 90px -36px rgba(14,104,196,.7);} }
.endcap a em{font-style:normal; font-weight:600;}
.endcap a .arr{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;}
.endcap a .arr svg{width:24px; height:24px; stroke:#fff;}
.feina-ui{display:flex; align-items:center; gap:18px; margin-top:30px; padding:0 clamp(20px,5vw,44px);}
.feina-count{font-style:normal; font-weight:600; font-size:1.25rem; color:var(--blau); min-width:74px;}
.feina-prog{flex:1; max-width:340px; height:2px; background:rgba(11,31,58,.12); border-radius:99px; overflow:hidden;}
.feina-prog i{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--cel), var(--blau)); border-radius:99px;}
.feina-hint{font-size:.82rem; color:var(--gris); letter-spacing:.06em;}
/* fallback sense pin (mòbil o noanim): carril lliscant natural */
@media(max-width:880px){
  .feina-pin{height:auto; min-height:0; display:block; padding:34px 0 10px;}
  .feina-strip{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .feina-strip::-webkit-scrollbar{display:none;}
  .pcard, .endcap{scroll-snap-align:center;}
  .feina-ui{display:none;}
}
html.no-hpin .feina-pin{height:auto; min-height:0; display:block; padding:34px 0 10px;}
html.no-hpin .feina-strip{overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
html.no-hpin .feina-strip::-webkit-scrollbar{display:none;}
html.no-hpin .pcard, html.no-hpin .endcap{scroll-snap-align:center;}
html.no-hpin .feina-ui{display:none;}


/* ============ QUÈ FEM — una sola cosa, sencera ============ */
.serveis{background:var(--white);}
.serv-grid{display:grid; grid-template-columns:minmax(280px,.9fr) 1.4fr; gap:clamp(34px,6vw,90px); align-items:start;}
.serv-sticky{position:sticky; top:110px;}
.rows{display:flex; flex-direction:column; border-top:1px solid var(--linia-forta);}
.row-s{display:grid; grid-template-columns:64px 1fr; gap:18px; padding:30px 14px 30px 4px; border-bottom:1px solid var(--linia);
  position:relative; transition:background .4s var(--ease);}
@media (hover: hover){ .row-s:hover{background:var(--cel-pale);} }
.row-s .num{font-style:normal; font-weight:600; font-size:1.35rem; color:var(--cel2-text); padding-top:2px;}
.row-s h3{font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:800; margin-bottom:8px;}
.row-s p{color:var(--tinta2); font-size:1.02rem; max-width:52ch;}
.row-s .pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.row-s .pills span{font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blau);
  border:1px solid rgba(74,144,200,.4); background:#fff; border-radius:99px; padding:5px 12px;}
.row-s::before{content:""; position:absolute; left:0; top:0; bottom:-1px; width:3px; background:var(--blau);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);}
@media (hover: hover){ .row-s:hover::before{transform:scaleY(1);} }
/* la fila del programa a mida (cas Gesco): és el servei nou, que es vegi */
 /* la fila del cas real es distingeix NOMÉS pel número i el nom del client:
    abans tenia fons blau i la barra sempre encesa, i semblava que s'hagués
    quedat encallada amb el ratolí a sobre (i trencava l'animació de les altres) */
.row-s.destacada .num{color:var(--blau);}
.row-s.destacada p b{color:var(--tinta); font-weight:700;}
@media(max-width:900px){.serv-grid{grid-template-columns:1fr;} .serv-sticky{position:static;}}

/* ============ ABANS / DESPRÉS ============ */
.dorm{background:linear-gradient(180deg, var(--white), var(--paper));}
.compare{position:relative; margin-top:52px; border-radius:var(--radi); overflow:hidden; border:1px solid var(--linia-forta);
  height:clamp(380px,56vw,560px); user-select:none; cursor:ew-resize; touch-action:pan-y; background:#fff;
  box-shadow:0 40px 90px -44px rgba(11,49,88,.35);}
.compare .side{position:absolute; inset:0; overflow:hidden;}
/* les dues fotos del comparador (foto del mòbil / retocada i ampliada amb IA). Revisió del 05/10: totes dues ocupen la
   caixa sencera i la de l'esquerra es retalla amb clip-path (el JS mou el retall); centrades, perquè ara són fotos i no
   captures de webs; i SENSE el filtre que apagava la de l'esquerra («la vella, encara més apagada», de quan s'hi comparava
   la web vella amb la nova): a la secció «sense trampa», la foto del client ha de sortir tal com és. */
.compare .cshot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  pointer-events:none; -webkit-user-drag:none;}
.compare .after{clip-path:inset(0 50% 0 0);}
.compare .handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--blau); z-index:5; transform:translateX(-1px); box-shadow:0 0 18px rgba(14,104,196,.7);}
.compare .knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6; width:52px; height:52px; border-radius:50%; background:var(--blau); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(11,31,58,.5);}
.compare .knob svg{width:24px; height:24px;}
/* etiquetes a baix: a dalt tapaven la nav de les captures */
.compare .clabel{position:absolute; bottom:14px; z-index:4; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:6px 13px; border-radius:99px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--linia); box-shadow:0 6px 18px -8px rgba(11,49,88,.35);}
.compare .clabel.l{left:16px; color:var(--tinta);} .compare .clabel.r{right:16px; color:var(--blau);}   /* el gris #9a9ea6 feia 2,7:1 */
.dorm .hint{margin-top:18px; color:var(--gris); font-size:.92rem;}

/* ============ MÈTODE ============ */
.metode{background:var(--white);}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:56px;}
.step{padding:32px 28px; border-radius:var(--radi); border:1px solid var(--linia); background:var(--white); position:relative; overflow:hidden;
  opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow .4s var(--ease);}
.step.in{opacity:1; transform:none;}
@media (hover: hover){ .step:hover{box-shadow:0 24px 50px -26px rgba(11,49,88,.3);} }
.step .sk{font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cel2-text);}
.step h3{font-size:1.45rem; font-weight:800; margin:14px 0 8px;}
.step p{color:var(--tinta2); font-size:1rem;}
.step::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blau); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease) .2s;}
.step.in::before{transform:scaleY(1);}

/* ============ QUI SOM ============ */
.qui{background:var(--white);}
.qui-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,80px); align-items:center; margin-top:40px;}
.qui h2{font-size:clamp(2.2rem,5.4vw,3.8rem);}
.qui h2 em{color:var(--blau);}
.qui p{color:var(--tinta2); font-size:1.1rem; margin-top:22px; max-width:46ch;}
.founders{display:flex; gap:18px; flex-wrap:wrap;}
.founder{flex:1; min-width:150px; padding:26px; border-radius:var(--radi); border:1px solid var(--linia); text-align:center;
  background:linear-gradient(180deg, var(--cel-pale), var(--white)); transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);}
@media (hover: hover){ .founder:hover{transform:translateY(-5px); border-color:rgba(74,144,200,.5); box-shadow:0 24px 50px -26px rgba(11,49,88,.28);} }
.founder .av{width:74px; height:74px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:1.9rem; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--cel), var(--blau)); box-shadow:0 12px 30px -10px rgba(14,104,196,.55);}
.founder b{font-size:1.15rem; display:block; color:var(--tinta);}
.founder span{color:var(--gris); font-size:.9rem;}
@media(max-width:820px){.qui-grid{grid-template-columns:1fr;}}

/* ============ PARLEM — final al cel ============ */
/* Degradat VERTICAL, no diagonal: el cel de sobre acaba en #A8D6F2 pla, i amb 165° la vora
   de dalt d'aquesta secció anava del clar al fosc d'esquerra a dreta → es veia el tall.
   Amb 180° les dues superfícies encaixen exactament i sembla un sol fons. */
.parlem{background:linear-gradient(180deg, #A8D6F2 0%, #8FC4E7 18%, #5FA5DA 52%, #2B6DAF 100%); text-align:center; overflow:hidden; color:#fff;}
/* El halo NO pot tocar la vora de dalt: centrat al 0% feia que la primera fila de píxels ja
   fos blanquinosa al mig i neta als costats → costura visible contra el cel de sobre.
   Baixat al 26% i suavitzat: la unió queda neta i el halo segueix il·luminant el titular. */
.parlem::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(66% 44% at 50% 28%, rgba(255,255,255,.32), transparent 72%);}
.parlem .wrap{position:relative;}
.parlem .eyebrow{color:#fff;} .parlem .eyebrow::before{background:#fff;}
.parlem .big{font-size:clamp(2.6rem,8vw,6rem); font-weight:900; letter-spacing:-.03em; line-height:.98; color:#fff; text-shadow:0 4px 40px rgba(11,49,88,.35);}
.parlem .big em{font-style:normal; font-weight:600; color:#EAF6FF;}
.parlem .lede{color:#EAF4FC; font-size:1.15rem; margin:26px auto 0; max-width:44ch;}
.form{max-width:600px; margin:44px auto 0; text-align:left; display:grid; gap:14px; background:var(--white); padding:clamp(24px,4vw,38px);
  border-radius:22px; box-shadow:0 50px 110px -40px rgba(9,38,66,.55); color:var(--tinta);}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form label{display:block; font-size:.82rem; color:var(--tinta2); margin-bottom:7px; font-weight:600;}
.form input, .form textarea{width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--linia-forta); background:var(--paper); color:var(--tinta); font-family:var(--font); font-size:1rem; transition:border-color .2s, box-shadow .2s, background .2s;}
.form input:focus, .form textarea:focus{outline:none; border-color:var(--blau); background:#fff; box-shadow:0 0 0 3px rgba(14,104,196,.15);}
.form textarea{min-height:120px; resize:vertical;}
.form .btn-primary{width:100%; justify-content:center; margin-top:6px; font-size:1.05rem; border:0;}
.form .micro{text-align:center; color:var(--gris); font-size:.86rem; margin-top:4px;}
.contact-alt{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.contact-alt a{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:99px; border:1px solid rgba(255,255,255,.5); font-weight:600; font-size:.95rem; color:#fff; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); transition:background .3s, transform .3s;}
@media (hover: hover){ .contact-alt a:hover{background:rgba(255,255,255,.28); transform:translateY(-2px);} }
.contact-alt svg{width:18px; height:18px;}
@media(max-width:560px){
  .form .row{grid-template-columns:1fr;}
  .compare .clabel{font-size:.62rem; letter-spacing:.1em; padding:4px 9px;}
}

/* ============ FITXA de projecte (modal) ============ */
.fitxa{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,40px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;}
.fitxa.open{opacity:1; visibility:visible;}
.fitxa-backdrop{position:absolute; inset:0; background:rgba(9,38,66,.5); backdrop-filter:blur(14px) saturate(1.1); cursor:pointer;}
.fitxa-card{position:relative; width:min(1180px,96vw); height:min(88svh,880px); overflow:hidden;
  background:var(--white); border-radius:22px; box-shadow:0 60px 140px -40px rgba(4,20,38,.65);
  display:grid; grid-template-columns:1.42fr .58fr; transform:translateY(26px) scale(.98);
  transition:transform .4s var(--ease);}
.fitxa.open .fitxa-card{transform:none;}
.fitxa-frame{display:flex; flex-direction:column; border-right:1px solid var(--linia); background:#0a1622; border-radius:22px 0 0 22px; overflow:hidden; min-width:0;}
.fitxa-frame .frame-bar{background:#F0F6FB; flex:none;}
/* escenari on viu la web real (iframe escalat) o la imatge scrollable */
.fitxa-stage{position:relative; flex:1; overflow:hidden; background:#eef4fa; min-height:0;}
.fitxa-stage iframe{position:absolute; top:0; left:0; border:0; transform-origin:0 0; background:#fff; display:block;
  opacity:0; transition:opacity .5s var(--ease);}
.fitxa-stage.live iframe{opacity:1;}
.fitxa-shot{width:100%; display:block;}
.fitxa-stage:not(.imgmode) .fitxa-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;}
/* clip i no hidden: fa el mateix (talla el que sobra pels costats) però no crea un
   contenidor de desplaçament extra, que és el que despistava el desplaçament suau (Lenis).
   Aquí dins sí que hi ha d'haver scroll vertical: la captura de la web és més alta que la caixa. */
.fitxa-stage.imgmode{overflow-y:auto; overflow-x:clip; -webkit-overflow-scrolling:touch;}
.frame-open{margin-left:auto; width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--blau); font-size:1.05rem; text-decoration:none; transition:background .25s var(--ease);}
@media (hover: hover){ .frame-open:hover{background:rgba(14,104,196,.14);} }
.fitxa-loader{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#eef4fa; color:var(--blau); transition:opacity .45s var(--ease); font-size:.85rem; font-weight:600; letter-spacing:.04em;}
.fitxa-stage.loaded .fitxa-loader{opacity:0; pointer-events:none;}
.fitxa-loader .sp{width:34px; height:34px; border-radius:50%; border:3px solid rgba(14,104,196,.25); border-top-color:var(--blau); animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.fitxa-live{position:absolute; top:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(11,31,58,.6);
  backdrop-filter:blur(6px); padding:6px 12px; border-radius:99px; pointer-events:none;}
.fitxa-live b{width:7px; height:7px; border-radius:50%; background:#3ad07a; box-shadow:0 0 8px #3ad07a; animation:pulse 1.6s ease infinite;}
@keyframes pulse{50%{opacity:.35;}}
.fitxa-meta{padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:13px; align-items:flex-start; overflow:auto;}
.fitxa-meta h3{font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:800;}
.fitxa-meta p{color:var(--tinta2); font-size:1rem;}
.fitxa-extra{border-top:1px solid var(--linia); padding-top:14px;}
.fitxa-cta{display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-top:auto; padding-top:18px; width:100%;}
.fitxa-cta .btn{padding:13px 22px; font-size:.95rem; justify-content:center;}
.fitxa-close{position:absolute; top:14px; right:14px; z-index:6; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--linia-forta); background:rgba(255,255,255,.92); color:var(--tinta); font-size:1.05rem;
  cursor:pointer; transition:transform .3s var(--ease), background .3s; display:flex; align-items:center; justify-content:center;}
@media (hover: hover){ .fitxa-close:hover{transform:rotate(90deg); background:#fff;} }
/* ══════════ LA FITXA EN MÒBIL: pantalla completa i web viva ══════════
   Abans era una targeta amb una captura de 34svh: es veia una franja del web i
   prou. Ara ocupa tota la pantalla i hi va la demo de veritat, a mida real, amb
   el seu disseny de mòbil. L'ordre és: barra amb el nom i la creu → la web (tot
   l'espai que queda) → la crida a l'acció, sempre visible a baix. */
@media(max-width:900px){
  .fitxa{padding:0;}
  .fitxa-card{width:100%; height:100dvh; max-height:none; border-radius:0;
    display:flex; flex-direction:column; overflow:hidden;
    grid-template-columns:none; grid-template-rows:none;}
  .fitxa-frame{flex:1 1 auto; min-height:0; border-right:0; border-radius:0;
    display:flex; flex-direction:column;}
  /* la barra del navegador fa de capçalera: hi cap la creu amb zona de toc de 44px */
  .fitxa-frame .frame-bar{flex:none; padding:10px 60px 10px 14px; min-height:52px; align-items:center;}
  .fitxa-frame .frame-bar .url{max-width:none; font-size:.8rem;}
  .fitxa-stage{flex:1 1 auto; min-height:0; height:auto;}
  .fitxa-close{top:8px; right:8px; width:44px; height:44px; font-size:1.15rem;
    background:#fff; box-shadow:0 4px 16px -4px rgba(11,49,88,.45); z-index:8;}
  /* a baix: nom del projecte i el botó. La descripció ja s'ha llegit a la targeta,
     aquí el que importa és VEURE la web, no tornar a llegir-ne el resum. */
  .fitxa-meta{flex:none; padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
    gap:10px; overflow:visible; border-top:1px solid var(--linia); background:var(--white);}
  .fitxa-meta #fitxaDesc, .fitxa-meta .fitxa-extra{display:none;}
  .fitxa-meta h3{font-size:1.15rem; margin:0;}
  .fitxa-meta .ptag{font-size:.68rem;}
  .fitxa-cta{flex-direction:column; margin-top:0; padding-top:0;}
  .fitxa-cta .btn{padding:15px 22px; min-height:48px;}
  /* 29/07 · El rètol "Web en viu" queia damunt de la demo i n'amagava el text
     (a la del Véla, just sobre "el vent fet màquina"). Al telèfon fa nosa més
     que servei: la web de dins ja es pot tocar i es veu de seguida que és viva,
     i cada píxel que li prenem és pantalla que el client no veu. Fora. */
  .fitxa-live{display:none;}
}
/* el rètol "Web en viu" no ha de tapar la web a pantalles molt baixes */
@media(max-width:900px) and (max-height:560px){
  .fitxa-meta h3{display:none;}
  .fitxa-live{display:none !important;}
}
/* 29/07 · EL HERO NEGRE EN OBRIR EL MENÚ. Aquí hi deia també `html.fitxa-oberta`,
   i amagar el desbordament de l'ARREL trenca el position:sticky de tota la pàgina:
   el cel del hero, que va enganxat a dalt, queia de cop tants píxels com havies
   baixat i deixava veure el fons de darrere. Es notava obrint el menú a mig hero.
   Amagant-lo només al <body> l'scroll queda igual de quiet i el sticky se salva. */
html.fitxa-oberta body{overflow:hidden;}
/* i el dit no arrossega la pàgina de sota en arribar al final del panell */
#navLinks{overscroll-behavior:contain;}

/* ============ IDIOMA (CA / ES) ============ */
.lang{display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:99px; border:1px solid var(--linia-forta); background:rgba(255,255,255,.6);}
.lang button{appearance:none; border:0; cursor:pointer; font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  padding:5px 10px; border-radius:99px; background:transparent; color:var(--tinta2); transition:background .25s var(--ease), color .25s var(--ease);}
.lang button[aria-pressed="true"]{background:var(--blau); color:#fff;}
@media (hover: hover){ .lang button:hover[aria-pressed="false"]{background:rgba(14,104,196,.12); color:var(--blau);} }
body.over-hero .nav .lang{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.14);}
body.over-hero .nav .lang button{color:rgba(255,255,255,.85);}
body.over-hero .nav .lang button[aria-pressed="true"]{background:#fff; color:var(--tinta);}
@media(max-width:880px){ .nav-links .lang{margin-top:14px;} }

/* ============ LEGALS (modal) ============ */
.legal{position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;}
.legal.open{opacity:1; visibility:visible;}
.legal-fons{position:absolute; inset:0; background:rgba(9,38,66,.5); backdrop-filter:blur(12px); cursor:pointer;}
.legal-card{position:relative; width:min(760px,100%); max-height:min(88svh,860px); display:flex; flex-direction:column;
  background:var(--white); border-radius:20px; box-shadow:0 50px 120px -40px rgba(4,20,38,.6); transform:translateY(20px) scale(.98);
  transition:transform .35s var(--ease);}
.legal.open .legal-card{transform:none;}
.legal-cap{display:flex; align-items:center; gap:16px; padding:22px clamp(20px,3vw,32px); border-bottom:1px solid var(--linia); flex:none;}
.legal-cap h3{font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:800; margin-right:auto;}
.legal-close{appearance:none; width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--linia-forta); background:var(--paper);
  color:var(--tinta); font-size:1rem; cursor:pointer; transition:transform .3s var(--ease), background .3s;}
@media (hover: hover){ .legal-close:hover{transform:rotate(90deg); background:#fff;} }
.legal-cos{overflow:auto; padding:8px clamp(20px,3vw,32px) 30px; -webkit-overflow-scrolling:touch;}
.legal-cos h4{font-size:1.02rem; font-weight:800; margin:26px 0 8px; color:var(--tinta);}
.legal-cos h4:first-child{margin-top:14px;}
.legal-cos p, .legal-cos li{color:var(--tinta2); font-size:.98rem; line-height:1.62;}
.legal-cos p{margin:0 0 10px;}
.legal-cos ul{margin:0 0 14px; padding-left:20px; display:grid; gap:6px;}
.legal-cos strong{color:var(--tinta);}

/* footer */
footer{background:var(--white); border-top:1px solid var(--linia); padding:56px 0 40px;}
.foot-legal{display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;}
.foot-legal button[data-legal]{appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; font-size:.86rem;
  color:var(--tinta2); text-decoration:underline; text-underline-offset:3px; padding:4px 0;}
@media (hover: hover){ .foot-legal button[data-legal]:hover{color:var(--blau);} }
.lang-foot{background:transparent;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap;}
.foot-brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.2rem; letter-spacing:.04em; color:var(--tinta);}
.foot-brand img{width:32px; height:32px;}
.foot-tag{color:var(--gris); margin-top:14px; max-width:32ch;}
.foot-links{display:flex; gap:34px; flex-wrap:wrap;}
.foot-col b{display:block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); margin-bottom:12px;}
.foot-col a{display:block; color:var(--tinta2); font-size:.96rem; padding:4px 0;}
@media (hover: hover){ .foot-col a:hover{color:var(--blau);} }
.foot-base{border-top:1px solid var(--linia); margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--gris); font-size:.86rem;}

.pend{color:var(--blau); border-bottom:1px dashed rgba(14,104,196,.5);}
@media(max-width:880px){.feina-head{flex-direction:column; align-items:flex-start;}}
/* ══════════════════════════════════════════════════════════════════════════════
   ALETHEIA v2 · SISTEMA TIPOGRÀFIC ÚNIC + RITME VERTICAL
   (bloc afegit al final del full: guanya per ordre. No cal treure res
   del full existent: aquest bloc va després i guanya per ordre.

   TRES retocs a l'HTML perquè tingui efecte (si no, els inline el guanyen):
     1) treure els style="..." de les línies 616, 717, 718, 820
     2) treure la classe  band-line  de les línies 713, 751, 774, 789
     3) línia 18: treure  &family=Instrument+Serif:ital@0;1  i el pes  ;900
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── DUES VEUS, feines separades ───────────────────────────────────────────
     Syne = DISPLAY. Schibsted Grotesk = TEXT.
     REGLA D'OR: per sota de 2rem, Syne no hi entra mai.                      */
  --display:'Satoshi','Schibsted Grotesk',system-ui,sans-serif;
  --greek:Georgia,'Times New Roman',serif;   /* ni Syne ni Schibsted tenen grec */

  /* ── ESCALA TIPOGRÀFICA · cap mida del full pot quedar fora d'aquestes 11 ── */
  --fs-mark:clamp(2.7rem,11.8vw,11rem);   /* ALETHEIA. Un sol ús a tota la web */
  --fs-xl:clamp(2.4rem,6.2vw,5rem);       /* frases-manifest (manifest, cel, parlem) */
  --fs-l:clamp(2rem,5vw,4.2rem);          /* titulars sobre el cel del hero */
  --fs-h2:clamp(2rem,4.4vw,3.4rem);       /* TOTS els titulars de secció */
  --fs-h2s:clamp(1.7rem,2.9vw,2.4rem);    /* titular dins columna estreta */
  --fs-h3:clamp(1.3rem,1.7vw,1.55rem);
  --fs-lede:clamp(1.06rem,1.1vw,1.19rem);
  --fs-body:1.0625rem;                    /* 17px */
  --fs-small:.92rem;
  --fs-micro:.8rem;                       /* eyebrow i etiquetes de secció */
  --fs-tag:.74rem;                        /* etiquetes dins targeta */

  /* ── PESOS · Satoshi SÍ que té Black: el nom gegant torna a 900, la resta es queda ── */
  --w-mark:900; --w-display:700; --w-strong:700; --w-medium:600; --w-body:400;

  /* ── TRACKING per nivell ── */
  --ls-xl:-.03em; --ls-h2:-.025em; --ls-h3:-.015em; --ls-micro:.14em;

  /* ── ALÇADES DE LÍNIA ── */
  --lh-mark:.88; --lh-xl:1; --lh-h2:1.06; --lh-h3:1.22; --lh-lede:1.5; --lh-body:1.6;

  /* ── ESPAIS · una sola escala, base 8 ── */
  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2rem;  --sp-6:3rem;   --sp-7:4rem; --sp-8:6rem;
  --band:clamp(64px,7.4vw,108px);      /* era clamp(90px,13vw,160px) */
  --band-tight:clamp(44px,5vw,72px);
  --seam:.55;                          /* quant es col·lapsa el 2n padding */

  /* ── SUPERFÍCIES i unions ── */
  --surface-1:var(--white);
  --surface-2:var(--paper);
  --cel-unio:#A8D6F2;                  /* únic lloc on viu el color de la junta */
  --accent-clar:var(--blau);           /* em sobre fons clar */
  --accent-fosc:var(--cel);            /* em sobre fons fosc o blau */
}

/* ══ A · NIVELLS DE DISPLAY (Syne) ══════════════════════════════════════════ */
h1,h2{font-family:var(--display); font-weight:var(--w-display);
  letter-spacing:var(--ls-h2); line-height:var(--lh-h2);}

.mark{font-family:var(--display); font-weight:var(--w-mark); font-size:var(--fs-mark);
  line-height:var(--lh-mark); letter-spacing:var(--ls-xl);}

/* frases-manifest: manifest + rètols del cel + titular del formulari.
   Abans eren 5.2 / 5.4 / 6rem amb pesos 800 i 900. Ara, un sol nivell. */
.manifest .stmt, .cel-cap span, .parlem .big{
  font-family:var(--display); font-weight:var(--w-mark); font-size:var(--fs-xl);
  line-height:var(--lh-xl); letter-spacing:var(--ls-xl);}

/* titulars que viuen sobre el cel del hero */
.bpanel .big, .beat-end h2{
  font-family:var(--display); font-weight:var(--w-display); font-size:var(--fs-l);
  line-height:1.02; letter-spacing:var(--ls-xl);}

/* TOTS els titulars de secció, la mateixa mida a tot arreu */
.section-head h2, .qui h2{font-size:var(--fs-h2); font-weight:var(--w-display);
  line-height:var(--lh-h2); letter-spacing:var(--ls-h2);}
/* excepció de sistema, no pegat: titular dins la columna estreta de Què fem */
#que-fem .serv-sticky h2{font-size:var(--fs-h2s);}

/* h3 i companyia: TEXT, no display, i 700 en comptes de 800 */
h3,h4{font-family:var(--font); font-weight:var(--w-strong);
  letter-spacing:var(--ls-h3); line-height:var(--lh-h3);}
.pmeta h3, .row-s h3, .step h3, .fitxa-meta h3{
  font-size:var(--fs-h3); font-weight:var(--w-strong);}
.step h3{margin:var(--sp-2) 0 var(--sp-1);}
.row-s h3{margin-bottom:var(--sp-1);}

/* xifres i lockups: display, perquè els números de Syne són part de la marca */
.row-s .num, .feina-count{font-family:var(--display); font-weight:var(--w-display);
  font-size:1.15rem; letter-spacing:0;}
.founder .av, .endcap a{font-family:var(--display); font-weight:var(--w-display);}
.endcap a{font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:var(--ls-h3);}

/* ══ B · NIVELLS DE TEXT (Schibsted) ════════════════════════════════════════ */
.section-head .lede, .parlem .lede, .qui p, .manifest .foot p, .bpanel p,
.founder b{font-size:var(--fs-lede); line-height:var(--lh-lede);}
.founder b{font-weight:var(--w-strong); line-height:1.3;}

.row-s p, .step p, .pmeta p, .fitxa-meta p, .foot-tag{
  font-size:var(--fs-body); line-height:var(--lh-body);}

.dorm .hint, .form .micro, .foot-base, .founder span, .feina-hint, .foot-col a{
  font-size:var(--fs-small);}

/* la tagline del hero: sota 2rem → deixa de ser Syne */
.mark-tag{font-family:var(--font); font-weight:var(--w-medium);
  font-size:var(--fs-lede); letter-spacing:.02em;}

/* UN sol tracking per a totes les etiquetes en majúscules (n'hi havia 9) */
.eyebrow, .bpanel .k, .step .sk, .foot-col b{
  font-size:var(--fs-micro); font-weight:var(--w-strong); letter-spacing:var(--ls-micro);}
.ptag, .row-s .pills span, .compare .clabel, .fitxa-live, .frame-body::before{
  font-size:var(--fs-tag); font-weight:var(--w-strong); letter-spacing:var(--ls-micro);}
.eyebrow{margin:0 0 var(--sp-4);}
.bpanel .k{margin:0 0 var(--sp-2);}

/* el grec: stack local i mida relativa (escala amb el paràgraf) */
.manifest .greek{font-family:var(--greek); font-style:italic;
  font-size:1.15em; letter-spacing:.01em; color:var(--cel2-text);}

/* ══ C · ÈMFASI · una sola regla: canvia el COLOR, mai el pes ═══════════════ */
h1 em, h2 em, h3 em, .big em, .stmt em, .cel-cap em, .endcap a em{
  font-family:inherit; font-style:normal; font-weight:inherit;
  font-size:1em; letter-spacing:inherit;}
.section-head h2 em, .qui h2 em, .manifest .stmt em, .cel-cap em, .bpanel .big em{
  color:var(--accent-clar);}
.beat-end h2 em, .parlem .big em, .endcap a em{color:var(--accent-fosc);}

/* ══ D · RITME VERTICAL ═════════════════════════════════════════════════════ */
.band{padding:var(--band) 0;}
/* dues bandes seguides no han de sumar dos paddings sencers: 320px → ~167px */
.band + .band{padding-top:calc(var(--band) * var(--seam));}
/* la primera secció després del hero SÍ que vol aire: és l'aterratge */
.manifest{padding-top:calc(var(--band) * 1.35);}

/* espais interns: els 12 valors solts cauen en 5 tokens */
.section-head .lede{margin-top:var(--sp-4);}
.manifest .foot{margin-top:var(--sp-7); gap:var(--sp-5);}
.compare{margin-top:var(--sp-6);}
.dorm .hint{margin-top:var(--sp-3);}
.steps{margin-top:var(--sp-6); gap:var(--sp-4);}
.qui-grid{margin-top:var(--sp-5);}
.qui p{margin-top:var(--sp-4);}
.parlem .lede{margin:var(--sp-4) auto 0;}
.form{margin:var(--sp-6) auto 0;}
.contact-alt{margin-top:var(--sp-5);}
.row-s{padding:var(--sp-5) var(--sp-3) var(--sp-5) var(--sp-2);}  /* deixa lloc a la barra: si no, talla el número */
.feina-ui{margin-top:var(--sp-4);}
.pmeta{padding:var(--sp-4) var(--sp-1) 0;}
footer{padding:var(--sp-7) 0 var(--sp-6);}
.foot-base{margin-top:var(--sp-6); padding-top:var(--sp-4);}

/* la feina: entra i surt amb la mateixa escala que la resta */
.feina-head{padding-top:var(--band);}
.feina{padding-bottom:var(--band-tight);}
/* menys aire mort dins el pin: contingut més alt en comptes de buit.
   OJO: aquestes dues alçades han d'anar SEMPRE juntes o el endcap es desalinea */
.feina-pin{min-height:0;}
.frame-body, .endcap a{height:clamp(340px,52vh,520px);}


/* ══ E · SUPERFÍCIES · cap veí amb el mateix blanc ══════════════════════════ */
.manifest{background:var(--surface-1);}
.feina{background:var(--surface-2);}
.serveis{background:var(--surface-1);}
.dorm{background:linear-gradient(180deg, var(--surface-1), var(--surface-2));}
.metode{background:var(--surface-2);}
.step{background:var(--surface-1);}
.qui{background:var(--surface-1);}

/* substitut de .band-line: filigrana que es fon pels extrems.
   Separa sense fer calaix. Si el vols encara més net, esborra aquest bloc. */
.band + .band:not(.parlem)::before{content:""; position:absolute; top:0; left:50%;
  transform:translateX(-50%); width:min(var(--maxw), 84vw); height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--linia) 26%, var(--linia) 74%, transparent);}

/* ══ F · DIFUMINACIONS · hero fosc → web clara ══════════════════════════════ */
/* mateix color final que la secció de sota (#fff, no #F6FAFD) i rampa el doble
   de llarga: la junta deixa d'existir i el cel es desfà en comptes de tallar-se */
.hero-tint{background:
  radial-gradient(78% 46% at 50% 45%, rgba(6,26,54,.34), rgba(6,26,54,0) 72%),
  linear-gradient(180deg,
    rgba(10,22,38,.24) 0%, rgba(10,22,38,.02) 18%, transparent 56%,
    rgba(178,208,232,.20) 74%, rgba(226,238,248,.66) 90%, var(--surface-1) 100%);}

/* el formulari arrenca EXACTAMENT amb el color d'unió i s'enfosqueix de pressa,
   perquè el text blanc es pugui llegir (abans era ~1,6:1 de contrast) */
/* El blau baixa fins al fons I ES MOR EN BLANC dins del MATEIX degradat. Abans hi havia una
   capa de blanc translúcid pintada a sobre (.parlem::after): barrejar blanc sobre un blau
   saturat el torna gris brut i marca bandes. Amb un sol degradat, la transició és neta.
   Les parades s'atapeeixen cap al final (corba d'acceleració) per dissimular el bandejat. */
.parlem{background:linear-gradient(180deg,
  var(--cel-unio) 0%, #7FB9E4 6%, #3F86C6 26%, #1E5FA0 55%,
  #16487E 74%, #1B5289 82%, #2E6BA0 88%, #5C93C0 93%, #A8CBE4 96.5%, #E4F0F8 98.5%, #FFFFFF 100%);}
.parlem::before{background:radial-gradient(66% 44% at 50% 28%, rgba(255,255,255,.18), transparent 72%);}
.parlem .lede{color:#EAF4FC;}

/* ══ H · mòbil: la mateixa escala, més compacta ═════════════════════════════ */
@media(max-width:640px){
  :root{--band:56px; --band-tight:40px; --seam:.6;}
  .mark{font-size:11vw; letter-spacing:-.045em;}
  .manifest{padding-top:calc(var(--band) * 1.2);}
  .band + .band:not(.parlem)::before{width:88vw;}
}
/* ── difuminació de sortida: el blau del formulari es desfà cap al peu blanc ──
   (era l'última costura seca que quedava a la pàgina) */
/* La capa de blanc translúcid que hi havia aquí és el que embrutava la unió (blanc sobre blau
   = gris) i marcava bandes. Ara la difuminació la fa el propi degradat de fons del .parlem. */
.parlem::after{content:none;}

/* i el peu de pàgina no porta ratlla: era la línia que es veia sota la difuminació.
   (el peu és germà de <main>, no de .parlem — per això no val .parlem + footer) */
main + footer{border-top:0;}
.parlem .wrap{position:relative; z-index:1;}

/* ── retocs que substitueixen els style="" eliminats ── */
.feina-head .lede{margin:0;}
#que-fem .serv-sticky .lede{color:var(--tinta2); margin-top:var(--sp-3); max-width:38ch;}
/* el títol reparteix les línies sol, sense deixar-ne cap amb una paraula sola */
#que-fem .serv-sticky h2{text-wrap:balance;}
/* enllaç al final de la columna enganxada */
.serv-cta{display:inline-flex; align-items:center; gap:10px; margin-top:var(--sp-5);
  font-weight:var(--w-strong); color:var(--blau); font-size:1.05rem;
  padding:12px 22px 12px 24px; border:1px solid rgba(14,104,196,.35); border-radius:99px;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);}
.serv-cta .fl{transition:transform .25s var(--ease);}
@media (hover: hover){
  .serv-cta:hover{background:var(--blau); border-color:var(--blau); color:#fff; transform:translateY(-2px);}
  .serv-cta:hover .fl{transform:translateX(4px);}
}
.serv-cta:focus-visible{outline:3px solid var(--blau); outline-offset:3px;}
@media(max-width:900px){ .serv-cta{margin-top:var(--sp-4);} }
.eyebrow.centrat{justify-content:center;}


/* ══════════ FORMULARI redissenyat ══════════ */
/* ============ PARLEM · FORMULARI (un sol bloc) ============
   Substitueix les regles .form* i .contact-alt* actuals.
   Un sol bloc blanc: capçalera → xips → camps → botó → contacte directe.
   Tot el que abans surava sobre el degradat viu ara dins la mateixa
   targeta: un sol contorn, un sol fons controlat.
   Els grups es numeren amb comptador CSS (01, 02…) i tenen barra blava
   a :focus-within — el mateix llenguatge que .row-s de "Què fem".
   Contrastos comprovats (WCAG 2.2 AA):
     contorn de camp #7A93AC sobre blanc ....... 3,18:1  (1.4.11, mín. 3)
     label i text auxiliar --tinta2 ............ 7,35:1
     placeholder #5C7793 ...................... 4,65:1
     missatge d'error #B3261E ................. 6,54:1
     xip en repòs --blau sobre blanc .......... 5,53:1
     botó: blanc sobre --blau ................. 5,53:1
     pastilles --blau sobre --cel-pale ........ 4,96:1
     "O escriu-nos" --blau2 sobre --cel-pale .. 7,44:1
   ========================================================== */
.pform{
  --f-line:#7A93AC;    /* contorn de camp: 3,18:1 sobre blanc */
  --f-err:#B3261E;     /* error: 6,54:1 sobre blanc */
  --f-place:#5C7793;   /* placeholder: 4,65:1 sobre blanc */
  max-width:660px; margin:clamp(32px,5vw,52px) auto 0; padding:0; text-align:left;
  background:var(--white); color:var(--tinta);
  border-radius:24px; overflow:hidden; counter-reset:fg;
  box-shadow:0 60px 120px -46px rgba(9,38,66,.62);
}

/* capçalera: què és això + la promesa, dins el bloc */
.pform-head{padding:clamp(22px,3.4vw,30px) clamp(20px,3.6vw,34px) clamp(18px,2.4vw,22px);}
.pform-head h3, .pform-head h2{font-size:clamp(1.3rem,2.6vw,1.65rem); font-weight:800;}
.pform-note{display:flex; align-items:center; gap:9px; margin-top:9px; font-size:.9rem; color:var(--tinta2);}
.pform-note i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--blau);
  box-shadow:0 0 0 4px rgba(14,104,196,.15);}

/* grups numerats + barra blava a :focus-within (com .row-s) */
.fgroup{position:relative; counter-increment:fg; border:0; margin:0; min-width:0; /* min-width:0 = fieldset no desborda la reixa */
  padding:clamp(19px,2.8vw,24px) clamp(20px,3.6vw,34px); border-top:1px solid var(--linia);}
.fgroup::before{content:""; position:absolute; left:0; top:-1px; bottom:0; width:3px; background:var(--blau);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);}
.fgroup:focus-within::before{transform:scaleY(1);}
.fglabel{display:block; padding:0; margin:0 0 12px; font-size:.98rem; font-weight:700; color:var(--tinta);}
.fglabel::before{content:counter(fg,decimal-leading-zero) " "; margin-right:7px; font-size:.82rem;
  font-weight:700; color:var(--cel2-text); letter-spacing:.03em;}
.fghint{margin:-6px 0 13px; font-size:.86rem; color:var(--tinta2);}

/* xips "què necessites?" — multi-selecció, qualifiquen el lead sense esforç */
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chip{position:relative; display:inline-flex;}
/* opacity:0 i no display:none: el checkbox segueix sent focusable i l'anuncia el lector */
.chip input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; appearance:none;}
.chip span{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 16px; border-radius:99px;
  border:1px solid rgba(14,104,196,.38); background:#fff; color:var(--blau); font-size:.9rem; font-weight:700; line-height:1.2;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);}
.chip span::before{content:"+"; font-weight:800; opacity:.55; font-size:1.02em;}
@media (hover: hover){ .chip:hover span{background:var(--cel-pale); border-color:var(--blau);} }
.chip input:checked + span{background:var(--blau); border-color:var(--blau); color:#fff;
  box-shadow:0 10px 22px -12px rgba(14,104,196,.85);}
.chip input:checked + span::before{content:"\2713"; opacity:1;}
.chip input:focus-visible + span{outline:3px solid var(--blau); outline-offset:3px;}

/* camps */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{position:relative; min-width:0;}
.field > label{display:flex; align-items:baseline; gap:8px; margin:0 0 7px; font-size:.72rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--tinta2);}
.field .opt{font-size:.68rem; font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--tinta2);}
.pform input, .pform textarea{width:100%; min-height:50px; padding:13px 15px; border-radius:12px;
  border:1px solid var(--f-line); background:#fff; color:var(--tinta);
  font-family:var(--font); font-size:max(1rem,16px); /* 16px mínim: evita el zoom automàtic d'iOS */ line-height:1.45;
  transition:border-color .2s, box-shadow .2s;}
.pform textarea{display:block; min-height:118px; resize:vertical;}
.pform ::placeholder{color:var(--f-place); opacity:1;}
@media (hover: hover){ .pform input:hover, .pform textarea:hover{border-color:var(--tinta2);} }
.pform input:focus, .pform textarea:focus{outline:none; border-color:var(--blau); box-shadow:0 0 0 4px rgba(14,104,196,.18);}

/* error i camp corregit */
.pform [aria-invalid="true"]{border-color:var(--f-err); box-shadow:0 0 0 4px rgba(179,38,30,.10);}
.pform [aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(179,38,30,.22);}
.ferr{margin:0; font-size:.82rem; font-weight:600; color:var(--f-err);}
.ferr:not(:empty){display:flex; align-items:center; gap:6px; margin-top:7px;}
.ferr:not(:empty)::before{content:"!"; flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--f-err); color:#fff; font-size:.66rem; font-weight:800; display:grid; place-items:center; line-height:1;}
/* "vàlid" discret: només marca el camp que venia d'error, no pinta tot el formulari */
.field.ok > label::after{content:"\2713"; margin-left:auto; color:var(--blau); font-size:.88rem; letter-spacing:0;}

/* acció: estat + botó + micro, tot al mateix peu del bloc */
.pform-action{padding:clamp(19px,2.8vw,24px) clamp(20px,3.6vw,34px) clamp(22px,3vw,26px); border-top:1px solid var(--linia);}
/* aria-live: MAI display:none — buida col·lapsa a 0px però es queda a l'arbre de render,
   que és el que fa que els lectors de pantalla l'anunciïn quan s'omple */
.fstatus{margin:0; font-size:.92rem; font-weight:600; line-height:1.45;}
.fstatus:not(:empty){margin-bottom:13px; padding:12px 15px; border-radius:12px; border:1px solid;}
.fstatus[data-tone="err"]{color:var(--f-err); background:rgba(179,38,30,.06); border-color:rgba(179,38,30,.3);}
.fstatus[data-tone="ok"]{color:var(--blau2); background:var(--cel-pale); border-color:rgba(14,104,196,.3);}
.fstatus[data-tone="ok"]:not(:empty)::before{content:"\2713"; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-right:9px; border-radius:50%; background:var(--blau); color:#fff; font-size:.7rem; vertical-align:-3px;}
.fsubmit{position:relative; width:100%; min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:15px 26px; border:0; border-radius:99px; cursor:pointer; font-family:var(--font); font-size:1.05rem; font-weight:800;
  color:#fff; background:var(--blau); box-shadow:0 14px 30px -12px rgba(14,104,196,.8);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;}
@media (hover: hover){ .fsubmit:hover{background:var(--blau2); transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(14,104,196,.85);} }
.fsubmit:active{transform:none;}
.fsubmit:focus-visible{outline:3px solid var(--blau-nit); outline-offset:3px;}
.fsubmit svg{width:18px; height:18px; transition:transform .3s var(--ease);}
@media (hover: hover){ .fsubmit:hover svg{transform:translateX(4px);} }
.fsubmit[disabled]{cursor:default; transform:none; background:var(--blau2); box-shadow:none;}
/* enviant */
.fspin{display:none; width:17px; height:17px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:pfspin .8s linear infinite;}
@keyframes pfspin{to{transform:rotate(360deg);}}
.pform[aria-busy="true"] .fspin{display:block;}
.pform[aria-busy="true"] .fsubmit svg{display:none;}
.fmicro{margin:13px 0 0; text-align:center; font-size:.85rem; color:var(--tinta2);}
/* 27/09 · el RGPD vol la informació on es demanen les dades: l'enllaç obre el legal de privacitat */
.fmicro button[data-legal]{appearance:none; border:0; background:transparent; cursor:pointer; font:inherit;
  color:var(--tinta2); text-decoration:underline; text-underline-offset:3px; padding:4px 0;}
@media (hover: hover){ .fmicro button[data-legal]:hover{color:var(--blau);} }
/* enviat: el botó deixa lloc a la confirmació, amb sortida per enviar-ne un altre */
.fagain{display:none;}
.pform.sent .fsubmit, .pform.sent .fmicro{display:none;}
.pform.sent .pform-action{display:flex; flex-direction:column;}
.pform.sent .fagain{display:inline-flex; align-items:center; gap:8px; margin:0 auto; padding:12px 22px; min-height:44px;
  border:1px solid rgba(14,104,196,.34); border-radius:99px; background:#fff; color:var(--blau);
  font-family:var(--font); font-size:.92rem; font-weight:700; cursor:pointer; transition:background .25s var(--ease);}
@media (hover: hover){ .pform.sent .fagain:hover{background:var(--cel-pale);} }
.pform.sent .fagain:focus-visible{outline:3px solid var(--blau); outline-offset:3px;}

/* contacte directe: dins la targeta, franja pròpia — mateix bloc visual que el botó */
.pform-alt{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 18px;
  padding:15px clamp(20px,3.6vw,34px); background:var(--cel-pale); border-top:1px solid rgba(14,104,196,.16);}
.palt-lead{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blau2);}
.palt-links{display:flex; flex-wrap:wrap; gap:9px;}
.palt-links a{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:99px;
  border:1px solid rgba(14,104,196,.32); background:#fff; color:var(--blau); font-size:.9rem; font-weight:700;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);}
@media (hover: hover){ .palt-links a:hover{background:var(--blau); border-color:var(--blau); color:#fff; transform:translateY(-2px);} }
.palt-links a:focus-visible{outline:3px solid var(--blau); outline-offset:3px;}
.palt-links svg{flex:none; width:17px; height:17px;}

/* mòbil (comprovat a 390px: 0 desbordament, tot ≥44px, camps a 16px) */
@media(max-width:640px){
  .pform{border-radius:20px; margin-top:30px;}
  .frow{grid-template-columns:1fr;}
  .chip span{padding:10px 14px; font-size:.86rem;}
  .pform-alt{flex-direction:column; align-items:stretch; text-align:center; padding:16px 20px 20px;}
  .palt-links{flex-direction:column;}
  .palt-links a{justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  .pform *, .pform *::before{transition-duration:1ms !important;}
  .fspin{animation:none;}
}
/* alt contrast de Windows: els contorns no poden desaparèixer */
@media(forced-colors:active){
  .pform input, .pform textarea, .chip span, .palt-links a, .fsubmit{border:1px solid ButtonBorder;}
  .chip input:checked + span{background:Highlight; color:HighlightText;}
}

/* ══════════ CORRECCIONS DE LA REVISIÓ (contrast, mòbil, accessibilitat) ══════════ */

/* 1. El text blanc de «Parlem-ne» quedava a 1,93:1 sobre el cel clar: el fons
   s'enfosqueix molt abans, mantenint la junta amb el cel al 0%. */
/* Dues capes. A sota, el degradat de sempre (enfosqueix de pressa per al contrast del text).
   A sobre, la sortida cap al peu blanc: 215 px comptats DES DE BAIX, amb colors OPACS que
   arrenquen del mateix blau del fons. Amb colors opacs no hi ha barreja (el blanc translúcid
   sobre blau el tornava gris i marcava bandes) i l'alçada fixa fa que la difuminació sigui
   igual de llarga tant si la secció és curta com si és llarga. */
.parlem{background:
  linear-gradient(to top, #FFFFFF 0, #F2F8FC 22px, #CFE2F1 55px, #8FB8D8 95px, #4E82B4 140px,
                          #22568C 180px, rgba(22,72,126,0) 215px),
  linear-gradient(180deg, var(--cel-unio) 0%, #5FA5DA 4%, #1E5FA0 14%, #16487E 100%);}
/* 2. «et vegin.» amb --cel sobre blau donava 1,16:1 (invisible). Accent intermedi llegible. */
:root{--accent-mig:#BFE0F7;}
.parlem .big em{color:var(--accent-mig);}
/* 3. Contorn i «+» dels xips: de 1,76:1 a 3,43:1 (mínim de 3:1 per a controls) */
.chip span{border-color:var(--cel2);}
.chip span::before{opacity:.9;}
/* 4. La numeració dels grups del formulari, de 3,43:1 a 5,53:1 */
.fglabel::before{color:var(--blau);}

/* 5. (L'avís d'inici s'ha retirat: no era obligatori i tapava el hero.
   Els textos legals segueixen al peu.) */

/* 6. El menú mòbil tancat deixava 7 controls focusables fora de pantalla */
@media(max-width:880px){
  .nav-links{visibility:hidden; transition:transform .45s var(--ease), visibility .45s;}
  .nav-links.open{visibility:visible;}
}

/* 7. Mòbil: l'última A d'ALETHEIA quedava tallada, i les etiquetes del comparador
   se solapaven 43 px (la regla anterior vivia en un bloc anterior i no guanyava). */
@media(max-width:640px){
  .mark{font-size:9.6vw; letter-spacing:-.04em;}
  .hero.static .beat{min-width:0;}
  /* 05/10 · abans es tallaven amb «…» i es perdia just «amb IA»: ara fan dues o tres línies */
  .compare .clabel{font-size:.6rem; letter-spacing:.06em; padding:4px 8px; max-width:44%;
    white-space:normal; line-height:1.3; text-align:center; border-radius:12px;}
}

/* 8. L'endcap de la galeria no s'alineava amb els marcs i el text tocava les vores */
.endcap{align-items:flex-start;}
.endcap a{padding:clamp(24px,3vw,36px); line-height:var(--lh-h2);}

/* 9. El lockup ALETHEIA sortia en dues tipografies a la mateixa pantalla */
.brand b, .foot-brand, .pre-name{font-family:var(--display);}

/* 10. Focus visible a tots els controls nous (abans no en tenien) */
.lang button:focus-visible, .foot-legal button:focus-visible, .legal-close:focus-visible,
.chip input:focus-visible + span, .fsubmit:focus-visible,
.fagain:focus-visible, .palt-links a:focus-visible{
  outline:3px solid var(--blau); outline-offset:3px;}
@media(forced-colors:active){
  .lang button[aria-pressed="true"]{background:Highlight; color:HighlightText; forced-color-adjust:none;}
  .lang{border:1px solid ButtonBorder;}
}


/* ══════════ neteja i detalls finals de la revisió ══════════ */
/* els glifs + i ✓ dels xips són decoració: que no els llegeixi el lector de pantalla */
.chip span::before{content:"+" / "";}
.chip input:checked + span::before{content:"\2713" / "";}
/* CSS que ja no té cap element (formulari antic, pastilles antigues, capes del hero vell) */
.cloud-layer, .cl, .sky-bird, .sky-bird.b1, .sky-bird.b2, .mark .ml, .frame-open{ /* mort: sense element */ }


/* ══════════ ORDRE I CLAREDAT EN MÒBIL ══════════ */
/* la pista de lliscar només viu al mòbil (al desktop la galeria va amb l'scroll) */
.feina-swipe{display:none;}
@media(max-width:880px){
  /* que es vegi un tros de la targeta següent: així es llegeix com a carrusel */
  .pcard{width:84vw;}
  .endcap{width:78vw;}
  .feina-track{gap:14px; padding:0 5vw;}
  .feina-swipe{display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0;
    font-size:.82rem; font-weight:600; letter-spacing:.06em; color:var(--gris);}
  .feina-swipe span{display:inline-block; animation:swipa 1.6s var(--ease) infinite;}
  @keyframes swipa{50%{transform:translateX(6px);}}
  .noanim .feina-swipe span{animation:none;}
}
@media(max-width:640px){
  /* el hero estàtic respirava massa: menys buit entre l'entrada i el manifest */
  .hero.static .hero-ui{gap:1.4rem; padding:92px 7vw 44px;}
  .manifest{padding-top:calc(var(--band) * 1.05);}
  /* files de serveis més compactes (el número no necessita 64px de columna) */
  .row-s{grid-template-columns:44px 1fr; gap:12px; padding:var(--sp-4) var(--sp-2);}
  .row-s p{font-size:1rem;}
  /* el formulari: una mica menys de coixí perquè no sembli infinit */
  .pform-head{margin-bottom:2px;}
  .fgroup{margin-top:4px;}
}

/* ══════════ EL HERO AL MÒBIL: EL MATEIX VOL, BEN COL·LOCAT ══════════
   Al telèfon el hero fa exactament el mateix que a l'ordinador —el cel avança amb el dit i
   els textos surten d'un en un— però l'espai és un altre: aquí tot ocupa l'ample sencer,
   res va a la dreta (no hi ha lloc per alternar) i les mides baixen perquè hi càpiguen. */
@media(max-width:820px){
  .hero{height:340vh;}                       /* una mica menys de recorregut que al PC */
  .beat-data{max-width:100%; padding:33vh 7vw 0;}
  .beat-data.left, .beat-data.right{left:0; right:0; align-items:flex-start;}
  .bpanel{width:100%;}
  .bpanel .big{font-size:clamp(1.95rem,8.4vw,2.9rem);}
  .bpanel p{font-size:clamp(1.02rem,4.1vw,1.16rem); max-width:30ch; margin-top:.9rem;}
  .bpanel .k{font-size:.8rem; letter-spacing:.18em;}
  .mark{font-size:13.5vw;}                   /* el nom pot créixer: ara la lletra hi cap */
  /* En pujar la barra de progrés, els botons li quedaven arrapats. Aquests puja'ls
     també: han de tenir aire per sota, que és on hi ha el punt de "final del vol". */
  .beat-end{bottom:27vh;}
  .beat-end h2{font-size:clamp(1.9rem,8vw,2.8rem);}
  /* La barra de progrés i el «baixa» vivien a 18 px del final: al telèfon, la barra
     del navegador els tapava sencers i semblava que no hi fossin. Es pugen per sobre
     d'ella. Amb la barra del navegador replegada queden una mica alts, però val més
     això que no pas que no es vegin mai. */
  .hero-bar{left:7vw; right:7vw; bottom:calc(1.1rem + 132px + env(safe-area-inset-bottom, 0px));}
  .scroll-hint{bottom:calc(22px + 128px + env(safe-area-inset-bottom, 0px));}
}

/* ══════════ EL FINAL DE LA PÀGINA, AL MÒBIL ══════════
   L'última fila del peu (avís legal · privacitat · cookies · CA/ES) quedava tapada.
   Al navegador de proves hi cabia just —acabava a 796 px de 844— però al telèfon de
   veritat hi ha la barra inferior del navegador, que es menja aquesta franja i no
   surt a cap simulació. Per això es veia tallat al mòbil i no aquí.
   env(safe-area-inset-bottom) és el que reserven els iPhone per a la barra d'inici;
   als Android val 0 i llavors mana el coixí fix. */
@media(max-width:880px){
  /* Coixí generós a propòsit. Provat amb 60 px i AL TELÈFON DE VERITAT encara es
     tallava l'última línia: entre la barra d'adreces del navegador i la barra de
     gestos del sistema, alguns mòbils es mengen més de 120 px que cap simulació
     reprodueix. Aquí sobrar és gratis —és el final de la pàgina, només és aire— i
     quedar-se curt vol dir que no es pot llegir ni clicar. */
  main + footer{padding-bottom:calc(var(--sp-6) + 120px + env(safe-area-inset-bottom, 0px));}
  .foot-base{margin-top:32px;}
  /* i que l'última línia no quedi mai enganxada al final del bloc */
  .foot-base > :last-child{padding-bottom:8px;}
}

/* ══════════ LA RESTA DE LA WEB, MÉS ÀGIL (28/07/2026) ══════════
   Mesurat: la pàgina són 18 pantalles d'scroll i la secció de la feina se'n menjava
   5,1 ella sola (8 targetes). El hero es queda com està —s'ha allargat expressament
   perquè hi hagi temps de llegir—, però la resta demanava massa esforç per avançar.
     · la fila de targetes avança més per cada gir de roda (al JS, factor 0.72)
     · el text apareix en 0,55 s en comptes de 0,8: es nota d'entrada, sense esperes */
.reveal{transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);}
.reveal.d1{transition-delay:.05s;} .reveal.d2{transition-delay:.1s;} .reveal.d3{transition-delay:.15s;}

/* ══════════ EL MENÚ QUE APAREIXIA ENMIG DE LA PÀGINA ══════════
   La barra de dalt porta backdrop-filter (el vidre difuminat). Qualsevol element amb
   backdrop-filter, transform o filter es converteix en el "marc de referència" dels
   seus fills amb position:fixed: en comptes d'ancorar-se a la PANTALLA, s'ancoren a
   ELL. Com que el panell del menú viu dins de la barra, quedava lligat a una franja
   de 70 px de dalt i els enllaços s'escampaven damunt del contingut.
   Mentre el menú és obert, la barra deixa el vidre. Es nota poc (el panell la tapa)
   i el menú torna a ocupar la pantalla sencera. */
body.menu-obert .nav-inner{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}

/* ══════════ EL HERO, MÉS FÀCIL DE LLEGIR (28/07/2026) ══════════
   Dos problemes que anaven junts: els textos passaven massa de pressa i, segons el
   fotograma del cel que hi hagués al darrere, el contrast no acompanyava.

   1) (25/09) UNA SOLA PANTALLA. Els textos ja no depenen de l'scroll sinó del temps
      (v. el HERO de main.js): el hero no reté ningú i es pot baixar des del primer segon.
   2) UN VEL DE BOIRA darrere el text. El fons és un cel que canvia a cada fotograma:
      hi ha moments en què surt un núvol fosc just sota el text i el halo no basta.
      El vel és un degradat blanc molt suau que ve del costat on viu el text i es perd
      cap al centre: no es llegeix com una caixa —sembla boira— però garanteix que el
      text fosc sempre tingui alguna cosa clara a sota. */
.hero{height:100svh;}
.beat-data{position:absolute;}
.beat-data::before{content:""; position:absolute; inset:-8vh 0; z-index:-1; pointer-events:none;}
.beat-data.left::before{
  background:linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.42) 30%,
                                    rgba(255,255,255,.16) 62%, rgba(255,255,255,0) 88%);}
.beat-data.right::before{
  background:linear-gradient(270deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.42) 30%,
                                     rgba(255,255,255,.16) 62%, rgba(255,255,255,0) 88%);}
@media(max-width:820px){
  /* 31/07 (nit) · EL SALT DE LA RECÀRREGA. El mòbil és mode story (una pantalla), però
     aquesta alçada la posava el JS en carregar: el hero naixia alt (CSS) i s'encongia
     ~2.200 px un instant després. Safari restaura l'scroll EN PÍXELS en recarregar, i
     amb tot el contingut pujat de cop la posició queda "massa avall" — l'Oriol
     reapareixia al fons de la web. Ara el hero de mòbil ja neix curt des del CSS:
     cap salt, la recàrrega et torna on eres. (El mode estàtic es corregeix a sota.) */
  .hero{height:94svh;}
  .hero.static{height:auto;}   /* noanim / poca memòria: l'alçada la mana el contingut */
  /* Al telèfon, RES DE VEL: la franja clara darrere el text es notava massa i semblava
     una pantalla enganxada damunt del cel. Aquí el text ja es llegeix bé amb el halo,
     perquè ocupa tota l'amplada i cau sempre sobre la franja de núvols. */
  .beat-data::before{content:none;}
}

/* El botó blanc del hero («Mira la feina») anava amb una vora del 17% de tinta: sobre el
   cel clar gairebé no es veia i el botó semblava flotar sense forma. Vora de tinta de
   veritat, 1,5 px, perquè es retalli contra el fons sense haver de fer-lo més fosc. */
.hero .btn-ghost, .btn-ghost{border:1.5px solid rgba(11,31,58,.55);}
@media (hover: hover){
  .hero .btn-ghost:hover, .btn-ghost:hover{border-color:var(--tinta);}
}

/* ══════════ LLETRA MASSA PETITA (revisió de pantalles, 28/07/2026) ══════════
   Mesurat a 390 px: 34 textos per sota de 12,5 px. Els que importen de debò són els del
   FORMULARI —les etiquetes anaven a 11,5 px i el "si en tens" a 10,9— i el nom que surt
   a la barra de cada targeta de la feina, que és el que costava de llegir al telèfon.
   Les etiquetes en majúscules aguanten mides petites (van amb molt d'espai entre lletres),
   però per sota de 12 px ja no. Cap d'aquests canvis mou res de lloc. */
.pform label, .field > label{font-size:.83rem;}
.pform .opt, .field .opt, .opt{font-size:.8rem;}
.frame-bar .url{font-size:.8rem;}
.ptag, .row-s .pills span, .compare .clabel, .fitxa-live{font-size:.8rem;}
.palt-lead{font-size:.83rem;}
@media(max-width:880px){
  /* al telèfon, un pas més: és on es llegeix pitjor */
  .pform label, .field > label{font-size:.88rem;}
  .pform .opt, .field .opt, .opt{font-size:.8rem;}
  .frame-bar .url{font-size:.8rem;}
  .ptag, .row-s .pills span, .fitxa-live{font-size:.8rem;}
}

/* ══════════ ZONES DE TOC ══════════
   Els botons d'idioma feien 40×30 px: es poden tocar, però són per sota del mínim
   recomanat (44 px). S'engrandeix el que rep el dit amb coixí, sense fer el botó
   més gros a la vista. */
@media(max-width:900px){
  .lang{padding:4px;}
  .lang button{min-height:38px; padding-inline:15px;}
  .nav-links a{min-height:44px; display:flex; align-items:center;}
}

/* ══════════ AIRE DE SOBRA A DUES SECCIONS ══════════
   Al manifest i a «Qui som» el text s'acabava molt abans que la secció i quedava una franja
   morta abans de la següent. Es retalla el coixí de BAIX (no el de dalt, que és el que fa
   respirar el titular) i el bloc de text arriba una mica més a la dreta, que és l'altra
   meitat de la sensació de buit en una pantalla ampla. */
.manifest{padding-bottom:var(--band-tight);}
.manifest .foot{max-width:1000px; gap:clamp(30px,3.4vw,54px); margin-top:var(--sp-6);}
.qui{padding-bottom:var(--band-tight);}
/* Les dues fitxes quedaven petites i soltes al mig de la columna dreta, envoltades de
   blanc. Amb més cos —cercle més gran i més coixí— aguanten el pes de la columna i el
   text de l'esquerra deixa d'anar sol. Quan hi hagi les fotos, es canvia el cercle de
   les inicials per la foto i no cal tocar res més. */
.qui .founder{padding:clamp(28px,2.6vw,38px) clamp(20px,2vw,28px);}
.qui .founder .av{width:clamp(84px,7vw,104px); height:clamp(84px,7vw,104px); font-size:clamp(2rem,2.4vw,2.5rem); margin-bottom:18px;}
.qui .founders{gap:clamp(16px,1.6vw,22px);}

/* ══════════ EL MENÚ DEL MÒBIL, LLEGIBLE ══════════
   La barra de dalt, mentre ets al hero, es pinta en blanc (perquè va sobre el cel fosc).
   El problema: el menú desplegable és un panell BLANC, i heretava aquest blanc. Resultat:
   l'idioma que no tenies seleccionat —el CA— era blanc sobre blanc i no es veia; semblava
   que la web només tingués un idioma. Dins del panell, sempre colors foscos. */
@media(max-width:880px){
  .nav-links .lang{background:#fff; border-color:var(--linia-forta);}
  body.over-hero .nav .nav-links .lang button{color:var(--tinta2);}
  body.over-hero .nav .nav-links .lang button[aria-pressed="true"]{background:var(--blau); color:#fff;}
  /* :not(.nav-cta) — el botó blau de "Parlem-ne" ha de conservar la lletra blanca */
  body.over-hero .nav-links a:not(.nav-cta){color:var(--tinta) !important;}
}

/* El camp parany del formulari: fora de pantalla i inaccessible amb el tabulador.
   MAI display:none ni visibility:hidden — els robots d'avui ho detecten i se'l salten. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ══════════ EL TANCAMENT DEL HERO, LLEGIBLE ══════════
   El titular final cau on el cel ja és BLANC de núvols: en blanc s'esborrava, i
   "es veu." en blau cel encara més, justament la frase de la marca. Passa a tinta
   amb halo clar (el mateix tracte que la resta de punts del hero) i l'èmfasi en
   blau fort, que és l'únic accent que aguanta sobre blanc. */
.beat-end h2{color:var(--tinta);
  text-shadow:0 2px 30px rgba(255,255,255,.66), 0 1px 6px rgba(255,255,255,.55);}
.beat-end h2 em{color:var(--blau);}

/* La tagline sota el nom queia damunt dels núvols BLANCS en color gris-blanquinós i amb
   una ombra molt difusa: no s'acabava de llegir. Blanc pur, un punt més de cos i de pes,
   i una ombra CURTA i densa (la difusa sola no dibuixa la vora de la lletra). */
.mark-tag{color:#fff; font-weight:var(--w-strong);
  font-size:clamp(1.05rem,1.45vw,1.35rem); letter-spacing:.04em;
  text-shadow:0 1px 2px rgba(6,22,44,.6), 0 2px 10px rgba(6,22,44,.5), 0 6px 26px rgba(6,22,44,.35);}

/* Els punts del hero es llegeixen en moviment i de lluny: el cos de text general de la
   web (17px) hi queda curt. Un pas amunt, només aquí dins. */
.bpanel p{font-size:clamp(1.16rem,1.35vw,1.52rem); line-height:1.52;}

/* L'etiqueta és blava i el cel, segons el fotograma, també: blau sobre blau no es veia.
   Un halo blanc CURT i dens la separa del fons tant si darrere hi ha núvol com cel obert. */
.bpanel .k{font-size:.86rem; color:var(--blau2);
  text-shadow:0 0 6px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.85),
              0 1px 3px rgba(255,255,255,.95), 0 2px 20px rgba(255,255,255,.7);}

/* ══════════ LA FEINA: QUE LA WEB HI CÀPIGA SENCERA ══════════
   La targeta era tan alta que quedava tallada per dalt i per baix i no es veia la web
   que hi ha a dins, que és justament el que hem d'ensenyar. Un 15% menys, i cap dins.
   Només a l'ordinador: al mòbil la targeta ja té la seva mida (84vw). */
/* Al mòbil la targeta ocupava 672 px de 844: quedava tan alta que la barra amb el nom de
   la demo tocava el menú de dalt i no s'acabava de veure la targeta sencera. Un pas enrere
   en amplada i alçada, i ja hi cap tota amb aire. */
@media(max-width:880px){
  .pcard{width:80vw;}
  .frame-body, .endcap a{height:34vh; min-height:230px; max-height:330px;}
  .frame-bar{padding:9px 12px;}
  /* el nom de la demo NO baixa de 12,8 px: és el que es llegia pitjor al telèfon */
  .frame-bar .url{font-size:.8rem; padding:4px 10px;}
}

/* Enllaços i botons del peu: feien 30-32 px d'alt i al telèfon costava encertar-los.
   Amb una mica més de coixí passen de 40 px sense que el peu creixi gairebé res.
   Fins a 900 px i no 880: entre els dos hi ha tauletes petites, que també van amb el dit. */
@media(max-width:900px){
  .foot-col a{padding:9px 0;}
  .foot-legal button[data-legal], .avis-link{padding:8px 2px;}
  .brand{padding:4px 0;}
}

@media(min-width:881px){
  .pcard{width:clamp(340px,36vw,480px);}
  .frame-body, .endcap a{height:clamp(300px,44vh,430px);}
  /* el menú va fix a dalt i tapava el capdamunt de la targeta: el contingut es
     centra en l'espai que queda SOTA el menú, no a tota la pantalla */
  .feina-pin{padding-top:84px;}
}

/* PANTALLES BAIXES (finestres petites, portàtils vells, mitja pantalla).
   Amb 600 px d'alçada la targeta no s'encongia prou —té un mínim de 300 px— i quedava
   tallada. Aquí el mínim baixa i el coixí de dalt també: val més la captura una mica
   més petita que no pas mitja targeta fora de pantalla.
   ⚠️ VA DESPRÉS del bloc de dalt a propòsit: si va abans, aquell el sobreescriu
   (mateixa especificitat, mana l'últim) i no serveix de res. */
@media(min-width:881px) and (max-height:680px){
  .feina-pin{padding-top:60px;}
  .frame-body, .endcap a{height:clamp(190px,38vh,340px);}
  .pcard{width:clamp(300px,32vw,420px);}
}

/* ══════════ LA GALERIA AL MÒBIL: que s'hi vegi la web, no una miniatura ══════════
   Les targetes ensenyaven la captura d'ESCRIPTORI (1200 px) encaixada en 310: tot
   quedava quatre vegades massa petit per llegir-se. Ara, per sota de 880 px, el
   <picture> serveix una captura de la versió MÒBIL de cada web. Com que el text ja
   es llegeix, la targeta pot ser una mica més alta sense semblar atapeïda. */
@media(max-width:880px){
  .pcard{width:82vw; max-width:340px;}
  .frame-body, .endcap a{height:42vh; min-height:280px; max-height:420px;}
  /* totes les targetes igual d'altes: si no, el text de la del costat s'entreveu
     desquadrat i la fila sembla desordenada */
  .pmeta{min-height:112px;}
  .pmeta p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; font-size:.95rem;}
  .pmeta h3{font-size:1.12rem;}
  /* al mòbil no hi ha ratolí: el xip ha de convidar a TOCAR, i s'ha de veure sempre */
  .frame-body::before{content:"Toca per obrir-la"; opacity:1; transform:none;
    top:auto; bottom:10px; right:10px; font-size:.66rem; padding:5px 11px;
    background:rgba(255,255,255,.94);}
  .feina-swipe{margin-top:16px;}
}


@media(max-width:880px){
  .feina-swipe b{font-variant-numeric:tabular-nums; color:var(--blau); font-weight:700;}
}

/* ══════════ REPÀS DEL MÒBIL (29/07/2026) ══════════ */

/* 1. Enllaços amb #ancora a la URL (els que compartim per WhatsApp: .../#parlem).
   El menú ja ho resolia bé perquè el JS fa lenis.scrollTo amb offset -80, però una
   URL amb ancora la resol el navegador tot sol i el títol quedava DARRERE la píndola
   del menú (mesurat: títol a 63 px, píndola fins a 82). Amb això para just a sota. */
html{scroll-padding-top:96px; scroll-padding-bottom:16px;}

/* 2. Les files de «Què fem»: al telèfon, els 64 px de la columna del número + els 18
   del buit es menjaven un cinc per cent llarg de l'amplada i el text sortia en línies
   de cinc paraules. Sota 640 px el número passa a fer d'índex, a sobre del títol, i
   el text recupera tota l'amplada. */
@media(max-width:640px){
  .row-s{grid-template-columns:1fr; gap:0; padding:26px 2px 28px;}
  .row-s .num{display:block; font-size:.82rem; font-weight:700; letter-spacing:.16em;
    color:var(--blau); padding-top:0; margin-bottom:8px;}
  .row-s h3{font-size:1.28rem; margin-bottom:7px;}
  .row-s p{font-size:1rem; max-width:none;}
  .row-s::before{width:2px;}
}

/* 3. Zones de toc: hi havia botons de 37-38 px. El dit en necessita 44 (mesura d'Apple
   i de les WCAG 2.2). Es guanya amb padding, sense moure res de lloc. */
@media(max-width:880px){
  .legal-close{width:44px; height:44px;}
  .lang button{min-height:44px; padding-inline:16px;}
  .foot-legal button[data-legal], .avis-link{min-height:44px; padding:10px 4px;}
  .brand{min-height:44px;}
  .nav-links a{min-height:48px;}
  .foot-col a{min-height:44px; display:flex; align-items:center;}
  /* el «Baixa» del hero anava a 11,5 px: la lletra més petita de tota la web */
  .scroll-hint span{font-size:.8rem;}
}

/* 4. Els textos legals fan 3.400 px dins d'una finestra de 650: en arribar al final,
   el dit seguia empenyent i arrossegava la pàgina de darrere (i al mòbil podia
   disparar el «recarregar estirant avall»). Amb contain, el gest mor al modal. */
.legal-cos{overscroll-behavior:contain;}

/* ══════════ HERO DE L'ORDINADOR EN VÍDEO · retocs (26/09) ══════════ */
/* al mòbil, el hero de sempre: sense botó de pausa (com era) */
/* 04/10 · el botó de pausa també al mòbil (abans s'hi amagava): el vídeo del cel no s'aturava mai */
/* portàtils baixos (1366x657, 1280x600): "Baixa" trepitjava els botons del tancament */
@media (min-width:821px) and (max-height:720px){ .beat-end{bottom:calc(16vh + 40px);} }
/* el vel clar dels panells de l'esquerra s'esvaeix per dalt: ja no esborra el logotip del menú */
.beat-data::before{-webkit-mask-image:linear-gradient(transparent 0,#000 25%,#000 80%,transparent);
  mask-image:linear-gradient(transparent 0,#000 25%,#000 80%,transparent);}
/* ══════════ VERSIÓ 8b · EL NÚVOL ES TORNA A TANCAR ══════════
   Tanca la història del hero: el mateix núvol del principi (les mateixes meitats) es torna a tancar
   sobre el mateix vol. Per sota, el núvol s'aprima fins al blau cel de la junta (--cel-unio) on
   arrenca el blau de #parlem: sortir per sota del núvol, com feia el cel de la web original.
   LLIGAT A L'SCROLL PERÒ CURT: la pantalla es fixa un tram breu (100vh a l'ordinador, 80vh al mòbil) i
   dins d'aquest tram l'scroll tanca el núvol i fa aparèixer les frases (el JS: GSAP, main.js).
   L'estat de BASE és el TANCAT i quiet, amb les frases (el que es veu sense JS i amb 'reduir moviment');
   el JS hi posa .viu, que allarga la secció i amaga les frases fins als seus llindars.
   Només transform i opacitat. */
.celband{height:100svh; min-height:560px; z-index:2;   /* z: el núvol retingut passa per sobre de #parlem */
  background:linear-gradient(var(--paper) calc(100% - 30vh), var(--cel-unio));}   /* el que es veu si el núvol s'ha esvaït (v. main.js) */
.celband.viu{height:calc(100svh + 100vh);}
.celband-stage{position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden;}
.celband-stage.aguanta{position:fixed; left:0; right:0;}   /* scroll ràpid: el núvol tancat s'aguanta un instant (v. main.js) */
.celband-stage > *{position:absolute; inset:0;}
.celband video{width:100%; height:100%; object-fit:cover; transform:scale(1.12);}
.cel-boira{background:var(--paper);}
.cel-nuvol .nv{position:absolute; top:0; bottom:0; width:62%; background:no-repeat center/cover;}
.cel-nuvol .e{left:0; background-image:url('../assets/cel/nuvol-e.webp'); background-position:right center; transform-origin:0 50%;}
.cel-nuvol .d{right:0; background-image:url('../assets/cel/nuvol-d.webp'); background-position:left center; transform-origin:100% 50%;}
/* dalt, el blanc de «Qui som»; baix, el núvol s'aprima fins al blau de la junta, on arrenca #parlem (la recepta del cel original) */
.celband-tint{background:linear-gradient(180deg, var(--white), transparent 18%, transparent 72%, rgba(168,214,242,.55) 88%, var(--cel-unio) 100%);}
.cel-caps{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 6vw; text-align:center;}
.cel-cap span{display:block; max-width:18ch; color:var(--tinta); text-wrap:balance; text-shadow:0 0 34px var(--paper), 0 0 12px var(--paper);}
.cel-cap{transition:opacity .35s ease-out, transform .6s cubic-bezier(.22,.61,.36,1);}
.celband.viu .cel-cap{opacity:0; transform:translateY(18px);}
.celband.f1 .cel-cap:nth-child(1), .celband.f2 .cel-cap:nth-child(2), .celband.f3 .cel-sota{opacity:1; transform:none;}
.cel-sota{position:absolute; left:0; right:0; bottom:8vh;}
/* el rètol de baix assenyala el formulari i s'hi pot clicar */
.cel-sota a{display:inline-flex; align-items:center; gap:.4em; padding:10px 16px; border-radius:99px; color:var(--blau);}
.cel-caps .cel-sota span{max-width:none; font-size:var(--fs-h3); font-weight:var(--w-display); letter-spacing:var(--ls-h3);}
.cel-sota svg{width:1.3em; height:1.3em; flex:none; transition:transform .3s var(--ease);}
@media (hover: hover){ .cel-sota a:hover svg{transform:translateY(3px);} }
.cel-sota a:focus-visible{outline:3px solid var(--blau); outline-offset:2px;}
.celband .cel-caps .cel-sota:focus-within{opacity:1; transform:none; transition:none;}   /* amb el teclat, visible des del primer instant */
@media(max-width:640px){
  .cel-cap:not(.cel-sota) em{display:block;}   /* al telèfon, cada frase en dues línies: res de paraules òrfenes */
  .cel-cap + .cel-cap:not(.cel-sota) span{margin-top:.4em;}
}
@media(max-width:820px){
  .celband.viu{height:calc(100svh + 80vh);}
  .cel-nuvol .nv{width:75%;}
  .cel-nuvol .e{background-image:url('../assets/cel/nuvol-me.webp');}
  .cel-nuvol .d{background-image:url('../assets/cel/nuvol-md.webp');}
}
/* ══════════ PANTALLES · retocs (27/09) ══════════ */
/* al mòbil, els núvols de la cortina més amples: tapen el forat de dalt per on treia el cap el cel del vídeo */
@media (max-width:820px){ .cel-nuvol .nv{width:88%;} }
/* pantalles baixes (mòbil ajagut): el núvol fa l'alçada de la pantalla; amb 560px de mínim, «Parlem-ne aquí sota» quedava fora */
@media (max-height:560px){ .celband, .celband-stage{min-height:0;} }
/* mòbil ajagut amb el hero d'ordinador: el text puja perquè no passi per sota de la barra ni del botó de pausa */
@media (min-width:821px) and (max-height:500px){ .beat-data{padding-top:22vh;} }
/* menú del mòbil ajagut: si no hi cap, comença a dalt i fa scroll (centrat, «Parlem-ne» quedava tallat per baix) */
@media (max-width:880px) and (max-height:500px){ .nav-links{justify-content:flex-start; overflow-y:auto;} }
/* els punts de la barra es poden tocar: zona de 44px, el punt es veu igual */
.hero-dot::after{content:""; position:absolute; inset:-11px;}

/* ═══ 404 (404.html) ═══════════════════════════════════════════════════════════════════════
   27/09 · La cortina de núvols de la portada, tancada damunt d'una pàgina que no existeix.
   Sense JS: els núvols es queden on els deixa el CSS (tancats) i el text hi va a sobre, en
   tinta fosca sobre núvol clar; per això no porta cap ombra ni resplendor. */
.p404{min-height:100svh; display:flex; flex-direction:column; background:linear-gradient(180deg, var(--cel-pale), var(--white));}
.p404-cap{position:relative; z-index:2; padding:22px clamp(20px,5vw,44px);}
.p404-marca{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:.95rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta);}
.p404-marca img{width:32px; height:auto;}
.p404-main{position:relative; z-index:1; flex:1; display:grid; place-items:center; padding:24px clamp(20px,6vw,60px) 64px;}
.p404 > .cel-nuvol{position:fixed; inset:0; opacity:.8;}   /* tota la pantalla: el logo hi flota a sobre */
.p404-text{position:relative; z-index:1; max-width:36rem; display:flex; flex-direction:column; align-items:center; text-align:center;}
.p404-text h1{font-family:var(--display); font-weight:var(--w-mark); font-size:var(--fs-xl); line-height:var(--lh-xl);
  letter-spacing:var(--ls-xl); color:var(--tinta); margin:0 0 20px;}
.p404-cos{max-width:30rem; font-size:var(--fs-lede); color:var(--tinta); margin:0 0 30px;}
.p404-es{margin-top:28px; font-size:var(--fs-small); color:var(--tinta2);}
.p404-es a{text-decoration:underline; text-underline-offset:3px;}
@media (hover: hover){ .p404-es a:hover{color:var(--blau);} }
.p404 a:focus-visible{outline:3px solid var(--blau); outline-offset:3px;}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   WEB DE DIVERSES PÀGINES (04/10/2026)
   El hero, la lletra i els colors es queden. Del registre ADN (fila 1 refeta): l'esquelet és «pàgina per servei amb
   índex lateral persistent» i el gest és «Gira el negoci». Dues superfícies que ja eren de la marca: el CEL (webs,
   el del hero) i el PAPER PAUTAT (programes, el d'en Full i la llibreta). Tot el que hi ha aquí sota és nou.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --paper-pauta:rgba(74,144,200,.15);     /* les ratlles del paper dels programes */
  --paper-marge:rgba(14,104,196,.20);     /* la línia de marge de la llibreta */
  --nav-h:86px;                           /* on acaba la barra de dalt (pastilla + marge) */
}

/* ── el títol del hero: ALETHEIA + l'etiqueta, dins del mateix <h1> (és el que llegeixen Google i les IA) ── */
.mark-h1{display:flex; flex-direction:column; align-items:center; margin:0; font:inherit; letter-spacing:normal; line-height:normal;}
.mark-h1 .mark, .mark-h1 .mark-tag{display:block;}

/* ── menú: els idiomes ara són ENLLAÇOS a la pàgina germana (abans eren botons que traduïen al navegador) ── */
.lang a{display:inline-flex; align-items:center; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  padding:5px 10px; border-radius:99px; color:var(--tinta2); transition:background .25s var(--ease), color .25s var(--ease);}
.nav-links .lang a{padding:5px 10px; font-size:.78rem; min-height:0;}
.lang a[aria-current="true"]{background:var(--blau); color:#fff;}
@media (hover: hover){ .lang a:not([aria-current]):hover{background:rgba(14,104,196,.12); color:var(--blau);} }
.lang a:focus-visible{outline:3px solid var(--blau); outline-offset:2px;}
body.over-hero .nav .lang a{color:rgba(255,255,255,.88);}
body.over-hero .nav .lang a[aria-current="true"]{background:#fff; color:var(--tinta);}
.nav-links a[aria-current="page"]{color:var(--blau); background:rgba(124,196,236,.20);}
@media(max-width:880px){
  .nav-links .lang a{font-size:.86rem; padding:0 16px; min-height:44px; color:var(--tinta2) !important;}
  .nav-links .lang a[aria-current="true"]{color:#fff !important;}
  .nav-links a[aria-current="page"]{background:transparent; color:var(--blau) !important;}
}
/* el peu i el formulari: els legals ja són pàgines (abans, finestres) */
.foot-legal a, .fmicro a{color:var(--tinta2); text-decoration:underline; text-underline-offset:3px; padding:4px 0; font-size:.86rem;}
.fmicro a{font-size:inherit;}
@media (hover: hover){ .foot-legal a:hover, .fmicro a:hover{color:var(--blau);} }
.foot-legal a:focus-visible, .fmicro a:focus-visible{outline:3px solid var(--blau); outline-offset:3px;}
@media(max-width:900px){ .foot-legal a{min-height:44px; display:inline-flex; align-items:center; padding:10px 4px;} }
.fgroup[hidden]{display:none;}

/* ── un enllaç de text amb pes, per a «coneix-nos», «mira com funciona»… ── */
.enllac-fort{display:inline-flex; align-items:center; min-height:44px; margin-top:var(--sp-3); color:var(--blau); font-weight:var(--w-strong);
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px;}
@media (hover: hover){ .enllac-fort:hover{color:var(--blau2); text-decoration-thickness:2.5px;} }
.enllac-fort:focus-visible{outline:3px solid var(--blau); outline-offset:3px; border-radius:4px;}

/* ══ PORTADA · les dues portes ══════════════════════════════════════════════════════════════════════════ */
.portes{background:var(--surface-2);}
.portes-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); margin-top:var(--sp-6);}
.porta{position:relative; display:flex; flex-direction:column; gap:var(--sp-2); padding:clamp(26px,3.4vw,44px);
  border-radius:var(--radi); border:1px solid var(--linia-forta); overflow:hidden; color:var(--tinta); isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);}
.porta::before{content:""; position:absolute; inset:0; z-index:-1;}
/* per fora: el cel del hero, amb un núvol que hi passa per sota */
.porta-webs::before{background:linear-gradient(170deg, #CFE8F7 0%, var(--cel-pale) 52%, var(--white) 100%);}
.porta-webs::after{content:""; position:absolute; z-index:-1; right:-40px; bottom:-60px; width:70%; aspect-ratio:1240/740;
  background:url('../assets/cel/nuvol-d.webp') center/cover no-repeat; pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent, #000 45%); mask-image:linear-gradient(transparent, #000 45%);}
/* per dins: el paper pautat de la llibreta */
.porta-programes::before{background:
  linear-gradient(90deg, transparent 54px, var(--paper-marge) 54px 55px, transparent 55px),
  repeating-linear-gradient(180deg, transparent 0 31px, var(--paper-pauta) 31px 32px),
  var(--white);}
.porta-programes{padding-left:clamp(72px,7vw,92px);}
.porta-k{font-size:var(--fs-micro); font-weight:var(--w-strong); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--blau2);}
.porta h3{font-family:var(--display); font-weight:var(--w-display); font-size:clamp(1.8rem,3.2vw,2.6rem); letter-spacing:var(--ls-h2); line-height:1.05; margin-top:var(--sp-1);}
.porta p{color:var(--tinta2); font-size:var(--fs-lede); line-height:var(--lh-lede); max-width:40ch;}
.porta-anar{margin-top:auto; padding-top:var(--sp-4); font-weight:var(--w-strong); color:var(--blau);
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px;}
@media (hover: hover){
  .porta:hover{transform:translateY(-6px); border-color:rgba(74,144,200,.55); box-shadow:0 30px 60px -34px rgba(11,49,88,.4);}
  .porta:hover .porta-anar{text-decoration-thickness:2.5px;}
}
.porta:focus-visible{outline:3px solid var(--blau); outline-offset:4px;}
@media(max-width:760px){ .portes-grid{grid-template-columns:1fr;} .porta-programes{padding-left:clamp(64px,16vw,76px);} }

/* el gest «Gira el negoci», amb el seu text al costat (l'interior és a css/panell-demo.css) */
.gira-bloc{display:grid; grid-template-columns:minmax(220px,.75fr) 1.6fr; gap:clamp(24px,4vw,64px); align-items:center; margin-top:var(--sp-7);}
.gira-intro h3{font-family:var(--display); font-weight:var(--w-display); font-size:var(--fs-h2s); letter-spacing:var(--ls-h2); line-height:var(--lh-h2);}
.gira-intro p{color:var(--tinta2); font-size:var(--fs-lede); margin-top:var(--sp-3); max-width:34ch;}
@media(max-width:900px){ .gira-bloc{grid-template-columns:1fr; margin-top:var(--sp-6);} }

/* ══ PÀGINES INTERIORS · capçalera ═══════════════════════════════════════════════════════════════════════ */
.pcap{position:relative; overflow:clip; padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(52px,6.5vw,92px); isolation:isolate;}
.pcap-wrap{position:relative; z-index:1;}
.pcap .eyebrow{margin-bottom:var(--sp-3); text-wrap:balance;}
.pcap h1{font-family:var(--display); font-weight:var(--w-display); font-size:clamp(2.5rem,6vw,4.8rem); line-height:1.02;
  letter-spacing:var(--ls-xl); max-width:16ch; color:var(--tinta);}
.pcap h1 em{color:var(--blau);}
.pcap-cita{margin-top:var(--sp-4); max-width:58ch; color:var(--tinta2); font-size:clamp(1.1rem,1.35vw,1.3rem); line-height:1.55;}
.pcap-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-5);}
/* el CEL (webs): el mateix blau del hero i dos núvols que hi passen molt a poc a poc */
.pcap-cel{background:linear-gradient(180deg, #C4E3F6 0%, #DCEFFA 46%, var(--paper) 100%);}
.pcap-nuvols{position:absolute; inset:0; z-index:0; pointer-events:none;}
.pcap-nuvols .nv{position:absolute; top:4%; bottom:0; width:58%; background:no-repeat center/contain; opacity:.85;
  /* les vores de dalt i de baix de la foto del núvol es fonen: si no, es veia una ratlla recta on comença la imatge */
  -webkit-mask-image:linear-gradient(transparent 0, #000 28%, #000 62%, transparent 100%); mask-image:linear-gradient(transparent 0, #000 28%, #000 62%, transparent 100%);}
.pcap-nuvols .e{left:-14%; background-image:url('../assets/cel/nuvol-e.webp'); animation:nuvolLent 38s ease-in-out infinite alternate;}
.pcap-nuvols .d{right:-16%; background-image:url('../assets/cel/nuvol-d.webp'); animation:nuvolLent 46s ease-in-out -12s infinite alternate-reverse;}
@keyframes nuvolLent{from{transform:translateX(-3%);} to{transform:translateX(4%);}}
@media(max-width:820px){
  .pcap-nuvols .nv{width:95%; top:auto; height:55%; opacity:.6;}
  .pcap-nuvols .e{background-image:url('../assets/cel/nuvol-me.webp'); left:-45%;}
  .pcap-nuvols .d{background-image:url('../assets/cel/nuvol-md.webp'); right:-50%;}
}
/* el PAPER (programes): pautat com la llibreta, amb la línia del marge */
.pcap-paper{background:
  linear-gradient(90deg, transparent calc(max(0px,(100% - var(--maxw))/2) + clamp(20px,5vw,44px) - 18px), var(--paper-marge) 0 calc(max(0px,(100% - var(--maxw))/2) + clamp(20px,5vw,44px) - 17px), transparent 0) 0 var(--nav-h) / 100% 100% no-repeat,
  repeating-linear-gradient(180deg, transparent 0 35px, var(--paper-pauta) 35px 36px) 0 var(--nav-h) / 100% 100% no-repeat,
  linear-gradient(180deg, var(--white), var(--paper));}
@media(max-width:640px){ .pcap-paper{background:
  repeating-linear-gradient(180deg, transparent 0 35px, var(--paper-pauta) 35px 36px) 0 var(--nav-h) / 100% 100% no-repeat,
  linear-gradient(180deg, var(--white), var(--paper));} }
.pcap-simple{background:linear-gradient(180deg, var(--cel-pale) 0%, var(--paper) 100%);}
.pcap-simple h1{max-width:20ch;}

/* ══ PÀGINES DE SERVEI · l'índex lateral (el gest d'esquelet) ═════════════════════════════════════════ */
.amb-index{display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start;}
.index-lateral{position:sticky; top:calc(var(--nav-h) + 28px); padding-top:var(--band-tight);}
.index-lateral .index-k{display:block; font-size:var(--fs-micro); font-weight:var(--w-strong); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--gris); margin-bottom:var(--sp-2);}
.index-lateral ol{list-style:none; margin:0; padding:0; border-left:1.5px solid var(--linia-forta); display:grid; gap:2px;}
.index-lateral a{display:block; padding:7px 0 7px 16px; margin-left:-1.5px; border-left:2px solid transparent;
  color:var(--tinta2); font-size:.95rem; font-weight:500; line-height:1.35; transition:color .25s var(--ease), border-color .25s var(--ease);}
@media (hover: hover){ .index-lateral a:hover{color:var(--tinta);} }
.index-lateral a[aria-current]{color:var(--blau); border-left-color:var(--blau); font-weight:var(--w-strong);}
.index-lateral a:focus-visible{outline:3px solid var(--blau); outline-offset:2px; border-radius:4px;}
.index-cos{min-width:0;}
@media(max-width:980px){
  /* al mòbil i a la tauleta: una tira enganxada sota el menú, que llisca de costat */
  .amb-index{grid-template-columns:minmax(0,1fr); gap:0;}
  .index-lateral{top:calc(var(--nav-h) - 8px); z-index:50; padding:0; margin:0 calc(-1 * clamp(20px,5vw,44px));
    background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--linia); box-shadow:0 10px 24px -20px rgba(11,31,58,.35);}
  .index-lateral .index-k{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .index-lateral ol{display:flex; gap:6px; border:0; overflow-x:auto; padding:10px clamp(20px,5vw,44px); scrollbar-width:none; scroll-padding-inline:16px;}
  .index-lateral ol::-webkit-scrollbar{display:none;}
  .index-lateral li{flex:none;}
  .index-lateral a{margin:0; border:1px solid var(--linia-forta); border-radius:99px; padding:9px 14px; min-height:40px;
    display:flex; align-items:center; font-size:.88rem; white-space:nowrap; background:#fff;}
  .index-lateral a[aria-current]{background:var(--blau); border-color:var(--blau); color:#fff;}
  html:has(.index-lateral){scroll-padding-top:150px;}
}

/* els blocs de contingut de les pàgines de servei */
.bloc{padding:var(--band-tight) 0; border-top:1px solid var(--linia);}
.index-cos > .bloc:first-child{border-top:0;}
.bloc > h2{font-family:var(--display); font-weight:var(--w-display); font-size:var(--fs-h2s); letter-spacing:var(--ls-h2); line-height:var(--lh-h2); max-width:24ch;}
.bloc > h2 em{color:var(--blau);}
.bloc-intro{margin-top:var(--sp-3); max-width:60ch; color:var(--tinta2); font-size:var(--fs-lede); line-height:var(--lh-lede);}
.bloc-text{margin-top:var(--sp-4); display:grid; gap:var(--sp-3); max-width:62ch;}
.bloc-text p{color:var(--tinta2); font-size:var(--fs-body); line-height:var(--lh-body);}
.bloc-text strong{color:var(--tinta);}
.bloc .steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
/* al costat de l'índex la columna és estreta: quatre passos en quatre columnes partien els títols en tres línies. Dos i dos. */
.index-cos .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:640px){ .index-cos .steps{grid-template-columns:minmax(0,1fr);} }
.bloc .panell-demo{margin-top:var(--sp-5);}
.bloc .btn{margin-top:var(--sp-5);}

/* «Et sona?»: frases del dia a dia que es poden marcar (les marcades van al formulari, v. main.js) */
.sona{list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.sona-item{position:relative; display:flex; gap:14px; align-items:flex-start; height:100%; min-height:64px; padding:16px 18px;
  border:1px solid var(--linia-forta); border-radius:14px; background:var(--white); cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);}
.sona-item input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; appearance:none;}
.sona-item .caixa{flex:none; width:22px; height:22px; margin-top:2px; border-radius:6px; border:1.5px solid var(--cel2);
  display:grid; place-items:center; background:#fff; transition:background .2s var(--ease), border-color .2s var(--ease);}
.sona-item .caixa::after{content:""; width:11px; height:6px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px); opacity:0;}
.sona-item .frase{color:var(--tinta); font-size:var(--fs-body); line-height:1.5;}
@media (hover: hover){ .sona-item:hover{border-color:var(--cel2); background:var(--cel-pale);} }
.sona-item:has(input:checked){border-color:var(--blau); background:var(--cel-pale); box-shadow:0 12px 26px -20px rgba(14,104,196,.7);}
.sona-item input:checked + .caixa{background:var(--blau); border-color:var(--blau);}
.sona-item input:checked + .caixa::after{opacity:1;}
.sona-item:has(input:focus-visible){outline:3px solid var(--blau); outline-offset:3px;}
.sona-peu{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:var(--sp-4);}
.sona-peu .btn{margin-top:0;}
.sona-peu p{color:var(--tinta2); font-size:var(--fs-small); max-width:40ch;}
@media(max-width:640px){ .sona{grid-template-columns:1fr;} }

/* llistes de coses que inclou / que pot portar: dues columnes amb una ratlla a dalt, sense numerar (no és un ordre) */
.items{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) clamp(24px,3.4vw,48px); margin-top:var(--sp-5);}
.item{padding-top:var(--sp-3); border-top:2px solid var(--cel);}
.item h3{font-size:var(--fs-h3); font-weight:var(--w-strong);}
.item p{margin-top:var(--sp-1); color:var(--tinta2); font-size:var(--fs-body); line-height:var(--lh-body);}
@media(max-width:640px){ .items{grid-template-columns:1fr;} }

/* «El que no et farem» */
.no-fem{list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-2); max-width:62ch;}
.no-fem li{position:relative; padding-left:28px; color:var(--tinta2); font-size:var(--fs-body); line-height:var(--lh-body);}
.no-fem li::before{content:""; position:absolute; left:2px; top:.72em; width:14px; height:2px; background:var(--tinta2);}
.no-fem strong{color:var(--tinta);}

/* preguntes freqüents (també van a les dades per a Google: eines/genera_web.py) */
.preguntes{margin-top:var(--sp-4); border-top:1px solid var(--linia-forta); max-width:70ch;}
.pregunta{border-bottom:1px solid var(--linia-forta);}
.pregunta summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:18px 4px; min-height:56px; font-weight:var(--w-strong); font-size:1.08rem; color:var(--tinta);}
.pregunta summary::-webkit-details-marker{display:none;}
.pregunta summary::after{content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--blau); border-bottom:2px solid var(--blau);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s var(--ease);}
.pregunta[open] summary::after{transform:rotate(225deg) translate(-2px,-2px);}
@media (hover: hover){ .pregunta summary:hover{color:var(--blau);} }
.pregunta summary:focus-visible{outline:3px solid var(--blau); outline-offset:2px; border-radius:6px;}
.resposta{padding:0 4px 20px; display:grid; gap:10px;}
.resposta p{color:var(--tinta2); font-size:var(--fs-body); line-height:var(--lh-body);}

/* les demos (/webs-a-mida/): graella a l'ordinador, carril que llisca al mòbil */
.demos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,26px); margin-top:var(--sp-5);}
.demos .pcard{width:auto; min-width:0;}
.demos .pcard.gran{grid-column:span 2;}
.demos .frame-body{height:clamp(230px,26vw,320px);}
.demos .endcap a{height:calc(clamp(230px,26vw,320px) + 39px);}   /* + la barra del navegador de les altres targetes: queden alineades */
.demos .endcap{width:auto;}
.demos .endcap a{width:100%; font-size:clamp(1.3rem,1.8vw,1.6rem);}
.demos .pmeta h3{font-size:var(--fs-h3);}
.demos-pos{display:none;}
.demos-nota{margin-top:var(--sp-4); color:var(--tinta2); font-size:var(--fs-small); max-width:60ch;}
@media(max-width:1100px){ .demos{grid-template-columns:repeat(2,minmax(0,1fr));} .demos .pcard.gran{grid-column:auto;} }
@media(max-width:880px){
  .demos{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px clamp(20px,5vw,44px) 8px;
    margin-inline:calc(-1 * clamp(20px,5vw,44px));}
  .demos::-webkit-scrollbar{display:none;}
  .demos .pcard{flex:none; width:80vw; max-width:330px; scroll-snap-align:center;}
  .demos .endcap{flex:none; width:70vw; max-width:300px; scroll-snap-align:center;}
  .demos .frame-body, .demos .endcap a{height:42vh; min-height:260px; max-height:400px;}
  .demos-pos{display:flex; justify-content:center; gap:8px; margin-top:12px; font-size:.82rem; font-weight:600; letter-spacing:.06em; color:var(--gris);}
  .demos-pos b{font-variant-numeric:tabular-nums; color:var(--blau);}
}
/* el rètol de les captures, en castellà a la pàgina castellana (el CSS no el pot traduir el JS) */
:lang(es) .frame-body::before{content:"▸ Ábrela en vivo";}
:lang(es).noanim .frame-body::before{content:"Abre la ficha";}
@media(max-width:880px){ :lang(es) .frame-body::before{content:"Toca para abrirla";} }

/* el pont del final de cada servei cap a l'altre (per fora ↔ per dins) */
.pont{padding:var(--band) 0; border-top:1px solid var(--linia);}
.pont-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,64px); align-items:end;}
.pont h2{font-family:var(--display); font-weight:var(--w-display); font-size:var(--fs-h2); letter-spacing:var(--ls-h2); line-height:var(--lh-h2); max-width:16ch;}
.pont h2 em{color:var(--blau);}
.pont-text{margin-top:var(--sp-3); color:var(--tinta2); font-size:var(--fs-lede); max-width:46ch;}
.pont .pcap-cta{margin-top:var(--sp-4);}
.pont-altre{display:block; padding:clamp(22px,2.6vw,32px); border-radius:var(--radi); border:1px solid var(--linia-forta); color:var(--tinta);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);}
.pont-altre .porta-k{display:block;}
.pont-altre b{display:block; font-family:var(--display); font-weight:var(--w-display); font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:var(--ls-h2); margin-top:6px;}
.pont-altre .pont-desc{display:block; margin-top:8px; color:var(--tinta2);}
.pont-altre.porta-webs{background:linear-gradient(170deg, #CFE8F7, var(--white));}
.pont-altre.porta-programes{background:repeating-linear-gradient(180deg, transparent 0 31px, var(--paper-pauta) 31px 32px), var(--white);}
@media (hover: hover){ .pont-altre:hover{transform:translateY(-4px); border-color:rgba(74,144,200,.55); box-shadow:0 26px 50px -30px rgba(11,49,88,.4);} }
.pont-altre:focus-visible{outline:3px solid var(--blau); outline-offset:4px;}
@media(max-width:820px){ .pont-grid{grid-template-columns:1fr; align-items:start;} }

/* ══ QUI SOM · PARLEM · LEGALS ══════════════════════════════════════════════════════════════════════════ */
.simple-cos{padding-top:0; padding-bottom:var(--band);}
.simple-cos .persones{margin-top:0;}
.simple-cos .bloc:first-child{border-top:0; padding-top:0;}
.persones{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:var(--sp-5); max-width:640px;}
.legal-cos-pag{max-width:72ch;}
.legal-cos-pag h4{font-size:1.15rem; font-weight:800; margin:34px 0 10px; color:var(--tinta);}
.legal-cos-pag h4:first-child{margin-top:0;}
.legal-cos h2, .legal-cos-pag h2{font-family:var(--font); letter-spacing:var(--ls-h3); line-height:var(--lh-h3); font-weight:800; color:var(--tinta);}
.legal-cos h2{font-size:1.02rem; margin:26px 0 8px;}
.legal-cos h2:first-child{margin-top:14px;}
.legal-cos-pag h2{font-size:1.15rem; margin:34px 0 10px;}
.legal-cos-pag h2:first-child{margin-top:0;}
.legal-cos-pag p, .legal-cos-pag li{color:var(--tinta2); font-size:var(--fs-body); line-height:1.65;}
.legal-cos-pag p{margin:0 0 12px;}
.legal-cos-pag ul{margin:0 0 16px; padding-left:22px; display:grid; gap:7px;}
.legal-cos-pag strong{color:var(--tinta);}
.legal-cos-pag a{color:var(--blau); text-decoration:underline; text-underline-offset:3px;}
.pag-parlem .parlem{padding-top:calc(var(--nav-h) + var(--band-tight));}

/* ══ EL PAS D'UNA PÀGINA A L'ALTRA ═════════════════════════════════════════════════════════════════════
   Transicions del navegador entre pàgines (View Transitions): la barra de dalt es queda quieta i la porta que
   cliques a la portada es converteix en la capçalera de la pàgina nova. Així una web de diverses pàgines continua
   semblant una de sola. Firefox i Safari antics hi entren sense transició (no es trenca res). Amb «reduir
   moviment», cap transició. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root), ::view-transition-new(root){animation-duration:.3s;}
  .nav{view-transition-name:barra;}
  .pag-inici .p-porta--webs, .pag-webs .full3d-escena{view-transition-name:superficie-webs;}
  .pag-inici .p-porta--programes, .pag-programes .pv-hero{view-transition-name:superficie-programes;}
  ::view-transition-group(superficie-webs), ::view-transition-group(superficie-programes){animation-duration:.42s; animation-timing-function:cubic-bezier(.22,.61,.36,1);}
}
@media (prefers-reduced-motion: reduce){ .pcap-nuvols .nv{animation:none;} }

/* petits complements de les pàgines interiors */
.enllac-text{color:var(--blau); text-decoration:underline; text-underline-offset:3px;}
@media (hover: hover){ .enllac-text:hover{color:var(--blau2);} }
.greek-inline{font-family:var(--greek); font-style:italic; color:var(--cel2-text);}
.despres{background:var(--surface-1);}
.pag-parlem .despres .steps{margin-top:var(--sp-5);}

/* ══ CORRECCIONS DE LA REVISIÓ DE LA WEB NOVA (04/10/2026) ══════════════════════════════════════════════
   Sis revisors (veritat, accessibilitat, Google i IA, disseny, català i castellà). Els valors de disseny els van
   provar injectant-los al navegador abans de proposar-los. */
/* el CA/ES del peu: la regla dels enllaços legals el trepitjava (subratllat i sortint de la càpsula) */
.foot-legal .lang a{padding:5px 10px; text-decoration:none; font-size:.78rem; color:var(--tinta2); min-width:44px; justify-content:center;}
.foot-legal .lang a[aria-current="true"]{color:#fff;}
@media(max-width:900px){ .foot-legal .lang a{min-height:44px; padding:0 14px;} }
.foot-base{align-items:center;}
/* els núvols de la capçalera de webs: la imatge cobreix la caixa i les seves vores cauen on la màscara ja val 0 */
.pcap-nuvols .nv{background-size:cover;}
.pcap-nuvols .e{background-position:right center;}
.pcap-nuvols .d{background-position:left center;}
/* al mòbil, el menú i la tira de l'índex fan un sol bloc blanc (el text ja no passa per darrere i pels costats) */
@media(max-width:980px){
  .pag-servei .nav.scrolled .nav-inner{background:rgba(255,255,255,.96);}
  .pag-servei .index-lateral{top:calc(var(--nav-h) - 6px);}
}
/* l'etiqueta «QUI SOM» de la portada heretava la lletra dels paràgrafs de la secció */
.qui .eyebrow{font-size:var(--fs-micro); color:var(--blau); margin:0 0 var(--sp-4); max-width:none;}
/* les llegendes del formulari queien damunt de la ratlla, com un marc amb títol: ara van a dins, com el grup 04 */
legend.fglabel{float:left; width:100%;}
legend.fglabel + *{clear:both;}
/* els títols de secció: la part blava baixa sencera a la línia de sota quan no hi cap (res de «que et / vegin») */
.section-head{max-width:none;}
.section-head h2{max-width:24ch;}
.section-head h2 em, .bloc > h2 em, .pont h2 em{display:inline-block;}
.section-head .lede{max-width:54ch;}
/* la targeta final de les demos: «la teva.» es llegia malament sobre el blau */
.endcap a{background:linear-gradient(150deg, var(--blau), var(--blau2) 70%);}
.endcap a em{color:var(--accent-mig);}
/* titulars i paràgrafs: res de paraules soles a l'última línia */
.manifest .stmt{text-wrap:balance;}
.bloc-text p, .bloc-intro, .resposta p{text-wrap:pretty;}
.parlem .lede{text-wrap:balance;}
/* el paper de la porta de programes: cada línia de text s'asseu en una ratlla de la llibreta */
.porta-programes{gap:0; padding-top:32px;}
.porta-programes h3{line-height:64px; margin-top:0;}
.porta-programes p{line-height:32px;}
.porta-programes .porta-anar{line-height:32px; padding-top:32px;}
.porta-programes::before{background-position:0 0, 0 9px, 0 0;}
.pont-altre.porta-programes{background:
  linear-gradient(90deg, transparent 22px, var(--paper-marge) 22px 23px, transparent 23px),
  repeating-linear-gradient(180deg, transparent 0 31px, var(--paper-pauta) 31px 32px), var(--white);
  padding-left:44px;}
/* l'ombra del formulari ja no taca de gris la difuminació cap al peu */
.pform{box-shadow:0 40px 80px -40px rgba(9,38,66,.45);}
/* a /parlem/, el logotip clar sobre el blau clar de dalt quedava gairebé invisible */
.pag-parlem .nav:not(.scrolled) .brand img{filter:drop-shadow(0 1px 6px rgba(11,31,58,.35));}
.pform-note{align-items:flex-start;}
.pform-note i{margin-top:.5em;}
/* contrast de la banda blava del formulari: les parades del degradat en píxels (en %, a la secció llarga, el blau
   fosc queia per sota del text i «PARLEM-NE» i «et vegin.» quedaven per sota de 3:1) i menys llum blanca */
.parlem{background:
  linear-gradient(to top, #FFFFFF 0, #F2F8FC 22px, #CFE2F1 55px, #8FB8D8 95px, #4E82B4 140px,
                          #22568C 180px, rgba(22,72,126,0) 215px),
  linear-gradient(180deg, var(--cel-unio) 0, #5FA5DA 18px, #1E5FA0 72px, #16487E 100%);}
.parlem::before{background:radial-gradient(66% 44% at 50% 28%, rgba(255,255,255,.08), transparent 72%);}
/* més contrastos curts: les inicials dels avatars i l'etiqueta damunt dels núvols */
.founder .av{background:linear-gradient(135deg, var(--cel2), var(--blau));}
.pcap-cel .eyebrow{color:var(--blau2);}
.hero.static .bpanel .k{color:var(--blau-nit);}
/* zones de toc de 44 px (la mesura de la casa) */
.index-lateral a{min-height:44px;}
.cel-sota a{min-height:44px;}
.fmicro a{display:inline-block; padding:10px 0;}
/* l'enllaç «Obre la demo sencera» de la fitxa (per a qui va amb teclat o té el moviment reduït) */
.fitxa-cta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px;}
.fitxa-cta .enllac-fort{margin-top:0;}
/* /parlem/: el blau fosc comença sota el menú (amb les parades en píxels, el menú quedava fosc sobre fosc) */
.pag-parlem .parlem{background:
  linear-gradient(to top, #FFFFFF 0, #F2F8FC 22px, #CFE2F1 55px, #8FB8D8 95px, #4E82B4 140px, #22568C 180px, rgba(22,72,126,0) 215px),
  linear-gradient(180deg, var(--cel-unio) 0, var(--cel-unio) calc(var(--nav-h) - 6px), #5FA5DA calc(var(--nav-h) + 14px), #1E5FA0 calc(var(--nav-h) + 70px), #16487E 100%);}
/* al mòbil de les pàgines de servei, la franja de dalt sencera (no només la pastilla) tapa el text que passa per sota */
@media(max-width:980px){ .pag-servei .nav.scrolled{background:rgba(255,255,255,.96);} }

/* el núvol de la targeta «Webs a mida» (.porta-webs::after, right:-40px) sortia 40 px per la dreta. Com que .pont-altre
   no té position:relative, el núvol es col·loca respecte a TOTA la secció (fa uns 950 px d'ample, darrere de la meitat
   dreta): es retalla a la secció, que és on ja es veia. Si mai .pont-altre passa a ser relative, el núvol s'encongirà. */
.pont{overflow:clip;}
/* el comparador amb teclat: la barra (input range) és invisible però rep el focus, i el pom ho ensenya */
.compare .crang{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); border:0;}
/* l'anell blanc sol gairebé no es veia sobre una foto clara (1,5:1): blau, amb un filet blanc entre el pom i l'anell */
.compare:has(.crang:focus-visible) .knob{outline:3px solid var(--blau); outline-offset:3px; box-shadow:0 0 0 3px #fff, 0 10px 26px -8px rgba(11,31,58,.5);}