/* ==========================================================================
   LES PÀGINES DE SERVEI (Webs a mida i Programes a mida), refetes el 05/10/2026 al vespre.
   Gramàtica d'Apple mesurada: seccions a sang, una idea per pantalla, lletra gran amb poques mides, poc text.
   Peces compartides per totes dues pàgines; el moviment el fa js/servei.js (i el hero, js/full3d.js).
   Primer la pàgina quieta: el que es mou s'hi afegeix des del JavaScript i només si no es demana «reduir moviment».
   ========================================================================== */

/* només per al lector de pantalla */
.vh{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; border:0;}

/* ── la barra de seccions (la barra local d'Apple), en lloc de l'índex lateral ── */
/* alçada 0: la barra flota damunt de l'inici de la secció següent. Si ocupés lloc, entre el final del hero i la
   secció quedava una franja del color del fons de la pàgina (a Webs, una ratlla clara entre dos foscos) */
.local{position:sticky; top:calc(var(--nav-h) - 6px); z-index:40; height:0; margin-top:-1px; pointer-events:none;}
.local-in{display:flex; align-items:center; gap:18px; height:50px; padding-inline:18px 8px; border-radius:15px;
  background:rgba(255,255,255,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--linia); box-shadow:0 10px 26px -20px rgba(11,31,58,.4); pointer-events:auto;
  max-width:calc(var(--maxw) - 2 * clamp(20px,5vw,44px));}
.local-nom{font-family:var(--display); font-weight:700; font-size:1.02rem; white-space:nowrap;}
.local ol{display:flex; gap:4px; list-style:none; margin:0 0 0 auto; padding:0; overflow-x:auto; scrollbar-width:none;}
.local ol::-webkit-scrollbar{display:none;}
.local a{display:flex; align-items:center; min-height:40px; padding:0 12px; border-radius:10px; font-size:.92rem; font-weight:600;
  color:var(--tinta2); white-space:nowrap;}
@media (hover:hover){ .local ol a:hover{color:var(--tinta); background:var(--cel-pale);} }
.local ol a[aria-current]{color:var(--blau);}
.local-cta{background:var(--blau); color:#fff !important; font-weight:700 !important;}
.local a:focus-visible{outline:3px solid var(--blau); outline-offset:2px;}
@media (max-width:760px){
  .local-in{gap:10px; padding-inline:12px 6px;}
  .local-nom{display:none;}
  .local ol{margin-left:0;}
  .local-cta{display:none !important;}
  /* la barra es llisca de costat: on hi ha més enllaços amagats, la vora s'esvaeix (js/servei.js posa les classes) */
  .local ol.mes-dreta{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent);}
  .local ol.mes-esquerra{-webkit-mask-image:linear-gradient(90deg, transparent, #000 40px); mask-image:linear-gradient(90deg, transparent, #000 40px);}
  .local ol.mes-esquerra.mes-dreta{-webkit-mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);}
}

/* ── els blocs entren amb l'scroll (js/servei.js, entrades(); 08/10): com el .reveal de la portada, sense desenfocar ── */
.puja{opacity:0; transform:translate3d(0, 26px, 0); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.puja.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .puja{opacity:1; transform:none; transition:none;} }

/* ── seccions ── */
.seccio{padding-block:clamp(72px, 10vw, 140px); border-top:1px solid var(--linia);}
.seccio-titol{font-family:var(--display); font-weight:900; font-size:clamp(2.3rem, 5.2vw, 4.6rem); line-height:.95;
  letter-spacing:-.04em; max-width:16ch; text-wrap:balance;}
.seccio-titol em{font-style:normal; color:var(--blau);}
.seccio-intro{margin-top:clamp(14px, 1.6vw, 22px); font-size:clamp(1.08rem, 1.4vw, 1.3rem); line-height:1.5; color:var(--tinta2);
  max-width:56ch; text-wrap:pretty;}
.seccio-nota{margin-top:20px; font-size:var(--fs-small); color:var(--gris);}

/* ══ CINC WEBS, CINC OFICIS ══ */
.cinc{background:linear-gradient(180deg, #0b0f15 0, rgba(11,15,21,0) 90vh), radial-gradient(80% 60% at 72% 30%, #18202b 0%, #0b0f15 70%); color:#f2f5f8;}
.cinc-cap{padding-top:clamp(84px, 11vw, 150px);}
.cinc-cap h2{font-family:var(--display); font-weight:900; font-size:clamp(2.3rem, 5.2vw, 4.6rem); line-height:.95; letter-spacing:-.04em;}
.cinc-cap h2 em{font-style:normal; color:#8fc7ee;}
.cinc-cap p{margin-top:12px; color:#9fb0c2; font-size:1.05rem;}
.capitol{padding-block:clamp(56px, 8vw, 110px);}
.capitol.clar{background:radial-gradient(80% 90% at 70% 50%, #fbf8f2 0%, #efe9df 80%); color:var(--tinta);}
.capitol-in{display:grid; grid-template-columns:minmax(0, .78fr) minmax(0, 1.5fr); gap:clamp(28px, 4vw, 64px); align-items:center;}
.capitol-n{font-weight:700; font-size:.95rem; color:#9fd2f4; margin-bottom:12px;}
.capitol.clar .capitol-n{color:var(--blau);}
.capitol-text h3,
.vela-text h3{font-family:var(--display); font-weight:900; font-size:clamp(2rem, 4vw, 3.6rem); line-height:.95; letter-spacing:-.035em; text-wrap:balance;}
.capitol-text > p:not([class]),
.vela-text > p:not([class]){margin-top:16px; font-size:clamp(1.05rem, 1.3vw, 1.22rem); line-height:1.5; opacity:.9; max-width:34ch;}
.capitol-peu{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:24px;}
.capitol-obre{display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:#fff; text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:5px;}
.capitol.clar .capitol-obre{color:var(--blau);}
@media (hover:hover){ .capitol-obre:hover{opacity:.8;} }
.capitol-obre:focus-visible{outline:3px solid #8fc7ee; outline-offset:3px; border-radius:4px;}
.capitol-credit{font-size:.82rem; opacity:.7; line-height:1.45; max-width:36ch;}

/* la finestra: la demo en vídeo (ordinador) o la captura del mòbil, quieta (mòbil) */
.finestra{margin:0; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 60px 120px -50px rgba(0,0,0,.75);}
.capitol.clar .finestra{box-shadow:0 50px 100px -50px rgba(11,31,58,.5);}
.finestra-barra{display:flex; align-items:center; gap:7px; height:32px; padding:0 14px; background:#EEF4FA; border-bottom:1px solid rgba(11,31,58,.08);}
.finestra-barra i{width:10px; height:10px; border-radius:50%; background:rgba(11,31,58,.16);}
.finestra-barra span{margin:0 auto; font-size:.75rem; color:#3d5876; background:#fff; border:1px solid rgba(11,31,58,.1); border-radius:99px; padding:3px 14px;}
.finestra-pantalla{position:relative; aspect-ratio:1280 / 800; background:#0b0f15;}
/* el pòster és una imatge a part, perquè es baixi quan s'hi acosta (l'atribut poster del vídeo es baixa d'entrada);
   el vídeo, sense pòster, és transparent fins que té el primer fotograma, i llavors el tapa */
.capitol-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.capitol-video{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover;}
.capitol-mob,
.capitol-video-mob{display:none;}
/* cada botó (pausa, o reprodueix amb «reduir moviment») va amb el seu vídeo: a l'ordinador, el del mòbil no es veu */
.capitol-video-mob + .finestra-pausa,
.capitol-video-mob + .finestra-play{display:none;}
.finestra-play{position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
  border:0; border-radius:99px; background:rgba(11,31,58,.78); color:#fff; font:700 .85rem/1 var(--font); cursor:pointer;}
.finestra-play:focus-visible{outline:3px solid #8fc7ee; outline-offset:2px;}
/* aturar i reprendre els vídeos en bucle (WCAG 2.2.2), com el botó del hero de la portada */
.finestra-pausa{position:absolute; right:12px; bottom:12px; z-index:2; width:38px; height:38px; display:grid; place-items:center; padding:0;
  border-radius:50%; border:1px solid rgba(11,31,58,.22); background:rgba(255,255,255,.78); color:var(--tinta); cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .3s var(--ease);}
.finestra-pausa[hidden]{display:none;}
@media (hover:hover){ .finestra-pausa:hover{background:#fff;} }
.finestra-pausa svg{width:15px; height:15px; fill:currentColor;}
.finestra-pausa .i-play, .finestra-pausa.aturat .i-pausa{display:none;}
.finestra-pausa.aturat .i-play{display:inline;}
.finestra-pausa:focus-visible{outline:3px solid #8fc7ee; outline-offset:2px;}

@media (max-width:899px){
  .capitol-in{grid-template-columns:minmax(0,1fr);}
  .finestra{max-width:330px; border-radius:26px;}
  .finestra-barra{display:none;}
  .finestra-pantalla{aspect-ratio:390 / 640; background:#fff;}
  .capitol-video, .capitol-poster{display:none;}
  .capitol-mob{display:block; width:100%; height:100%; object-fit:cover; object-position:top;}
  /* 08/10 · al mòbil, la demo en vertical, en vídeo (la captura fa de pòster fins que arriba el primer fotograma) */
  .capitol-mob{position:absolute; inset:0;}
  .capitol-video-mob{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover;}
  .capitol-video + .finestra-pausa,
  .capitol-video + .finestra-play{display:none;}
  .capitol-video-mob + .finestra-pausa:not([hidden]){display:grid;}
  .capitol-video-mob + .finestra-play{display:inline-flex;}
}

/* ── VÉLA: el cotxe gira amb l'scroll ── */
.vela{position:relative; overflow-anchor:none; background:radial-gradient(70% 70% at 62% 55%, #1b2027 0%, #0a0c0f 70%);}   /* (08/10: escena enganxada; no serveix de referència per a l'scroll) */
.vela--viu{height:240vh;}
.vela-escena{position:relative; min-height:100vh; display:flex; align-items:center; overflow:clip;}
.vela--viu .vela-escena{position:sticky; top:0; height:100vh;}
.vela-poster,
.vela-canvas{position:absolute; top:50%; right:-6vw; width:min(78vw, 1400px); height:auto; transform:translateY(-46%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, transparent 0, #000 16%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, transparent 0, #000 16%, #000 90%, transparent 100%);
  mask-composite:intersect;}   /* (fosa a l'esquerra, a baix i a dalt: no es veu la vora del fotograma) */
.vela-canvas{aspect-ratio:16 / 9; opacity:0; transition:opacity .5s ease;}
.vela--llest .vela-canvas{opacity:1;}
.vela--llest .vela-poster{opacity:0;}
/* el text, a l'esquerra (com a element flex, el .wrap s'encongia i es centrava damunt del cotxe) i amb un vel fosc
   al darrere: quan el cotxe gira, el morro passa per sota del títol */
.vela-text{position:relative; z-index:2; width:100%; color:#f2f5f8;}
.vela-escena::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,12,15,.92) 0%, rgba(10,12,15,.72) 30%, rgba(10,12,15,0) 54%);}
.vela-text > *{max-width:30rem;}
.vela-text h3{font-size:clamp(3rem, 8vw, 8rem);}
.vela-text .capitol-n{color:#8fc7ee;}
@media (max-width:899px){
  .vela-escena::before{display:none;}
  .vela-escena{flex-direction:column; align-items:stretch; padding-block:64px 0;}
  .vela-poster{position:relative; top:auto; right:auto; width:120%; margin:28px 0 0 -4%; transform:none;
    -webkit-mask-image:none; mask-image:none;}
  /* 08/10 · el gir també al mòbil: el text a dalt i el cotxe a baix, tots dos enganxats mentre baixes */
  .vela--viu .vela-escena{height:100svh; min-height:0; justify-content:flex-start; padding-top:calc(var(--nav-h) + 64px);}   /* (sota la barra de seccions) */
  .vela--viu .vela-poster,
  .vela--viu .vela-canvas{position:absolute; top:auto; bottom:9svh; right:auto; left:-8%; width:116%; margin:0; transform:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-composite:intersect;}   /* les vores del fotograma, foses amb el fons (com a l'ordinador) */
}

/* ── la següent pot ser la teva ── */
.seguent{display:grid; justify-items:center; gap:22px; text-align:center; padding:clamp(90px, 12vw, 170px) 20px;
  background:linear-gradient(180deg, #DDEFFA 0%, var(--paper) 100%); color:var(--tinta);}
.seguent-frase{font-family:var(--display); font-weight:900; font-size:clamp(2.6rem, 7.5vw, 7.4rem); line-height:.92; letter-spacing:-.045em; max-width:12ch;}
.seguent-frase em{font-style:normal; color:var(--blau);}
.seguent-nota{font-size:var(--fs-small); color:var(--tinta2); max-width:40ch;}

/* ══ MOSAICS (de sèrie, les peces) ══ */
.mosaic{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); grid-auto-rows:minmax(220px, auto); gap:18px; margin-top:clamp(28px, 4vw, 48px);}
.peca{position:relative; overflow:hidden; display:flex; flex-direction:column; padding:clamp(22px, 2.4vw, 30px); border-radius:28px;
  background:var(--white); border:1px solid var(--linia); box-shadow:0 30px 60px -50px rgba(11,31,58,.45);}
.peca.gran{grid-row:span 2; background:linear-gradient(170deg, #CFE8F7, #fff 62%);}
.peca.gran img:not(.peca-mobil){margin-top:auto; width:100%; height:auto; border-radius:14px;}
.peca.fosca{background:var(--tinta); color:#fff; border-color:transparent;}
.peca-n{font-family:var(--display); font-weight:900; font-size:clamp(3.6rem, 7vw, 6.6rem); line-height:.82; letter-spacing:-.05em; font-variant-numeric:tabular-nums;}
.peca-n small{font-size:.34em; letter-spacing:-.02em;}
.peca-m{font-family:var(--display); font-weight:900; font-size:clamp(1.6rem, 2.6vw, 2.3rem); line-height:1; letter-spacing:-.03em;}
.peca-m em{font-style:normal; color:var(--blau);}
.peca-t{margin-top:12px; font-size:1.05rem; line-height:1.4; color:var(--tinta2); max-width:26ch;}
.peca.fosca .peca-t{color:#b8c7d8;}
.peca-viu{position:absolute; top:20px; right:22px; font-size:.75rem; font-weight:700; color:var(--blau); background:var(--cel-pale); padding:5px 10px; border-radius:99px;}
.peca.fosca .peca-viu{color:var(--tinta); background:var(--cel);}
.peca-viu[hidden]{display:none;}
@media (max-width:899px){
  .mosaic{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .peca.gran{grid-column:1 / -1; grid-row:auto;}
}
@media (max-width:560px){ .mosaic{grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(150px, auto);} }

/* ── que et trobin ── */
.trobin{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:22px; align-items:start; margin-top:clamp(24px, 3vw, 40px);}
.cercador{padding:clamp(22px, 2.6vw, 34px); border-radius:24px; background:var(--white); border:1px solid var(--linia);
  box-shadow:0 40px 80px -56px rgba(11,31,58,.5);}
.cercador-adreca{font-size:.95rem; color:#5A7591; overflow-wrap:anywhere;}
.cercador-titol{margin-top:6px; font-size:clamp(1.3rem, 2vw, 1.75rem); line-height:1.25; font-weight:600; color:var(--blau);}
.cercador-desc{margin-top:8px; font-size:1.02rem; line-height:1.55; color:var(--tinta2);}
.ia-intro{font-family:var(--display); font-weight:900; font-size:1.5rem; letter-spacing:-.02em; margin-bottom:12px;}
.ia-tros{margin:0; padding:18px 20px; border-radius:18px; background:var(--tinta); color:#DCEBF7;
  font:.86rem/1.6 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; white-space:pre-wrap; overflow-wrap:anywhere;}
@media (max-width:899px){ .trobin{grid-template-columns:minmax(0,1fr);} }

/* ── els passos ── */
.passos-grans{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2vw, 26px); list-style:none; margin:clamp(30px, 4vw, 52px) 0 0; padding:0;}
.passos-grans li{border-top:2px solid var(--linia-forta); padding-top:22px;}
.passos-grans b{display:block; font-family:var(--display); font-weight:900; font-size:clamp(4rem, 8vw, 7.4rem); line-height:.8; letter-spacing:-.05em; color:var(--blau);}
.passos-grans h3{margin:22px 0 8px; font-family:var(--display); font-weight:900; font-size:clamp(1.35rem, 1.9vw, 1.8rem); letter-spacing:-.02em; line-height:1.1;}
.passos-grans p{font-size:1.02rem; line-height:1.45; color:var(--tinta2);}
.mini-camins{display:flex; gap:6px; margin-top:14px;}
.mini-camins img{width:31%; height:auto; border-radius:7px; border:1px solid var(--linia);}
@media (max-width:899px){ .passos-grans{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:34px;} }
@media (max-width:480px){ .passos-grans{grid-template-columns:minmax(0,1fr);} }

/* ── el diagnòstic: la C que es torna A ── */
.diag{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px, 4vw, 64px); align-items:center;}
.diag-text > p{margin-top:20px; font-size:clamp(1.05rem, 1.35vw, 1.25rem); line-height:1.5; color:var(--tinta2); max-width:44ch;}
.diag-text .btn{margin-top:26px;}
.diag-notes{display:flex; gap:20px; justify-content:center; align-items:center; list-style:none; margin:0; padding:0;}
.diag-notes li{display:grid; justify-items:center; align-content:center; gap:4px; width:min(44%, 240px); aspect-ratio:3 / 4; border-radius:30px;}
.diag-notes b{font-family:var(--display); font-weight:900; font-size:clamp(5rem, 11vw, 10rem); line-height:.8;}
.diag-notes span{font-family:var(--display); font-weight:700; font-size:1.4rem;}
.diag-notes small{font-size:.9rem; font-weight:600; opacity:.85;}
.diag-notes .c{background:#FFF3DF; color:#7A4500; border:2px solid #B87A1E;}
.diag-notes .a{background:var(--blau); color:#fff; box-shadow:0 40px 80px -40px rgba(14,104,196,.7);}
@media (max-width:899px){ .diag{grid-template-columns:minmax(0,1fr);} }

/* ── «Et sona?» en rajoles ── */
.rajoles{grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:clamp(24px, 3vw, 40px);}
.rajoles .sona-item{min-height:120px; padding:22px; border-radius:22px; font-size:1.1rem;}
@media (max-width:899px){ .rajoles{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:560px){ .rajoles{grid-template-columns:minmax(0,1fr);} }

/* ── preguntes i el pont ── */
.preguntes-pont{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px, 4vw, 64px); align-items:start;}
.preguntes-pont .preguntes{margin-top:clamp(20px, 2.4vw, 32px);}
.pont-targeta{position:sticky; top:calc(var(--nav-h) + 70px); display:flex; flex-direction:column; justify-content:flex-end; gap:10px; min-height:440px;
  padding:clamp(24px, 2.6vw, 34px); border-radius:30px; overflow:hidden; color:#fff; isolation:isolate;}
.pont-targeta img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease);}
.pont-targeta::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,31,58,0) 25%, rgba(11,31,58,.86));}
.pont-k{font-weight:700; font-size:.9rem; color:#eaf5fd;}
.pont-t{font-family:var(--display); font-weight:900; font-size:clamp(2rem, 3.4vw, 3rem); line-height:.95; letter-spacing:-.03em;}
.pont-b{align-self:flex-start; margin-top:8px; padding:12px 20px; border-radius:99px; background:#fff; color:var(--tinta); font-weight:700;}
@media (hover:hover){ .pont-targeta:hover img{transform:scale(1.04);} }
.pont-targeta:focus-visible{outline:3px solid var(--blau); outline-offset:4px;}
/* la targeta cap a Programes: els tres trossos del seu hero, sencers, damunt del paper (no retallats) */
.pont-targeta--tres{background:var(--paper);}
.pont-targeta--tres img{object-fit:contain; object-position:50% 12%; padding:7% 9% 34%;}
@media (max-width:899px){ .preguntes-pont{grid-template-columns:minmax(0,1fr);} .pont-targeta{position:relative; top:auto; min-height:320px;} }

/* el títol que el hero 3D ha copiat a l'escenari (js/full3d.js): aquí es queda, però només per als lectors de pantalla */
.traspassat{position:absolute !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important;
  overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important;}
.toca-cap.traspassat + .full-cameo{margin-top:0;}

/* ══ PROGRAMES ══ */
/* toca'l: el programa de prova, gran, i en Full al costat */
.toca{background:linear-gradient(180deg, #fff, var(--paper));}
.toca-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr); gap:clamp(28px, 4vw, 56px); align-items:start;}
.toca .panell-demo{margin-top:0;}
.full-cameo{position:relative; display:flex; align-items:flex-end; gap:6px; margin:clamp(26px, 4vw, 52px) 0 0;}
.full-cameo img{width:118px; height:auto; flex:none;}
.full-bombolla{position:relative; order:-1; flex:1; margin-bottom:58px; padding:14px 18px; border-radius:18px; background:var(--white);
  border:1px solid var(--linia-forta); box-shadow:0 18px 34px -26px rgba(11,49,88,.5); font-weight:700; line-height:1.35; max-width:28ch;}
.full-bombolla::after{content:""; position:absolute; right:-8px; bottom:22px; width:14px; height:14px; background:var(--white);
  border-top:1px solid var(--linia-forta); border-right:1px solid var(--linia-forta); transform:rotate(45deg);}
.full-ia{position:absolute; right:0; bottom:-4px; padding:3px 8px; border-radius:99px; background:rgba(11,31,58,.74); color:#fff; font-size:.75rem; font-weight:700;}   /* «Fet amb IA» s'ha de poder llegir: és la veritat de la imatge */
@media (max-width:899px){ .toca-in{grid-template-columns:minmax(0,1fr);} .full-cameo{max-width:420px;} }

/* parla com tu */
.parla{text-align:center; background:var(--white);}
.parla-frase{font-family:var(--display); font-weight:900; font-size:clamp(2.6rem, 7.6vw, 7.6rem); line-height:1; letter-spacing:-.045em;}
.parla-frase b{display:inline-block; color:var(--blau); font-weight:900;}
.parla-sub{margin-top:clamp(18px, 2vw, 28px); font-size:clamp(1.08rem, 1.4vw, 1.3rem); color:var(--tinta2);}
.parla-pausa{margin-top:22px; min-height:40px; padding:0 16px; border-radius:99px; border:1px solid var(--linia-forta); background:var(--white);
  color:var(--tinta2); font:600 .9rem/1 var(--font); cursor:pointer;}
.parla-pausa:focus-visible{outline:3px solid var(--blau); outline-offset:2px;}

/* la secció fosca de les peces */
.seccio.fosca{background:var(--tinta); color:#fff; border-top:0;}
.seccio.fosca .seccio-titol em{color:var(--cel);}
.seccio.fosca .seccio-intro{color:#b8c7d8;}
.seccio.fosca .peca{background:#13294a; border-color:rgba(255,255,255,.08); color:#fff; box-shadow:none;}
.seccio.fosca .peca .peca-t{color:#b8c7d8;}
.seccio.fosca .peca.clara{background:var(--white); color:var(--tinta);}
.seccio.fosca .peca.clara .peca-t{color:var(--tinta2);}
.peca-mobil{position:absolute; right:22px; bottom:-120px; width:44%; height:auto; border-radius:22px; border:6px solid #0b1424;}
.peca-n--hora{font-size:clamp(2.8rem, 5vw, 4.8rem);}
.estats{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.estats span{padding:7px 12px; border-radius:10px; border:1px solid #8095AB; background:#F1F5F9; color:#3D5876; font-size:.85rem; font-weight:700;}
.estats .forn{background:#FFF3DF; border-color:#B87A1E; color:#7A4500;}
.estats .punt{background:var(--blau); border-color:var(--blau); color:#fff;}
@media (max-width:899px){ .peca-mobil{position:relative; right:auto; bottom:auto; width:60%; margin:20px auto -80px;} }

/* les teves dades */
.seccio.dades{background:var(--tinta); color:#fff; border-top:0;}
.dades-frase{font-family:var(--display); font-weight:900; font-size:clamp(2.6rem, 7.4vw, 7.2rem); line-height:.92; letter-spacing:-.045em; max-width:12ch;}
.dades-frase em{font-style:normal; color:var(--cel);}
.dades-sub{margin-top:clamp(20px, 2.4vw, 32px); font-size:clamp(1.1rem, 1.5vw, 1.4rem); line-height:1.5; color:#c3d1e0; max-width:44ch;}
.dades-nota{margin-top:16px; color:#8ea4bd;}

/* el que no et farem */
.nofarem{list-style:none; margin:clamp(24px, 3vw, 40px) 0 0; padding:0; display:grid;}
.nofarem li{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:6px clamp(14px, 2vw, 24px); padding:20px 0; border-bottom:1px solid var(--linia);}
.nofarem b{font-size:.82rem; font-weight:700; color:#A8231A; background:#FBE3E1; padding:6px 10px; border-radius:8px; transform:translateY(-.3em);}
.nofarem small{grid-column:2;}
.nofarem span{font-family:var(--display); font-weight:900; font-size:clamp(1.5rem, 3.4vw, 3rem); letter-spacing:-.03em; line-height:1.05;}
.nofarem small{font-size:1rem; color:var(--tinta2);}

/* moviment reduït: res que llisqui */
@media (prefers-reduced-motion: reduce){
  .vela-canvas, .pont-targeta img{transition:none;}
}